/* ============================================================================
   BASE THEMES - CSS Variables por Tema
   Extraido de base.html em 08/02/2026
   Temas: Verde (default), Dark, Light/Azul, Roxo, Bordo, Malva, Oliva, Nevoa, Taupe
   ============================================================================ */

/* LIGHT MODE - Menu VERDE PREMIUM DotCompany */
:root {
    --primary: var(--color-primary-600);
    --primary-hover: var(--color-primary-700);
    --primary-rgb: 15, 76, 58;
    /* Menu verde premium DotCompany */
    --menu-bg: var(--color-primary-600);
    --menu-bg-secondary: var(--color-primary-700);
    --menu-border: rgba(255, 255, 255, 0.1);
    --menu-icon: rgba(255, 255, 255, 0.7);
    --menu-icon-hover: #ffffff;
    --menu-item-hover: rgba(212, 168, 37, 0.15);
    --menu-item-active: rgba(212, 168, 37, 0.25);
    --menu-text: #ffffff;
    --menu-text-secondary: rgba(255, 255, 255, 0.7);
    --menu-separator: rgba(255, 255, 255, 0.1);
    --safe-area-top: env(safe-area-inset-top, 0);
    --safe-area-bottom: env(safe-area-inset-bottom, 0);
    --safe-area-left: env(safe-area-inset-left, 0);
    --safe-area-right: env(safe-area-inset-right, 0);
}

/* CSS VARIABLES - Centralizadas (UX 2025-10-24) */
:root {
    /* Dimensoes do Layout */
    --sidebar-w: 280px;
    --sidebar-w-compact: 80px;
    --header-h: 64px;  /* Aumentado 14% (de 56px) para mais destaque */
    --footer-h: 34px;  /* Reduzido para footer mais fino */
    --item-h: 40px;
    --pad-x: 8px;

    /* Cores de Marca - Verde Premium DotCompany */
    --brand-500: var(--color-primary-500);  /* verde medio */
    --brand-600: var(--color-primary-600);  /* verde principal */
    --brand-700: var(--color-primary-700);  /* verde escuro */
    --accent: #d4a825;     /* dourado accent */

    /* Elevacoes (Sombras Verde Premium) */
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --elev-2: 0 4px 12px rgba(0, 0, 0, 0.08);
    --elev-hover: 0 4px 12px rgba(15, 76, 58, 0.18);
    --elev-active: 0 6px 16px rgba(15, 76, 58, 0.22);

    /* Raios de Borda */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.875rem;  /* 14px */

    /* LIGHT MODE - Superficies */
    --surface: #ffffff;
    --surface-secondary: #f9fafb;
    --border: rgba(226, 232, 240, 0.8);
    --text-primary: #18181b;
    --text-secondary: #71717a;
}

/* DARK MODE - Menu Verde Premium DotCompany */
.dark,
html.theme-dark {
    --primary: var(--color-primary-400);
    --primary-hover: var(--color-primary-300);
    --primary-rgb: 79, 175, 153;

    /* Superficies Dark */
    --surface: #18181b;
    --surface-secondary: #0f0f11;
    --border: rgba(39, 39, 42, 0.8);
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;

    /* Menu verde escuro premium */
    --menu-bg: var(--color-primary-800);
    --menu-bg-secondary: var(--color-primary-900);
    --menu-border: rgba(255, 255, 255, 0.1);
    --menu-icon: var(--color-primary-200);
    --menu-icon-hover: var(--color-primary-100);
    --menu-item-hover: rgba(212, 168, 37, 0.15);
    --menu-item-active: rgba(212, 168, 37, 0.25);
    --menu-text: #f4f4f5;
    --menu-text-secondary: var(--color-primary-200);
    --menu-separator: rgba(255, 255, 255, 0.1);

    /* Elevacoes Dark - Verde premium */
    --elev-hover: 0 4px 12px rgba(79, 175, 153, 0.22);
    --elev-active: 0 6px 16px rgba(79, 175, 153, 0.28);
}

/* AZUL PREMIUM - Tema claro com acentos azuis */
/* Variaveis definidas em _css-variables.css (html.theme-light) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-light {
    /* Primary azul para componentes */
    --primary: #1976D2;
    --primary-rgb: 25, 118, 210;
    /* Menu azul premium */
    --menu-bg-secondary: #0D47A1;
    --menu-border: rgba(25, 118, 210, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(255, 255, 255, 0.12);
    --menu-item-active: rgba(255, 255, 255, 0.2);
    --menu-text-secondary: #90CAF9;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque azul */
    --elev-hover: 0 4px 12px rgba(25, 118, 210, 0.15);
    --elev-active: 0 6px 16px rgba(25, 118, 210, 0.2);
}

/* Body Azul Premium - fundo claro azul-cinza */
html.theme-light body.erp-base {
    background-color: #F0F4FA !important;
    color: #1E293B !important;
}

/* Focus azul nos inputs */
html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
    border-color: #1976D2 !important;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15) !important;
}

/* Tabelas com hover azul sutil */
html.theme-light table tbody tr:hover {
    background-color: rgba(25, 118, 210, 0.04) !important;
}

/* Scrollbar azul sutil */
html.theme-light ::-webkit-scrollbar-thumb {
    background: rgba(25, 118, 210, 0.2) !important;
}

html.theme-light ::-webkit-scrollbar-thumb:hover {
    background: rgba(25, 118, 210, 0.4) !important;
}

/* ROXO PREMIUM - Tema claro com acentos roxo/violeta */
/* Variaveis definidas em _css-variables.css (html.theme-roxo) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-roxo {
    /* Primary roxo para componentes */
    --primary: #6D28D9;
    --primary-rgb: 109, 40, 217;
    /* Menu roxo premium */
    --menu-bg-secondary: #4C1D95;
    --menu-border: rgba(109, 40, 217, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(255, 255, 255, 0.12);
    --menu-item-active: rgba(255, 255, 255, 0.2);
    --menu-text-secondary: #C4B5FD;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque roxo */
    --elev-hover: 0 4px 12px rgba(109, 40, 217, 0.15);
    --elev-active: 0 6px 16px rgba(109, 40, 217, 0.2);
}

/* Body Roxo Premium - fundo claro violeta */
html.theme-roxo body.erp-base {
    background-color: #F5F0FF !important;
    color: #1E293B !important;
}

/* Focus roxo nos inputs */
html.theme-roxo input:focus,
html.theme-roxo select:focus,
html.theme-roxo textarea:focus {
    border-color: #6D28D9 !important;
    box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15) !important;
}

/* Tabelas com hover roxo sutil */
html.theme-roxo table tbody tr:hover {
    background-color: rgba(109, 40, 217, 0.04) !important;
}

/* Scrollbar roxo sutil */
html.theme-roxo ::-webkit-scrollbar-thumb {
    background: rgba(109, 40, 217, 0.2) !important;
}

html.theme-roxo ::-webkit-scrollbar-thumb:hover {
    background: rgba(109, 40, 217, 0.4) !important;
}

/* BORDO PREMIUM - Tema claro com acentos bordo/rose */
/* Variaveis definidas em _css-variables.css (html.theme-bordo) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-bordo {
    /* Primary bordo para componentes */
    --primary: #9F1239;
    --primary-rgb: 159, 18, 57;
    /* Menu bordo premium */
    --menu-bg-secondary: #4C0519;
    --menu-border: rgba(159, 18, 57, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(255, 255, 255, 0.12);
    --menu-item-active: rgba(255, 255, 255, 0.2);
    --menu-text-secondary: #FDA4AF;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque bordo */
    --elev-hover: 0 4px 12px rgba(159, 18, 57, 0.15);
    --elev-active: 0 6px 16px rgba(159, 18, 57, 0.2);
}

/* Body Bordo Premium - fundo claro rose */
html.theme-bordo body.erp-base {
    background-color: #FFF5F7 !important;
    color: #1E293B !important;
}

/* Focus bordo nos inputs */
html.theme-bordo input:focus,
html.theme-bordo select:focus,
html.theme-bordo textarea:focus {
    border-color: #9F1239 !important;
    box-shadow: 0 0 0 3px rgba(159, 18, 57, 0.15) !important;
}

/* Tabelas com hover bordo sutil */
html.theme-bordo table tbody tr:hover {
    background-color: rgba(159, 18, 57, 0.04) !important;
}

/* Scrollbar bordo sutil */
html.theme-bordo ::-webkit-scrollbar-thumb {
    background: rgba(159, 18, 57, 0.2) !important;
}

html.theme-bordo ::-webkit-scrollbar-thumb:hover {
    background: rgba(159, 18, 57, 0.4) !important;
}

/* MALVA PREMIUM - Tema claro com acentos malva/lilás */
/* Variaveis definidas em _css-variables.css (html.theme-malva) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-malva {
    /* Primary malva para componentes */
    --primary: #635768;
    --primary-rgb: 99, 87, 104;
    /* Menu malva premium */
    --menu-bg-secondary: #38303e;
    --menu-border: rgba(99, 87, 104, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(224, 188, 74, 0.15);
    --menu-item-active: rgba(224, 188, 74, 0.25);
    --menu-text-secondary: #d5ced5;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque malva */
    --elev-hover: 0 4px 12px rgba(99, 87, 104, 0.15);
    --elev-active: 0 6px 16px rgba(99, 87, 104, 0.2);
}

/* Body Malva Premium - fundo claro lilás */
html.theme-malva body.erp-base {
    background-color: #fbfafb !important;
    color: #1E293B !important;
}

/* Focus malva nos inputs */
html.theme-malva input:focus,
html.theme-malva select:focus,
html.theme-malva textarea:focus {
    border-color: #635768 !important;
    box-shadow: 0 0 0 3px rgba(99, 87, 104, 0.15) !important;
}

/* Tabelas com hover malva sutil */
html.theme-malva table tbody tr:hover {
    background-color: rgba(99, 87, 104, 0.04) !important;
}

/* Scrollbar malva sutil */
html.theme-malva ::-webkit-scrollbar-thumb {
    background: rgba(99, 87, 104, 0.2) !important;
}

html.theme-malva ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 87, 104, 0.4) !important;
}

/* OLIVA PREMIUM - Tema claro com acentos oliva/natural */
/* Variaveis definidas em _css-variables.css (html.theme-oliva) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-oliva {
    /* Primary oliva para componentes */
    --primary: #636656;
    --primary-rgb: 99, 102, 86;
    /* Menu oliva premium */
    --menu-bg-secondary: #3a3c32;
    --menu-border: rgba(99, 102, 86, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(249, 115, 22, 0.15);
    --menu-item-active: rgba(249, 115, 22, 0.25);
    --menu-text-secondary: #d2d3c9;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque oliva */
    --elev-hover: 0 4px 12px rgba(99, 102, 86, 0.15);
    --elev-active: 0 6px 16px rgba(99, 102, 86, 0.2);
}

/* Body Oliva Premium - fundo claro natural */
html.theme-oliva body.erp-base {
    background-color: #fcfcfa !important;
    color: #1E293B !important;
}

/* Focus oliva nos inputs */
html.theme-oliva input:focus,
html.theme-oliva select:focus,
html.theme-oliva textarea:focus {
    border-color: #636656 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 86, 0.15) !important;
}

/* Tabelas com hover oliva sutil */
html.theme-oliva table tbody tr:hover {
    background-color: rgba(99, 102, 86, 0.04) !important;
}

/* Scrollbar oliva sutil */
html.theme-oliva ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 86, 0.2) !important;
}

html.theme-oliva ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 86, 0.4) !important;
}

/* NEVOA PREMIUM - Tema claro com acentos névoa/mist */
/* Variaveis definidas em _css-variables.css (html.theme-nevoa) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-nevoa {
    /* Primary nevoa para componentes */
    --primary: #59696f;
    --primary-rgb: 89, 105, 111;
    /* Menu nevoa premium */
    --menu-bg-secondary: #343f43;
    --menu-border: rgba(89, 105, 111, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(6, 182, 212, 0.15);
    --menu-item-active: rgba(6, 182, 212, 0.25);
    --menu-text-secondary: #cdd6da;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque nevoa */
    --elev-hover: 0 4px 12px rgba(89, 105, 111, 0.15);
    --elev-active: 0 6px 16px rgba(89, 105, 111, 0.2);
}

/* Body Nevoa Premium - fundo claro azul-cinza */
html.theme-nevoa body.erp-base {
    background-color: #fafcfc !important;
    color: #1E293B !important;
}

/* Focus nevoa nos inputs */
html.theme-nevoa input:focus,
html.theme-nevoa select:focus,
html.theme-nevoa textarea:focus {
    border-color: #59696f !important;
    box-shadow: 0 0 0 3px rgba(89, 105, 111, 0.15) !important;
}

/* Tabelas com hover nevoa sutil */
html.theme-nevoa table tbody tr:hover {
    background-color: rgba(89, 105, 111, 0.04) !important;
}

/* Scrollbar nevoa sutil */
html.theme-nevoa ::-webkit-scrollbar-thumb {
    background: rgba(89, 105, 111, 0.2) !important;
}

html.theme-nevoa ::-webkit-scrollbar-thumb:hover {
    background: rgba(89, 105, 111, 0.4) !important;
}

/* TAUPE PREMIUM - Tema claro com acentos taupe/terra */
/* Variaveis definidas em _css-variables.css (html.theme-taupe) */
/* Aqui apenas overrides visuais especificos de componentes */

html.theme-taupe {
    /* Primary taupe para componentes */
    --primary: #675c58;
    --primary-rgb: 103, 92, 88;
    /* Menu taupe premium */
    --menu-bg-secondary: #3e3533;
    --menu-border: rgba(103, 92, 88, 0.2);
    --menu-icon: rgba(255, 255, 255, 0.85);
    --menu-icon-hover: #FFFFFF;
    --menu-item-hover: rgba(212, 168, 37, 0.15);
    --menu-item-active: rgba(212, 168, 37, 0.25);
    --menu-text-secondary: #d6d0cc;
    --menu-separator: rgba(255, 255, 255, 0.12);

    /* Elevacoes com toque taupe */
    --elev-hover: 0 4px 12px rgba(103, 92, 88, 0.15);
    --elev-active: 0 6px 16px rgba(103, 92, 88, 0.2);
}

/* Body Taupe Premium - fundo claro terra */
html.theme-taupe body.erp-base {
    background-color: #fcfbfa !important;
    color: #1E293B !important;
}

/* Focus taupe nos inputs */
html.theme-taupe input:focus,
html.theme-taupe select:focus,
html.theme-taupe textarea:focus {
    border-color: #675c58 !important;
    box-shadow: 0 0 0 3px rgba(103, 92, 88, 0.15) !important;
}

/* Tabelas com hover taupe sutil */
html.theme-taupe table tbody tr:hover {
    background-color: rgba(103, 92, 88, 0.04) !important;
}

/* Scrollbar taupe sutil */
html.theme-taupe ::-webkit-scrollbar-thumb {
    background: rgba(103, 92, 88, 0.2) !important;
}

html.theme-taupe ::-webkit-scrollbar-thumb:hover {
    background: rgba(103, 92, 88, 0.4) !important;
}

/* ============================================================================
   CARD GRADIENT SYSTEM v2.0 - Paletas Ricas com Cores Analogas
   ============================================================================

   Cards KPI (.dc-card-gradient) usam inline styles com cores hardcoded.
   Este sistema sobrescreve via CSS variables + !important.

   DESIGN: Cada tema usa cores ANALOGAS e COMPLEMENTARES para criar
   riqueza visual mantendo harmonia. Nao monocromatico — vibrante!

   Card 1: Primary Deep       (base do tema)
   Card 2: Primary Vibrant    (tom mais vibrante)
   Card 3: Analogous Warm     (cor analoga quente - +30° no circulo cromatico)
   Card 4: Analogous Cool     (cor analoga fria - -30° no circulo cromatico)
   Card 5: Complementary Soft (cor complementar suavizada)
   Card 6: Accent Rich        (cor accent vibrante do tema)
   Card 7: Deep Blend         (mistura profunda primary + analogous)

   ============================================================================ */

/* --- DEFAULT (Verde Premium) ---
     Base: verde esmeralda | Analogas: teal, verde-agua | Complementar: dourado */
:root {
    --card-grad-1: linear-gradient(135deg, #0c3d2f 0%, #14855f 100%);
    --card-grad-2: linear-gradient(135deg, #0f6b4a 0%, #1a9e6f 100%);
    --card-grad-3: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
    --card-grad-4: linear-gradient(135deg, #065f46 0%, #047857 100%);
    --card-grad-5: linear-gradient(135deg, #115e59 0%, #0f766e 100%);
    --card-grad-6: linear-gradient(135deg, #92400e 0%, #b45309 100%);
    --card-grad-7: linear-gradient(135deg, #064e3b 0%, #0c3d2f 100%);
}

/* --- DARK MODE ---
     Base: slate azulado | Analogas: zinc, stone | Tons profundos com sutileza */
.dark,
html.theme-dark {
    --card-grad-1: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --card-grad-2: linear-gradient(135deg, #1e3a5f 0%, #2563eb 30%, #1e40af 100%);
    --card-grad-3: linear-gradient(135deg, #312e81 0%, #4338ca 100%);
    --card-grad-4: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    --card-grad-5: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%);
    --card-grad-6: linear-gradient(135deg, #581c87 0%, #6b21a8 100%);
    --card-grad-7: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* --- AZUL PREMIUM (Light) ---
     Base: azul material | Analogas: indigo, cyan | Complementar: amber sutil */
html.theme-light {
    --card-grad-1: linear-gradient(135deg, #0D47A1 0%, #1565C0 100%);
    --card-grad-2: linear-gradient(135deg, #1565C0 0%, #1E88E5 100%);
    --card-grad-3: linear-gradient(135deg, #283593 0%, #3949AB 100%);
    --card-grad-4: linear-gradient(135deg, #00838F 0%, #0097A7 100%);
    --card-grad-5: linear-gradient(135deg, #0277BD 0%, #0288D1 100%);
    --card-grad-6: linear-gradient(135deg, #4527A0 0%, #5E35B1 100%);
    --card-grad-7: linear-gradient(135deg, #01579B 0%, #0D47A1 100%);
}

/* --- ROXO PREMIUM ---
     Base: violeta | Analogas: indigo, fuchsia | Complementar: magenta, blue */
html.theme-roxo {
    --card-grad-1: linear-gradient(135deg, #4C1D95 0%, #6D28D9 100%);
    --card-grad-2: linear-gradient(135deg, #5B21B6 0%, #7C3AED 100%);
    --card-grad-3: linear-gradient(135deg, #3730A3 0%, #4F46E5 100%);
    --card-grad-4: linear-gradient(135deg, #86198F 0%, #A21CAF 100%);
    --card-grad-5: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
    --card-grad-6: linear-gradient(135deg, #7E22CE 0%, #9333EA 100%);
    --card-grad-7: linear-gradient(135deg, #312E81 0%, #4C1D95 100%);
}

/* --- BORDO PREMIUM ---
     Base: rose escuro | Analogas: crimson, vinho | Complementar: coral, amber */
html.theme-bordo {
    --card-grad-1: linear-gradient(135deg, #881337 0%, #9F1239 100%);
    --card-grad-2: linear-gradient(135deg, #9F1239 0%, #BE123C 100%);
    --card-grad-3: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
    --card-grad-4: linear-gradient(135deg, #9D174D 0%, #BE185D 100%);
    --card-grad-5: linear-gradient(135deg, #BE123C 0%, #E11D48 100%);
    --card-grad-6: linear-gradient(135deg, #92400E 0%, #B45309 100%);
    --card-grad-7: linear-gradient(135deg, #4C0519 0%, #881337 100%);
}

/* --- MALVA PREMIUM ---
     Base: malva | Analogas: dusty rose, lavanda | Complementar: sage */
html.theme-malva {
    --card-grad-1: linear-gradient(135deg, #514658 0%, #635768 100%);
    --card-grad-2: linear-gradient(135deg, #5B4E63 0%, #796A80 100%);
    --card-grad-3: linear-gradient(135deg, #6B4F6E 0%, #7E5F82 100%);
    --card-grad-4: linear-gradient(135deg, #5E4B6B 0%, #725B78 100%);
    --card-grad-5: linear-gradient(135deg, #635768 0%, #7D6C85 100%);
    --card-grad-6: linear-gradient(135deg, #4E5560 0%, #636C74 100%);
    --card-grad-7: linear-gradient(135deg, #38303E 0%, #514658 100%);
}

/* --- OLIVA PREMIUM ---
     Base: oliva | Analogas: sage, moss | Complementar: terra */
html.theme-oliva {
    --card-grad-1: linear-gradient(135deg, #525548 0%, #636656 100%);
    --card-grad-2: linear-gradient(135deg, #5A5E4C 0%, #6E725E 100%);
    --card-grad-3: linear-gradient(135deg, #4A5740 0%, #5C6950 100%);
    --card-grad-4: linear-gradient(135deg, #5E5845 0%, #716B55 100%);
    --card-grad-5: linear-gradient(135deg, #636656 0%, #777A6A 100%);
    --card-grad-6: linear-gradient(135deg, #564B3E 0%, #6A5F50 100%);
    --card-grad-7: linear-gradient(135deg, #3A3C32 0%, #525548 100%);
}

/* --- NEVOA PREMIUM ---
     Base: blue-gray | Analogas: steel, fog | Complementar: slate-warm */
html.theme-nevoa {
    --card-grad-1: linear-gradient(135deg, #49585E 0%, #59696F 100%);
    --card-grad-2: linear-gradient(135deg, #4B5E68 0%, #5E7580 100%);
    --card-grad-3: linear-gradient(135deg, #435560 0%, #556A75 100%);
    --card-grad-4: linear-gradient(135deg, #506068 0%, #64747C 100%);
    --card-grad-5: linear-gradient(135deg, #59696F 0%, #6B7D84 100%);
    --card-grad-6: linear-gradient(135deg, #4A545A 0%, #5C666C 100%);
    --card-grad-7: linear-gradient(135deg, #343F43 0%, #49585E 100%);
}

/* --- TAUPE PREMIUM ---
     Base: taupe | Analogas: cocoa, warm-gray | Complementar: stone */
html.theme-taupe {
    --card-grad-1: linear-gradient(135deg, #564B48 0%, #675C58 100%);
    --card-grad-2: linear-gradient(135deg, #5E4F4A 0%, #725F58 100%);
    --card-grad-3: linear-gradient(135deg, #5A4A42 0%, #6E5C52 100%);
    --card-grad-4: linear-gradient(135deg, #5D544E 0%, #716862 100%);
    --card-grad-5: linear-gradient(135deg, #675C58 0%, #7A6F6A 100%);
    --card-grad-6: linear-gradient(135deg, #4E4540 0%, #625852 100%);
    --card-grad-7: linear-gradient(135deg, #3E3533 0%, #564B48 100%);
}

/* ============================================================================
   APLICACAO DOS GRADIENTES NOS CARDS (.dc-card-gradient)
   Usa nth-child para distribuir as 7 cores harmonicas.
   !important sobrescreve inline styles dos templates.
   ============================================================================ */

.dc-grid .dc-card-gradient:nth-child(1) { background: var(--card-grad-1) !important; }
.dc-grid .dc-card-gradient:nth-child(2) { background: var(--card-grad-2) !important; }
.dc-grid .dc-card-gradient:nth-child(3) { background: var(--card-grad-3) !important; }
.dc-grid .dc-card-gradient:nth-child(4) { background: var(--card-grad-4) !important; }
.dc-grid .dc-card-gradient:nth-child(5) { background: var(--card-grad-5) !important; }
.dc-grid .dc-card-gradient:nth-child(6) { background: var(--card-grad-6) !important; }
.dc-grid .dc-card-gradient:nth-child(7) { background: var(--card-grad-7) !important; }

/* Fallback para cards alem do 7o (repete o ciclo) */
.dc-grid .dc-card-gradient:nth-child(n+8) { background: var(--card-grad-2) !important; }

/* ============================================================================
   STAT CARDS (.stat-card com .bg-grad-*) - Dashboard
   Sobrescreve as classes bg-grad-* para seguir o tema
   ============================================================================ */

.stat-card.bg-grad-primary { background: var(--card-grad-1) !important; }
.stat-card.bg-grad-success { background: var(--card-grad-2) !important; }
.stat-card.bg-grad-info    { background: var(--card-grad-3) !important; }
.stat-card.bg-grad-warning { background: var(--card-grad-4) !important; }
.stat-card.bg-grad-danger  { background: var(--card-grad-5) !important; }
.stat-card.bg-grad-purple  { background: var(--card-grad-6) !important; }
.stat-card.bg-grad-pink    { background: var(--card-grad-7) !important; }
.stat-card.bg-grad-dark    { background: var(--card-grad-1) !important; }

/* ============================================================================
   ICONES DENTRO DOS CARDS - Visibilidade e Beleza
   ============================================================================
   Problema: .dc-gradient-icon usa rgba(255,255,255,0.2) que fica "morto/apagado"
   em temas escuros/sutis. Solucao: aumentar contraste com fundo mais visivel
   e icone branco vibrante.
   ============================================================================ */

/* Icone glassmorphism - vibrante e bonito em todos os temas */
.dc-card-gradient .dc-gradient-icon {
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.625rem !important;
}

.dc-card-gradient .dc-gradient-icon i,
.dc-card-gradient .dc-gradient-icon .bi {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25))
            drop-shadow(0 0 4px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.5)) !important;
    font-size: 1.35rem !important;
    transition: filter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover: icone glow accent premium intensificado */
.dc-card-gradient:hover .dc-gradient-icon {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15),
                0 0 14px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.dc-card-gradient:hover .dc-gradient-icon i,
.dc-card-gradient:hover .dc-gradient-icon .bi {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2))
            drop-shadow(0 0 7px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.8))
            drop-shadow(0 0 14px rgba(var(--accent-btn-shadow-rgb, 212,168,37), 0.3)) !important;
}

/* DARK MODE: glassmorphism mais sutil mas visivel */
.dark .dc-card-gradient .dc-gradient-icon,
html.theme-dark .dc-card-gradient .dc-gradient-icon {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.dark .dc-card-gradient .dc-gradient-icon i,
html.theme-dark .dc-card-gradient .dc-gradient-icon i {
    color: rgba(255, 255, 255, 0.9) !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* Temas sutis (malva, oliva, nevoa, taupe) - icone mais visivel */
html.theme-malva .dc-card-gradient .dc-gradient-icon,
html.theme-oliva .dc-card-gradient .dc-gradient-icon,
html.theme-nevoa .dc-card-gradient .dc-gradient-icon,
html.theme-taupe .dc-card-gradient .dc-gradient-icon {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Labels e descriptions dentro dos cards - melhor legibilidade */
.dc-card-gradient .dc-gradient-label {
    opacity: 0.95 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.dc-card-gradient .dc-gradient-value {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.dc-card-gradient .dc-gradient-desc {
    opacity: 0.9 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
   BOTOES E BADGES - Seguir paleta do tema
   ============================================================================
   O botao "Adicionar" (.btn-premium) ja usa var(--color-accent) que muda por tema.
   Aqui adicionamos regras para outros botoes e badges.
   ============================================================================ */

/* Botao Tabela ativo - usar cor do tema */
.dc-view-btn.active,
[class*="view-btn"].active {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

/* Badge de contagem (113 registros) - harmonizar com tema */
.hmc-badge,
.badge-count {
    background: var(--primary) !important;
    color: #ffffff !important;
}

/* Icon container do titulo de pagina - seguir tema com gradiente premium */
.icon-container-premium,
.hmc-icon-container,
div.icon-container-premium,
div.hmc-icon-container {
    background: linear-gradient(135deg,
        var(--primary, var(--color-primary-700, #0f4c3a)),
        var(--primary-hover, var(--color-primary-500, #1a6b52))) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Icone dentro do container premium - branco vibrante */
.icon-container-premium i,
.icon-container-premium .bi,
.hmc-icon-container i,
.hmc-icon-container .bi {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

/* Links e acentos - cor do tema */
a.text-primary,
.text-accent-theme {
    color: var(--primary) !important;
}

/* ============================================================
   AVATAR/ICON OVERRIDES - Tailwind bg-indigo-* → tema ativo
   Contexto: avatares em listas, tabelas, cards de items
   ============================================================ */

/* Fundo dos avatares circulares - usar cor primaria do tema com opacidade */
/* LIGHT MODE: bg-indigo-100 → primary-100 (tint claro do tema) */
table .bg-indigo-100,
.list-group .bg-indigo-100,
td .bg-indigo-100,
.card-body .bg-indigo-100 {
    background-color: var(--color-primary-100, var(--color-primary-50, oklch(0.93 0.034 272.788))) !important;
}

/* DARK MODE ONLY: dark:bg-indigo-900 → primary-900 (tom escuro do tema)
   CORREÇÃO: adicionado prefixo .dark para evitar aplicar no light mode.
   Sem .dark, Alpine.js adicionava dark:bg-indigo-900 como classe CSS e o seletor
   sem prefixo ativava, pintando o avatar com primary-900 (quase preto) no light mode. */
.dark table .dark\:bg-indigo-900,
.dark .list-group .dark\:bg-indigo-900,
.dark td .dark\:bg-indigo-900,
.dark .card-body .dark\:bg-indigo-900 {
    background-color: var(--color-primary-900, var(--color-primary-950)) !important;
}

/* Icone dentro do avatar - cor primaria do tema */
/* LIGHT MODE: text-indigo-600 → primary-600 */
table .text-indigo-600,
.list-group .text-indigo-600,
td .text-indigo-600,
.card-body .text-indigo-600 {
    color: var(--color-primary-600, var(--primary)) !important;
}

/* DARK MODE ONLY: dark:text-indigo-400 → primary-400
   CORREÇÃO: adicionado prefixo .dark pelo mesmo motivo que o bg acima. */
.dark table .dark\:text-indigo-400,
.dark .list-group .dark\:text-indigo-400,
.dark td .dark\:text-indigo-400,
.dark .card-body .dark\:text-indigo-400 {
    color: var(--color-primary-400, var(--primary)) !important;
}

/* bg-indigo-200 em hover states */
table .hover\:bg-indigo-200:hover,
td .hover\:bg-indigo-200:hover {
    background-color: var(--color-primary-200, var(--color-primary-100)) !important;
}

/* Badges e tags indigo em contexto de listas */
table .bg-indigo-100.text-indigo-800,
.badge.bg-indigo-100 {
    background-color: var(--color-primary-100, var(--color-primary-50)) !important;
    color: var(--color-primary-800, var(--color-primary-900)) !important;
}

/* Stat card icon containers */
.stat-card .stat-icon {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.stat-card .stat-icon i {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================
   SISTEMA ACCENT PREMIUM POR TEMA
   Botoes CTA, badges, shadows - cada tema com personalidade
   Cores complementares que remetem a luxo e harmonia
   ============================================================ */

/* --- VERDE PREMIUM: Dourado/Ouro (complementar natural do verde) --- */
:root {
    --accent-btn-from: #d4a825;
    --accent-btn-to: #b8922a;
    --accent-btn-hover-from: #c49b22;
    --accent-btn-hover-to: #9a7a23;
    --accent-btn-text: #1a1a1a;
    --accent-btn-shadow-rgb: 212, 168, 37;
    --accent-badge-bg: #d4a825;
    --accent-badge-text: #1a1a1a;
}

/* --- DARK MODE: Azul eletrico / Neon (luxo tecnologico) --- */
.dark, html.theme-dark {
    --accent-btn-from: #3b82f6;
    --accent-btn-to: #2563eb;
    --accent-btn-hover-from: #2563eb;
    --accent-btn-hover-to: #1d4ed8;
    --accent-btn-text: #ffffff;
    --accent-btn-shadow-rgb: 59, 130, 246;
    --accent-badge-bg: #3b82f6;
    --accent-badge-text: #ffffff;
}

/* --- AZUL PREMIUM (Light): Cyan/Turquesa (sofisticado) --- */
html.theme-light {
    --accent-btn-from: #06b6d4;
    --accent-btn-to: #0891b2;
    --accent-btn-hover-from: #0891b2;
    --accent-btn-hover-to: #0e7490;
    --accent-btn-text: #ffffff;
    --accent-btn-shadow-rgb: 6, 182, 212;
    --accent-badge-bg: #06b6d4;
    --accent-badge-text: #ffffff;
}

/* --- ROXO PREMIUM: Rosa/Fuchsia (glamour) --- */
html.theme-roxo {
    --accent-btn-from: #ec4899;
    --accent-btn-to: #db2777;
    --accent-btn-hover-from: #db2777;
    --accent-btn-hover-to: #be185d;
    --accent-btn-text: #ffffff;
    --accent-btn-shadow-rgb: 236, 72, 153;
    --accent-badge-bg: #ec4899;
    --accent-badge-text: #ffffff;
}

/* --- BORDO PREMIUM: Dourado rose (elegancia classica) --- */
html.theme-bordo {
    --accent-btn-from: #f59e0b;
    --accent-btn-to: #d97706;
    --accent-btn-hover-from: #d97706;
    --accent-btn-hover-to: #b45309;
    --accent-btn-text: #1a1a1a;
    --accent-btn-shadow-rgb: 245, 158, 11;
    --accent-badge-bg: #f59e0b;
    --accent-badge-text: #1a1a1a;
}

/* --- MALVA PREMIUM: Rose gold (feminino luxuoso) --- */
html.theme-malva {
    --accent-btn-from: #e0a872;
    --accent-btn-to: #c4915e;
    --accent-btn-hover-from: #c4915e;
    --accent-btn-hover-to: #a87a4e;
    --accent-btn-text: #1a1a1a;
    --accent-btn-shadow-rgb: 224, 168, 114;
    --accent-badge-bg: #e0a872;
    --accent-badge-text: #1a1a1a;
}

/* --- OLIVA PREMIUM: Laranja terroso (organico premium) --- */
html.theme-oliva {
    --accent-btn-from: #ea580c;
    --accent-btn-to: #c2410c;
    --accent-btn-hover-from: #c2410c;
    --accent-btn-hover-to: #9a3412;
    --accent-btn-text: #ffffff;
    --accent-btn-shadow-rgb: 234, 88, 12;
    --accent-badge-bg: #ea580c;
    --accent-badge-text: #ffffff;
}

/* --- NEVOA PREMIUM: Teal/Turquesa (serenidade sofisticada) --- */
html.theme-nevoa {
    --accent-btn-from: #0d9488;
    --accent-btn-to: #0f766e;
    --accent-btn-hover-from: #0f766e;
    --accent-btn-hover-to: #115e59;
    --accent-btn-text: #ffffff;
    --accent-btn-shadow-rgb: 13, 148, 136;
    --accent-badge-bg: #0d9488;
    --accent-badge-text: #ffffff;
}

/* --- TAUPE PREMIUM: Dourado quente (classico atemporal) --- */
html.theme-taupe {
    --accent-btn-from: #c49a6c;
    --accent-btn-to: #a88459;
    --accent-btn-hover-from: #a88459;
    --accent-btn-hover-to: #8c6e49;
    --accent-btn-text: #1a1a1a;
    --accent-btn-shadow-rgb: 196, 154, 108;
    --accent-badge-bg: #c49a6c;
    --accent-badge-text: #1a1a1a;
}

/* === OVERRIDE btn-premium PARA USAR ACCENT DO TEMA === */
.btn-premium,
.btn-cta-premium,
button.btn-premium,
a.btn-premium {
    background: linear-gradient(135deg,
        var(--accent-btn-from) 0%,
        var(--accent-btn-to) 100%) !important;
    color: var(--accent-btn-text) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(var(--accent-btn-shadow-rgb), 0.35) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-premium:hover,
.btn-cta-premium:hover,
button.btn-premium:hover,
a.btn-premium:hover {
    background: linear-gradient(135deg,
        var(--accent-btn-hover-from) 0%,
        var(--accent-btn-hover-to) 100%) !important;
    box-shadow: 0 6px 20px rgba(var(--accent-btn-shadow-rgb), 0.55) !important;
    transform: translateY(-2px) !important;
    color: var(--accent-btn-text) !important;
}

.btn-premium:active,
.btn-cta-premium:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Badge premium segue accent do tema */
.badge-premium,
.shadow-premium {
    background: var(--accent-badge-bg) !important;
    color: var(--accent-badge-text) !important;
}

/* shadow-premium para containers */
.shadow-premium {
    box-shadow: 0 4px 15px rgba(var(--accent-btn-shadow-rgb), 0.25) !important;
}

/* === ICONES - NUNCA PRETOS/INVISIVEIS === */
/* Icones dentro de botoes premium - seguir cor do texto */
.btn-premium i,
.btn-premium .bi,
.btn-cta-premium i,
.btn-cta-premium .bi {
    color: var(--accent-btn-text) !important;
    opacity: 1 !important;
}

/* Icones na sidebar - sempre visiveis */
.sidebar i,
.sidebar .bi,
nav i,
nav .bi,
[class*="sidebar"] i,
[class*="sidebar"] .bi {
    opacity: 1 !important;
}

/* Icones em backgrounds escuros - SEMPRE brancos */
.dark i:not([class*="text-"]),
.dark .bi:not([class*="text-"]),
html.theme-dark i:not([class*="text-"]),
html.theme-dark .bi:not([class*="text-"]) {
    color: inherit;
}

/* Icones de acao na tabela - visiveis em qualquer tema */
table .bi,
table i.bi,
td .bi,
td i {
    color: var(--color-primary-600, var(--primary, currentColor)) !important;
    opacity: 0.85 !important;
}
table .bi:hover,
td .bi:hover,
td i:hover {
    color: var(--color-primary-700, var(--primary)) !important;
    opacity: 1 !important;
}

/* Dark mode - icones de tabela precisam ser claros */
.dark table .bi,
.dark td .bi,
.dark td i,
html.theme-dark table .bi,
html.theme-dark td .bi {
    color: var(--color-primary-400, #a0aec0) !important;
    opacity: 0.9 !important;
}
.dark table .bi:hover,
.dark td .bi:hover,
html.theme-dark table .bi:hover,
html.theme-dark td .bi:hover {
    color: var(--color-primary-300, #cbd5e0) !important;
    opacity: 1 !important;
}

/* Temas sutis (malva, oliva, nevoa, taupe) - icones com contraste */
html.theme-malva table .bi,
html.theme-oliva table .bi,
html.theme-nevoa table .bi,
html.theme-taupe table .bi,
html.theme-malva td i,
html.theme-oliva td i,
html.theme-nevoa td i,
html.theme-taupe td i {
    color: var(--color-primary-700, #4a5568) !important;
    opacity: 0.9 !important;
}

/* Icones dentro de cards gradient - SEMPRE brancos com glow */
.dc-card-gradient i,
.dc-card-gradient .bi,
.stat-card i,
.stat-card .bi,
[class*="bg-grad-"] i,
[class*="bg-grad-"] .bi {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

/* Botao Tabela/Grid/Cards ativo - usar accent do tema */
.dc-view-btn.active,
[class*="view-btn"].active,
button.active[class*="btn"] {
    background: var(--accent-btn-from, var(--primary)) !important;
    color: var(--accent-btn-text, #ffffff) !important;
    border-color: var(--accent-btn-from, var(--primary)) !important;
}

/* Paginacao ativa - seguir tema */
.pagination .active .page-link,
.page-item.active .page-link,
[class*="pagination"] .active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Botao Exportar/Imprimir - borda do tema */
.btn-outline-primary,
.btn[class*="outline"] {
    border-color: var(--primary, var(--color-primary-600)) !important;
    color: var(--primary, var(--color-primary-600)) !important;
}
.btn-outline-primary:hover,
.btn[class*="outline"]:hover {
    background: var(--primary, var(--color-primary-600)) !important;
    color: #ffffff !important;
}

/* Badge de contagem (ex: "113 registros") - accent */
.badge-count,
.badge[class*="premium"],
.text-badge-count {
    background: var(--accent-badge-bg, var(--primary)) !important;
    color: var(--accent-badge-text, #ffffff) !important;
}

/* Checkbox/Toggle switch - seguir tema */
input[type="checkbox"]:checked,
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Links - seguir tema */
a:not(.btn):not([class*="nav"]) {
    color: var(--color-primary-600, var(--primary));
}
.dark a:not(.btn):not([class*="nav"]),
html.theme-dark a:not(.btn):not([class*="nav"]) {
    color: var(--color-primary-400, var(--primary));
}