/* ═══════════════════════════════════════════════════════════════
   SysRepWeb — Sistema de Temas Global
   Aplica em: login, dashboard, relatórios, todas as telas
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Variáveis base (herdadas por todos os temas) ─────────────── */
:root {
  --transition: .2s ease;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.16);
  --font: 'Roboto', 'Inter', system-ui, sans-serif;
  /* Tamanho base — sobrescrito por themes.js (modal Fonte) em todas as telas */
  --base-font-size: 13px;
  --letter-spacing: -0.01em;
  --glass-bg: #ffffff;
  --glass-blur: none;
  --btn-text: #ffffff;
  --text2: #64748b;
  --input-border: #cbd5e1;
  /* Topbar interativo — padrão dark topbar (válido para quase todos os temas) */
  --topbar-btn-bg:           rgba(255,255,255,.08);
  --topbar-btn-border:       rgba(255,255,255,.12);
  --topbar-btn-hover:        rgba(255,255,255,.16);
  --topbar-btn-hover-color:  #ffffff;
  --topbar-avatar-border:    rgba(255,255,255,.22);
  --topbar-tab-color:        rgba(255,255,255,.42);
  --topbar-tab-hover-color:  rgba(255,255,255,.72);
  --topbar-tab-active-color: rgba(255,255,255,.92);
  --topbar-tab-hover-bg:     rgba(255,255,255,.06);
  --topbar-tab-active-bg:    rgba(255,255,255,.11);
  --topbar-separator:        rgba(255,255,255,.07);
  --topbar-dim-text:         rgba(255,255,255,.28);
  --topbar-toggle-hover:     rgba(255,255,255,.10);
}

/* Forçar fundos sólidos em elementos críticos em todo o projeto */
.glass-panel, .card, .modal-content, .slide-panel, .dropdown-menu, .nav-dropdown,
.ins-card, .kpi-card, .metric-card, .form-card, .drawer, .modal-diamond-card,
.dropdown-item:hover, .autocomplete-results,
.toolbar-bar, .form-actions-bar, .tabs-bar-wrap, .panel-head, .panel-foot,
.drawer-header, .drawer-footer, .modal-header, .modal-footer, .subbar,
.dataTable td, .dataTable th, .list-item, .hist-item, .search-box input,
.drop-mod-header, .drop-search-wrap, .drop-item,
.timeline-panel, .side-panel, .toolbar, .filter-bar,
.action-bar, .sub-toolbar, .panel-body, .modal-body {
  background: var(--glass-bg) !important;
  color: var(--content-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}
/* Topbar e sidebar usam suas próprias variáveis estruturais */
.topbar  { background: var(--topbar-bg)  !important; color: var(--topbar-text)  !important; }
.sidebar { background: var(--sidebar-bg) !important; color: var(--sidebar-text) !important; }

/* Garantir que inputs de busca em temas escuros sejam legíveis */
input::placeholder {
  color: var(--content-text) !important;
  opacity: 0.6 !important;
}
input {
  color: var(--content-text) !important;
}

/* ── SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── MODO COMPACTO GLOBAL ── */
body.sys-compact { --base-padding: 6px 10px; --base-gap: 4px; }
body.sys-compact td, body.sys-compact th { padding: var(--base-padding) !important; }
body.sys-compact .form-grid, body.sys-compact .form-grid-4 { gap: 10px !important; }
body.sys-compact .toolbar, body.sys-compact .subbar { padding: 4px 16px !important; }

body {
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════
   0. TEMA SISTEMA (padrão NC Sistemas)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="sistema"] {
  --sidebar-bg:        #1e293b;
  --sidebar-text:      #94a3b8;
  --sidebar-hover:     #334155;
  --sidebar-active:    #475569;
  --sidebar-border:    #334155;
  --sidebar-icon:      #64748b;

  --topbar-bg:         #1e293b;
  --topbar-text:       #e2e8f0;
  --topbar-border:     #334155;

  --statusbar-bg:      #0f172a;
  --statusbar-border:  #1e293b;
  --statusbar-text:    #64748b;

  --accent:            #0ea5e9;
  --accent-hover:      #0284c7;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(14,165,233,.12);

  --content-bg:        #f1f5f9;
  --content-text:      #1e293b;
  --text2:             #64748b;
  --input-border:      #cbd5e1;

  --timeline-header:   #1e293b;
  --timeline-item-hover: #f0f9ff;
  --timeline-border:   #e2e8f0;
  --timeline-link:     #0284c7;

  --login-bg:          #e2e7ef;
  --login-card-bg:     #ffffff;
  --login-card-border: #dce1ea;
  --login-label:       #334155;
  --login-input-bg:    #ffffff;
  --login-input-border:#cbd5e1;
  --login-input-focus: #0ea5e9;
  --login-btn-bg:      #1e293b;
  --login-btn-hover:   #334155;
  --login-btn-text:    #ffffff;
  --login-footer-text: #64748b;
  --login-logo-color:  #1e293b;

  --card-bg:           #ffffff;
  --card-border:       #e2e8f0;
  --card-hover:        #f0f9ff;

  --table-header-bg:   #f8fafc;
  --table-row-hover:   #f0f9ff;
  --table-border:      #e2e8f0;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #e0f2fe; --badge-info-text:    #0369a1;

  --glass-bg:          #ffffff;
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Tema Sistema";
  /* ── aliases usados pelas páginas ── */
  --border:        #e2e8f0;
  --bg:            #f1f5f9;
  --bg2:           #f8fafc;
  --text:          #1e293b;
  --card:          #ffffff;
  --hover:         #f0f9ff;
  --input-bg:      #ffffff;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    14,165,233;
  --text-secondary:#64748b;
  --bg-secondary:  #f8fafc;
}

/* ══════════════════════════════════════════════════════════════════
   1. DARK CLASSIC
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --sidebar-bg:        #2c2c2c;
  --sidebar-text:      #cccccc;
  --sidebar-hover:     #3a3a3a;
  --sidebar-active:    #4a4a4a;
  --sidebar-border:    #3a3a3a;
  --sidebar-icon:      #aaaaaa;

  --topbar-bg:         #2c2c2c;
  --topbar-text:       #dddddd;
  --topbar-border:     #444444;

  --statusbar-bg:      #2c2c2c;
  --statusbar-border:  #444444;
  --statusbar-text:    #aaaaaa;

  --accent:            #5b8dee;
  --accent-hover:      #4a7de0;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(91,141,238,.15);

  --content-bg:        #0f172a;
  --content-text:      #e2e8f0;

  --timeline-header:   #2c2c2c;
  --timeline-item-hover: rgba(255,255,255,0.05);
  --timeline-border:   #334155;
  --timeline-link:     #5b8dee;

  --login-bg:          #0f172a;
  --login-card-bg:     #1e293b;
  --login-card-border: #334155;
  --login-label:       #94a3b8;
  --login-input-bg:    #0f172a;
  --login-input-border:#334155;
  --login-input-focus: #5b8dee;
  --login-btn-bg:      #5b8dee;
  --login-btn-hover:   #4a7de0;
  --login-btn-text:    #ffffff;
  --login-footer-text: #64748b;
  --login-logo-color:  #ffffff;

  --card-bg:           #1e293b;
  --card-border:       #334155;
  --card-hover:        #293548;

  --table-header-bg:   #0f172a;
  --table-row-hover:   #1e293b;
  --table-border:      #334155;

  --badge-success-bg:  #065f46; --badge-success-text: #ffffff;
  --badge-warning-bg:  #92400e; --badge-warning-text: #ffffff;
  --badge-danger-bg:   #991b1b; --badge-danger-text:  #ffffff;
  --badge-info-bg:     #1e40af; --badge-info-text:    #ffffff;

  --glass-bg:          #1e293b;
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Dark Classic";
  /* ── aliases usados pelas páginas ── */
  --border:        #334155;
  --bg:            #0f172a;
  --bg2:           #1e293b;
  --text:          #e2e8f0;
  --card:          #1e293b;
  --hover:         #293548;
  --input-bg:      #0f172a;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    91,141,238;
  --text-secondary:#94a3b8;
  --bg-secondary:  #1e293b;
}

/* Controles nativos (date, time, select, color) — evita fundo branco no Chrome/Edge */
html[data-theme="dark"],
html[data-theme="sgi"],
html[data-theme="diamond"] {
  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════
   2. LIGHT CLEAN
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --sidebar-bg:        #f4f5f7;
  --sidebar-text:      #3d4460;
  --sidebar-hover:     #e8eaf0;
  --sidebar-active:    #dde1f0;
  --sidebar-border:    #e0e3ea;
  --sidebar-icon:      #5b6887;

  --topbar-bg:         #ffffff;
  --topbar-text:       #3d4460;
  --topbar-border:     #e0e3ea;

  --statusbar-bg:      #f4f5f7;
  --statusbar-border:  #e0e3ea;
  --statusbar-text:    #5b6887;

  --accent:            #4361ee;
  --accent-hover:      #3451d1;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(67,97,238,.1);

  --content-bg:        #f9fafb;
  --content-text:      #1e2433;
  --text2:             #64748b;
  --input-border:      #cbd5e1;

  --timeline-header:   #3d4460;
  --timeline-item-hover: #f0f1f5;
  --timeline-border:   #e8eaf0;
  --timeline-link:     #4361ee;

  --login-bg:          #f0f2f8;
  --login-card-bg:     #ffffff;
  --login-card-border: #e0e3ea;
  --login-label:       #3d4460;
  --login-input-bg:    #ffffff;
  --login-input-border:#d0d4e4;
  --login-input-focus: #4361ee;
  --login-btn-bg:      #4361ee;
  --login-btn-hover:   #3451d1;
  --login-btn-text:    #ffffff;
  --login-footer-text: #8891b0;
  --login-logo-color:  #3d4460;

  --card-bg:           #ffffff;
  --card-border:       #e8eaf0;
  --card-hover:        #f4f5f7;

  --table-header-bg:   #f4f5f7;
  --table-row-hover:   #f0f2f8;
  --table-border:      #e8eaf0;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #dbeafe; --badge-info-text:    #1e40af;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Light Clean";
  /* Topbar claro — inverte as transparências */
  --topbar-btn-bg:           rgba(0,0,0,.05);
  --topbar-btn-border:       rgba(0,0,0,.1);
  --topbar-btn-hover:        rgba(0,0,0,.09);
  --topbar-btn-hover-color:  #3d4460;
  --topbar-avatar-border:    rgba(0,0,0,.15);
  --topbar-tab-color:        rgba(0,0,0,.45);
  --topbar-tab-hover-color:  rgba(0,0,0,.75);
  --topbar-tab-active-color: rgba(0,0,0,.88);
  --topbar-tab-hover-bg:     rgba(0,0,0,.05);
  --topbar-tab-active-bg:    rgba(0,0,0,.09);
  --topbar-separator:        rgba(0,0,0,.07);
  --topbar-dim-text:         rgba(0,0,0,.28);
  --topbar-toggle-hover:     rgba(0,0,0,.08);
  /* ── aliases usados pelas páginas ── */
  --border:        #e8eaf0;
  --bg:            #f9fafb;
  --bg2:           #f4f5f7;
  --text:          #1e2433;
  --card:          #ffffff;
  --hover:         #f4f5f7;
  --input-bg:      #ffffff;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    67,97,238;
  --text-secondary:#64748b;
  --bg-secondary:  #f4f5f7;
}

/* ══════════════════════════════════════════════════════════════════
   3. BLUE OCEAN (estilo Salesforce)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="blue"] {
  --sidebar-bg:        #0b2447;
  --sidebar-text:      #a8c1e8;
  --sidebar-hover:     #153567;
  --sidebar-active:    #1d4285;
  --sidebar-border:    #153060;
  --sidebar-icon:      #7aaad4;

  --topbar-bg:         #0b2447;
  --topbar-text:       #d0e4f7;
  --topbar-border:     #153060;

  --statusbar-bg:      #071a35;
  --statusbar-border:  #0b2447;
  --statusbar-text:    #7aaad4;

  --accent:            #0ea5e9;
  --accent-hover:      #0284c7;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(14,165,233,.15);

  --content-bg:        #f0f6ff;
  --content-text:      #0b2447;
  --text2:             #6a82a8;
  --input-border:      #a8c1e8;

  --timeline-header:   #0b2447;
  --timeline-item-hover: #e8f0fc;
  --timeline-border:   #d8e8f8;
  --timeline-link:     #0284c7;

  --login-bg:          #e8f0fc;
  --login-card-bg:     #ffffff;
  --login-card-border: #c8daf0;
  --login-label:       #0b2447;
  --login-input-bg:    #f4f8ff;
  --login-input-border:#b8d0ea;
  --login-input-focus: #0ea5e9;
  --login-btn-bg:      #0b2447;
  --login-btn-hover:   #153567;
  --login-btn-text:    #ffffff;
  --login-footer-text: #6a90b8;
  --login-logo-color:  #0b2447;

  --card-bg:           #ffffff;
  --card-border:       #d0e4f7;
  --card-hover:        #e8f0fc;

  --table-header-bg:   #e8f0fc;
  --table-row-hover:   #f0f6ff;
  --table-border:      #d0e4f7;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #dbeafe; --badge-info-text:    #1e40af;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Blue Ocean";
  /* ── aliases usados pelas páginas ── */
  --border:        #d0e4f7;
  --bg:            #f0f6ff;
  --bg2:           #e8f0fc;
  --text:          #0b2447;
  --card:          #ffffff;
  --hover:         #e8f0fc;
  --input-bg:      #f4f8ff;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    14,165,233;
  --text-secondary:#6a82a8;
  --bg-secondary:  #e8f0fc;
}

/* ══════════════════════════════════════════════════════════════════
   4. PURPLE PRO (estilo Monday.com)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="purple"] {
  --sidebar-bg:        #2c1654;
  --sidebar-text:      #c4a8e8;
  --sidebar-hover:     #3d2070;
  --sidebar-active:    #4e298a;
  --sidebar-border:    #3a1e6a;
  --sidebar-icon:      #a87dd4;

  --topbar-bg:         #2c1654;
  --topbar-text:       #ddd0f5;
  --topbar-border:     #3a1e6a;

  --statusbar-bg:      #1e0e3c;
  --statusbar-border:  #2c1654;
  --statusbar-text:    #a87dd4;

  --accent:            #9b59f5;
  --accent-hover:      #8345e0;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(155,89,245,.15);

  --content-bg:        #faf8ff;
  --content-text:      #2c1654;

  --timeline-header:   #2c1654;
  --timeline-item-hover: #f3eeff;
  --timeline-border:   #e8ddf8;
  --timeline-link:     #7c3aed;

  --login-bg:          #f0ebfc;
  --login-card-bg:     #ffffff;
  --login-card-border: #d8c8f0;
  --login-label:       #2c1654;
  --login-input-bg:    #faf8ff;
  --login-input-border:#c8b0e8;
  --login-input-focus: #9b59f5;
  --login-btn-bg:      #2c1654;
  --login-btn-hover:   #3d2070;
  --login-btn-text:    #ffffff;
  --login-footer-text: #8870a8;
  --login-logo-color:  #2c1654;

  --card-bg:           #ffffff;
  --card-border:       #e8ddf8;
  --card-hover:        #f3eeff;

  --table-header-bg:   #f3eeff;
  --table-row-hover:   #faf8ff;
  --table-border:      #e8ddf8;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #ede9fe; --badge-info-text:    #5b21b6;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Purple Pro";
  /* ── aliases usados pelas páginas ── */
  --border:        #e8ddf8;
  --bg:            #faf8ff;
  --bg2:           #f3eeff;
  --text:          #2c1654;
  --card:          #ffffff;
  --hover:         #f3eeff;
  --input-bg:      #faf8ff;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    155,89,245;
  --text-secondary:#8870a8;
  --bg-secondary:  #f3eeff;
}

/* ══════════════════════════════════════════════════════════════════
   5. GREEN FRESH (estilo Freshworks)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="green"] {
  --sidebar-bg:        #0a3d2e;
  --sidebar-text:      #88c9b0;
  --sidebar-hover:     #0f5240;
  --sidebar-active:    #156650;
  --sidebar-border:    #0d4836;
  --sidebar-icon:      #66b89a;

  --topbar-bg:         #0a3d2e;
  --topbar-text:       #c0e8d8;
  --topbar-border:     #0d4836;

  --statusbar-bg:      #062a1f;
  --statusbar-border:  #0a3d2e;
  --statusbar-text:    #66b89a;

  --accent:            #10b981;
  --accent-hover:      #059669;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(16,185,129,.15);

  --content-bg:        #f0fdf8;
  --content-text:      #0a3d2e;

  --timeline-header:   #0a3d2e;
  --timeline-item-hover: #e8faf2;
  --timeline-border:   #c8ead8;
  --timeline-link:     #059669;

  --login-bg:          #e8f5ee;
  --login-card-bg:     #ffffff;
  --login-card-border: #b8ddc8;
  --login-label:       #0a3d2e;
  --login-input-bg:    #f4fdf8;
  --login-input-border:#a8d0b8;
  --login-input-focus: #10b981;
  --login-btn-bg:      #0a3d2e;
  --login-btn-hover:   #0f5240;
  --login-btn-text:    #ffffff;
  --login-footer-text: #5a9070;
  --login-logo-color:  #0a3d2e;

  --card-bg:           #ffffff;
  --card-border:       #c8ead8;
  --card-hover:        #e8faf2;

  --table-header-bg:   #e8faf2;
  --table-row-hover:   #f0fdf8;
  --table-border:      #c8ead8;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #d1fae5; --badge-info-text:    #065f46;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Green Fresh";
  /* ── aliases usados pelas páginas ── */
  --border:        #c8ead8;
  --bg:            #f0fdf8;
  --bg2:           #e8faf2;
  --text:          #0a3d2e;
  --card:          #ffffff;
  --hover:         #e8faf2;
  --input-bg:      #f4fdf8;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    16,185,129;
  --text-secondary:#5a9070;
  --bg-secondary:  #e8faf2;
}

/* ══════════════════════════════════════════════════════════════════
   6. MIDNIGHT NAVY
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="navy"] {
  --sidebar-bg:        #0f172a;
  --sidebar-text:      #94a3b8;
  --sidebar-hover:     #1e293b;
  --sidebar-active:    #293548;
  --sidebar-border:    #1e293b;
  --sidebar-icon:      #64748b;

  --topbar-bg:         #0f172a;
  --topbar-text:       #cbd5e1;
  --topbar-border:     #1e293b;

  --statusbar-bg:      #0a1020;
  --statusbar-border:  #1e293b;
  --statusbar-text:    #64748b;

  --accent:            #38bdf8;
  --accent-hover:      #0ea5e9;
  --accent-text:       #0f172a;
  --accent-soft:       rgba(56,189,248,.15);

  --content-bg:        #f8fafc;
  --content-text:      #0f172a;

  --timeline-header:   #0f172a;
  --timeline-item-hover: #f1f5f9;
  --timeline-border:   #e2e8f0;
  --timeline-link:     #0284c7;

  --login-bg:          #e2e8f4;
  --login-card-bg:     #ffffff;
  --login-card-border: #cbd5e1;
  --login-label:       #1e293b;
  --login-input-bg:    #f8fafc;
  --login-input-border:#cbd5e1;
  --login-input-focus: #38bdf8;
  --login-btn-bg:      #0f172a;
  --login-btn-hover:   #1e293b;
  --login-btn-text:    #ffffff;
  --login-footer-text: #64748b;
  --login-logo-color:  #0f172a;

  --card-bg:           #ffffff;
  --card-border:       #e2e8f0;
  --card-hover:        #f1f5f9;

  --table-header-bg:   #f1f5f9;
  --table-row-hover:   #f8fafc;
  --table-border:      #e2e8f0;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #e0f2fe; --badge-info-text:    #0369a1;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #0f172a;
  --theme-name: "Midnight Navy";
  /* ── aliases usados pelas páginas ── */
  --border:        #e2e8f0;
  --bg:            #f8fafc;
  --bg2:           #f1f5f9;
  --text:          #0f172a;
  --card:          #ffffff;
  --hover:         #f1f5f9;
  --input-bg:      #f8fafc;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    56,189,248;
  --text-secondary:#64748b;
  --bg-secondary:  #f1f5f9;
}

/* ══════════════════════════════════════════════════════════════════
   7. ORANGE BOLD
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="orange"] {
  --sidebar-bg:        #431407;
  --sidebar-text:      #fdba74;
  --sidebar-hover:     #6b2111;
  --sidebar-active:    #882a15;
  --sidebar-border:    #5a1a0d;
  --sidebar-icon:      #fb923c;

  --topbar-bg:         #431407;
  --topbar-text:       #fed7aa;
  --topbar-border:     #5a1a0d;

  --statusbar-bg:      #2d0d04;
  --statusbar-border:  #431407;
  --statusbar-text:    #fb923c;

  --accent:            #f97316;
  --accent-hover:      #ea6c0a;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(249,115,22,.15);

  --content-bg:        #fff8f4;
  --content-text:      #431407;

  --timeline-header:   #431407;
  --timeline-item-hover: #fff3ec;
  --timeline-border:   #fde0cc;
  --timeline-link:     #c2410c;

  --login-bg:          #fff0e8;
  --login-card-bg:     #ffffff;
  --login-card-border: #fcd5b0;
  --login-label:       #431407;
  --login-input-bg:    #fff8f4;
  --login-input-border:#fcc09a;
  --login-input-focus: #f97316;
  --login-btn-bg:      #431407;
  --login-btn-hover:   #6b2111;
  --login-btn-text:    #ffffff;
  --login-footer-text: #9a6048;
  --login-logo-color:  #431407;

  --card-bg:           #ffffff;
  --card-border:       #fde0cc;
  --card-hover:        #fff3ec;

  --table-header-bg:   #fff3ec;
  --table-row-hover:   #fff8f4;
  --table-border:      #fde0cc;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fff3ec; --badge-warning-text: #9a3412;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #ffedd5; --badge-info-text:    #9a3412;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Orange Bold";
  /* ── aliases usados pelas páginas ── */
  --border:        #fde0cc;
  --bg:            #fff8f4;
  --bg2:           #fff3ec;
  --text:          #431407;
  --card:          #ffffff;
  --hover:         #fff3ec;
  --input-bg:      #fff8f4;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    249,115,22;
  --text-secondary:#9a6048;
  --bg-secondary:  #fff3ec;
}

/* ══════════════════════════════════════════════════════════════════
   9. GRAY SOFT (cinza claro — neutro profissional)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="gray"] {
  --sidebar-bg:        #4a4e5a;
  --sidebar-text:      #d8dce8;
  --sidebar-hover:     #565b6a;
  --sidebar-active:    #62677a;
  --sidebar-border:    #555a6a;
  --sidebar-icon:      #b0b8cc;

  --topbar-bg:         #3e424e;
  --topbar-text:       #e0e4ef;
  --topbar-border:     #52576a;

  --statusbar-bg:      #33363f;
  --statusbar-border:  #44475a;
  --statusbar-text:    #9096a8;

  --accent:            #4361ee;
  --accent-hover:      #3451d1;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(67,97,238,.15);

  --content-bg:        #f5f6f8;
  --content-text:      #1e2433;

  --timeline-header:   #4a4e5a;
  --timeline-item-hover: #eef0f5;
  --timeline-border:   #e2e6ed;
  --timeline-link:     #3451d1;

  --login-bg:          #ecedf2;
  --login-card-bg:     #ffffff;
  --login-card-border: #d4d8e4;
  --login-label:       #3a3f52;
  --login-input-bg:    #f9f9fb;
  --login-input-border:#c8ccd8;
  --login-input-focus: #4361ee;
  --login-btn-bg:      #3e424e;
  --login-btn-hover:   #4a4e5a;
  --login-btn-text:    #ffffff;
  --login-footer-text: #7a8094;
  --login-logo-color:  #2c3042;

  --card-bg:           #ffffff;
  --card-border:       #e0e4ec;
  --card-hover:        #f0f2f7;

  --table-header-bg:   #f0f2f7;
  --table-row-hover:   #f5f6f8;
  --table-border:      #e2e6ed;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #fee2e2; --badge-danger-text:  #991b1b;
  --badge-info-bg:     #dbeafe; --badge-info-text:    #1e40af;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Gray Soft";
  /* ── aliases usados pelas páginas ── */
  --border:        #e0e4ec;
  --bg:            #f5f6f8;
  --bg2:           #f0f2f7;
  --text:          #1e2433;
  --card:          #ffffff;
  --hover:         #f0f2f7;
  --input-bg:      #f9f9fb;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    67,97,238;
  --text-secondary:#7a8094;
  --bg-secondary:  #f0f2f7;
}

/* ══════════════════════════════════════════════════════════════════
   8. ROSE DARK (elegante)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="rose"] {
  --sidebar-bg:        #1c0a14;
  --sidebar-text:      #e8a0c0;
  --sidebar-hover:     #2e1022;
  --sidebar-active:    #3d1530;
  --sidebar-border:    #2a0e1c;
  --sidebar-icon:      #d47095;

  --topbar-bg:         #1c0a14;
  --topbar-text:       #f0c0d8;
  --topbar-border:     #2a0e1c;

  --statusbar-bg:      #120608;
  --statusbar-border:  #1c0a14;
  --statusbar-text:    #d47095;

  --accent:            #f43f7a;
  --accent-hover:      #e0266a;
  --accent-text:       #ffffff;
  --accent-soft:       rgba(244,63,122,.15);

  --content-bg:        #fff5f8;
  --content-text:      #1c0a14;

  --timeline-header:   #1c0a14;
  --timeline-item-hover: #ffecf2;
  --timeline-border:   #fdd8e8;
  --timeline-link:     #be185d;

  --login-bg:          #ffe8f0;
  --login-card-bg:     #ffffff;
  --login-card-border: #fbb8d0;
  --login-label:       #1c0a14;
  --login-input-bg:    #fff5f8;
  --login-input-border:#f8a8c8;
  --login-input-focus: #f43f7a;
  --login-btn-bg:      #1c0a14;
  --login-btn-hover:   #2e1022;
  --login-btn-text:    #ffffff;
  --login-footer-text: #904060;
  --login-logo-color:  #1c0a14;

  --card-bg:           #ffffff;
  --card-border:       #fdd8e8;
  --card-hover:        #ffecf2;

  --table-header-bg:   #ffecf2;
  --table-row-hover:   #fff5f8;
  --table-border:      #fdd8e8;

  --badge-success-bg:  #d1fae5; --badge-success-text: #065f46;
  --badge-warning-bg:  #fef3c7; --badge-warning-text: #92400e;
  --badge-danger-bg:   #ffe4e6; --badge-danger-text:  #9f1239;
  --badge-info-bg:     #fce7f3; --badge-info-text:    #9d174d;

  --glass-bg:          var(--card-bg);
  --glass-blur:        none;
  --btn-text:          #ffffff;
  --theme-name: "Rose Dark";
  /* ── aliases usados pelas páginas ── */
  --border:        #fdd8e8;
  --bg:            #fff5f8;
  --bg2:           #ffecf2;
  --text:          #1c0a14;
  --card:          #ffffff;
  --hover:         #ffecf2;
  --input-bg:      #fff5f8;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    244,63,122;
  --text-secondary:#904060;
  --bg-secondary:  #ffecf2;
}

/* ══════════════════════════════════════════════════════════════════
   10. S.G.I PREMIUM (Paleta S.G.I WEB — Dark)
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="sgi"] {
  --sidebar-bg:        #111111;
  --sidebar-text:      #94a3b8;
  --sidebar-hover:     #1a1a1a;
  --sidebar-active:    #222222;
  --sidebar-border:    #222222;
  --sidebar-icon:      #00f2fe;

  --topbar-bg:         #111111;
  --topbar-text:       #ffffff;
  --topbar-border:     #222222;

  --statusbar-bg:      #0a0a0a;
  --statusbar-border:  #111111;
  --statusbar-text:    #94a3b8;

  --accent:            #00f2fe;
  --accent-hover:      #22d3ee;
  --accent-text:       #000000;
  --accent-soft:       rgba(0, 242, 254, 0.15);

  --content-bg:        #0f111a;
  --content-text:      #ffffff;
  --text2:             #94a3b8;
  --input-border:      #2d303e;

  --card-bg:           #1a1c26;
  --card-border:       #2d303e;
  --card-hover:        #252836;

  --table-header-bg:   #151720;
  --table-row-hover:   #1a1c26;
  --table-border:      #2d303e;

  --badge-success-bg:  #065f46; --badge-success-text: #ffffff;
  --badge-warning-bg:  #92400e; --badge-warning-text: #ffffff;
  --badge-danger-bg:   #991b1b; --badge-danger-text:  #ffffff;
  --badge-info-bg:     #1e40af; --badge-info-text:    #ffffff;

  --glass-bg:          #1a1c26;
  --glass-blur:        none;
  --btn-text:          #000000;
  --theme-name: "Premium";
  /* ── aliases usados pelas páginas ── */
  --border:        #2d303e;
  --bg:            #0f111a;
  --bg2:           #1a1c26;
  --text:          #ffffff;
  --card:          #1a1c26;
  --hover:         #252836;
  --input-bg:      #0f111a;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    0,242,254;
  --text-secondary:#94a3b8;
  --bg-secondary:  #1a1c26;
}

html[data-theme="diamond"] {
  --sidebar-bg:        #000000;
  --sidebar-text:      #ffffff;
  --sidebar-hover:     #111111;
  --sidebar-active:    #222222;
  --sidebar-border:    #333333;
  --sidebar-icon:      #ffffff;

  --topbar-bg:         #000000;
  --topbar-text:       #ffffff;
  --topbar-border:     #333333;

  --accent:            #ffffff;
  --accent-hover:      #f0f0f0;
  --accent-text:       #000000;
  --accent-soft:       rgba(255,255,255,.1);

  --content-bg:        #0a0a0a;
  --content-text:      #ffffff;
  --text2:             #a1a1aa;
  --input-border:      #333333;

  --card-bg:           #121212;
  --card-border:       #333333;
  --card-hover:        #1a1a1a;

  --table-header-bg:   #050505;
  --table-row-hover:   #121212;
  --table-border:      #333333;

  --glass-bg:          #121212;
  --glass-blur:        none;
  --btn-text:          #000000;
  --theme-name: "Diamond Black";
  /* ── aliases usados pelas páginas ── */
  --border:        #333333;
  --bg:            #0a0a0a;
  --bg2:           #121212;
  --text:          #ffffff;
  --card:          #121212;
  --hover:         #1a1a1a;
  --input-bg:      #0a0a0a;
  --radius-card:   12px;
  --radius-btn:    8px;
  --accent-rgb:    255,255,255;
  --text-secondary:#a1a1aa;
  --bg-secondary:  #121212;
}

/* ══════════════════════════════════════════════════════════════════
   OVERRIDES GLOBAIS — garantem que todos os elementos respondem ao tema
   Usam as variáveis aliases definidas em cada bloco html[data-theme]
   ══════════════════════════════════════════════════════════════════ */

/* Body e áreas de conteúdo */
body {
  background-color: var(--content-bg, var(--bg, #f8fafc));
  color: var(--content-text, var(--text, #1e293b));
}

/* Inputs, selects e textareas seguem o tema */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  background-color: var(--input-bg, var(--card-bg, #ffffff)) !important;
  color: var(--content-text, var(--text, #1e293b)) !important;
  border-color: var(--border, var(--card-border, #e2e8f0)) !important;
}

/* Scrollbar para temas escuros */
html[data-theme="dark"] *,
html[data-theme="sgi"] *,
html[data-theme="diamond"] * {
  scrollbar-color: #475569 #1e293b;
}
html[data-theme="dark"] ::-webkit-scrollbar,
html[data-theme="sgi"] ::-webkit-scrollbar,
html[data-theme="diamond"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track,
html[data-theme="sgi"] ::-webkit-scrollbar-track,
html[data-theme="diamond"] ::-webkit-scrollbar-track { background: var(--bg, #0f172a); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html[data-theme="sgi"] ::-webkit-scrollbar-thumb,
html[data-theme="diamond"] ::-webkit-scrollbar-thumb { background: var(--border, #334155); border-radius: 4px; }

/* Cor de placeholder em todos os inputs */
input::placeholder,
textarea::placeholder {
  color: var(--text-secondary, var(--text2, #94a3b8)) !important;
  opacity: 0.7 !important;
}

/* Fundo das linhas de tabela e headers */
table thead th {
  background-color: var(--table-header-bg, var(--bg2, #f8fafc)) !important;
  color: var(--content-text, var(--text, #1e293b)) !important;
  border-color: var(--border, var(--table-border, #e2e8f0)) !important;
}
table tbody td {
  border-color: var(--border, var(--table-border, #e2e8f0)) !important;
  color: var(--content-text, var(--text, #1e293b)) !important;
}
table tbody tr:hover td {
  background-color: var(--table-row-hover, var(--hover, #f1f5f9)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRESERVAR ESTADO ACTIVE/SELECIONADO
   .metric-card.active tem especificidade (0,2,0) > .metric-card (0,1,0)
   — vence a regra glass-bg !important mesmo ambas usando !important
   ══════════════════════════════════════════════════════════════════ */
.metric-card.active,
.ins-card.active,
.filter-btn.active,
.chip.active,
.vt-btn.active,
.fav-chip.active,
.pag-num.active,
.tab-btn.active,
.filter-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--btn-text, #fff) !important;
}

/* Texto interno de cards ativos */
.metric-card.active .mc-title,
.metric-card.active .mc-val,
.metric-card.active .mc-sub,
.ins-card.active .ins-val,
.ins-card.active .ins-label,
.ins-card.active .ins-sub {
  color: var(--btn-text, #fff) !important;
}
.metric-card.active .mc-sub strong {
  background: rgba(255,255,255,.25) !important;
  color: var(--btn-text, #fff) !important;
}
.metric-card.active .mc-icon,
.ins-card.active .ins-icon {
  background: rgba(255,255,255,.2) !important;
}

/* Focus ring global — usa --accent-soft para respeitar o tema ativo */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}

/* Bulk bar — separador e botão outline adaptam ao tema */
.bulk-info {
  border-right: 1px solid var(--border, rgba(0,0,0,.12)) !important;
}
.btn-bulk-outline {
  background: var(--hover, rgba(0,0,0,.06)) !important;
  color: var(--text, #1e293b) !important;
  border: 1px solid var(--border, rgba(0,0,0,.12)) !important;
}
.btn-bulk-outline:hover {
  background: var(--border, rgba(0,0,0,.15)) !important;
}