/* ══════════════════════════════════════════════════════
   DSTAQ · main.css
   Sistema de dois temas: [data-theme="light"] (padrão)
                           [data-theme="dark"]
══════════════════════════════════════════════════════ */

/* ── TEMA CLARO (padrão) ─────────────────────────────── */
:root, [data-theme="light"] {
  --accent:       #4f7cff;
  --accent-bg:    rgba(79,124,255,.11);
  --green:        #12b76a;
  --green-bg:     rgba(18,183,106,.11);
  --red:          #f04438;
  --red-bg:       rgba(240,68,56,.09);
  --yellow:       #c07800;
  --yellow-bg:    rgba(192,120,0,.10);
  --purple:       #7c3aed;
  --purple-bg:    rgba(124,58,237,.10);
  --text:         #1a1f2e;
  --text-2:       #344054;
  --text-3:       #667085;
  --text-4:       #98a2b3;

  /* superfícies glass */
  --glass-bg:     rgba(255,255,255,.62);
  --glass-border: rgba(255,255,255,.72);
  --glass-shadow: 0 4px 20px rgba(100,130,200,.09), 0 1px 3px rgba(100,130,200,.07), inset 0 1px 0 rgba(255,255,255,.90);
  --glass-hover:  0 8px 32px rgba(80,110,190,.14), 0 2px 6px rgba(80,110,190,.09), inset 0 1px 0 rgba(255,255,255,.95);
  --topbar-bg:    rgba(255,255,255,.68);
  --topbar-border:rgba(255,255,255,.75);
  --thead-bg:     rgba(240,244,252,.78);
  --thead-border: rgba(200,212,235,.40);
  --row-border:   rgba(200,212,235,.30);
  --row-hover-bg: rgba(200,212,235,.22);
  --total-bg:     rgba(79,124,255,.07);
  --total-border: rgba(79,124,255,.15);
  --tab-bg:       rgba(255,255,255,.38);
  --tab-border:   rgba(255,255,255,.65);
  --tab-active:   rgba(255,255,255,.92);
  --body-bg:      #dde5f2;
  --section-label:var(--text-4);
  --page-h1:      var(--text);
  --page-sub:     var(--text-3);
  --logo-color:   var(--text);
  --btn-bg:       rgba(255,255,255,.55);
  --btn-border:   rgba(255,255,255,.75);
  --input-bg:     rgba(255,255,255,.55);
  --input-border: rgba(200,212,235,.60);
  --metric-bg:    rgba(255,255,255,.45);
  --metric-border:rgba(200,210,230,.50);
  --metric-active:rgba(255,255,255,.85);
  --grid-line:    rgba(180,200,230,.22);
  --bar-label:    rgba(100,120,160,.70);
  --tip-bg:       rgba(18,22,38,.92);
}

/* ── TEMA ESCURO ─────────────────────────────────────── */
[data-theme="dark"] {
  --accent:       #3b6eff;
  --accent-bg:    rgba(59,110,255,.15);
  --green:        #00e5a0;
  --green-bg:     rgba(0,229,160,.12);
  --red:          #ff4d6a;
  --red-bg:       rgba(255,77,106,.12);
  --yellow:       #f5c542;
  --yellow-bg:    rgba(245,197,66,.12);
  --purple:       #a855f7;
  --purple-bg:    rgba(168,85,247,.12);
  --text:         #e2e8f0;
  --text-2:       #c8d4e0;
  --text-3:       #8896a7;
  --text-4:       #4a5568;

  --glass-bg:     rgba(13,17,31,.72);
  --glass-border: rgba(255,255,255,.07);
  --glass-shadow: 0 4px 20px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05);
  --glass-hover:  0 8px 32px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  --topbar-bg:    rgba(10,13,24,.80);
  --topbar-border:rgba(255,255,255,.07);
  --thead-bg:     rgba(8,11,20,.60);
  --thead-border: rgba(255,255,255,.06);
  --row-border:   rgba(255,255,255,.05);
  --row-hover-bg: rgba(255,255,255,.04);
  --total-bg:     rgba(59,110,255,.10);
  --total-border: rgba(59,110,255,.20);
  --tab-bg:       rgba(255,255,255,.06);
  --tab-border:   rgba(255,255,255,.10);
  --tab-active:   rgba(255,255,255,.12);
  --body-bg:      #060b16;
  --section-label:#4a5568;
  --page-h1:      #e2e8f0;
  --page-sub:     #8896a7;
  --logo-color:   #e2e8f0;
  --btn-bg:       rgba(255,255,255,.06);
  --btn-border:   rgba(255,255,255,.10);
  --input-bg:     rgba(255,255,255,.05);
  --input-border: rgba(255,255,255,.10);
  --metric-bg:    rgba(255,255,255,.06);
  --metric-border:rgba(255,255,255,.10);
  --metric-active:rgba(255,255,255,.14);
  --grid-line:    rgba(255,255,255,.06);
  --bar-label:    rgba(200,212,224,.50);
  --tip-bg:       rgba(5,8,18,.94);
}

/* ── BASE ────────────────────────────────────────────── */
* { box-sizing:border-box; margin:0; padding:0; }

html { transition: background-color .3s; }

body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  background: var(--body-bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background .3s, color .3s;
}
a { color:inherit; text-decoration:none; }

/* ── CANVAS CIDADE ───────────────────────────────────── */
#city-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: opacity .4s;
}
[data-theme="light"] #city-canvas { filter: blur(4px) brightness(1.05) saturate(0.85); transform:scale(1.04); }
[data-theme="dark"]  #city-canvas { filter: blur(3px) brightness(0.75) saturate(0.70); transform:scale(1.04); }

.city-fog {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  transition: background .4s;
}
[data-theme="light"] .city-fog {
  background:
    radial-gradient(ellipse 100% 50% at 50% -10%, rgba(255,255,255,.50) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 55%,  rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(240,245,255,.05) 50%, rgba(220,232,250,.25) 100%);
}
[data-theme="dark"] .city-fog {
  background:
    radial-gradient(ellipse 100% 40% at 50% 0%, rgba(6,11,22,.65) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(6,11,22,.70) 0%, transparent 70%),
    linear-gradient(180deg, rgba(6,11,22,.20) 0%, rgba(6,11,22,.05) 40%, rgba(6,11,22,.30) 100%);
}

/* Conteúdo acima do fundo */
.topbar, .main, .footer-wrap { position:relative; z-index:10; }

/* ── TOGGLE DE TEMA ──────────────────────────────────── */
.theme-toggle {
  display:flex; align-items:center;
  background:var(--btn-bg); border:1px solid var(--btn-border);
  border-radius:20px; padding:3px; cursor:pointer; user-select:none;
  transition: background .3s, border-color .3s;
}
.theme-option {
  padding:4px 11px; border-radius:16px; font-size:11px;
  font-weight:600; color:var(--text-3); transition:all .2s;
}
[data-theme="light"] .theme-option.light,
[data-theme="dark"]  .theme-option.dark {
  background:var(--accent); color:#fff;
}

/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; height:58px;
  background: var(--topbar-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 2px 12px rgba(0,0,0,.06);
  position:sticky; top:0; z-index:200;
  transition: background .3s, border-color .3s;
}
.logo { font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--logo-color); transition:color .3s; }
.logo span { color:var(--accent); }

.client-badge {
  display:flex; align-items:center; gap:8px;
  background:var(--btn-bg); border:1px solid var(--btn-border);
  border-radius:20px; padding:6px 14px;
  font-size:13px; font-weight:500; color:var(--text-3);
  transition: background .3s, border-color .3s;
}
.client-dot {
  width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow: 0 0 0 3px var(--green-bg);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 0 3px var(--green-bg); }
  50%      { box-shadow:0 0 0 5px transparent; }
}
.client-name { color:var(--text-2); font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.update-tag {
  display:flex; align-items:center; gap:6px;
  background:var(--green-bg); border:1px solid rgba(18,183,106,.22);
  color:var(--green); padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:600;
}
.update-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.admin-tag {
  background:var(--accent-bg); border:1px solid rgba(59,110,255,.25); color:var(--accent);
  padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600;
}
.btn-logout {
  background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--text-3);
  padding:6px 14px; border-radius:8px; font-size:12px; cursor:pointer;
  font-family:'Inter',sans-serif; transition:all .15s;
}
.btn-logout:hover { border-color:var(--red); color:var(--red); }

/* ── MAIN ────────────────────────────────────────────── */
.main { max-width:1140px; margin:0 auto; padding:28px 24px 60px; }
.header-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.page-header h1 { font-size:20px; font-weight:700; color:var(--page-h1); margin-bottom:3px; transition:color .3s; }
.page-header p  { color:var(--page-sub); font-size:13px; }

/* ── TABS ────────────────────────────────────────────── */
.month-tabs {
  display:flex; gap:2px; margin-bottom:24px;
  background:var(--tab-bg); border:1px solid var(--tab-border);
  border-radius:10px; padding:4px; width:fit-content;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition: background .3s, border-color .3s;
}
.tab { padding:7px 16px; font-size:13px; font-weight:500; color:var(--text-3); border-radius:7px; cursor:pointer; transition:all .2s; }
.tab.active { background:var(--tab-active); color:var(--text-2); font-weight:600; box-shadow:0 1px 6px rgba(0,0,0,.10); }

/* ── TOOLTIP GLOBAL ──────────────────────────────────── */
#global-tooltip {
  position:fixed; z-index:99999;
  background:var(--tip-bg); backdrop-filter:blur(10px);
  color:#fff; font-size:12px; font-weight:400; font-style:normal;
  letter-spacing:0; text-transform:none;
  padding:9px 13px; border-radius:9px; width:210px;
  white-space:normal; line-height:1.55; text-align:center;
  box-shadow:0 6px 28px rgba(0,0,0,.25);
  pointer-events:none; opacity:0; transition:opacity .18s;
  font-family:'Inter',sans-serif;
  border:1px solid rgba(255,255,255,.10);
}
#global-tooltip.visible { opacity:1; }
#global-tooltip::after { content:''; position:absolute; left:50%; transform:translateX(-50%); border:6px solid transparent; }
#global-tooltip.dir-down::after { top:-12px; border-bottom-color:var(--tip-bg); }
#global-tooltip.dir-up::after   { bottom:-12px; border-top-color:var(--tip-bg); }

/* ── BOTÃO i ─────────────────────────────────────────── */
.info-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  background:rgba(100,120,160,.18); color:var(--text-4);
  font-size:9px; font-weight:700; font-style:normal;
  cursor:default; flex-shrink:0; line-height:1;
  font-family:'Inter',sans-serif; transition:background .15s, color .15s; vertical-align:middle;
}
.info-btn:hover { background:var(--accent); color:#fff; }

/* ── KPI CARDS ───────────────────────────────────────── */
.kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px; }
.kpi {
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:16px; padding:18px 16px;
  box-shadow:var(--glass-shadow);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  transition:box-shadow .2s, transform .2s, background .3s, border-color .3s;
}
.kpi:hover { box-shadow:var(--glass-hover); transform:translateY(-2px); }

.kpi-pill-wrap { display:inline-flex; align-items:center; gap:5px; margin-bottom:12px; }
.kpi-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.kpi-pill.blue   { background:var(--accent-bg);  color:var(--accent); }
.kpi-pill.green  { background:var(--green-bg);   color:var(--green); }
.kpi-pill.red    { background:var(--red-bg);     color:var(--red); }
.kpi-pill.yellow { background:var(--yellow-bg);  color:var(--yellow); }
.kpi-pill.purple { background:var(--purple-bg);  color:var(--purple); }
.kpi-pill-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.kpi-value { font-family:'DM Mono',monospace; font-size:23px; font-weight:500; color:var(--text); line-height:1; margin-bottom:5px; transition:color .3s; }
.kpi-sub { font-size:11px; color:var(--text-3); }

/* ── SECTION LABEL ───────────────────────────────────── */
.section-label {
  font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--section-label); margin-bottom:12px;
}

/* ── TABLE ───────────────────────────────────────────── */
.table-wrap {
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:16px; overflow:hidden;
  box-shadow:var(--glass-shadow);
  transition: background .3s, border-color .3s;
}
table { width:100%; border-collapse:collapse; }
thead tr { background:var(--thead-bg); border-bottom:1px solid var(--thead-border); transition:background .3s; }
th {
  padding:11px 16px; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-4); text-align:center;
}
th:first-child { text-align:left; }
.th-wrap { display:inline-flex; align-items:center; justify-content:center; gap:5px; }

tbody tr { border-bottom:1px solid var(--row-border); transition:background .18s, transform .18s, box-shadow .18s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:not(.total-row):hover {
  background:var(--row-hover-bg);
  transform:translateX(3px);
  box-shadow:-3px 0 0 var(--accent);
}
tbody tr:not(.total-row):hover td { color:var(--text); }
tbody tr:not(.total-row):hover td:first-child { color:var(--accent); font-weight:500; }

td { padding:13px 16px; color:var(--text-2); text-align:center; font-family:'DM Mono',monospace; font-size:12.5px; transition:color .18s; }
td:first-child { font-family:'Inter',sans-serif; font-size:13px; text-align:left; color:var(--text-3); }

.total-row { background:var(--total-bg) !important; border-top:1px solid var(--total-border) !important; }
.total-row td { color:var(--text) !important; font-weight:600; }
.total-row td:first-child { color:var(--accent) !important; font-weight:700; font-family:'Inter',sans-serif; }

.cpm-low  { color:var(--green)  !important; font-weight:600; }
.cpm-high { color:var(--yellow) !important; font-weight:600; }
.cpm-norm { color:var(--text-3) !important; }

/* ── GRÁFICO ─────────────────────────────────────────── */
.chart-card {
  background:var(--glass-bg);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:16px; padding:22px 24px 14px;
  box-shadow:var(--glass-shadow);
  transition: background .3s, border-color .3s;
}
.chart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.chart-title { font-size:13px; font-weight:600; color:var(--text-2); }
.chart-title span { color:var(--accent); }
.chart-metrics { display:flex; gap:6px; flex-wrap:wrap; }
.metric-btn {
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px;
  font-size:11px; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer;
  border:1px solid var(--metric-border); background:var(--metric-bg); color:var(--text-3);
  transition:all .18s;
}
.metric-btn:hover  { color:var(--text-2); }
.metric-btn.active { background:var(--metric-active); color:var(--text); box-shadow:0 1px 6px rgba(0,0,0,.10); }
.metric-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.chart-area-wrap { position:relative; width:100%; height:200px; }
#bar-chart { display:block; width:100% !important; height:200px !important; }
.chart-xlabels {
  display:flex; justify-content:space-around; padding:8px 40px 0;
  font-size:11px; color:var(--text-4); text-align:center; line-height:1.5;
}
.chart-xlabels small { font-size:10px; opacity:.7; display:block; }
.chart-tooltip {
  position:absolute; pointer-events:none;
  background:var(--tip-bg); backdrop-filter:blur(8px); color:#fff;
  font-size:12px; font-family:'Inter',sans-serif;
  padding:8px 12px; border-radius:8px; line-height:1.5;
  box-shadow:0 4px 16px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.10);
  white-space:nowrap; opacity:0; transition:opacity .15s;
  transform:translate(-50%,-110%); z-index:50;
}
.chart-tooltip.visible { opacity:1; }

/* ── ADMIN ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:8px; font-size:13px; font-weight:500;
  cursor:pointer; border:none; transition:all .15s; text-decoration:none; font-family:'Inter',sans-serif;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-outline { background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--text-3); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:6px 12px; font-size:12px; }

.card {
  background:var(--glass-bg); backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:16px; padding:28px;
  box-shadow:var(--glass-shadow); transition: background .3s;
}

.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin-bottom:6px; }
.form-input {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:9px; padding:10px 14px; color:var(--text);
  font-family:'Inter',sans-serif; font-size:14px; transition:border .15s, box-shadow .15s, background .3s;
}
.form-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.form-hint { font-size:11px; color:var(--text-4); margin-top:5px; }

.alert { padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:16px; }
.alert-error   { background:var(--red-bg);   border:1px solid rgba(255,77,106,.25);  color:var(--red); }
.alert-success { background:var(--green-bg); border:1px solid rgba(0,229,160,.25);   color:var(--green); }

/* Tabela admin */
.admin-table-wrap {
  background:var(--glass-bg); backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-border); border-radius:16px; overflow:hidden;
  box-shadow:var(--glass-shadow);
}
.status-on  { color:var(--green); font-size:11px; font-weight:600; }
.status-off { color:var(--text-4); font-size:11px; }

/* Stats admin */
.overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px; }
.stat-card {
  background:var(--glass-bg); backdrop-filter:blur(22px); border:1px solid var(--glass-border);
  border-radius:14px; padding:20px; box-shadow:var(--glass-shadow);
}
.stat-card .label { font-size:10px; font-weight:600; letter-spacing:.10em; text-transform:uppercase; color:var(--text-4); margin-bottom:8px; }
.stat-card .value { font-family:'DM Mono',monospace; font-size:28px; color:var(--text); }

/* ── FOOTER ──────────────────────────────────────────── */
.footer-wrap { text-align:center; padding:28px 0 20px; }
.footer-wrap p { font-size:11px; color:var(--text-4); }
.footer-wrap span { color:var(--accent); font-weight:600; }

/* ── EMPTY STATE ─────────────────────────────────────── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-3); }
.empty-state h3 { font-size:18px; color:var(--text); margin-bottom:8px; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px) {
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .overview-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .topbar { padding:0 16px; }
  .main { padding:16px 12px 40px; }
  .kpi-row { grid-template-columns:1fr 1fr; }
}