/* Code blocks */
pre { 
  background: #0c1220; 
  border: 1px solid #1a2740; 
  border-radius: 12px; 
  padding: 20px; 
  overflow: auto;
  margin: 20px 0;
  position: relative;
}
pre:hover {
  border-color: var(--primary);
}
code { 
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
}
pre code {
  color: #e1e7ef;
  line-height: 1.5;
}

/* Syntax Highlighting */
.language-xml .token.tag {
    color: #7dd3fc;
}

.language-xml .token.attr-name {
    color: #fbbf24;
}

.language-xml .token.attr-value {
    color: #86efac;
}

.language-python .token.keyword {
    color: #c084fc;
}

.language-python .token.string {
    color: #86efac;
}

.language-java .token.keyword {
    color: #c084fc;
}

.language-java .token.class-name {
    color: #fbbf24;
}

.language-csharp .token.keyword {
    color: #c084fc;
}

.language-javascript .token.keyword {
    color: #c084fc;
}

.language-php .token.keyword {
    color: #c084fc;
}


/* JSON Highlighting */
.json-key {
    color: #7dd3fc;
    /* Azul para chaves JSON */
    font-weight: 500;
}

.json-string {
    color: #86efac;
    /* Verde para strings JSON */
}

.json-number {
    color: #f472b6;
    /* Rosa para números JSON */
}

.json-boolean {
    color: #a78bfa;
    /* Roxo para booleanos JSON */
    font-weight: 600;
}

.json-bracket {
    color: #fbbf24;
    /* Amarelo para brackets JSON */
    font-weight: 600;
}

/* General Code Highlighting */
.class {
    color: #4EC9B0;
    /* Verde-azulado para classes */
    font-weight: bold;
}

.type {
    color: #4EC9B0;
    /* Mesma cor para tipos do .NET */
}

.attribute {
    color: #92C5F7;
    /* Azul claro para atributos */
}

.namespace {
    color: #D4D4D4;
    /* Cinza claro para namespaces */
}

.property {
    color: #9CDCFE;
    /* Azul claro para propriedades */
}

.variable {
    color: #9CDCFE;
    /* Azul claro para variáveis */
}

.number {
    color: #B5CEA8;
    /* Verde claro para números */
}

.keyword {
    color: #a78bfa;
    /* Roxo para palavras-chave */
    font-weight: 600;
}

.comment {
    color: #6b7280;
    /* Cinza para comentários */
    font-style: italic;
}

.function {
    color: #60a5fa;
    /* Azul para funções */
    font-weight: 500;
}

.variable {
    color: #fbbf24;
    /* Amarelo para variáveis */
}

/* PHP Specific */
.php-tag {
    color: #a78bfa;
    /* Roxo para tags PHP */
    font-weight: 600;
}

/* Bash Specific */
.bash-command {
    color: #60a5fa;
    /* Azul para comandos bash */
    font-weight: 500;
}

/* Code Block Enhancements */
.code-block-container {
    position: relative;
    margin: 20px 0;
}

.copy-code-btn {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    background: var(--primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
    font-weight: 500;
}

.code-block-container:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn:hover {
    background: var(--primary-2);
    transform: translateY(-1px);
}

.copy-code-btn.copied {
    background: #10b981;
    /* Verde para sucesso */
}

.code-language-label {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background: rgba(0, 0, 0, 0.6);
    color: #a7b0c0;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 9;
}

.code-block-container:hover .code-language-label {
    opacity: 1;
}

/* Melhorias nos blocos de código */
pre {
    background: #0c1220;
    border: 1px solid #1a2740;
    border-radius: 1rem;
    padding: 1rem;
    overflow: auto;
    /* margin: 1rem 0; */
    position: relative;
    line-height: 1.4;
    max-width: 100vw;
}

pre:hover {
    border-color: var(--primary);
}

pre code {
    color: #e1e7ef;
    line-height: 1.6;
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Scrollbar para blocos de código */
pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

pre::-webkit-scrollbar-track {
    background: #1a2740;
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
    background: var(--primary-2);
}

/* Responsividade para blocos de código */
@media (max-width: 768px) {
    pre {
        font-size: 0.8em;
        max-width: 100vw
    }

    .copy-code-btn {
        padding: 4px 8px;
        font-size: 0.7em;
    }

    .code-language-label {
        font-size: 0.6em;
        padding: 2px 6px;
    }
}


/* ===== SYNTAX HIGHLIGHTING CLASSES ===== */

/* Base colors */
.keyword {
    color: #a78bfa;
    /* Purple for keywords */
    font-weight: 600;
}

.comment {
    color: #6b7280;
    /* Gray for comments */
    font-style: italic;
}

.string {
    color: #86efac;
    /* Light green for strings */
}

.string.template-literal {
    color: #fbbf24;
    /* Yellow for template literals */
}

.function {
    color: #60a5fa;
    /* Blue for functions */
    font-weight: 500;
}

.variable {
    color: #fbbf24;
    /* Yellow for variables */
}

.number {
    color: #fb7185;
    /* Pink for numbers */
    font-weight: 500;
}

/* Classes and types */
.class-name {
    color: #4ade80;
    /* Green for custom classes */
    font-weight: 600;
}

.type {
    color: #34d399;
    /* Teal for built-in types */
    font-weight: 500;
}

.interface {
    color: #22d3ee;
    /* Cyan for interfaces */
    font-weight: 500;
}

/* Language-specific elements */

/* Python */
.decorator {
    color: #f472b6;
    /* Pink for decorators */
    font-weight: 500;
}

.module {
    color: #a3a3a3;
    /* Light gray for modules */
}

/* Java */
.annotation {
    color: #f472b6;
    /* Pink for annotations */
    font-weight: 500;
}

.package {
    color: #9ca3af;
    /* Gray for packages */
}

/* C# */
.attribute {
    color: #f472b6;
    /* Pink for attributes */
    font-weight: 500;
}

.namespace {
    color: #9ca3af;
    /* Gray for namespaces */
}

.property {
    color: #60a5fa;
    /* Blue for properties */
    font-weight: 500;
}

/* PHP */
.php-tag {
    color: #a78bfa;
    /* Purple for PHP tags */
    font-weight: 600;
}

.constant {
    color: #fb923c;
    /* Orange for constants */
    font-weight: 600;
}

/* Visual enhancements */
.class-name:hover,
.type:hover,
.function:hover {
    text-shadow: 0 0 8px currentColor;
    transition: text-shadow 0.2s ease;
}

.keyword.important {
    background: rgba(167, 139, 250, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

code .class-name,
code .type,
code .function {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
}


.code-block {
  background: #1e293b;
  color: #e2e8f0;
  padding: 0 1.5rem;
  border-radius: var(--border-radius);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow: auto;
  box-shadow: var(--shadow-sm);
  border: 1px solid #334155;
}

.code-block::-webkit-scrollbar {
  height: 8px;
}

.code-block::-webkit-scrollbar-track {
  background: #334155;
  border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 4px;
}

.code-block::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===== SYNTAX HIGHLIGHTING ===== */
.xml-tag {
  color: #60a5fa;
}

.xml-attribute {
  color: #fbbf24;
}

.xml-text {
  color: #34d399;
}

.xml-comment {
  color: #9ca3af;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {

    .class-name,
    .type,
    .function {
        font-size: 0.9em;
    }
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
    .keyword {
        color: #c4b5fd;
    }

    .string {
        color: #bbf7d0;
    }

    .comment {
        color: #9ca3af;
    }

    .class-name {
        color: #6ee7b7;
    }

    .type {
        color: #5eead4;
    }

    .function {
        color: #93c5fd;
    }

    .number {
        color: #fda4af;
    }
}

/* Prism.js integration (if used) */
.token.class-name {
    color: #4ade80 !important;
}

.token.type {
    color: #34d399 !important;
}

.token.function {
    color: #60a5fa !important;
}

.token.decorator {
    color: #f472b6 !important;
}

.token.annotation {
    color: #f472b6 !important;
}

.token.attribute {
    color: #f472b6 !important;
}

.token.namespace {
    color: #9ca3af !important;
}

.token.package {
    color: #9ca3af !important;
}

.token.module {
    color: #a3a3a3 !important;
}

.token.constant {
    color: #fb923c !important;
}

.token.php-tag {
    color: #a78bfa !important;
}


@media (max-width: 768px) {
    pre {

        /* padding: 16px; */
        font-size: 0.85em;
    }

    table {
        font-size: 0.9em;
    }

    th,
    td {
        padding: 8px 12px;
    }
}

@media (max-width: 480px) {
    /* pre {
        margin: 16px -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    } */
}

@media print {
    pre {
        background: #f5f5f5 !important;
        border: 1px solid #ccc !important;
    }

    .code-block {
    background: white;
    color: black;
    border: 1px solid #ccc;
  }

  .xml-tag { color: #0066cc; }
  .xml-attribute { color: #cc6600; }
  .xml-text { color: #009900; }
  .xml-comment { color: #666666; }
}