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

/* ============================================================
   ONVOX CRM — design system (Light + Dark premium)
   Tokens via CSS custom properties; troca de tema por [data-theme].
   ============================================================ */
:root, [data-theme="light"]{
  --side-w:256px;

  --bg:#f4f5fa;
  --surface:#ffffff;
  --surface-2:#f3f4f9;
  --surface-hover:#f7f8fd;
  --border:#e9eaf2;
  --border-strong:#dcdeeb;
  --text:#1b1736;
  --text-muted:#6b7185;
  --text-soft:#9aa0b4;

  --shadow-sm:0 1px 2px rgba(20,22,50,.05);
  --shadow:0 1px 3px rgba(20,22,50,.05), 0 10px 28px rgba(20,22,50,.07);
  --shadow-lg:0 24px 60px rgba(20,22,50,.16);

  --side-bg:linear-gradient(185deg,#5a1990 0%,#7a1f9f 52%,#9c2472 100%);
  --side-text:rgba(255,255,255,.74);
  --side-text-hover:#ffffff;
  --side-active-bg:rgba(255,255,255,.16);
  --side-active-text:#ffffff;
  --side-border:rgba(255,255,255,.14);

  --accent:#8b2fc9;
  --accent-soft:rgba(139,47,201,.10);
  --grad:linear-gradient(135deg,#7c2bbd 0%,#d6249f 100%);
  --ring:rgba(139,47,201,.18);

  --ok:#0f9d58; --ok-bg:rgba(15,157,88,.12); --ok-text:#0f7a47;
  --erro:#e11d48; --erro-bg:rgba(225,29,72,.10); --erro-text:#be123c;

  /* aliases legados (inline styles antigos nos PHPs) */
  --txt:var(--text); --txt-suave:var(--text-muted);
  --card:var(--surface); --card-2:var(--surface-2); --linha:var(--border);
  --roxo:#7c2bbd; --rosa:#d6249f; --rosa-claro:var(--accent);
}

[data-theme="dark"]{
  --bg:#0c0918;
  --surface:#161126;
  --surface-2:#1f1838;
  --surface-hover:#1d1633;
  --border:#291f47;
  --border-strong:#352a59;
  --text:#ece8f7;
  --text-muted:#a99fce;
  --text-soft:#776e96;

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 3px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.42);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);

  --side-bg:linear-gradient(185deg,#150f26 0%,#181230 100%);
  --side-text:rgba(236,232,247,.6);
  --side-text-hover:#ffffff;
  --side-active-bg:linear-gradient(135deg,#7c2bbd 0%,#d6249f 100%);
  --side-active-text:#ffffff;
  --side-border:rgba(255,255,255,.08);

  --accent:#b06ae0;
  --accent-soft:rgba(176,106,224,.16);
  --grad:linear-gradient(135deg,#7c2bbd 0%,#d6249f 100%);
  --ring:rgba(176,106,224,.26);

  --ok:#22c55e; --ok-bg:rgba(34,197,94,.14); --ok-text:#4ade80;
  --erro:#fb7185; --erro-bg:rgba(244,63,94,.14); --erro-text:#fb7185;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .25s ease,color .25s ease;
}
a{color:var(--accent);text-decoration:none}
::selection{background:var(--accent);color:#fff}

/* ---------- BRAND ---------- */
.brand{display:flex;align-items:center;gap:13px;margin-bottom:30px}
.brand .dot{width:44px;height:44px;border-radius:13px;background:var(--grad);flex-shrink:0;
  display:grid;place-items:center;box-shadow:0 8px 20px rgba(139,47,201,.32)}
.brand .dot svg{width:22px;height:22px}
.brand h1{font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--text);line-height:1.1}
.brand small{color:var(--text-muted);font-weight:500;font-size:13px}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:22px;
  background:
    radial-gradient(1100px 560px at 78% -12%,var(--accent-soft),transparent 60%),
    radial-gradient(820px 480px at -6% 112%,var(--accent-soft),transparent 60%),
    var(--bg);}
.login-card{width:min(410px,94vw);background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:42px 36px;box-shadow:var(--shadow-lg)}

/* ---------- LAYOUT ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;
  transition:grid-template-columns .22s ease}
.side{background:var(--side-bg);padding:22px 14px;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;border-right:1px solid var(--side-border);
  transition:transform .25s ease}
.side .brand{margin-bottom:26px;padding:0 6px}
.side .brand h1{color:#fff}
.side .brand small{color:rgba(255,255,255,.62)}

.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  color:var(--side-text);font-weight:600;font-size:14.5px;transition:.15s;white-space:nowrap;overflow:hidden}
.nav a .ico{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center}
.nav a .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nav a:hover{background:rgba(255,255,255,.10);color:var(--side-text-hover)}
.nav a.ativo{background:var(--side-active-bg);color:var(--side-active-text);
  box-shadow:0 6px 16px rgba(0,0,0,.14)}

.side .user{margin-top:auto;padding-top:16px;border-top:1px solid var(--side-border);
  font-size:13px;color:rgba(255,255,255,.7)}
.side .user .uname{color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .user .umail{color:rgba(255,255,255,.6);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.side .user .tag{margin-bottom:10px}
.side .user .tag.usuario{background:rgba(255,255,255,.18);color:#fff}
.side .user .tag.usuario::before{background:#fff}
.side .user .ulogout{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);
  font-weight:600;font-size:13.5px;padding:8px 10px;border-radius:9px;transition:.15s}
.side .user .ulogout:hover{background:rgba(255,255,255,.12);color:#fff}
.side .user .ulogout.ativo{background:rgba(255,255,255,.15);color:#fff}
.side .user .ulogout .ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

.main{padding:26px 34px 48px;overflow:auto;min-height:100vh}
.topo{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.topo-left{display:flex;align-items:center;gap:13px;min-width:0}
.topo h2{font-size:25px;font-weight:800;letter-spacing:-.5px;color:var(--text)}
.topo p{color:var(--text-muted);margin-top:3px;font-size:14px}
.topo-actions{display:flex;align-items:center;gap:8px}

/* ---------- ICON BUTTONS (tema / colapso / menu) ---------- */
.icon-btn{width:40px;height:40px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);display:grid;place-items:center;
  cursor:pointer;transition:.15s;box-shadow:var(--shadow-sm);flex-shrink:0}
.icon-btn:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.collapse-btn svg{transition:transform .2s}
.app.collapsed .collapse-btn svg{transform:rotate(180deg)}
.theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-moon{display:none}
[data-theme="dark"] .theme-btn .i-sun{display:block}
.menu-btn{display:none}

/* ---------- STAT CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;
  box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad);opacity:0;transition:.18s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat:hover::before{opacity:1}
.stat .n{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--text-muted);font-size:13px;font-weight:600;margin-top:6px}
.stat-ico{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;margin-bottom:14px}
.stat-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- CARD "ÚLTIMA LIGAÇÃO" ---------- */
.stat.ultima{display:flex;flex-direction:column;gap:10px;min-width:260px}
@media (min-width:760px){ .stat.ultima{grid-column:span 2} }
.stat.ultima .stat-ico{display:none}
.ultima-rotulo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted)}
.ultima-rotulo .pulse{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 var(--ring);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ring)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ultima-proto{font-family:'Inter',monospace;font-size:22px;font-weight:800;letter-spacing:-.5px;
  display:flex;align-items:center;gap:8px;color:var(--text);word-break:break-all;line-height:1.15}
.ultima-proto .btn-copy{font-size:16px}
.ultima-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--text-muted);font-size:13.5px;margin-top:2px}
.ultima-meta span{display:inline-flex;align-items:center;gap:6px}
.ultima-meta b{color:var(--text);font-weight:700}
.ultima-meta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.stat.ultima.flash{animation:flashcard 1s ease}
@keyframes flashcard{0%{box-shadow:0 0 0 0 var(--ring)}40%{box-shadow:0 0 0 5px var(--ring)}100%{box-shadow:var(--shadow)}}

/* ---------- BARRA DE FILTROS ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;padding:18px 22px;
  border-bottom:1px solid var(--border);background:var(--surface-2)}
.filtros .f-campo{display:flex;flex-direction:column;flex:1 1 150px;min-width:130px}
.filtros .f-periodo,.filtros .f-dia{flex:0 0 auto}
.filtros label{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-soft);font-weight:700}
.filtros input,.filtros select{height:42px;padding:0 13px;font-size:14px}
.filtros .f-dia input{min-width:150px}
.filtros .f-acoes{display:flex;gap:8px;align-items:flex-end;margin-left:auto}
.filtros .f-acoes .btn{margin:0;height:42px}
.btn-filtrar{background:var(--grad);color:#fff;border:none;box-shadow:0 6px 16px var(--ring)}
.btn-filtrar:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* período = controle segmentado (pílula única) */
.segmented{display:inline-flex;align-items:center;height:42px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:12px;padding:4px;gap:3px}
.seg{height:100%;padding:0 15px;border:none;background:transparent;color:var(--text-muted);
  font-size:13.5px;font-weight:600;cursor:pointer;border-radius:9px;transition:.15s;
  font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center}
.seg:hover{color:var(--text);background:var(--surface-hover)}
.seg.ativo{background:var(--grad);color:#fff;box-shadow:0 4px 12px var(--ring)}
.seg.ativo:hover{color:#fff}

/* ---------- INDICADOR TEMPO REAL ---------- */
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok-bg);
  animation:pulse-ok 1.8s infinite}
.live-dot.off{background:var(--text-soft);animation:none}
@keyframes pulse-ok{0%{box-shadow:0 0 0 0 var(--ok-bg)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- PAINEL / TABELA ---------- */
.painel{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.painel .ph{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.painel .ph h3{font-size:16px;font-weight:700;color:var(--text)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 22px;font-size:14px;color:var(--text)}
th{color:var(--text-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;background:var(--surface-2)}
tbody tr{border-top:1px solid var(--border);transition:background .12s}
tbody tr:hover{background:var(--surface-hover)}
.td-proto{font-family:'Inter',monospace;font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.td-proto .btn-copy{margin-left:6px;vertical-align:middle;font-size:13px}
.td-data{white-space:nowrap;font-variant-numeric:tabular-nums}
.td-hora{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-muted)}

/* ---------- BADGES ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.tag.entrada{background:var(--ok-bg);color:var(--ok-text)}
.tag.saida{background:var(--accent-soft);color:var(--accent)}
.tag.admin{background:var(--grad);color:#fff}
.tag.admin::before{background:#fff}
.tag.master{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff}
.tag.master::before{background:#fff}
.tag.usuario{background:var(--surface-2);color:var(--text-muted)}

/* ---------- AÇÕES DA LINHA (tela de usuários) ---------- */
.acoes-linha{display:inline-flex;gap:7px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.sel-nivel{width:auto;min-width:104px;height:33px;padding:0 30px 0 11px;font-size:13px;
  background-position:right 10px center}
.protegido{color:var(--text-soft);font-size:12.5px;font-weight:600;white-space:nowrap}

/* ---------- FORMULÁRIOS ---------- */
label{display:block;font-size:13px;font-weight:600;color:var(--text-muted);margin:16px 0 7px}
input,select,textarea{width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:11px;color:var(--text);font-size:14px;font-family:inherit;transition:.15s}
input::placeholder{color:var(--text-soft)}
input:hover,select:hover,textarea:hover{border-color:var(--accent)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa0b4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select:disabled{opacity:.55;cursor:not-allowed}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  cursor:pointer;padding:11px 18px;border-radius:11px;font-weight:700;font-size:14px;font-family:inherit;
  transition:.15s;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn-grad{background:var(--grad);color:#fff;width:100%;margin-top:22px;box-shadow:0 8px 20px rgba(139,47,201,.28)}
.btn-grad:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 12px 26px rgba(139,47,201,.36)}
.btn-mini{padding:7px 13px;font-size:13px;width:auto;margin:0;background:var(--surface);
  border-color:var(--border-strong);color:var(--text-muted);box-shadow:var(--shadow-sm)}
.btn-mini:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
.btn-add{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.btn-add:hover{background:var(--accent);color:#fff}
.btn-del{background:var(--erro-bg);color:var(--erro);border-color:transparent}
.btn-del:hover{background:var(--erro);color:#fff}
.btn.is-loading{color:transparent !important;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-copy{border:none;background:transparent;cursor:pointer;color:var(--text-soft);padding:2px 5px;border-radius:6px;transition:.12s}
.btn-copy:hover{background:var(--surface-2);color:var(--accent)}

/* ---------- ALERTAS ---------- */
.alerta{padding:13px 16px;border-radius:12px;font-size:14px;margin-bottom:16px;font-weight:600;
  display:flex;align-items:center;gap:9px;border:1px solid transparent}
.alerta::before{font-weight:800}
.alerta.erro{background:var(--erro-bg);color:var(--erro-text)}
.alerta.erro::before{content:"⚠"}
.alerta.ok{background:var(--ok-bg);color:var(--ok-text)}
.alerta.ok::before{content:"✓"}

/* ---------- UTILITÁRIOS ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols-2{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.vazio{padding:54px 30px;text-align:center;color:var(--text-muted)}
.vazio::before{content:"📞";display:block;font-size:32px;margin-bottom:10px;opacity:.45}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-hover) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:8px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- COLAPSO DA SIDEBAR ---------- */
.app.collapsed{--side-w:76px}
.app.collapsed .side{padding:22px 12px}
.app.collapsed .brand{justify-content:center}
.app.collapsed .brand>div:last-child,
.app.collapsed .nav a .txt,
.app.collapsed .user .uname,
.app.collapsed .user .umail,
.app.collapsed .user .tag,
.app.collapsed .user .ulogout .txt{display:none}
.app.collapsed .nav a{justify-content:center;padding:11px}
.app.collapsed .user{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:14px}
.app.collapsed .user .ulogout{padding:9px}

/* ---------- SCRIM (overlay mobile) ---------- */
.scrim{display:none}

/* ---------- RESPONSIVO ---------- */
@media (max-width:980px){ .cols-2{grid-template-columns:1fr} }
@media (max-width:880px){
  .app{grid-template-columns:1fr;--side-w:256px}
  .side{position:fixed;left:0;top:0;z-index:60;width:264px;height:100vh;transform:translateX(-100%)}
  .app.nav-open .side{transform:none;box-shadow:var(--shadow-lg)}
  .app.collapsed .side{padding:22px 14px}      /* ignora colapso no mobile */
  .app.collapsed{--side-w:256px}
  .app.collapsed .brand>div:last-child,
  .app.collapsed .nav a .txt,
  .app.collapsed .user .uname,
  .app.collapsed .user .umail,
  .app.collapsed .user .tag,
  .app.collapsed .user .ulogout .txt{display:revert}
  .collapse-btn{display:none}
  .menu-btn{display:grid}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;opacity:0;
    pointer-events:none;transition:opacity .2s}
  .app.nav-open .scrim{opacity:1;pointer-events:auto}
  .main{padding:18px 16px 40px}
  .topo h2{font-size:21px}
  th,td{padding:12px 14px}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}