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

/* =========================================================================
   Nodus — Tema "Light refinado / Clean SaaS" (accent teal)
   Carregado DEPOIS do <style> inline de cada página → sobrescreve os tokens
   (:root) e dá um polimento por cima dos mesmos nomes de classe.
   ========================================================================= */
:root{
  /* superfícies */
  --bg:#f6f8fb;
  --s1:#ffffff;
  --s2:#f1f4f8;
  --border:#e6eaf0;
  --border2:#d4dae6;
  /* texto */
  --text:#0f172a;
  --muted:#64748b;
  --muted2:#94a3b8;
  /* accent = teal (mantém o nome --blue p/ compatibilidade com o CSS existente) */
  --blue:#14b8a6;
  --blue-l:#e3f7f4;
  --blue-d:#0d9488;
  /* status */
  --green:#16a34a;
  --green-l:#eafaf0;
  --red:#ef4444;
  --red-l:#fef2f2;
  --yellow:#f59e0b;
  /* sidebar (escura, contraste elegante; ativo tingido de teal) */
  --sidebar-bg:#0f172a;
  --sidebar-hover:#1e293b;
  --sidebar-active:#115e59;
  --sidebar-text:#94a3b8;
  --sidebar-text-active:#ffffff;
  --sidebar-border:#1e293b;
  /* tokens novos do tema */
  --radius:10px;
  --radius-sm:8px;
  --radius-xs:6px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 6px 18px rgba(15,23,42,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- base ---- */
html,body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--text);letter-spacing:-.006em;}
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box;}

/* ---- topbar ---- */
.topbar{background:var(--s1);border-bottom:1px solid var(--border);}
.topbar-title{font-weight:700;letter-spacing:-.01em;}
.total-badge{background:var(--blue-l);color:var(--blue-d);border-radius:999px;font-weight:600;padding:3px 10px;}
.coleta-info,.auto-badge{color:var(--muted);}

/* ---- toolbar / inputs ---- */
.toolbar{background:var(--s1);border-bottom:1px solid var(--border);padding:12px 24px;gap:10px;}
.toolbar input,.toolbar select,.form-row input,.form-row select,.quedas-toolbar select{
  border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--s1);color:var(--text);
  font-family:var(--font);font-size:13px;padding:8px 12px;transition:border .15s,box-shadow .15s;}
.toolbar input:focus,.toolbar select:focus,.form-row input:focus,.form-row select:focus,.quedas-toolbar select:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,184,166,.14);outline:none;}
.toolbar input{width:260px;}
.toolbar input::placeholder{color:var(--muted2);}

/* ---- botões ---- */
.btn{border-radius:var(--radius-sm);font-family:var(--font);font-weight:600;font-size:13px;padding:8px 14px;
  transition:all .14s;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-d);filter:none;}
.btn-ghost{background:var(--s1);border:1px solid var(--border2);color:var(--muted);}
.btn-ghost:hover{color:var(--text);border-color:var(--blue);background:var(--blue-l);}
.btn-danger{background:var(--red);color:#fff;}
.btn.active{border-color:var(--blue);color:var(--blue-d);background:var(--blue-l);}

/* ---- cards / painéis (cantos maiores, sombra sutil, mais ar) ---- */
.kpi-card,.kpi,.hub-card,.detail-panel,.loc-card,.conc-card,.det-card,.traffic-card,.modal-box,.resumo-card{
  border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);}
.kpi-card,.kpi{padding:18px 20px;}
.kpi-val,.kpi-value{font-weight:800;letter-spacing:-.02em;}
.hub-card,.detail-panel{transition:box-shadow .15s,transform .15s,border-color .15s;}
.hub-card:hover{box-shadow:var(--shadow-md);border-color:var(--border2);transform:translateY(-1px);}
.panel-hdr,.det-header{background:var(--s2);border-bottom:1px solid var(--border);}
.panel-hdr-title,.det-user-name{font-weight:700;letter-spacing:-.01em;}
.section-title{font-weight:700;color:var(--text);letter-spacing:-.01em;}

/* ---- tabelas ---- */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
thead th{background:var(--s2);color:var(--muted);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.55px;border-bottom:1px solid var(--border);}
thead th.sortable:hover{color:var(--text);background:#e9eef5;}
tbody td{border-bottom:1px solid var(--border);}
tbody tr{transition:background .12s;}
tbody tr:hover{background:var(--blue-l);cursor:pointer;}
.mini-table th{background:var(--s2);}

/* ---- badges ---- */
.tipo-badge{border-radius:var(--radius-xs);font-weight:700;}
.loc-badge{border-radius:999px;font-weight:600;}
.quedas-badge{background:var(--red);}

/* ---- paginação ---- */
.page-btn{border-radius:var(--radius-xs);border:1px solid var(--border);background:var(--s1);font-weight:600;padding:5px 12px;}
.page-btn:hover{border-color:var(--blue);color:var(--blue-d);background:var(--blue-l);}
.page-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.page-info{color:var(--muted);font-weight:700;}

/* ---- sidebar ---- */
.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);}
.nav-item{border-radius:var(--radius-sm);margin:1px 10px;padding:9px 12px;font-weight:500;transition:background .14s,color .14s;}
.nav-item:hover{background:var(--sidebar-hover);color:#fff;}
.nav-item.active{background:var(--sidebar-active);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--blue);}
.nav-section{color:#64748b;letter-spacing:.08em;font-weight:700;font-size:10px;}
.sidebar-logo-text{font-weight:800;letter-spacing:-.02em;}
.user-avatar{background:var(--blue);color:#fff;font-weight:700;}

/* ---- resumo / quedas (Fase 2) ---- */
.resumo-bar{background:var(--s2);}
.resumo-card{box-shadow:var(--shadow-sm);}
.resumo-card .rc-total{color:var(--blue-d);}
.resumo-card.active{box-shadow:0 0 0 2px rgba(20,184,166,.22);border-color:var(--blue);}
.queda-status.off{background:var(--green);}
.queda-status.on{background:var(--red);}

/* ---- toasts / status ---- */
.status-bar{background:var(--s2);color:var(--muted);}
.spinner{border-top-color:var(--blue)!important;}

/* ---- mobile: tabelas largas rolam na horizontal (sobrescreve o overflow:hidden acima) ---- */
@media(max-width:768px){
  /* min-width:0 deixa os itens flex encolherem; senão a tabela empurra a página inteira */
  .main,.content{min-width:0;max-width:100%;}
  .table-wrap{overflow:auto!important;-webkit-overflow-scrolling:touch;}
}

.nav-item.nav-sub{padding-left:40px;font-size:12px;}
.nav-item.nav-sub .nav-icon,.nav-item.nav-sub .nav-icon svg{width:15px;height:15px;}

.eic{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}