/**
 * CGRMAXX — Tema Centralizado
 * Paleta clara, azul primário + teal, tipografia IBM Plex.
 * Carregar APÓS o style local de cada página para sobrescrever variáveis.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Força variáveis CGRMAXX em CIMA de qualquer :root local escuro */
:root, html {
  /* ── Backgrounds ── */
  --bg:        #EEF1F6 !important;
  --surface:   #ffffff !important;
  --surf2:     #F1F5FA !important;
  --surf3:     #F6F8FC !important;

  /* ── Bordas ── */
  --border:    #E7ECF3 !important;
  --bord2:     #E3E9F2 !important;

  /* ── Texto ── */
  --text:      #0F1B2D !important;
  --text2:     #52627A !important;
  --muted:     #8A97AC !important;
  --muted2:    #9AA7BD !important;

  /* ── Acentos CGRMAXX ── */
  --azul:      #1E5EFF;     /* azul primário */
  --azul-deep: #1442C4;     /* azul profundo (hover) */
  --azul-soft: #4D86FF;     /* azul claro */
  --azul-tint: #EAF0FF;     /* fundo tinta azul */
  --azul-fade: rgba(30,94,255,.10);

  --teal:      #0FB5A6;     /* teal / online */
  --teal-soft: #2BD4C4;
  --teal-tint: #E7F7F4;
  --teal-fade: rgba(15,181,166,.10);

  --ambar:     #E08A0B;     /* ambar / ADM */
  --ambar-tint:#FEF3E1;
  --ambar-fade:rgba(224,138,11,.10);

  --red:       #E5484D;     /* alerta */
  --red-tint:  #FDECEC;
  --red-fade:  rgba(229,72,77,.10);

  /* Aliases pra compatibilidade com telas antigas */
  --purple:    var(--azul) !important;
  --purple2:   var(--azul-deep) !important;
  --purple-fade: var(--azul-fade) !important;
  --green:     var(--teal) !important;
  --green2:    #0A8778 !important;
  --green-fade:var(--teal-fade) !important;
  --amber:     var(--ambar) !important;
  --amber-fade:var(--ambar-fade) !important;
  --cyan:      var(--azul) !important;
  --cyan-fade: var(--azul-fade) !important;
  --accent:    var(--azul) !important;
  --pink:      var(--teal) !important;
  --gray:      var(--muted) !important;

  /* Severidades Zabbix — versão clara */
  --sev0: #8A97AC !important;
  --sev1: #4D86FF !important;
  --sev2: #E08A0B !important;
  --sev3: #E08A0B !important;
  --sev4: #E5484D !important;
  --sev5: #E5484D !important;

  /* ── Gradientes CGRMAXX ── */
  --gradient-brand: linear-gradient(150deg, #1442C4 0%, #1E5EFF 55%, #0FB5A6 130%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(30,94,255,.12) 0%, rgba(15,181,166,.12) 100%);
  --gradient-primary: linear-gradient(135deg, #1E5EFF, #0FB5A6);

  /* ── Sombras ── */
  --shadow-sm: 0 1px 2px rgba(15,27,45,.05);
  --shadow:    0 1px 2px rgba(15,27,45,.05), 0 4px 12px rgba(15,27,45,.06);
  --shadow-lg: 0 1px 2px rgba(15,27,45,.05), 0 18px 50px rgba(15,27,45,.10);
  --shadow-blue: 0 6px 16px rgba(30,94,255,.28);

  /* ── Tipografia ── */
  --font-title: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;
  --font-body:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', 'JetBrains Mono', monospace;
  --body:       'IBM Plex Sans', system-ui, sans-serif;
  --mono:       'IBM Plex Mono', 'JetBrains Mono', monospace;
}

/* Força fundo e cor no body */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* Títulos */
h1, h2, h3, h4, .page-title, .card-title {
  font-family: var(--font-title) !important;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Inputs, selects, textareas em tema claro */
input, textarea, select {
  background: var(--surf2) !important;
  border: 1px solid var(--bord2) !important;
  color: var(--text) !important;
  border-radius: 8px;
  font-family: var(--font-body);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  background: #fff !important;
  border-color: var(--azul) !important;
  box-shadow: 0 0 0 3px var(--azul-fade) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--muted2) !important; }

/* Labels */
label {
  color: var(--text) !important;
  font-weight: 500;
}

/* Botões primários */
.btn-p, .btn-primary, .btn-purple {
  background: var(--azul) !important;
  border-color: var(--azul) !important;
  color: #fff !important;
  box-shadow: var(--shadow-blue);
  font-weight: 600;
}
.btn-p:hover, .btn-primary:hover, .btn-purple:hover {
  background: var(--azul-deep) !important;
  border-color: var(--azul-deep) !important;
}
.btn-g, .btn-green {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
.btn-r, .btn-red {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

/* Botão outline padrão */
.btn {
  background: #fff;
  border: 1px solid var(--bord2);
  color: var(--text);
  font-family: var(--font-body);
  transition: .15s;
}
.btn:hover:not(:disabled) {
  background: var(--surf2);
  border-color: var(--muted);
}

/* Cards */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm);
}
.card-title {
  color: var(--azul) !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}

/* Tabelas */
table {
  font-family: var(--font-body);
}
th {
  background: var(--surf2) !important;
  color: var(--text2) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border) !important;
}
td {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
tr:hover td { background: var(--surf2) !important; }

/* Pills / badges */
.pill, .badge {
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  border-radius: 999px !important;
}
.pill-ok, .pill-verde { background: var(--teal-tint) !important; color: #0A8778 !important; }
.pill-warn, .pill-amarelo { background: var(--ambar-tint) !important; color: #B36908 !important; }
.pill-no, .pill-vermelho, .pill-crit { background: var(--red-tint) !important; color: #B01F24 !important; }
.pill-info, .pill-azul { background: var(--azul-tint) !important; color: var(--azul) !important; }

/* Sidebar (quando existe) */
.sidebar {
  background: #fff !important;
  border-right: 1px solid var(--border) !important;
}
.nav-item {
  color: var(--text2) !important;
  font-family: var(--font-body);
  transition: .15s;
}
.nav-item:hover {
  background: var(--surf2) !important;
  color: var(--text) !important;
}
.nav-item.active {
  background: var(--azul-tint) !important;
  color: var(--azul) !important;
  border-left-color: var(--azul) !important;
  font-weight: 600;
}

/* Topbar */
#cir-topbar, .cir-topbar {
  background: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: none !important;
}
.cir-back { color: var(--muted) !important; font-family: var(--font-mono); }
.cir-back:hover { color: var(--azul) !important; }
.cir-title { color: var(--text) !important; font-family: var(--font-title) !important; }
.cir-title span { color: var(--azul) !important; }

/* Modais */
.overlay { background: rgba(15,27,45,.55) !important; backdrop-filter: blur(6px); }
.modal {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg);
}

/* Toasts */
.toast {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.toast.ok { border-left: 3px solid var(--teal) !important; }
.toast.err { border-left: 3px solid var(--red) !important; }
.toast.inf { border-left: 3px solid var(--azul) !important; }

/* Scrollbar clara */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surf2); }
::-webkit-scrollbar-thumb { background: var(--bord2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Links */
a { color: var(--azul); }
a:hover { color: var(--azul-deep); }

/* Barra de usuário */
#cir-user-bar { color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   OVERRIDES ESPECÍFICOS PRA TELAS COM FUNDO ESCURO HARDCODED
   ══════════════════════════════════════════════════════════════ */

/* Headers TV / topbar antigos */
.tv-header, .cir-topbar, #cir-topbar {
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.tv-header h1, .tv-header .logo, .tv-header .tv-clock {
  color: var(--text) !important;
}
.tv-header .logo { color: var(--azul) !important; }
.tv-header .logo .dot { color: var(--teal) !important; }
.tv-clock { color: var(--azul) !important; }
.tv-sync { color: var(--muted) !important; }

/* Botões TV */
.tv-btn {
  background: #fff !important;
  border: 1px solid var(--bord2) !important;
  color: var(--text) !important;
}
.tv-btn:hover { background: var(--surf2) !important; }

/* Mini stats no header do TV */
.mini-stat {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.mini-stat .lbl { color: var(--muted) !important; }
.mini-stat .val { color: var(--text) !important; }
.mini-stat.ok .val { color: #0A8778 !important; }
.mini-stat.warn .val { color: var(--ambar) !important; }
.mini-stat.crit .val { color: var(--red) !important; }

/* Corpo TV */
.tv-body, .tv-body-title {
  background: transparent !important;
  color: var(--text) !important;
}
.tv-body-title { color: var(--text2) !important; }

/* Cards de problemas (grid TV) */
.prob-card, .prob-item {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Cards genéricos com fundo escuro */
[style*="background:#0a"], [style*="background: #0a"],
[style*="background:#06"], [style*="background: #06"],
[style*="background:#0d"], [style*="background: #0d"] {
  background: #fff !important;
  color: var(--text) !important;
}

/* Modais escuros */
.modal-ack {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.mh {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.mclose { color: var(--muted) !important; }
.mclose:hover { color: var(--text) !important; }

/* Filtros de problemas (Todos / Não reconhecidos / Reconhecidos) */
.filter, .flt-btn, .filtro-btn {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}
.filter.active, .flt-btn.active, .filtro-btn.active {
  background: var(--azul) !important;
  border-color: var(--azul) !important;
  color: #fff !important;
}

/* Overlay escuro só o backdrop, modal claro */
.overlay {
  background: rgba(15,27,45,.55) !important;
  backdrop-filter: blur(6px);
}

/* Se ainda tiver algo com texto branco em fundo branco */
[style*="color:#fff"]:not(.brand-side *):not(.hero *):not(.top *):not(.brand-mark):not(.badge-live *):not(.mod-arrow):not(.btn-p):not(.btn-primary):not(.rail-avatar):not(.user-avatar):not(.mb-live *):not(.pop-marker *):not(.tv-btn):not(.badge) {
  /* deixa o inline como está — CSS não tem como pegar isso mesmo */
}