/* =========================================================
   Orion Technologia — Painel · Design System (CSS puro)
   Tema: <html data-theme="dark"> (padrão) ou data-theme="light"
   Componentes com prefixo .o-
   ========================================================= */

/* ---------- Fontes ---------- */
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Montreal"; src: url("fonts/NeueMontreal-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* ---------- Tokens fixos (iguais nos 2 temas) ---------- */
:root {
  /* Tipografia */
  --font-sans: "Neue Montreal", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-kpi: 32px;
  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-title: 16px;
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-label: 11px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --track-tight: -0.02em;
  --track-label: 0.18em;

  /* Espaçamento (grade de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Bordas arredondadas */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Marca */
  --brand-violet: #6F25FA;
  --brand-deep: #3B0C90;
  --gradient-brand: linear-gradient(135deg, #6F25FA 0%, #3B0C90 100%);
  --gradient-brand-soft: linear-gradient(135deg, #8A4DFC 0%, #4B12A8 100%);

  --drawer-width: 440px;
}

/* ---------- Tema escuro (padrão) ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0E16;
  --surface-1: #12141F;               /* cards */
  --surface-2: #171B27;               /* campos, linhas hover, trilhos */
  --surface-3: #212634;               /* elementos elevados / tooltip */
  --surface-overlay: rgba(7, 9, 15, 0.64);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text-primary: #F4EFFA;
  --text-secondary: #A7A3BC;
  --text-muted: #8A869E;
  --text-on-accent: #FFFFFF;

  --accent: #8A4DFC;
  --accent-hover: #A97CFF;
  --accent-soft: rgba(138, 77, 252, 0.14);
  --accent-border: rgba(138, 77, 252, 0.45);
  --focus-ring: rgba(138, 77, 252, 0.55);

  /* Clientes (séries de gráfico) */
  --series-1: #8A4DFC;   /* Violeta  */
  --series-2: #4C9BFF;   /* Azul     */
  --series-3: #E35FC4;   /* Magenta  */
  --series-4: #CBB2FF;   /* Lavanda  */

  /* Status */
  --good: #33D6A6;
  --good-soft: rgba(51, 214, 166, 0.14);
  --warning: #F5B544;
  --warning-soft: rgba(245, 181, 68, 0.14);
  --critical: #F2565B;
  --critical-soft: rgba(242, 86, 91, 0.14);

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 24px rgba(111, 37, 250, 0.4);
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #F4EFFA;
  --surface-1: #FFFFFF;
  --surface-2: #F1ECF8;
  --surface-3: #170F33;               /* tooltip escuro no tema claro */
  --surface-overlay: rgba(23, 15, 51, 0.32);

  --border: rgba(23, 15, 51, 0.09);
  --border-strong: rgba(23, 15, 51, 0.16);

  --text-primary: #170F33;
  --text-secondary: #4A4560;
  --text-muted: #6E6982;
  --text-on-accent: #FFFFFF;

  --accent: #6F25FA;
  --accent-hover: #5A18D9;
  --accent-soft: rgba(111, 37, 250, 0.09);
  --accent-border: rgba(111, 37, 250, 0.35);
  --focus-ring: rgba(111, 37, 250, 0.35);

  --series-1: #6F25FA;
  --series-2: #2F7FF0;
  --series-3: #C93FA8;
  --series-4: #3B0C90;

  --good: #0E9F76;
  --good-soft: rgba(14, 159, 118, 0.11);
  --warning: #B87708;
  --warning-soft: rgba(184, 119, 8, 0.12);
  --critical: #D7383E;
  --critical-soft: rgba(215, 56, 62, 0.10);

  --shadow-sm: 0 1px 3px rgba(23, 15, 51, 0.08);
  --shadow-md: 0 10px 30px rgba(23, 15, 51, 0.10);
  --shadow-lg: 0 24px 60px rgba(23, 15, 51, 0.18);
  --glow-accent: 0 6px 20px rgba(111, 37, 250, 0.25);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.o-label {
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--text-muted);
}
.o-num { font-variant-numeric: tabular-nums; }

/* ---------- Card ---------- */
.o-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  min-width: 0;
}
.o-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.o-card-title { margin: 0; font-size: var(--fs-title); font-weight: var(--fw-medium); }
.o-card-sub { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }
.o-card.is-interactive { cursor: pointer; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.o-card.is-interactive:hover { transform: translateY(-2px); border-color: var(--accent-border); box-shadow: var(--shadow-md); }

/* ---------- Indicador numérico (KPI) ---------- */
.o-kpi { display: flex; flex-direction: column; gap: var(--space-2); }
.o-kpi-value {
  font-size: var(--fs-kpi); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
}
.o-kpi-unit { font-size: 0.55em; font-weight: var(--fw-medium); color: var(--text-secondary); margin-left: 2px; }
.o-kpi-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--text-muted); }
.o-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.o-delta.is-up { color: var(--good); }
.o-delta.is-down { color: var(--critical); }
.o-delta.is-flat { color: var(--text-secondary); }

/* ---------- Etiqueta de status ---------- */
.o-status {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--fw-medium); white-space: nowrap;
  background: var(--surface-2); color: var(--text-secondary);
}
.o-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.o-status.is-good { background: var(--good-soft); color: var(--good); }
.o-status.is-warning { background: var(--warning-soft); color: var(--warning); }
.o-status.is-critical { background: var(--critical-soft); color: var(--critical); }
.o-status.is-accent { background: var(--accent-soft); color: var(--accent); }

/* Ponto de cliente (legenda) */
.o-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--series-1); flex: none; }
.o-dot.s1 { background: var(--series-1); } .o-dot.s2 { background: var(--series-2); }
.o-dot.s3 { background: var(--series-3); } .o-dot.s4 { background: var(--series-4); }

/* ---------- Barra de uso ---------- */
.o-usage { display: flex; flex-direction: column; gap: var(--space-2); }
.o-usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--fs-small); }
.o-usage-name { color: var(--text-primary); font-weight: var(--fw-medium); }
.o-usage-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.o-usage-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.o-usage-fill {
  height: 100%; width: var(--value, 0%);
  border-radius: inherit; background: var(--gradient-brand-soft);
  transition: width var(--dur-slow) var(--ease-out);
}
.o-usage.is-warning .o-usage-fill { background: var(--warning); }
.o-usage.is-critical .o-usage-fill { background: var(--critical); }
.o-usage.is-good .o-usage-fill { background: var(--good); }

/* ---------- Botões ---------- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-primary);
  font: var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
}
.o-btn:hover { background: var(--surface-2); }
.o-btn:active { transform: translateY(1px) scale(0.99); }
.o-btn.is-primary { border-color: transparent; background: var(--gradient-brand); color: var(--text-on-accent); }
.o-btn.is-primary:hover { background: var(--gradient-brand-soft); box-shadow: var(--glow-accent); }
.o-btn.is-ghost { border-color: transparent; color: var(--text-secondary); }
.o-btn.is-ghost:hover { color: var(--text-primary); }
.o-btn.is-icon { width: 36px; padding: 0; }

/* ---------- Botões de escolha (segmented) ---------- */
.o-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.o-seg-btn {
  height: 30px; padding: 0 14px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-small)/1 var(--font-sans);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base), color var(--dur-base);
}
.o-seg-btn:hover { color: var(--text-primary); }
.o-seg-btn[aria-pressed="true"], .o-seg-btn.is-active {
  background: var(--surface-1); color: var(--text-primary);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-strong);
}

/* ---------- Tabela ---------- */
.o-table-wrap { overflow-x: auto; margin: 0 calc(var(--space-6) * -1); }
.o-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.o-table th {
  text-align: left; padding: 10px var(--space-6);
  font-size: var(--fs-label); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.o-table td { padding: 14px var(--space-6); border-bottom: 1px solid var(--border); vertical-align: middle; }
.o-table tr:last-child td { border-bottom: 0; }
.o-table tbody tr { transition: background var(--dur-fast); }
.o-table tbody tr:hover { background: var(--surface-2); }
.o-table tbody tr.is-clickable { cursor: pointer; }
.o-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.o-table .muted { color: var(--text-secondary); }
.o-cell-client { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-medium); }

/* ---------- Gaveta lateral (drawer) ---------- */
.o-drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: var(--surface-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.o-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(var(--drawer-width), 100vw);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.o-drawer.is-open { transform: none; }
.o-drawer.is-open + .o-drawer-backdrop, .o-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.o-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--border); }
.o-drawer-title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }
.o-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); }
.o-drawer-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); }

/* ---------- Dica ao passar o mouse ---------- */
/* 1) Simples, só CSS: <span data-tip="Texto">…</span> */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 50;
  transform: translate(-50%, 4px);
  width: max-content; max-width: 240px;
  padding: 6px 10px; border-radius: var(--radius-xs);
  background: var(--surface-3); color: #F4EFFA;
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  font: var(--fw-regular) 12px/1.4 var(--font-sans); text-transform: none; letter-spacing: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* 2) Rica, posicionada pelo JS (ex.: hover em gráfico) */
.o-tooltip {
  position: absolute; z-index: 60; pointer-events: none;
  min-width: 180px; padding: var(--space-3);
  background: var(--surface-3); color: #F4EFFA;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  display: flex; flex-direction: column; gap: 6px;
}
.o-tooltip-title { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.12em; color: #A7A3BC; }
.o-tooltip-row { display: flex; align-items: center; gap: var(--space-2); }
.o-tooltip-row b { margin-left: auto; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }