/* ============================================
   SISTEMA DE TEMAS - MODO LIGHT E DARK
   ============================================ */

/* ============================================
   MARCA FLUA — fonte
   ============================================ */
@font-face {
    font-family: "Alan Sans";
    src: url("/fonts/AlanSans-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --- Marca Flua --- */
    --flua-blue: #0b2c45;
    --flua-blue-dark: #071d31;
    --flua-blue-mid: #3d6f95;
    --flua-cyan: #cceef0;
    --flua-cyan-tint: #e6f6f7;
    --flua-cyan-soft: #f1f9fa;
    --flua-cream: #f9f0df;
    --flua-white: #ffffff;
    --flua-gradient: linear-gradient(90deg, #f0283c 0%, #ff960f 100%);
    --flua-gradient-diagonal: linear-gradient(135deg, #f0283c 0%, #ff960f 100%);
    --font-brand: "Alan Sans", "Helvetica Neue", Arial, sans-serif;

    /* Destaque da marca: azul no claro, ciano no escuro (redefinidos abaixo por tema) */
    --brand: #0b2c45;
    --on-brand: #ffffff;
    /* Preenchimento da marca (fundo com texto branco fixo) e seu hover */
    --brand-fill: #0b2c45;
    --brand-fill-hover: #071d31;
    /* Item ativo sobre o header azul (menu, abas) */
    --brand-active: #cceef0;

    /* Brand Manager — valores padrão. A partir da marca Flua, as cores do
       Brand Manager NÃO são mais aplicadas em runtime (ver theme.js). */
    /* Marca anterior (mantida comentada):
    --brand-primary: #00A859;
    --brand-secondary: #008C47;
    --brand-sidebar-bg: #101820;
    --brand-header-bg: linear-gradient(135deg, #101820 0%, #1a252f 50%, #243342 100%);
    --brand-header-mid: #1a252f;
    --brand-header-dark: #243342;
    */
    --brand-primary: #0b2c45;
    --brand-secondary: #071d31;
    --brand-accent: #0277BD;
    --brand-sidebar-bg: #0b2c45;
    --brand-text-on-primary: #ffffff;
    --brand-header-bg: #0b2c45;
    --brand-header-mid: #0b2c45;
    --brand-header-dark: #071d31;

    /* Cores primárias - nomes "green" mantidos, agora renderizam a marca Flua */
    /* Marca anterior (mantida comentada):
    --primary-green: #00A859;
    --primary-green-dark: #008C47;
    --primary-green-darker: #00702E;
    --primary-green-light: #00C76A;
    --primary-green-lighter: #E8F5E9;
    */
    --primary-green: #0b2c45;
    --primary-green-dark: #071d31;
    --primary-green-darker: #061827;
    --primary-green-light: #3d6f95;
    --primary-green-lighter: #e6f6f7;

    /* Cores secundárias */
    --secondary-blue: #0277BD;
    --secondary-blue-dark: #01579B;
    --secondary-blue-light: #B3E5FC;
    --secondary-blue-lighter: #E1F5FE;

    /* Cores de destaque */
    --accent-orange: #FF6F00;
    --accent-orange-dark: #E65100;
    --accent-orange-light: #FFE0B2;
    --accent-orange-lighter: #FFF3E0;

    /* Cores de suporte */
    /* --success: #00A859; */
    --success: var(--brand);
    --info: #0277BD;
    --warning: #FFA726;
    --danger: #EF5350;

    /* Status específicos */
    --status-pendente: #FFA726;
    --status-enviado: #42A5F5;
    --status-aprovado: #AB47BC;
    --status-pago: #66BB6A;
    /* --status-executado: #00A859; */
    --status-executado: var(--brand);
    --status-cancelado: #78909C;
}

/* ============================================
   MODO LIGHT (Padrão)
   ============================================ */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    /* Backgrounds */
    --bg-body: linear-gradient(135deg, #f5f9fc 0%, #e8f1f7 100%);
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafb;
    --bg-tertiary: #f0f4f7;
    /* --bg-hover: #e8f5e9; */
    /* --bg-active: #d4ede0; */
    --bg-hover: #e6f6f7;
    --bg-active: #cceef0;

    /* Backgrounds de cards e elementos */
    --bg-card: #ffffff;
    /* --bg-card-hover: #f8fffe; */
    /* --bg-header: #101820; */
    --bg-card-hover: #f1f9fa;
    --bg-header: #0b2c45;
    --bg-sidebar: #ffffff;
    --bg-modal: #ffffff;
    --bg-modal-overlay: rgba(0, 0, 0, 0.7);

    /* Textos */
    --text-primary: #2c3e50;
    --text-secondary: #5a6c7d;
    --text-tertiary: #7f8c9a;
    --text-muted: #95a5b5;
    --text-on-primary: #ffffff;
    --text-on-dark: #ffffff;

    /* Bordas */
    --border-color: #e0e8ed;
    --border-color-light: #f0f4f7;
    --border-color-dark: #cbd5e0;
    /* --border-color-hover: rgba(0, 168, 89, 0.3); */
    --border-color-hover: rgba(11, 44, 69, 0.3);

    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
    /* --shadow-green: 0 4px 12px rgba(0, 168, 89, 0.15); */
    --shadow-green: 0 4px 12px rgba(11, 44, 69, 0.15);

    /* Alternância de linhas (zebra stripes) */
    --table-row-odd: #ffffff;
    /* --table-row-even: #f0f8f4; */
    /* --table-row-hover: linear-gradient(135deg, #e8f5f0 0%, #e0f2ea 100%); */
    --table-row-even: #f1f9fa;
    --table-row-hover: #e6f6f7;
    --table-header-bg: #F3F5F7;
    --table-header-text: #54606A;

    /* Inputs e controles */
    --input-bg: #ffffff;
    --input-border: #e0e8ed;
    /* --input-border-focus: #00A859; */
    --input-border-focus: #0b2c45;
    --input-text: #2c3e50;
    --input-placeholder: #95a5b5;

    /* Botões */
    /* --btn-primary-bg: linear-gradient(135deg, #00A859 0%, #008C47 100%); */
    /* --btn-primary-hover: linear-gradient(135deg, #008C47 0%, #00702E 100%); */
    --btn-primary-bg: #0b2c45;
    --btn-primary-hover: #071d31;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-hover: #5a6268;

    /* Status badges - Light */
    --badge-pendente-bg: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    --badge-pendente-text: #E65100;
    --badge-enviado-bg: linear-gradient(135deg, #E1F5FE 0%, #B3E5FC 100%);
    --badge-enviado-text: #01579B;
    --badge-aprovado-bg: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
    --badge-aprovado-text: #6A1B9A;
    /* --badge-executado-bg: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%); */
    --badge-executado-bg: linear-gradient(135deg, #e6f6f7 0%, #cceef0 100%);
    --badge-executado-text: #2E7D32;
    --badge-cancelado-bg: linear-gradient(135deg, #F5F5F5 0%, #E0E0E0 100%);
    --badge-cancelado-text: #424242;
}

/* ============================================
   MODO DARK
   ============================================ */
[data-theme="dark"] {
    /* Marca Flua no escuro: destaque em ciano, texto sobre ele em azul escuro */
    --brand: #cceef0;
    --on-brand: #071d31;
    /* Fundo com texto branco fixo: azul médio, distinguível do fundo escuro */
    --brand-fill: color-mix(in srgb, #0b2c45 65%, #cceef0);
    --brand-fill-hover: color-mix(in srgb, #0b2c45 78%, #cceef0);

    /* Backgrounds */
    /* Marca anterior (mantida comentada):
    --bg-body: linear-gradient(135deg, #0f1419 0%, #1a1f28 100%);
    --bg-primary: #1e2530;
    --bg-secondary: #252d3a;
    --bg-tertiary: #2a3342;
    --bg-hover: #1a3829;
    --bg-active: #1f4d35;
    */
    --bg-body: #061827;
    --bg-primary: #0a2236;
    --bg-secondary: #0e2c45;
    --bg-tertiary: #12324e;
    --bg-hover: #123a58;
    --bg-active: #17476b;

    /* Backgrounds de cards e elementos */
    /* Marca anterior (mantida comentada):
    --bg-card: #1e2530;
    --bg-card-hover: #252d3a;
    --bg-header: #101820;
    --bg-sidebar: #1a1f28;
    --bg-modal: #1e2530;
    */
    --bg-card: #0a2236;
    --bg-card-hover: #0e2c45;
    --bg-header: #071d31;
    --bg-sidebar: #081e30;
    --bg-modal: #0a2236;
    --bg-modal-overlay: rgba(0, 0, 0, 0.85);

    /* Textos */
    --text-primary: #f0f5fa;
    --text-secondary: #c5d2e1;
    --text-tertiary: #8a99ab;
    --text-muted: #6b7889;
    --text-on-primary: #ffffff;
    --text-on-dark: #f0f5fa;

    /* Bordas */
    /* Marca anterior (mantida comentada):
    --border-color: #2a3342;
    --border-color-light: #252d3a;
    --border-color-dark: #3a4554;
    --border-color-hover: rgba(0, 168, 89, 0.5);
    */
    --border-color: #163a57;
    --border-color-light: #0e2c45;
    --border-color-dark: #24506f;
    --border-color-hover: rgba(204, 238, 240, 0.5);

    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.6);
    /* --shadow-green: 0 4px 12px rgba(0, 168, 89, 0.3); */
    --shadow-green: 0 4px 12px rgba(204, 238, 240, 0.15);

    /* Alternância de linhas (zebra stripes) */
    /* Marca anterior (mantida comentada):
    --table-row-odd: #1e2530;
    --table-row-even: #232a36;
    --table-row-hover: linear-gradient(135deg, #252d3a 0%, #2a3342 100%);
    */
    --table-row-odd: #0a2236;
    --table-row-even: #0c273e;
    --table-row-hover: #123a58;
    --table-header-bg: #10304a;
    --table-header-text: #a9bccb;

    /* Inputs e controles */
    /* Marca anterior (mantida comentada):
    --input-bg: #252d3a;
    --input-border: #2a3342;
    --input-border-focus: #00C76A;
    */
    --input-bg: #0e2c45;
    --input-border: #163a57;
    --input-border-focus: #cceef0;
    --input-text: #e8eef3;
    --input-placeholder: #6b7889;

    /* Botões */
    /* Marca anterior (mantida comentada):
    --btn-primary-bg: linear-gradient(135deg, #00A859 0%, #00934E 100%);
    --btn-primary-hover: linear-gradient(135deg, #00C76A 0%, #00A859 100%);
    --btn-secondary-bg: #3a4554;
    --btn-secondary-hover: #4a5564;
    */
    --btn-primary-bg: #cceef0;
    --btn-primary-hover: #a8dde0;
    --btn-secondary-bg: #24506f;
    --btn-secondary-hover: #2e5f82;

    /* Status badges - Dark */
    --badge-pendente-bg: linear-gradient(135deg, #3d2a00 0%, #4d3500 100%);
    --badge-pendente-text: #FFB74D;
    --badge-enviado-bg: linear-gradient(135deg, #002838 0%, #003548 100%);
    --badge-enviado-text: #64B5F6;
    --badge-aprovado-bg: linear-gradient(135deg, #2d1a3d 0%, #3d254d 100%);
    --badge-aprovado-text: #CE93D8;
    --badge-executado-bg: linear-gradient(135deg, #003820 0%, #004828 100%);
    --badge-executado-text: #81C784;
    --badge-cancelado-bg: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    --badge-cancelado-text: #B0BEC5;
}

/* ============================================
   TRANSIÇÕES SUAVES ENTRE TEMAS
   ============================================ */
* {
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Exceções para elementos que não devem ter transição */
.loading-spinner,
.btn-icon:hover,
button:hover,
input:focus,
select:focus,
textarea:focus {
    transition: all 0.3s ease;
}

/* ============================================
   BOTÃO DE ALTERNÂNCIA DE TEMA
   ============================================ */
.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(20deg);
}

/* Ícones específicos para cada tema */
[data-theme="light"] .theme-icon-dark {
    display: inline-block;
}

[data-theme="light"] .theme-icon-light {
    display: none;
}

[data-theme="dark"] .theme-icon-dark {
    display: none;
}

[data-theme="dark"] .theme-icon-light {
    display: inline-block;
}

/* ============================================
   ACESSIBILIDADE - RESPEITAR PREFERÊNCIAS DO SISTEMA
   ============================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Se usuário não escolheu tema e prefere dark, usar dark */
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        /* Se usuário não escolheu tema e prefere light, usar light */
        color-scheme: light;
    }
}

/* ============================================
   SCROLLBAR PERSONALIZADA
   ============================================ */
[data-theme="light"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #f0f4f7;
    border-radius: 10px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    /* background: linear-gradient(135deg, #1e7849 0%, #166338 100%); */
    background: linear-gradient(135deg, var(--brand-fill-hover) 0%, var(--brand-fill-hover) 100%);
    border-radius: 10px;
    border: 2px solid #f0f4f7;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    /* background: linear-gradient(135deg, #166338 0%, #0f4a28 100%); */
    background: linear-gradient(135deg, var(--brand-fill-hover) 0%, var(--brand-fill-hover) 100%);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    /* background: #1a1f28; */
    background: #081e30;
    border-radius: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    /* background: linear-gradient(135deg, #1e7849 0%, #166338 100%); */
    background: linear-gradient(135deg, var(--brand-fill-hover) 0%, var(--brand-fill-hover) 100%);
    border-radius: 10px;
    /* border: 2px solid #1a1f28; */
    border: 2px solid #081e30;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    /* background: linear-gradient(135deg, #2d9461 0%, #1e7849 100%); */
    background: linear-gradient(135deg, var(--brand-fill-hover) 0%, var(--brand-fill-hover) 100%);
}

/* ============================================
   LOCAL DE CHAMADA - DARK MODE
   ============================================ */
[data-theme="dark"] #local-chamada,
[data-theme="dark"] .local-chamada-container select {
    /* background: #252d3a !important; */
    background: #0e2c45 !important;
    /* background-color: #252d3a !important; */
    background-color: #0e2c45 !important;
    color: #e8eef3 !important;
    /* border: 1px solid #3a4554 !important; */
    border: 1px solid #24506f !important;
}

[data-theme="dark"] #local-chamada option,
[data-theme="dark"] .local-chamada-container select option {
    /* background: #252d3a !important; */
    background: #0e2c45 !important;
    /* background-color: #252d3a !important; */
    background-color: #0e2c45 !important;
    color: #e8eef3 !important;
}

[data-theme="dark"] #local-chamada:hover,
[data-theme="dark"] .local-chamada-container select:hover {
    /* border-color: #00C76A !important; */
    border-color: var(--brand) !important;
}

[data-theme="dark"] #local-chamada:focus,
[data-theme="dark"] .local-chamada-container select:focus {
    /* border-color: #00C76A !important; */
    border-color: var(--brand) !important;
    /* box-shadow: 0 0 0 2px rgba(0, 199, 106, 0.3) !important; */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent) !important;
    outline: none !important;
}

button, input, select, textarea, optgroup { font-family: inherit; }

:root {
    --flua-success: #00AC70;
    --flua-success-hover: #009960;
    --flua-success-ink: #0E7A53;
}