/* ══════════════════════════════════════════════════════════
   TV BASE v2 — Araunah Dashboard System
   Paleta: Azul Petróleo Premium / Bloomberg Inspired
   Viewport: cockpit fixo | Scroll: detalhamento analítico
   ══════════════════════════════════════════════════════════ */

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

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

:root{
  --bg:#0b1623;
  --bg-card:#111c2e;
  --bg-elevated:#172438;
  --bg-ticker:#080e18;
  --bg-section:#0e1829;
  --border:#1a2d42;
  --border-accent:rgba(0,212,170,.12);
  --text:#dce4ef;
  --text-muted:#4d6278;
  --text-dim:#2d4258;
  --green:#00d4aa;
  --red:#ff6b6b;
  --amber:#f0a500;
  --blue:#2d8cf0;
  --accent:#00d4aa;
  --accent-agro:#22c55e;
  --accent-agua:#2d8cf0;
  --glow:rgba(0,212,170,.06);
  --radius:8px;
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',sans-serif;
}

/* ═══ LIGHT THEME ═══ */
[data-theme="light"]{
  --bg:#f0f2f5;
  --bg-card:#ffffff;
  --bg-elevated:#f7f8fa;
  --bg-ticker:#ffffff;
  --bg-section:#f5f6f8;
  --border:#d8dde4;
  --border-accent:rgba(0,150,120,.12);
  --text:#1a2332;
  --text-muted:#6b7a8d;
  --text-dim:#9aa8b8;
  --green:#0a9b76;
  --red:#dc3545;
  --amber:#c88400;
  --blue:#1a6fd4;
  --accent:#0a9b76;
  --accent-agro:#16873e;
  --accent-agua:#1a6fd4;
  --glow:rgba(0,150,120,.08);
}
[data-theme="light"] .card::after{opacity:.25}
[data-theme="light"] .sc::after{opacity:.25}
[data-theme="light"] ::-webkit-scrollbar-track{background:var(--bg-card)}
[data-theme="light"] .ranking-row:nth-child(odd),
[data-theme="light"] .cart-table tr:nth-child(odd),
[data-theme="light"] .detail-table tr:nth-child(odd),
[data-theme="light"] .exec-mini-table tr:nth-child(odd),
[data-theme="light"] .comp-row:nth-child(odd){background:rgba(0,0,0,.02)}
[data-theme="light"] .ranking-row:hover{background:rgba(0,150,120,.04)}
[data-theme="light"] #mapLeaflet{background:#e8ecf0}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;min-height:100vh}

/* ═══ LOADING ═══ */
#loading{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.spinner{width:40px;height:40px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading p{font-family:var(--mono);color:var(--text-muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}

/* ═══ TICKER BAR ═══ */
.ticker{height:36px;background:var(--bg-ticker);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:0;font-family:var(--mono);font-size:12px;font-weight:500;position:sticky;top:0;z-index:100}
.ticker-item{display:flex;align-items:center;gap:6px;padding:0 20px;border-right:1px solid rgba(26,45,66,.6);white-space:nowrap}
.ticker-item:last-child{border-right:none}
.ticker-label{color:var(--text-dim);font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.ticker-val{font-weight:700;font-size:13px}
.ticker-up{color:var(--green)}
.ticker-down{color:var(--red)}
.ticker-neutral{color:var(--amber)}
.ticker-arrow{font-size:10px}
.ticker-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.ticker-clock{color:var(--accent);font-weight:600;font-size:14px}

/* ═══ COCKPIT (viewport section — no scroll) ═══ */
.cockpit{display:grid;grid-template-columns:38% 62%;grid-template-rows:1fr 1fr;height:calc(100vh - 36px);padding:10px;gap:10px}

/* ═══ COCKPIT (3-column exec) ═══ */
.cockpit-exec{display:grid;grid-template-columns:32% 36% 32%;grid-template-rows:1fr;height:calc(100vh - 36px);padding:10px;gap:10px}

/* ═══ CARDS ═══ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.15}
.card-header{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.card-body{flex:1;display:flex;flex-direction:column;justify-content:center;overflow:hidden}

/* ═══ HERO BLOCK ═══ */
.hero-value{font-family:var(--mono);font-size:56px;font-weight:800;color:var(--text);line-height:1;text-shadow:0 0 40px var(--glow)}
.hero-meta{font-family:var(--mono);font-size:14px;color:var(--text-muted);margin-top:6px}
.hero-pct{font-family:var(--mono);font-size:32px;font-weight:700;margin-top:10px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px}
.hero-stat-label{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.hero-stat-val{font-family:var(--mono);font-size:16px;font-weight:700;margin-top:3px}
.progress-track{height:8px;background:var(--bg-elevated);border-radius:4px;margin-top:12px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px;transition:width .8s ease}

/* ═══ RANKING TABLE ═══ */
.ranking-list{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:1px}
.ranking-header{display:grid;grid-template-columns:24px 1fr 80px 46px 1fr 80px 46px;align-items:center;gap:4px;padding:4px 8px;font-family:var(--mono);font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);margin-bottom:3px;font-weight:600}
.ranking-header span:nth-child(n+3){text-align:right}
.ranking-row{display:grid;grid-template-columns:24px 1fr 80px 46px 1fr 80px 46px;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;font-family:var(--mono);font-size:12px;transition:background .2s}
.ranking-row:nth-child(odd){background:rgba(255,255,255,.01)}
.ranking-row:hover{background:rgba(0,212,170,.03)}
.ranking-row.total-row{border-top:2px solid var(--accent);margin-top:6px;font-weight:700;background:rgba(0,212,170,.04)}
.ranking-pos{color:var(--text-dim);font-size:10px;text-align:center;font-weight:700}
.ranking-pos.top3{color:var(--accent)}
.ranking-name{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.ranking-val{color:var(--text);font-weight:700;text-align:right;font-size:12px}
.ranking-bar-wrap{height:14px;background:var(--bg-elevated);border-radius:3px;overflow:hidden}
.ranking-bar{height:100%;border-radius:3px;transition:width .6s ease;min-width:2px}
.ranking-pct{text-align:right;font-weight:700;font-size:11px}

/* ═══ DAILY CHART ═══ */
.chart-container{flex:1;position:relative;display:flex;flex-direction:column}
.chart-svg-wrap{flex:1;position:relative;overflow:hidden}
.chart-legend{display:flex;gap:16px;justify-content:center;padding:6px 0;font-family:var(--mono);font-size:9px;color:var(--text-muted)}
.chart-legend span{display:flex;align-items:center;gap:4px}
.chart-legend-dot{width:10px;height:3px;border-radius:1px;display:inline-block}

/* ═══ TABLES (carteira, details) ═══ */
.cart-table,.detail-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
.cart-table thead,.detail-table thead{border-bottom:1px solid var(--border)}
.cart-table th,.detail-table th{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;padding:6px 8px;text-align:left;font-weight:600}
.cart-table td,.detail-table td{padding:4px 8px;border-bottom:1px solid rgba(26,45,66,.3)}
.cart-table tr:nth-child(odd),.detail-table tr:nth-child(odd){background:rgba(255,255,255,.01)}
.cart-table .cart-name,.detail-table .dt-name{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:inline-block}
.cart-table .cart-val,.detail-table .dt-val{color:var(--accent);font-weight:700;text-align:right}
.cart-table .cart-count{color:var(--text-muted);text-align:center}
.detail-table .dt-muted{color:var(--text-muted);text-align:right}
.detail-table .dt-pct{font-weight:700;text-align:right}
.detail-table th.right,.detail-table td.right{text-align:right}

/* ═══ COMPOSIÇÃO (ÁGUA) ═══ */
.comp-row{display:grid;grid-template-columns:1fr 80px 80px 80px;align-items:center;gap:4px;padding:4px 8px;font-family:var(--mono);font-size:12px;border-radius:4px}
.comp-row:nth-child(odd){background:rgba(255,255,255,.01)}
.comp-header{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);margin-bottom:3px;font-weight:600}
.comp-header span:nth-child(n+2),.comp-row span:nth-child(n+2){text-align:right;font-weight:600}
.comp-row .comp-vendas{color:var(--blue)}
.comp-row .comp-loc{color:var(--amber)}
.comp-row .comp-total{color:var(--text)}
.comp-row .comp-name{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-kpi-row{display:flex;gap:10px;margin-bottom:12px}
.comp-kpi{flex:1;text-align:center;padding:10px;background:var(--bg-elevated);border-radius:6px;border:1px solid var(--border)}
.comp-kpi-label{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;font-weight:600}
.comp-kpi-val{font-family:var(--mono);font-size:18px;font-weight:800}

/* ═══ DETAIL SECTIONS (below viewport — scroll area) ═══ */
.details{padding:10px;display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--border)}
.details .section-title{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:2px;padding:14px 0 8px;display:flex;align-items:center;gap:8px}
.details .section-title::before{content:'';flex:0 0 3px;height:14px;background:var(--accent);border-radius:2px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:10px}
.detail-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;overflow:auto;max-height:400px}
.detail-card-header{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border)}

/* ═══ EXECUTIVE SECTIONS ═══ */
.exec-section{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.exec-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.exec-section-title{font-family:var(--mono);font-size:9px;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.exec-hero{font-family:var(--mono);font-size:42px;font-weight:800;color:var(--text);line-height:1;text-shadow:0 0 30px var(--glow)}
.exec-hero-sm{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--text-muted);line-height:1;margin-top:4px}
.exec-mini-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.exec-mini-table td{padding:3px 4px;border-bottom:1px solid rgba(26,45,66,.3)}
.exec-mini-table tr:nth-child(odd){background:rgba(255,255,255,.01)}
.exec-mini-table .exec-name{color:var(--text);font-weight:500;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block}
.exec-mini-table .exec-val{color:var(--accent);font-weight:700;text-align:right}
.exec-mini-table .exec-badge{font-size:7px;padding:1px 4px;border-radius:2px;font-weight:700;letter-spacing:.5px}
.exec-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.exec-kpi-box{background:var(--bg-elevated);border-radius:6px;padding:10px;text-align:center;border:1px solid var(--border)}
.exec-kpi-box .kpi-num{font-family:var(--mono);font-size:24px;font-weight:800;color:var(--text)}
.exec-kpi-box .kpi-label{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.8px;margin-top:2px;font-weight:600}
.exec-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--mono);font-size:11px}
.exec-bar-label{width:50px;color:var(--text-muted);font-weight:700;font-size:10px}
.exec-bar-track{flex:1;height:12px;background:var(--bg-elevated);border-radius:4px;overflow:hidden}
.exec-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}
.exec-bar-val{width:60px;text-align:right;font-weight:700;font-size:10px}
.exec-bar-pct{width:44px;text-align:right;font-weight:700;font-size:10px}
.exec-status-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:11px}
.exec-status-label{flex:1;color:var(--text-muted)}
.exec-status-val{font-family:var(--mono);font-weight:700}

/* ═══ TOGGLE BAR (VENDAS) ═══ */
.toggle-bar{height:28px;background:var(--bg-ticker);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--mono);font-size:10px}
.toggle-btn{background:none;border:1px solid var(--border);color:var(--text-muted);padding:2px 18px;border-radius:4px;cursor:pointer;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.8px;transition:all .2s}
.toggle-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(0,212,170,.04)}
.toggle-timer{color:var(--text-dim);font-size:9px;margin-left:12px}

/* ═══ DRILLDOWN MODAL ═══ */
.dd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;animation:ddFadeIn .15s ease}
@keyframes ddFadeIn{from{opacity:0}to{opacity:1}}
.dd-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;width:92%;max-width:720px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4);position:relative}
.dd-modal::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.4}
.dd-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.dd-title{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:.8px}
.dd-subtitle{font-family:var(--mono);font-size:9px;color:var(--text-muted);margin-top:2px}
.dd-close{background:none;border:1px solid var(--border);color:var(--text-muted);font-size:14px;width:28px;height:28px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-weight:700;flex-shrink:0}
.dd-close:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,107,.06)}
.dd-body{overflow-y:auto;padding:12px 16px;flex:1;min-height:0}
.dd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.dd-kpi{background:var(--bg-elevated);border-radius:4px;padding:8px 6px;text-align:center;border:1px solid var(--border)}
.dd-kpi-label{font-family:var(--mono);font-size:7px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.dd-kpi-val{font-family:var(--mono);font-size:14px;font-weight:800;margin-top:2px}
.dd-section{margin-bottom:14px}
.dd-section-title{font-family:var(--mono);font-size:8px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.dd-table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:9px}
.dd-table th{font-size:7px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;padding:2px 4px;text-align:right;font-weight:600;border-bottom:1px solid var(--border)}
.dd-table th:first-child{text-align:left}
.dd-table td{padding:1px 4px;border-bottom:1px solid rgba(26,45,66,.15);text-align:right}
.dd-table td:first-child{text-align:left;color:var(--text);font-weight:500}
.dd-table tr:nth-child(odd){background:rgba(255,255,255,.008)}
.dd-table tr.dd-tot td{border-top:1.5px solid var(--accent);font-weight:700}
.dd-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-family:var(--mono);font-size:9px}
.dd-bar-label{width:60px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-bar-track{flex:1;height:8px;background:var(--bg-elevated);border-radius:3px;overflow:hidden}
.dd-bar-fill{height:100%;border-radius:3px;min-width:2px}
.dd-bar-val{width:55px;text-align:right;font-weight:700;color:var(--accent)}
/* Clickable names */
.rn-click,.nm-click{cursor:pointer;transition:color .15s}
.rn-click:hover,.nm-click:hover{color:var(--accent)!important;text-decoration:underline}

/* ═══ FOOTER ═══ */
.footer{height:28px;background:var(--bg-ticker);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-family:var(--mono);font-size:10px;color:var(--text-dim)}
.footer span{display:flex;align-items:center;gap:6px}
.footer .ft-accent{color:var(--accent)}

/* ═══ FULLSCREEN BTN ═══ */
.fs-btn{background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:9px;padding:3px 10px;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:600;letter-spacing:.5px}
.fs-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,170,.04)}

/* ═══ THEME TOGGLE ═══ */
.theme-btn{background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:9px;padding:3px 10px;border-radius:4px;cursor:pointer;transition:all .2s;font-weight:600;letter-spacing:.5px;display:flex;align-items:center;gap:4px}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}

/* ═══ MOBILE ═══ */
@media(max-width:900px){
  .cockpit,.cockpit-exec{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
  .hero-value{font-size:36px}
  .hero-pct{font-size:22px}
  .hero-stat-val{font-size:13px}
  .ranking-row{grid-template-columns:20px 1fr 70px 40px 0 70px 40px;font-size:11px}
  .ranking-header{grid-template-columns:20px 1fr 70px 40px 0 70px 40px;font-size:8px}
  .ranking-bar-wrap{display:none}
  .ticker{flex-wrap:wrap;height:auto;padding:6px 12px;gap:4px}
  .ticker-item{padding:0 10px;font-size:11px}
  .ticker-right{margin-left:0;width:100%;justify-content:space-between;margin-top:4px}
  .ticker-right nav{flex-wrap:wrap;gap:4px}
  .detail-grid{grid-template-columns:1fr}
  .exec-kpi-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr;gap:8px}
  .dd-modal{width:98%;max-height:92vh}
  .dd-kpis{grid-template-columns:repeat(2,1fr)}
  .footer{font-size:9px;padding:0 12px}
  .fs-btn,.theme-btn{font-size:8px;padding:2px 6px}
}

/* ═══ MOBILE SMALL ═══ */
@media(max-width:480px){
  .hero-value{font-size:28px}
  .hero-pct{font-size:18px}
  .exec-hero{font-size:28px}
  .exec-hero-sm{font-size:16px}
  .ticker-item{padding:0 6px;font-size:10px}
  .ticker-val{font-size:11px}
  .ticker-clock{font-size:12px}
  .card{padding:12px}
  .card-header{font-size:9px;letter-spacing:1px;margin-bottom:8px;padding-bottom:6px}
}