/* ============================================================
   TEMAS DE COR — paletas claras (Sol) e escuras (Lua)
   ------------------------------------------------------------
   - O atributo  data-tc-palette  no <html> escolhe a paleta.
   - A classe     .dark           escolhe claro (Sol) / escuro (Lua).
   - A paleta "branco" usa os tokens padrao de titan.css (sem override).
   Carregado DEPOIS de titan.css e ANTES de moderno.css.
   ============================================================ */

/* NOTA: o override de .btn-primary (e demais elementos "primary") para
   seguir o accent da paleta foi movido para moderno.css. Motivo: o
   bootstrap.min.css carrega DEPOIS deste arquivo e sobrescreveria a regra
   aqui. moderno.css e o ultimo CSS, entao e o lugar correto. */

/* ============================================================
   BRANCO  (Light padrao)  — sem override de tokens.
   PRETO   — neutro grafite no escuro.
   ============================================================ */
html[data-tc-palette="preto"]:not(.dark) {
    --tc-accent:        #3f4756;
    --tc-accent-dim:    #7a828f;
    --tc-info:          #3f4756;
    --tc-primary:       #0b0d11;
    --tc-primary-c:     #1b1f27;
    --tc-bg:            #f7f8f9;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #f1f2f4;
    --tc-surface-c:     #eaebed;
    --tc-surface-high:  #e3e4e7;
    --tc-outline:       #e6e7ea;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #f1f2f4;
    --tc-sidebar-active:#eaebed;
    --tc-topbar-bg:     rgba(247,248,249,0.9);
    --tc-footer-bg:     #f1f2f4;
}
html[data-tc-palette="preto"].dark {
    --tc-bg:            #000000;
    --tc-surface:       #121212;
    --tc-surface-low:   #1a1a1a;
    --tc-surface-c:     #212121;
    --tc-surface-high:  #2a2a2a;
    --tc-on-surface:    #ededed;
    --tc-muted:         #9a9a9a;
    --tc-outline:       #333333;
    --tc-accent:        #8b93a3;
    --tc-accent-dim:    #5b626e;
    --tc-primary-c:     #3a4150;
    --tc-sidebar-bg:    #0a0a0a;
    --tc-sidebar-hover: rgba(255,255,255,0.06);
    --tc-sidebar-active:rgba(255,255,255,0.10);
    --tc-topbar-bg:     rgba(0,0,0,0.92);
    --tc-footer-bg:     #0a0a0a;
}

/* ============================================================
   AZUL
   ============================================================ */
html[data-tc-palette="azul"]:not(.dark) {
    --tc-accent:        #2f6fed;
    --tc-accent-dim:    #7fa3e6;
    --tc-info:          #2f6fed;
    --tc-primary:       #04132e;
    --tc-primary-c:     #0b3b8c;
    --tc-bg:            #f3f7fd;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #eef4fc;
    --tc-surface-c:     #e4edfa;
    --tc-surface-high:  #d8e5f7;
    --tc-outline:       #dde7f5;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #eef4fc;
    --tc-sidebar-active:#e4edfa;
    --tc-topbar-bg:     rgba(243,247,253,0.9);
    --tc-footer-bg:     #eef4fc;
    --tc-shadow-primary:0 8px 24px rgba(47,111,237,0.22);
}
html[data-tc-palette="azul"].dark {
    --tc-bg:            #0a1424;
    --tc-surface:       #0f1d33;
    --tc-surface-low:   #152740;
    --tc-surface-c:     #1c3251;
    --tc-surface-high:  #244062;
    --tc-on-surface:    #e7eefb;
    --tc-muted:         #8ea3c4;
    --tc-outline:       #26405f;
    --tc-accent:        #4f8bf5;
    --tc-accent-dim:    #3f6aae;
    --tc-primary-c:     #1d59c9;
    --tc-sidebar-bg:    #081020;
    --tc-sidebar-hover: rgba(79,139,245,0.10);
    --tc-sidebar-active:rgba(79,139,245,0.18);
    --tc-topbar-bg:     rgba(10,20,36,0.92);
    --tc-footer-bg:     #081020;
}

/* ============================================================
   VERDE
   ============================================================ */
html[data-tc-palette="verde"]:not(.dark) {
    --tc-accent:        #15925a;
    --tc-accent-dim:    #74c39d;
    --tc-info:          #15925a;
    --tc-primary:       #04160d;
    --tc-primary-c:     #0c6b3f;
    --tc-bg:            #f2f9f5;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #ecf6f0;
    --tc-surface-c:     #e1f1e8;
    --tc-surface-high:  #d3ebde;
    --tc-outline:       #dcebe2;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #ecf6f0;
    --tc-sidebar-active:#e1f1e8;
    --tc-topbar-bg:     rgba(242,249,245,0.9);
    --tc-footer-bg:     #ecf6f0;
    --tc-shadow-primary:0 8px 24px rgba(21,146,90,0.22);
}
html[data-tc-palette="verde"].dark {
    --tc-bg:            #08160f;
    --tc-surface:       #0e2017;
    --tc-surface-low:   #142a1e;
    --tc-surface-c:     #1b3727;
    --tc-surface-high:  #234631;
    --tc-on-surface:    #e6f3ec;
    --tc-muted:         #8fb6a1;
    --tc-outline:       #244536;
    --tc-accent:        #2fb574;
    --tc-accent-dim:    #2f7d56;
    --tc-primary-c:     #16894f;
    --tc-sidebar-bg:    #06120c;
    --tc-sidebar-hover: rgba(47,181,116,0.10);
    --tc-sidebar-active:rgba(47,181,116,0.18);
    --tc-topbar-bg:     rgba(8,22,15,0.92);
    --tc-footer-bg:     #06120c;
}

/* ============================================================
   LARANJA
   ============================================================ */
html[data-tc-palette="laranja"]:not(.dark) {
    --tc-accent:        #e2710f;
    --tc-accent-dim:    #eaa86a;
    --tc-info:          #e2710f;
    --tc-primary:       #2a1605;
    --tc-primary-c:     #a44e0a;
    --tc-bg:            #fdf6f0;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #fbefe3;
    --tc-surface-c:     #f6e4d3;
    --tc-surface-high:  #f0d9c3;
    --tc-outline:       #f1e2d2;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #fbefe3;
    --tc-sidebar-active:#f6e4d3;
    --tc-topbar-bg:     rgba(253,246,240,0.9);
    --tc-footer-bg:     #fbefe3;
    --tc-shadow-primary:0 8px 24px rgba(226,113,15,0.22);
}
html[data-tc-palette="laranja"].dark {
    --tc-bg:            #1a1209;
    --tc-surface:       #251a0f;
    --tc-surface-low:   #312214;
    --tc-surface-c:     #3e2c19;
    --tc-surface-high:  #4b371f;
    --tc-on-surface:    #f4e9dc;
    --tc-muted:         #c1a385;
    --tc-outline:       #4a3520;
    --tc-accent:        #f5933a;
    --tc-accent-dim:    #b06e2e;
    --tc-primary-c:     #d6720f;
    --tc-sidebar-bg:    #150e07;
    --tc-sidebar-hover: rgba(245,147,58,0.10);
    --tc-sidebar-active:rgba(245,147,58,0.18);
    --tc-topbar-bg:     rgba(26,18,9,0.92);
    --tc-footer-bg:     #150e07;
}

/* ============================================================
   MARROM
   ============================================================ */
html[data-tc-palette="marrom"]:not(.dark) {
    --tc-accent:        #8a5a2b;
    --tc-accent-dim:    #b9926a;
    --tc-info:          #8a5a2b;
    --tc-primary:       #1f1409;
    --tc-primary-c:     #5e3d1c;
    --tc-bg:            #f9f5ef;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #f2ebe0;
    --tc-surface-c:     #ebe1d2;
    --tc-surface-high:  #e1d4c1;
    --tc-outline:       #e8ddcd;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #f2ebe0;
    --tc-sidebar-active:#ebe1d2;
    --tc-topbar-bg:     rgba(249,245,239,0.9);
    --tc-footer-bg:     #f2ebe0;
    --tc-shadow-primary:0 8px 24px rgba(138,90,43,0.22);
}
html[data-tc-palette="marrom"].dark {
    --tc-bg:            #17110b;
    --tc-surface:       #211810;
    --tc-surface-low:   #2b2016;
    --tc-surface-c:     #36291c;
    --tc-surface-high:  #423323;
    --tc-on-surface:    #efe6d9;
    --tc-muted:         #b9a589;
    --tc-outline:       #463725;
    --tc-accent:        #c08a52;
    --tc-accent-dim:    #8a6840;
    --tc-primary-c:     #9a6a38;
    --tc-sidebar-bg:    #120d08;
    --tc-sidebar-hover: rgba(192,138,82,0.10);
    --tc-sidebar-active:rgba(192,138,82,0.18);
    --tc-topbar-bg:     rgba(23,17,11,0.92);
    --tc-footer-bg:     #120d08;
}

/* ============================================================
   AZUL ESCURO  (navy / indigo)
   ============================================================ */
html[data-tc-palette="azulescuro"]:not(.dark) {
    --tc-accent:        #3a52cc;
    --tc-accent-dim:    #8290e0;
    --tc-info:          #3a52cc;
    --tc-primary:       #030819;
    --tc-primary-c:     #1d2a72;
    --tc-bg:            #f3f5fc;
    --tc-surface:       #ffffff;
    --tc-surface-low:   #edf0fa;
    --tc-surface-c:     #e3e8f7;
    --tc-surface-high:  #d6def2;
    --tc-outline:       #dee3f3;
    --tc-sidebar-bg:    #ffffff;
    --tc-sidebar-hover: #edf0fa;
    --tc-sidebar-active:#e3e8f7;
    --tc-topbar-bg:     rgba(243,245,252,0.9);
    --tc-footer-bg:     #edf0fa;
    --tc-shadow-primary:0 8px 24px rgba(58,82,204,0.22);
}
html[data-tc-palette="azulescuro"].dark {
    --tc-bg:            #060a18;
    --tc-surface:       #0b1024;
    --tc-surface-low:   #111733;
    --tc-surface-c:     #182043;
    --tc-surface-high:  #202a55;
    --tc-on-surface:    #e6e9fb;
    --tc-muted:         #97a0c9;
    --tc-outline:       #27315a;
    --tc-accent:        #5e78f0;
    --tc-accent-dim:    #4356b0;
    --tc-primary-c:     #2f44c4;
    --tc-sidebar-bg:    #04060f;
    --tc-sidebar-hover: rgba(94,120,240,0.10);
    --tc-sidebar-active:rgba(94,120,240,0.18);
    --tc-topbar-bg:     rgba(6,10,24,0.92);
    --tc-footer-bg:     #04060f;
}

/* ============================================================
   POPOVER DE SELECAO DE TEMA (botao Sol/Lua na topbar)
   ============================================================ */
.tc-dropdown--theme {
    width: 268px;
    padding: 0;
}

/* Cabecalho do popover */
.tc-theme-pop__head {
    padding: 13px 16px 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tc-on-surface);
    border-bottom: 1px solid var(--tc-outline);
}

/* Segmento Sol / Lua */
.tc-theme-mode {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
}
.tc-theme-mode__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tc-muted);
    background: var(--tc-surface-low);
    border: 1px solid var(--tc-outline);
    border-radius: var(--tc-radius-md);
    transition: var(--tc-transition);
}
.tc-theme-mode__btn .material-symbols-outlined { font-size: 18px; }
.tc-theme-mode__btn:hover { color: var(--tc-on-surface); background: var(--tc-surface-c); }
.tc-theme-mode__btn.tc-active {
    color: var(--tc-on-accent);
    background: var(--tc-accent);
    border-color: var(--tc-accent);
}

/* Grade de cores */
.tc-theme-swatches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 4px 16px 16px;
}
.tc-swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: var(--tc-surface-low);
    border: 1.5px solid var(--tc-outline);
    border-radius: var(--tc-radius-md);
    color: var(--tc-on-surface);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    transition: var(--tc-transition);
}
.tc-swatch:hover { background: var(--tc-surface-c); }
.tc-swatch.tc-active {
    border-color: var(--tc-accent);
    box-shadow: 0 0 0 2px var(--tc-accent) inset;
}
/* Bolinha meio Sol (claro) / meio Lua (escuro) */
.tc-swatch__dot {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.18);
    background: linear-gradient(135deg, var(--sw) 0 50%, var(--sw2) 50% 100%);
}
.tc-swatch.tc-active .tc-swatch__dot { border-color: var(--tc-accent); }

/* ============================================================
   COR POR MÓDULO (raiz do menu)
   ------------------------------------------------------------
   Cada módulo raiz do menu tem uma cor própria; ela aparece na
   pastilha do ícone na sidebar, na faixa de 3px sob a topbar e
   na etiqueta acima do título da página (regras em moderno.css).

   O código de cor sai de moduloCodigo() em elements/funcoes.php e
   é escrito como  data-mod  (grupo raiz da sidebar) e
   data-mod-ativo  (.tc-shell, módulo da tela).
     m01..m13  módulos do ERP (mapa fixo por nome).
     m14..m21  módulos de PRODUTO satélite: escolhida pelo crc32 do
               nome do grupo. Mudar a QUANTIDADE aqui exige mudar
               MODULO_CORES_PRODUTO em funcoes.php (e remapeia tudo).

   Critérios da paleta: luminosidade parecida entre todas (senão
   uma pula na frente e parece erro), matizes distantes entre
   módulos vizinhos no menu, e saturação média — cor saturada
   demais vira semáforo e briga com as cores semânticas
   (sucesso/alerta/erro) que o sistema já usa.
   ============================================================ */
:root {
    --tc-m01: #5a7391;   /* Painéis            */
    --tc-m02: #c05a7d;   /* Cadastros          */
    --tc-m03: #4586e2;   /* Produto            */
    --tc-m04: #7a68cf;   /* Diversos           */
    --tc-m05: #cf8f3e;   /* Movimentação       */
    --tc-m06: #2e9c93;   /* CRM                */
    --tc-m07: #cf5f52;   /* Fiscais            */
    --tc-m08: #3f9a67;   /* Produção           */
    --tc-m09: #7f9a3f;   /* Controle Produção  */
    --tc-m10: #3b8fa8;   /* Configurações      */
    --tc-m11: #9c5fae;   /* Consultas          */
    --tc-m12: #b8703f;   /* Financeiro         */
    --tc-m13: #6373c9;   /* Frete/Embarque     */
    /* Produtos (m14..m21) */
    --tc-m14: #b3923a;   /* mostarda           */
    --tc-m15: #5a9a45;   /* folha              */
    --tc-m16: #2b9a7c;   /* jade               */
    --tc-m17: #4a8fc4;   /* céu                */
    --tc-m18: #8a63c0;   /* ametista           */
    --tc-m19: #b35aa5;   /* magenta            */
    --tc-m20: #c4606f;   /* rosa               */
    --tc-m21: #588d8a;   /* verde-acinzentado  */
}

/* Escuro: NÃO é a mesma cor invertida — as do tema claro ficam ilegíveis
   sobre fundo escuro. Sobe a luminosidade e baixa um pouco a saturação. */
html.dark {
    --tc-m01: #8ba3bd;   /* Painéis            */
    --tc-m02: #e08aa8;   /* Cadastros          */
    --tc-m03: #79aaf0;   /* Produto            */
    --tc-m04: #a596e8;   /* Diversos           */
    --tc-m05: #e5b269;   /* Movimentação       */
    --tc-m06: #5cc4bb;   /* CRM                */
    --tc-m07: #e8887c;   /* Fiscais            */
    --tc-m08: #6cc194;   /* Produção           */
    --tc-m09: #a8c46b;   /* Controle Produção  */
    --tc-m10: #6cb8ce;   /* Configurações      */
    --tc-m11: #c48ed4;   /* Consultas          */
    --tc-m12: #d99a6e;   /* Financeiro         */
    --tc-m13: #94a2e8;   /* Frete/Embarque     */
    /* Produtos (m14..m21) */
    --tc-m14: #d8b866;   /* mostarda           */
    --tc-m15: #8cc47a;   /* folha              */
    --tc-m16: #62c4a6;   /* jade               */
    --tc-m17: #7db6e6;   /* céu                */
    --tc-m18: #b395e6;   /* ametista           */
    --tc-m19: #d88ccb;   /* magenta            */
    --tc-m20: #e8909c;   /* rosa               */
    --tc-m21: #8dbab6;   /* verde-acinzentado  */
}

/* CSS não mapeia atributo em variável sozinho: a tabela é explícita, uma
   linha por módulo. Vale para os dois atributos — data-mod (grupo da
   sidebar) e data-mod-ativo (shell). Como o grupo é descendente do shell,
   o data-mod do grupo redefine --tc-cor-mod localmente e vence. */
[data-mod="m01"], [data-mod-ativo="m01"] { --tc-cor-mod: var(--tc-m01); }
[data-mod="m02"], [data-mod-ativo="m02"] { --tc-cor-mod: var(--tc-m02); }
[data-mod="m03"], [data-mod-ativo="m03"] { --tc-cor-mod: var(--tc-m03); }
[data-mod="m04"], [data-mod-ativo="m04"] { --tc-cor-mod: var(--tc-m04); }
[data-mod="m05"], [data-mod-ativo="m05"] { --tc-cor-mod: var(--tc-m05); }
[data-mod="m06"], [data-mod-ativo="m06"] { --tc-cor-mod: var(--tc-m06); }
[data-mod="m07"], [data-mod-ativo="m07"] { --tc-cor-mod: var(--tc-m07); }
[data-mod="m08"], [data-mod-ativo="m08"] { --tc-cor-mod: var(--tc-m08); }
[data-mod="m09"], [data-mod-ativo="m09"] { --tc-cor-mod: var(--tc-m09); }
[data-mod="m10"], [data-mod-ativo="m10"] { --tc-cor-mod: var(--tc-m10); }
[data-mod="m11"], [data-mod-ativo="m11"] { --tc-cor-mod: var(--tc-m11); }
[data-mod="m12"], [data-mod-ativo="m12"] { --tc-cor-mod: var(--tc-m12); }
[data-mod="m13"], [data-mod-ativo="m13"] { --tc-cor-mod: var(--tc-m13); }
[data-mod="m14"], [data-mod-ativo="m14"] { --tc-cor-mod: var(--tc-m14); }
[data-mod="m15"], [data-mod-ativo="m15"] { --tc-cor-mod: var(--tc-m15); }
[data-mod="m16"], [data-mod-ativo="m16"] { --tc-cor-mod: var(--tc-m16); }
[data-mod="m17"], [data-mod-ativo="m17"] { --tc-cor-mod: var(--tc-m17); }
[data-mod="m18"], [data-mod-ativo="m18"] { --tc-cor-mod: var(--tc-m18); }
[data-mod="m19"], [data-mod-ativo="m19"] { --tc-cor-mod: var(--tc-m19); }
[data-mod="m20"], [data-mod-ativo="m20"] { --tc-cor-mod: var(--tc-m20); }
[data-mod="m21"], [data-mod-ativo="m21"] { --tc-cor-mod: var(--tc-m21); }