/* ==========================================================================
   1. DESIGN SYSTEM - VARIABLES
   ========================================================================== */

:root {
    /* --- PALETTE (Cores Reais) --- */
    --red-500: #E11D23;
    --red-600: #B0151B;
    --white: #FFFFFF;
    --black: #0C0C0C;

    --gray-50: #F9F9F9;
    --gray-100: #F4F4F4;
    --gray-200: #EEE;
    --gray-300: #DDD;
    --gray-400: #CCC;
    --gray-500: #999;
    --gray-600: #666;
    --gray-700: #555;
    --gray-800: #444;
    --gray-900: #333;

    --green-500: #28A745;
    --green-700: #166534;
    --yellow-500: #FFC107;
    --blue-500: #009EE3;
    --blue-600: #007eb5;
    --purple-500: #c299ff;

    /* --- BRAND & STATUS --- */
    --color-primary: var(--red-500);
    --color-primary-hover: var(--red-600);
    --color-success: var(--green-500);
    --color-success-bg: #E6FFED;
    --color-danger: var(--red-500);
    --color-danger-bg: #FEE2E2;
    --color-warning: var(--yellow-500);
    --color-warning-bg: #FFFDE7;
    --color-info: var(--blue-500);

    /* --- SEMANTIC (Light Mode Default) --- */
    --bg-page: var(--gray-50);
    --bg-surface: var(--white);
    --bg-muted: var(--gray-100);
    --bg-soft: var(--gray-200);
    --bg-header: var(--black);
    --bg-footer: var(--black);

    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-600);
    --text-inverse: var(--white);

    --border-primary: var(--gray-300);
    --border-soft: var(--gray-200);

    /* --- COMPONENTS & BRANDS --- */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-text: var(--text-inverse);
    --btn-confirmar-bg: var(--color-success);
    --btn-espera-bg: var(--color-warning);
    --btn-fora-bg: var(--gray-600);
    --btn-pago-bg: var(--color-info);
    --btn-pagar-bg: #812f33;
    --btn-estornar-bg: var(--purple-500);
    --btn-escalar-bg: #0b7285;
    --btn-confronto-bg: #002d5a;

    --lista-confirmado-bg: #EAFFEA;
    --lista-confirmado-border: var(--green-700);
    --lista-espera-bg: #FFFDE7;
    --lista-espera-border: #f57f17;
    --lista-fora-bg: var(--gray-100);
    --lista-fora-border: var(--gray-700);

    --brand-whatsapp: #25D366;
    --brand-mercadopago: #009EE3;
    --brand-amazon: #FFD814;
    --brand-shopee: #ee4d2d;
    --brand-mercadolivre: #3483fa;
    --brand-netshoes: #30006b;
}

/* ==========================================================================
   2. THEMES (DARK MODE)
   ========================================================================== */

/* Regras compartilhadas para o Tema Dark */
[data-theme="dark"], 
:root:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
        --bg-page: #121826;
        --bg-surface: #1e293b;
        --bg-muted: #2d3a4f;
        --bg-soft: #334155;
        --bg-header: var(--bg-surface);
        --bg-footer: #0f172a;

        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --text-inverse: #ffffff;

        --border-primary: #334155;
        --border-soft: #1e293b;

        --color-primary: #f87171;
        --color-primary-hover: #ef4444;
        --color-success: #4ade80;
        --color-success-bg: rgba(74, 222, 128, 0.1);
        --color-danger: #f87171;
        --color-danger-bg: rgba(248, 113, 113, 0.1);
        --color-warning: #fbbf24;
        --color-warning-bg: rgba(251, 191, 36, 0.1);

        --btn-primary-bg: var(--color-primary);
        --btn-pagar-bg: #991b1b;
        --btn-fora-bg: #475569;
        
        --lista-confirmado-bg: var(--bg-muted);
        --lista-confirmado-border: var(--text-inverse);
        --lista-espera-bg: var(--bg-muted);
        --lista-espera-border: var(--text-inverse);
        --lista-fora-bg: var(--bg-muted);
        --lista-fora-border: var(--text-inverse);
        
        --bs-dropdown-bg: var(--bg-muted);
        --header-bg: var(--bg-surface);
        --footer-bg: #0f172a;
    }
}

/* Aplicação explícita via Atributo (sobrescreve o media query se necessário) */
[data-theme="dark"] {
    --bg-page: #121826;
    --bg-surface: #1e293b;
    --bg-muted: #2d3a4f;
    --bg-soft: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-primary: #334155;
    --border-soft: #1e293b;
    --color-primary: #f87171;
    --color-primary-hover: #ef4444;
}

/* ==========================================================================
   3. BASE GLOBAL
   ========================================================================== */

body {
    background: var(--bg-page);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

a, .nav-link {
    color: var(--color-primary);
    transition: color 0.2s ease;
}

a:hover, .nav-link:focus, .nav-link:hover {
    color: var(--color-primary-hover);
}

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

/* ==========================================================================
   4. COMPONENTS OVERRIDE
   ========================================================================== */

/* --- BUTTON PRIMARY --- */
.btn-primary {
    --bs-btn-color: var(--text-inverse);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--text-inverse);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: 225, 29, 35; 
    --bs-btn-active-color: var(--text-inverse);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--text-inverse);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
    transition: all 0.2s ease-in-out;
}

/* --- FORMS (Drupal & Bootstrap) --- */
.form-item input, .form-item textarea, .form-item select,
.form-control, .form-text, .form-textarea, .form-select {
    background-color: var(--bg-surface);
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease-in-out;
}

[data-theme="dark"] .form-item input,
[data-theme="dark"] .form-item textarea,
[data-theme="dark"] .form-item select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-text,
[data-theme="dark"] .form-textarea,
[data-theme="dark"] .form-select {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-primary) !important;
}

.form-item input:focus, .form-control:focus, .form-select:focus {
    background-color: var(--bg-muted) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25) !important;
    outline: none !important;
}

[data-theme="dark"] input:disabled, 
[data-theme="dark"] .form-disabled {
    background-color: var(--bg-page) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-soft) !important;
    cursor: not-allowed;
}

/* --- PAGER / PAGINATION --- */
.pager, .pagination {
    --pager-bg: var(--bg-surface);
    --pager-border: var(--border-primary);
    --pager-text: var(--text-secondary);
    --pager-active-bg: var(--color-primary);
    --pager-active-text: var(--text-inverse);
    --pager-hover-bg: var(--bg-muted);
}

.pager__item, .page-item {
    background: transparent;
    border: none;
    margin: 0 2px;
}

.pager__item a, .pager__item span, .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    background-color: var(--pager-bg) !important;
    border: 1px solid var(--pager-border) !important;
    color: var(--pager-text) !important;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pager__item a:hover, .page-link:hover {
    background-color: var(--pager-hover-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-primary) !important;
}

.pager__item.is-active a, .pager__item--current span, .page-item.active .page-link {
    background-color: var(--pager-active-bg) !important;
    border-color: var(--pager-active-bg) !important;
    color: var(--pager-active-text) !important;
    box-shadow: 0 4px 10px rgba(248, 113, 113, 0.2);
    font-weight: bold;
}

.pager__item--disabled span, .page-item.disabled .page-link {
    background-color: var(--bg-page) !important;
    border-color: var(--border-soft) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- DROPDOWN (Bootstrap Override) --- */
.dropdown-menu {
    --bs-dropdown-bg: var(--bg-surface) !important;
    --bs-dropdown-link-color: var(--text-primary) !important;
    --bs-dropdown-link-hover-bg: var(--bg-muted) !important;
    --bs-dropdown-link-hover-color: var(--text-primary) !important;
    --bs-dropdown-border-color: var(--border-primary) !important;
    
    background-color: var(--bg-surface) !important; /* Força o fundo do card */
    border: 1px solid var(--border-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Ajuste específico para os itens (links) dentro do dropdown */
.dropdown-item {
    color: var(--text-primary) !important;
    transition: background 0.2s ease;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: var(--bg-muted) !important;
    color: var(--color-primary) !important; /* Destaque com sua cor principal */
}

/* No Dark Mode, garantimos que ele use o bg-muted ou bg-surface escuro */
[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--bg-muted) !important;
    background-color: var(--bg-muted) !important;
}