/* =====================================================
   KORE — Design System CSS  v2.0
   Compartilhado por todos os módulos operacionais
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* =====================================================
   TOKENS
   ===================================================== */
:root {

  /* --- Cor de fundo --- */
  --bg:          #050C1C;
  --bg2:         #091220;
  --bg3:         #0D1A2E;
  --glass:       rgba(255,255,255,0.035);
  --glass2:      rgba(255,255,255,0.06);
  --gb:          rgba(255,255,255,0.07);

  /* --- Paleta de marca --- */
  --blue:        #00CCFF;
  --blue-dim:    rgba(0,204,255,0.12);
  --blue-glow:   rgba(0,204,255,0.25);
  --purple:      #9B6DFF;
  --purple-dim:  rgba(155,109,255,0.12);
  --green:       #0FD986;
  --green-dim:   rgba(15,217,134,0.12);
  --yellow:      #FFB800;
  --yellow-dim:  rgba(255,184,0,0.12);
  --red:         #FF4559;
  --red-dim:     rgba(255,69,89,0.12);
  --orange:      #FF8C42;
  --orange-dim:  rgba(255,140,66,0.12);

  /* --- Tipografia — cores com contraste WCAG AA --- */
  --text:        #E4EDFF;   /* primário  — contraste ~16:1 */
  --text2:       #7A8FAD;   /* secundário — contraste ~6:1  */
  --text3:       #4E6580;   /* terciário — contraste ~4.5:1 (era #3D5070, ~2.4:1) */

  /* --- Tipografia — famílias --- */
  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* --- Grid de espaçamento (múltiplos de 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* --- Raios de borda (4 tokens + pill) --- */
  --r-xs:   4px;      /* tags compactas, deltas */
  --r-sm:   8px;      /* botões, inputs, itens de lista */
  --r-md:  12px;      /* cards (alias de --r) */
  --r-lg:  16px;      /* modais, painéis grandes */
  --r-full: 9999px;   /* pills, avatares circulares */
  --r:      12px;     /* compat com código existente */

  /* --- Curvas de animação premium --- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* elementos entrando */
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);       /* elementos saindo */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* spring sutil */
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);         /* uso geral (Material) */

  /* --- Layout --- */
  --sidebar-w:  230px;
  --topbar-h:    60px;
}

/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:14px; overflow:hidden;
}

/* =====================================================
   FOCO ACESSÍVEL — WCAG 2.1 AA
   ===================================================== */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Remove outline apenas para mouse — mantém para teclado */
:focus:not(:focus-visible) { outline: none; }

/* =====================================================
   BACKGROUND GLOW
   ===================================================== */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 15%, rgba(0,204,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 85%, rgba(155,109,255,0.05) 0%, transparent 60%);
  transition: background 0.6s var(--ease-out);
}
/* Variantes de glow por estado da aplicação */
[data-glow="alert"] body::before {
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,69,89,0.06), transparent 65%);
}
[data-glow="success"] body::before {
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(15,217,134,0.06), transparent 65%);
}

/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gb); border-radius:var(--r-full); }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.12); }

/* =====================================================
   LAYOUT PRINCIPAL
   ===================================================== */
.kore-app { display:flex; height:100vh; position:relative; z-index:1; }

/* =====================================================
   SIDEBAR
   ===================================================== */
.kore-sidebar {
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border-right:1px solid var(--gb);
  display:flex; flex-direction:column;
  padding:0; z-index:10; overflow:hidden;
  transition: width 0.25s var(--ease-out);
}

.sidebar-logo {
  display:flex; align-items:center; gap:var(--space-2);
  padding:18px var(--space-4) 14px;
  border-bottom:1px solid var(--gb);
  flex-shrink:0;
}
.sidebar-logo-mark {
  width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
  background:linear-gradient(135deg, var(--blue), var(--purple));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px var(--blue-glow);
}
.sidebar-logo-mark img { width:28px; height:28px; object-fit:contain; }
.sidebar-logo-text { display:flex; flex-direction:column; }
.sidebar-logo-text strong {
  font-family:var(--font-display); font-size:13px; font-weight:800;
  background:linear-gradient(90deg, var(--blue), var(--purple));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:0.5px;
}
.sidebar-logo-text span {
  font-size:9px; color:var(--text3); font-family:var(--font-mono);
  letter-spacing:1.5px; text-transform:uppercase;
}

.sidebar-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:var(--space-2) var(--space-1);
  display:flex; flex-direction:column; gap:2px;
}

.sidebar-section-label {
  font-size:9px; color:var(--text3); font-family:var(--font-mono);
  letter-spacing:1.5px; text-transform:uppercase;
  padding:var(--space-2) var(--space-2) var(--space-1);
  flex-shrink:0;
  transition: opacity 0.15s;
}

.nav-item {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2);
  border-radius:var(--r-sm);
  cursor:pointer;
  color:var(--text2); font-size:13px; font-weight:500;
  text-decoration:none; position:relative;
  border:1px solid transparent;
  white-space:nowrap; overflow:hidden;
  transition: background 0.15s var(--ease-out), color 0.15s, border-color 0.15s;
}
.nav-item:hover { background:var(--glass2); color:var(--text); }
.nav-item.active {
  background:linear-gradient(90deg, rgba(0,204,255,0.1), rgba(155,109,255,0.1));
  border-color:rgba(0,204,255,0.2);
  color:var(--text);
}
.nav-item.active::before {
  content:'';
  position:absolute; left:0; top:20%; bottom:20%; width:3px;
  background:linear-gradient(180deg, var(--blue), var(--purple));
  border-radius:0 3px 3px 0;
}
.nav-item-icon {
  font-size:15px; flex-shrink:0; width:18px; text-align:center;
  display:flex; align-items:center; justify-content:center;
}
.nav-item-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; transition: opacity 0.15s; }
.nav-item-badge {
  font-size:9px; font-family:var(--font-mono);
  background:var(--red-dim); color:var(--red);
  padding:1px 5px; border-radius:var(--r-full); flex-shrink:0;
}

.sidebar-footer {
  padding:var(--space-2) var(--space-1) 14px;
  border-top:1px solid var(--gb);
  flex-shrink:0;
}
.sidebar-reset-btn {
  width:100%; padding:var(--space-2) var(--space-3); border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--gb);
  color:var(--text3); font-size:11px; cursor:pointer;
  font-family:var(--font-body);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  text-align:left;
  display:flex; align-items:center; gap:var(--space-1);
}
.sidebar-reset-btn:hover { border-color:rgba(255,69,89,0.3); color:var(--red); background:var(--red-dim); }

/* =====================================================
   TOPBAR
   ===================================================== */
.kore-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.kore-topbar {
  height:var(--topbar-h); flex-shrink:0;
  background:rgba(9,18,32,0.95); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--gb);
  display:flex; align-items:center; gap:14px; padding:0 var(--space-5); z-index:9;
}

.topbar-breadcrumb {
  display:flex; align-items:center; gap:7px;
  font-size:12px; color:var(--text2);
}
.topbar-breadcrumb a {
  color:var(--text2); text-decoration:none; font-size:12px;
  transition:color 0.15s;
}
.topbar-breadcrumb a:hover { color:var(--blue); }
.topbar-breadcrumb-sep { color:var(--text3); }
.topbar-breadcrumb-current { color:var(--text); font-weight:600; }

.topbar-spacer { flex:1; }

.topbar-user {
  display:flex; align-items:center; gap:var(--space-2);
  padding:6px var(--space-2); border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--gb);
  cursor:pointer;
  transition: background 0.15s var(--ease-out);
}
.topbar-user:hover { background:var(--glass2); }
.topbar-user-avatar {
  width:28px; height:28px; border-radius:var(--r-full);
  background:linear-gradient(135deg, var(--blue), var(--purple));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#fff; flex-shrink:0;
}
.topbar-user-info { display:flex; flex-direction:column; }
.topbar-user-name { font-size:12px; font-weight:600; color:var(--text); }
.topbar-user-role { font-size:10px; color:var(--text3); }

.topbar-clock {
  font-family:var(--font-mono); font-size:13px; color:var(--text2);
  padding:6px var(--space-2); border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--gb);
}

.topbar-session-timer {
  font-family:var(--font-mono); font-size:12px; color:var(--green);
  padding:5px var(--space-2); border-radius:var(--r-sm);
  background:rgba(15,217,134,0.08); border:1px solid rgba(15,217,134,0.2);
  transition: color 0.4s, background 0.4s, border-color 0.4s;
}
.topbar-session-timer.warn {
  color:var(--yellow); background:rgba(255,184,0,0.08); border-color:rgba(255,184,0,0.25);
}
.topbar-session-timer.danger {
  color:var(--red); background:var(--red-dim); border-color:rgba(255,69,89,0.3);
  animation:pulse-danger 1s ease-in-out infinite;
}
@keyframes pulse-danger { 0%,100%{opacity:1} 50%{opacity:.6} }

/* =====================================================
   CONTENT AREA
   ===================================================== */
.kore-content {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:var(--space-5);
  position:relative;
}

/* =====================================================
   CARD
   ===================================================== */
.card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-md);
  padding:var(--space-5);
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  transition: background 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
  pointer-events:none;
}
.card.danger { border-color:rgba(255,69,89,0.25); background:rgba(255,69,89,0.04); }
.card.warn   { border-color:rgba(255,184,0,0.25);  background:rgba(255,184,0,0.04); }
.card.succ   { border-color:rgba(15,217,134,0.2);  background:rgba(15,217,134,0.04); }

/* =====================================================
   CARD TITLE
   ===================================================== */
.ct {
  font-family:var(--font-display); font-size:13px; font-weight:700;
  color:var(--text); letter-spacing:0.4px;
  margin-bottom:14px; display:flex; align-items:center; gap:7px;
}
.ct-dot { width:5px; height:5px; border-radius:var(--r-full); background:var(--blue); flex-shrink:0; }
.ct-badge { margin-left:auto; }

/* =====================================================
   MODULE HEADER
   ===================================================== */
.module-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:var(--space-5); gap:14px;
}
.module-title-wrap {}
.module-title {
  font-family:var(--font-display); font-size:22px; font-weight:800;
  color:var(--text); letter-spacing:0.3px;
  background:linear-gradient(90deg, var(--text), var(--text2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.module-subtitle { font-size:12px; color:var(--text2); margin-top:3px; }
.module-actions { display:flex; gap:var(--space-2); flex-shrink:0; align-items:center; }

/* =====================================================
   SECTION TITLE
   ===================================================== */
.section-title {
  font-family:var(--font-display);
  font-size:13px; font-weight:700;
  color:var(--text2); letter-spacing:0.02em;
  margin-bottom:var(--space-3);
  display:flex; align-items:center; gap:7px;
}

/* =====================================================
   KPI GRID
   ===================================================== */
.kpi-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.kpi-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--r-md); padding:var(--space-4) 18px;
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  transition: background 0.15s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.15s;
  cursor:default;
  position:relative; overflow:hidden;
}
.kpi-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
  pointer-events:none;
}
.kpi-card:hover {
  background:rgba(255,255,255,0.08);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,0.4);
}

/* =====================================================
   METRIC VALUES (KPIs)
   ===================================================== */
.mv {
  font-family:var(--font-mono);
  font-size:32px; font-weight:700;
  line-height:1.1; margin-bottom:var(--space-1);
  /* Sem text-shadow global — o contraste de cor e peso são suficientes */
}
/* Hero KPI: glow reservado para o número principal de uma tela */
.mv.hero { text-shadow:0 0 20px currentColor; }

.mv.b { color:var(--blue); }
.mv.g { color:var(--green); }
.mv.y { color:var(--yellow); }
.mv.r { color:var(--red); }
.mv.p { color:var(--purple); }

.ml { font-size:12px; color:var(--text2); font-weight:600; letter-spacing:0.3px; margin-bottom:3px; }
.mch { font-size:11px; color:var(--text3); margin-top:var(--space-1); display:flex; align-items:center; gap:5px; }

/* =====================================================
   BADGE
   ===================================================== */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px var(--space-2); border-radius:var(--r-full);
  font-size:10px; font-family:var(--font-mono);
  font-weight:500; white-space:nowrap;
}
.badge.b { background:var(--blue-dim);   color:var(--blue); }
.badge.g { background:var(--green-dim);  color:var(--green); }
.badge.y { background:var(--yellow-dim); color:var(--yellow); }
.badge.r { background:var(--red-dim);    color:var(--red); }
.badge.p { background:var(--purple-dim); color:var(--purple); }
.badge.o { background:var(--orange-dim); color:var(--orange); }
.badge.dim { background:rgba(255,255,255,0.06); color:var(--text2); }

/* =====================================================
   PROGRESS BAR
   ===================================================== */
.pbar { height:5px; background:rgba(255,255,255,0.06); border-radius:var(--r-full); overflow:hidden; margin-top:var(--space-1); }
.pfill { height:100%; border-radius:var(--r-full); transition:width 0.8s var(--ease-out); }
.pfill.b { background:linear-gradient(90deg, var(--blue), var(--purple)); }
.pfill.g { background:var(--green); }
.pfill.y { background:var(--yellow); }
.pfill.r { background:var(--red); }

/* =====================================================
   GRIDS
   ===================================================== */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.span2 { grid-column:span 2; }
.span3 { grid-column:span 3; }
.mb { margin-bottom:14px; }

/* =====================================================
   TABELA
   ===================================================== */
.kore-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.kore-table thead th {
  font-size:10px; text-transform:uppercase; letter-spacing:0.8px;
  color:var(--text3); font-family:var(--font-mono);
  padding:var(--space-2) var(--space-3); text-align:left;
  border-bottom:1px solid var(--gb); font-weight:500;
  cursor:pointer; user-select:none;
  transition: color 0.15s;
}
.kore-table thead th:hover { color:var(--text2); }
.kore-table thead th[aria-sort]::after {
  content: ' ↕';
  font-size:9px; opacity:0.5;
}
.kore-table thead th[aria-sort="ascending"]::after  { content: ' ↑'; opacity:1; color:var(--blue); }
.kore-table thead th[aria-sort="descending"]::after { content: ' ↓'; opacity:1; color:var(--blue); }
.kore-table tbody tr {
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition: background 0.12s var(--ease-out);
  cursor:pointer;
}
/* Zebra striping ultra-suave — ajuda rastreamento horizontal */
.kore-table tbody tr:nth-child(even) {
  background:rgba(255,255,255,0.018);
}
.kore-table tbody tr:hover { background:rgba(255,255,255,0.055); }
.kore-table tbody tr.selected { background:var(--blue-dim); border-color:rgba(0,204,255,0.15); }
.kore-table tbody td { padding:10px var(--space-3); color:var(--text2); }
.kore-table tbody td.primary { color:var(--text); font-weight:500; }
.kore-table tbody td.mono { font-family:var(--font-mono); font-size:12px; }
.kore-table tbody td.num { font-family:var(--font-mono); color:var(--text); }
/* Contador de resultados da tabela */
.table-meta {
  font-size:11px; color:var(--text3); font-family:var(--font-mono);
  margin-bottom:var(--space-2);
}

/* =====================================================
   BOTÕES
   ===================================================== */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:var(--space-2) var(--space-4); border-radius:var(--r-sm);
  font-size:12px; font-weight:600; cursor:pointer;
  transition:
    transform 0.15s var(--ease-out),
    box-shadow 0.15s var(--ease-out),
    background 0.15s var(--ease-out),
    border-color 0.15s,
    opacity 0.15s;
  border:1px solid transparent;
  font-family:var(--font-body);
  white-space:nowrap;
  position:relative; overflow:hidden;
}

.btn-primary {
  background:linear-gradient(135deg, var(--blue), var(--purple));
  color:#fff; border:none;
  box-shadow:0 4px 14px rgba(0,204,255,0.2);
}
.btn-primary:hover {
  box-shadow:0 6px 20px rgba(0,204,255,0.35);
  transform:translateY(-1px);
}

.btn-secondary {
  background:var(--glass2); color:var(--text); border-color:var(--gb);
}
.btn-secondary:hover { background:rgba(255,255,255,0.1); }

.btn-danger {
  background:var(--red-dim); color:var(--red); border-color:rgba(255,69,89,0.2);
}
.btn-danger:hover { background:rgba(255,69,89,0.2); }

.btn-sm { padding:5px var(--space-2); font-size:11px; }

/* --- Estado DISABLED --- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity:0.38;
  cursor:not-allowed;
  pointer-events:none;
  transform:none !important;
  box-shadow:none !important;
}

/* --- Estado LOADING --- */
.btn.loading {
  color:transparent;
  pointer-events:none;
}
.btn.loading::after {
  content:'';
  position:absolute;
  inset:0; margin:auto;
  width:14px; height:14px;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color:#fff;
  border-radius:var(--r-full);
  animation:spin 0.7s linear infinite;
}
/* Loading em botões não-brancos */
.btn-secondary.loading::after,
.btn-danger.loading::after {
  border-color:rgba(255,255,255,0.15);
  border-top-color:var(--text);
}

/* =====================================================
   SEARCH / FILTER
   ===================================================== */
.kore-search {
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--glass); border:1px solid var(--gb);
  border-radius:var(--r-sm); padding:0 var(--space-3);
  transition:border-color 0.18s var(--ease-out), background 0.18s;
}
.kore-search:focus-within {
  border-color:rgba(0,204,255,0.35);
  background:rgba(0,204,255,0.04);
}
.kore-search input {
  background:transparent; border:none; outline:none;
  color:var(--text); font-size:13px; font-family:var(--font-body);
  padding:var(--space-2) 0; flex:1;
}
.kore-search input::placeholder { color:var(--text3); }
.kore-search-icon { color:var(--text3); }

/* =====================================================
   ALERTS / ITEMS
   ===================================================== */
.alert-item {
  display:flex; align-items:flex-start; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); border-radius:var(--r-sm);
  background:rgba(255,69,89,0.05); border:1px solid rgba(255,69,89,0.12);
  margin-bottom:var(--space-2);
}
.alert-item.warn { background:rgba(255,184,0,0.05); border-color:rgba(255,184,0,0.12); }
.alert-item.info { background:var(--blue-dim); border-color:rgba(0,204,255,0.15); }
.alert-item-icon { font-size:15px; flex-shrink:0; margin-top:1px; }
.alert-item-body { flex:1; min-width:0; }
.alert-item-title { font-size:12px; font-weight:600; color:var(--text); margin-bottom:2px; }
.alert-item-desc { font-size:11px; color:var(--text2); }
.alert-item-time { font-size:10px; color:var(--text3); font-family:var(--font-mono); flex-shrink:0; }

/* Banner de alerta crítico — persistente abaixo do header */
.alert-banner {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-4);
  background:rgba(255,69,89,0.08); border-bottom:1px solid rgba(255,69,89,0.2);
  font-size:13px; color:var(--red); font-weight:500;
  animation:fadeIn 0.3s var(--ease-out);
}
.alert-banner.warn { background:rgba(255,184,0,0.08); border-color:rgba(255,184,0,0.2); color:var(--yellow); }
.alert-banner-action {
  margin-left:auto; font-size:11px; font-weight:700;
  color:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  opacity:0.8; transition:opacity 0.15s;
}
.alert-banner-action:hover { opacity:1; }

/* =====================================================
   LIST ITEM
   ===================================================== */
.list-item {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3); border-radius:var(--r-sm);
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background 0.12s var(--ease-out); cursor:pointer;
}
.list-item:hover { background:var(--glass); }
.list-item:last-child { border-bottom:none; }
.list-item-avatar {
  width:36px; height:36px; border-radius:var(--r-full); flex-shrink:0;
  background:linear-gradient(135deg, var(--blue-dim), var(--purple-dim));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; color:var(--blue);
}
.list-item-body { flex:1; min-width:0; }
.list-item-title { font-size:13px; font-weight:500; color:var(--text); }
.list-item-sub { font-size:11px; color:var(--text2); margin-top:2px; }
.list-item-end { display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); flex-shrink:0; }

/* =====================================================
   STATUS DOT
   ===================================================== */
.status-dot {
  width:8px; height:8px; border-radius:var(--r-full); flex-shrink:0;
  box-shadow:0 0 8px currentColor;
}
.status-dot.online  { background:var(--green);  color:var(--green); }
.status-dot.warn    { background:var(--yellow); color:var(--yellow); }
.status-dot.offline { background:var(--red);    color:var(--red); }
.status-dot.idle    { background:var(--text3);  color:var(--text3); box-shadow:none; }
.status-dot.pulse { animation:statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.4); opacity:0.7; }
}

/* =====================================================
   PULSE ANIMATION
   ===================================================== */
.pulse-dot {
  width:7px; height:7px; border-radius:var(--r-full);
  background:var(--red); animation:pulseAnim 1.6s ease-in-out infinite;
}
@keyframes pulseAnim {
  0%,100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,69,89,0.6); }
  50% { transform:scale(1.25); box-shadow:0 0 0 5px rgba(255,69,89,0); }
}
.pulse-wrap { display:inline-flex; align-items:center; gap:var(--space-1); }

/* =====================================================
   CHART WRAPPER
   ===================================================== */
.cw { position:relative; }

/* =====================================================
   DELTA
   ===================================================== */
.delta {
  font-size:10px; padding:2px 5px;
  border-radius:var(--r-xs); font-family:var(--font-mono);
}
.delta.up { color:var(--green); background:var(--green-dim); }
.delta.dn { color:var(--red);   background:var(--red-dim); }

/* =====================================================
   ANIMAÇÕES DE ENTRADA
   ===================================================== */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.fade-up { animation:fadeUp 0.3s var(--ease-out) forwards; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes spin   { to{transform:rotate(360deg)} }

/* Stagger helper para listas animadas */
.stagger > * { opacity:0; animation:fadeUp 0.25s var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay:0.00s; }
.stagger > *:nth-child(2) { animation-delay:0.04s; }
.stagger > *:nth-child(3) { animation-delay:0.08s; }
.stagger > *:nth-child(4) { animation-delay:0.12s; }
.stagger > *:nth-child(5) { animation-delay:0.16s; }
.stagger > *:nth-child(6) { animation-delay:0.20s; }

/* =====================================================
   MODAL
   ===================================================== */
.kore-modal-backdrop {
  position:fixed; inset:0; z-index:1000;
  background:rgba(5,12,28,0.85); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn 0.2s var(--ease-out);
}
.kore-modal {
  background:var(--bg3); border:1px solid var(--gb);
  border-radius:var(--r-lg); padding:var(--space-6);
  min-width:440px; max-width:680px; width:90%;
  max-height:85vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  animation:modalIn 0.25s var(--ease-out);
  position:relative;
}
@keyframes modalIn {
  from { opacity:0; transform:scale(0.96) translateY(12px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.kore-modal-lg { min-width:600px; max-width:900px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-5);
}
.modal-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text); }
.modal-close {
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--glass2); border:1px solid var(--gb);
  color:var(--text2); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition: background 0.15s var(--ease-out), color 0.15s;
}
.modal-close:hover { background:var(--red-dim); color:var(--red); }
.modal-footer {
  display:flex; justify-content:flex-end; gap:var(--space-2);
  margin-top:var(--space-5); padding-top:var(--space-4);
  border-top:1px solid var(--gb);
}

/* =====================================================
   TOAST
   ===================================================== */
#kore-toasts {
  position:fixed; bottom:var(--space-5); right:var(--space-5); z-index:2000;
  display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-end;
}
.toast {
  background:var(--bg3); border:1px solid var(--gb);
  border-radius:var(--r-md); padding:var(--space-3) var(--space-4);
  min-width:280px; max-width:380px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
  display:flex; align-items:flex-start; gap:var(--space-2);
  animation:toastIn 0.3s var(--ease-out);
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(20px) scale(0.96); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
.toast.out { animation:toastOut 0.25s var(--ease-in) forwards; }
@keyframes toastOut {
  to { opacity:0; transform:translateX(20px) scale(0.96); }
}
.toast.g { border-color:rgba(15,217,134,0.3);  box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(15,217,134,0.05); }
.toast.r { border-color:rgba(255,69,89,0.3);    box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,69,89,0.05); }
.toast.y { border-color:rgba(255,184,0,0.3);    box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,184,0,0.05); }
.toast.b { border-color:rgba(0,204,255,0.3);    box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,204,255,0.05); }
.toast-icon { font-size:16px; flex-shrink:0; }
.toast-body { flex:1; }
.toast-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.toast-msg   { font-size:11px; color:var(--text2); line-height:1.5; }
.toast-action {
  font-size:11px; font-weight:700; color:var(--blue);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
  margin-top:4px; display:inline-block;
  transition: opacity 0.15s;
}
.toast-action:hover { opacity:0.8; }

/* =====================================================
   FORM ELEMENTS
   ===================================================== */
.form-group { margin-bottom:var(--space-4); }
.form-label {
  font-size:11px; color:var(--text2); font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase;
  margin-bottom:var(--space-1); display:block;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:var(--space-2) var(--space-3);
  background:rgba(255,255,255,0.04); border:1px solid var(--gb);
  border-radius:var(--r-sm); color:var(--text); font-size:13px;
  font-family:var(--font-body); outline:none;
  transition: border-color 0.18s var(--ease-out), background 0.18s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:rgba(0,204,255,0.4);
  background:rgba(0,204,255,0.04);
}
/* Estados de validação */
.form-group.error .form-input,
.form-group.error .form-select,
.form-group.error .form-textarea {
  border-color:rgba(255,69,89,0.5);
  background:rgba(255,69,89,0.04);
}
.form-group.success .form-input,
.form-group.success .form-select,
.form-group.success .form-textarea {
  border-color:rgba(15,217,134,0.4);
}
.form-error  { font-size:11px; color:var(--red);   margin-top:4px; display:flex; align-items:center; gap:4px; }
.form-helper { font-size:11px; color:var(--text3); margin-top:4px; }
.form-select { cursor:pointer; }
option { background:var(--bg3); }
.form-textarea { resize:vertical; min-height:80px; }

/* =====================================================
   DIVIDER
   ===================================================== */
.divider { height:1px; background:var(--gb); margin:var(--space-4) 0; }

/* =====================================================
   UTILITÁRIOS FLEX
   ===================================================== */
.flex { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:var(--space-2); }
.gap-12 { gap:var(--space-3); }
.mt-12  { margin-top:var(--space-3); }
.mt-16  { margin-top:var(--space-4); }

/* Utilitários tipográficos (substituem inline styles) */
.text-right   { text-align:right; }
.text-center  { text-align:center; }
.text-mono    { font-family:var(--font-mono); }
.text-xs      { font-size:10px; }
.text-sm      { font-size:12px; }
.text-dim     { color:var(--text2); }
.text-muted   { color:var(--text3); }
.truncate     { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opacity-60   { opacity:0.6; }

/* =====================================================
   LOADING SHIMMER
   ===================================================== */
.shimmer {
  background:linear-gradient(90deg, var(--glass) 25%, rgba(255,255,255,0.08) 50%, var(--glass) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s ease-in-out infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Skeleton helpers */
.skeleton-line {
  height:12px; border-radius:var(--r-xs);
  margin-bottom:var(--space-2);
}
.skeleton-line.wide  { width:80%; }
.skeleton-line.mid   { width:55%; }
.skeleton-line.short { width:35%; }

/* =====================================================
   AI MESSAGE
   ===================================================== */
.ai-message {
  background:rgba(155,109,255,0.08); border:1px solid rgba(155,109,255,0.2);
  border-radius:var(--r-md); padding:14px var(--space-4);
  font-size:13px; color:var(--text); line-height:1.6;
}
.ai-message-header {
  display:flex; align-items:center; gap:7px;
  margin-bottom:var(--space-2); color:var(--purple);
  font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
}

/* =====================================================
   TIMELINE
   ===================================================== */
.timeline { display:flex; flex-direction:column; }
.timeline-item { display:flex; gap:14px; position:relative; }
.timeline-item:not(:last-child) .tl-line {
  position:absolute; left:15px; top:34px; bottom:-12px; width:2px;
  background:var(--gb);
}
.tl-dot {
  width:32px; height:32px; border-radius:var(--r-full); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; z-index:1;
  transition: border-color 0.2s, background 0.2s;
}
.tl-dot.done    { background:var(--green-dim); border:2px solid var(--green); color:var(--green); }
.tl-dot.active  { background:var(--blue-dim);  border:2px solid var(--blue);  color:var(--blue); animation:statusPulse 2s ease-in-out infinite; }
.tl-dot.pending { background:var(--glass);      border:2px solid var(--gb);    color:var(--text3); }
.tl-body  { flex:1; padding-bottom:var(--space-4); }
.tl-title { font-size:13px; font-weight:600; color:var(--text); }
.tl-meta  { font-size:11px; color:var(--text2); margin-top:3px; }

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--space-8) var(--space-5); text-align:center;
  color:var(--text3);
}
.empty-state-icon {
  width:48px; height:48px; border-radius:var(--r-md);
  background:var(--glass); border:1px solid var(--gb);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-4); opacity:0.6;
}
.empty-state-title { font-size:14px; font-weight:600; color:var(--text2); margin-bottom:var(--space-1); }
.empty-state-desc  { font-size:12px; color:var(--text3); line-height:1.6; max-width:300px; margin-bottom:var(--space-4); }

/* =====================================================
   TOPBAR — BOTÃO DE BUSCA GLOBAL (C1)
   ===================================================== */
.topbar-search-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text3);
  font-size: 12px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background 0.15s var(--ease-out);
  flex-shrink: 0;
}
.topbar-search-btn:hover {
  border-color: rgba(77,163,255,0.4);
  color: var(--text);
  background: var(--glass2);
}
.topbar-search-btn svg { flex-shrink: 0; }
.topbar-search-hint {
  font-size: 10px;
  letter-spacing: 0.3px;
  opacity: 0.7;
  font-family: var(--font-mono);
}

/* =====================================================
   SIDEBAR — BADGES DINÂMICOS (C2)
   ===================================================== */
.nav-badge {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 0 8px rgba(255,107,107,0.4);
}

/* =====================================================
   BUSCA GLOBAL — OVERLAY (C1)
   ===================================================== */
.kore-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5,12,28,0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.kore-search-overlay.open { opacity: 1; }

.kore-search-box {
  width: 100%;
  max-width: 600px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(77,163,255,0.08);
  overflow: hidden;
  transform: translateY(-12px);
  transition: transform 0.2s var(--ease-out);
}
.kore-search-overlay.open .kore-search-box { transform: translateY(0); }

.ks-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.ks-input-icon { color: var(--text3); flex-shrink: 0; }
.ks-input-icon svg { width: 18px; height: 18px; }
.ks-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 400;
}
.ks-input::placeholder { color: var(--text3); }
.ks-kbd {
  flex-shrink: 0;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text3);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 2px 6px;
}

.ks-results {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.ks-empty {
  padding: 24px 20px;
  color: var(--text3);
  font-size: 13px;
  text-align: center;
}
.ks-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 20px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.1s;
  cursor: pointer;
}
.ks-item:hover, .ks-item.focused {
  background: var(--glass);
}
.ks-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--glass2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.ks-item-icon svg { width: 14px; height: 14px; }
.ks-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ks-item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ks-item-sub {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
}
.ks-item-arrow { color: var(--text3); flex-shrink: 0; }

.ks-footer {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--text3);
  font-family: var(--font-mono);
}



/* ── Botão inline de ação em lista (D2) ── */
.btn-inline-action {
  margin-top:10px; padding:5px 12px;
  border-radius:var(--r-sm);
  background:var(--blue-dim);
  border:1px solid rgba(0,204,255,0.2);
  color:var(--blue);
  font-size:11px; cursor:pointer;
  font-family:var(--font-body);
  transition:background 0.15s, border-color 0.15s;
}
.btn-inline-action:hover {
  background:rgba(0,204,255,0.2);
  border-color:rgba(0,204,255,0.4);
}

/* =====================================================
   D3 — KPI SKELETON SCREENS + REVEAL ANIMATION
   ===================================================== */
/* Entrada escalonada dos cards */
@keyframes kore-kpi-enter {
  0%   { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
.kpi-card {
  animation: kore-kpi-enter 0.45s var(--ease-out) both;
}
.kpi-card:nth-child(1) { animation-delay:0.05s; }
.kpi-card:nth-child(2) { animation-delay:0.12s; }
.kpi-card:nth-child(3) { animation-delay:0.19s; }
.kpi-card:nth-child(4) { animation-delay:0.26s; }

/* Shimmer de skeleton */
@keyframes kore-shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position: 400px 0; }
}
.kpi-skel {
  display:inline-block;
  width:80px; height:28px;
  border-radius:var(--r-xs);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size:800px 100%;
  animation: kore-shimmer 1.4s ease-in-out infinite;
  vertical-align:middle;
}
/* Reveal fade-in do valor */
@keyframes kore-val-reveal {
  from { opacity:0; transform:translateY(4px); }
  to   { opacity:1; transform:translateY(0); }
}
.mv.revealed {
  animation: kore-val-reveal 0.3s var(--ease-out) both;
}

/* =====================================================
   RESPONSIVE (até 1280px — sidebar colapsa)
   ===================================================== */
@media (max-width:1280px) {
  :root { --sidebar-w: 56px; }
  .sidebar-logo-text, .nav-item-label, .nav-item-badge, .sidebar-section-label, .nav-badge { display:none !important; }
  .sidebar-logo { justify-content:center; padding:var(--space-4) 0; }
  .sidebar-logo-mark { width:30px; height:30px; }
  .nav-item { justify-content:center; padding:10px 0; }
  .nav-item-icon { width:auto; }
  .sidebar-reset-btn span { display:none; }
  .sidebar-reset-btn { justify-content:center; }
  .topbar-search-hint { display:none; }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:1024px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .g2, .g3, .g4 { grid-template-columns:1fr; }
  .span2, .span3 { grid-column:span 1; }
}