/* public/css/style.css — ISP Intelligence Web */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* ── Reset + base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --azul:    #3b82f6;
  --verde:   #22c55e;
  --vermelho:#ef4444;
  --laranja: #f97316;
  --amarelo: #f59e0b;
  --roxo:    #a855f7;
  --cinza:   #94a3b8;

  --bg-azul:    #001a4a;
  --bg-verde:   #052e16;
  --bg-vermelho:#450a0a;
  --bg-laranja: #431407;
  --bg-amarelo: #1a1200;

  --sidebar-w: 220px;
  --topbar-h:  48px;
  --radius:    12px;
  --shadow:    0 1px 6px rgba(0,0,0,.06);
}

html, body { font-family:'Plus Jakarta Sans',sans-serif; background:#f1f4f9; color:#0f172a; font-size:14px; line-height:1.5; }

/* ── Layout shell ── */
.shell        { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.main         { display:flex; flex-direction:column; min-height:100vh; overflow:hidden; }
.content      { padding:16px; display:flex; flex-direction:column; gap:14px; flex:1; background:#f1f4f9; overflow-y:auto; }

/* ── Sidebar ── */
.sidebar      { background:#0b0f1e; display:flex; flex-direction:column; }
.sb-logo      { padding:18px 16px 14px; border-bottom:1px solid #1e2d45; display:flex; align-items:center; gap:9px; }
.sb-logo-icon { width:30px; height:30px; border-radius:8px; background:var(--azul); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.sb-logo-name { font-family:'Syne',sans-serif; font-size:14px; font-weight:800; color:#fff; line-height:1.1; }
.sb-logo-sub  { font-size:10px; color:#475569; }
.sb-section   { font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:#334155; padding:16px 16px 6px; }
.sb-item      { display:flex; align-items:center; gap:9px; padding:8px 14px; margin:0 6px; border-radius:8px; cursor:pointer; text-decoration:none; transition:background .15s; }
.sb-item:hover { background:#1e2d45; }
.sb-item.active { background:var(--azul); }
.sb-item-ico  { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.sb-item-lbl  { font-size:12px; color:#94a3b8; font-weight:500; }
.sb-item.active .sb-item-lbl { color:#fff; }
.sb-item:hover .sb-item-lbl { color:#cbd5e1; }
.sb-badge     { margin-left:auto; background:var(--vermelho); color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:10px; }
.sb-badge.blue { background:var(--azul); }
.sb-period    { padding:12px 16px; border-top:1px solid #1e2d45; margin-top:auto; }
.sb-period label { font-size:9px; color:#475569; text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:5px; }
.sb-period select { width:100%; background:#1e2d45; border:none; color:#94a3b8; font-size:11px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.sb-analisar  { width:calc(100% - 20px); margin:8px 10px 14px; padding:9px; background:var(--azul); border:none; border-radius:8px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; font-family:inherit; }
.sb-analisar:hover { background:#2563eb; }

/* ── Topbar ── */
.topbar       { background:#fff; border-bottom:1px solid #e2e8f0; height:var(--topbar-h); display:flex; align-items:center; padding:0 20px; gap:0; overflow-x:auto; flex-shrink:0; }
.tab          { padding:0 14px; height:100%; display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#64748b; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; }
.tab:hover    { color:#334155; }
.tab.active   { color:var(--azul); border-bottom-color:var(--azul); }
.tb-right     { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.tb-badge-live { background:#fee2e2; color:#b91c1c; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; display:flex; align-items:center; gap:4px; }
.pulse-dot    { width:6px; height:6px; border-radius:50%; background:var(--vermelho); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.tb-hora      { font-size:11px; color:#94a3b8; }

/* ── Seção label ── */
.sec { font-family:'Syne',sans-serif; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#94a3b8; padding-bottom:7px; border-bottom:1px solid #e2e8f0; }

/* ── KPI cards ── */
.kpi-grid     { display:grid; gap:10px; }
.kpi-grid.c3  { grid-template-columns:repeat(3,1fr); }
.kpi-grid.c4  { grid-template-columns:repeat(4,1fr); }
.kpi          { background:#fff; border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); border-top:3px solid var(--c,var(--azul)); }
.kpi-lbl      { font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#94a3b8; margin-bottom:3px; }
.kpi-val      { font-family:'Syne',sans-serif; font-size:28px; font-weight:800; color:var(--c,var(--azul)); line-height:1; }
.kpi-sub      { font-size:10px; color:#94a3b8; margin-top:2px; }

/* ── Cards brancos ── */
.card         { background:#fff; border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.card-title   { font-size:13px; font-weight:700; color:#0f172a; margin-bottom:12px; }

/* ── Banner alerta ── */
.banner       { background:#1a0505; border:1px solid var(--vermelho); border-left:4px solid var(--vermelho); border-radius:10px; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.banner-pulse { font-size:16px; animation:pulse 1.5s infinite; }
.banner-txt   { font-size:13px; font-weight:700; color:#fca5a5; }
.banner-sub   { font-size:11px; color:#64748b; margin-left:8px; }
.banner-link  { margin-left:auto; font-size:10px; color:#475569; cursor:pointer; text-decoration:none; }

/* ── Badges ── */
.badge        { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.badge-sup    { background:#dbeafe; color:#1d4ed8; }
.badge-fin    { background:#fef3c7; color:#b45309; }
.badge-ven    { background:#d1fae5; color:#065f46; }
.badge-can    { background:#fee2e2; color:#b91c1c; }
.badge-out    { background:#ede9fe; color:#5b21b6; }
.badge-ua     { background:#fee2e2; color:#991b1b; }
.badge-um     { background:#fef3c7; color:#92400e; }
.badge-ub     { background:#f0fdf4; color:#166534; }
.badge-ativo  { background:#dcfce7; color:#166534; }
.badge-inad   { background:#fee2e2; color:#b91c1c; }

/* ── Tabela ── */
.table-wrap   { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
table         { width:100%; border-collapse:collapse; font-size:12px; }
thead th      { background:#0f172a; color:#64748b; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:10px 14px; text-align:left; }
tbody tr      { border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#f8fafc; }
tbody td      { padding:10px 14px; color:#334155; }

/* ── Botões ── */
.btn          { padding:9px 18px; border-radius:9px; font-size:12px; font-weight:700; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:6px; font-family:inherit; transition:transform .12s, opacity .12s; }
.btn:hover    { opacity:.88; transform:translateY(-1px); }
.btn-primary  { background:linear-gradient(135deg,#1d4ed8,#4f46e5); color:#fff; }
.btn-success  { background:linear-gradient(135deg,#16a34a,#22c55e); color:#fff; }
.btn-danger   { background:#fee2e2; color:#b91c1c; }
.btn-outline  { background:#fff; border:1px solid #e2e8f0; color:#334155; }
.btn-sm       { padding:5px 12px; font-size:11px; }

/* ── Formulários ── */
.form-group   { display:flex; flex-direction:column; gap:4px; }
.form-label   { font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#94a3b8; }
.form-control { padding:8px 12px; border:1px solid #e2e8f0; border-radius:8px; font-size:12px; font-family:inherit; background:#f8fafc; color:#334155; outline:none; transition:border .15s; }
.form-control:focus { border-color:var(--azul); background:#fff; }
select.form-control { cursor:pointer; }

/* ── Grid 2 colunas ── */
.grid2  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid32 { display:grid; grid-template-columns:1fr 2fr; gap:14px; }

/* ── Anel SVG (churn) ── */
@keyframes ringIn { from{stroke-dasharray:0 327} to{stroke-dasharray:var(--d,200) 327} }
.ring-arc { animation:ringIn .9s cubic-bezier(.4,0,.2,1) forwards; }

/* ── Toast ── */
.toast        { position:fixed; bottom:24px; right:24px; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; z-index:9999; animation:fadeToast .3s ease; }
.toast-ok     { background:#dcfce7; color:#166534; }
.toast-erro   { background:#fee2e2; color:#b91c1c; }
@keyframes fadeToast { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── Loading spinner ── */
.spinner      { display:inline-block; width:18px; height:18px; border:2px solid #e2e8f0; border-top-color:var(--azul); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* ── Login page ── */
.login-wrap   { min-height:100vh; display:flex; align-items:center; justify-content:center; background:#0b0f1e; }
.login-card   { background:#fff; border-radius:16px; padding:40px 36px; width:100%; max-width:380px; box-shadow:0 8px 40px rgba(0,0,0,.3); }
.login-logo   { text-align:center; margin-bottom:28px; }
.login-logo h1{ font-family:'Syne',sans-serif; font-size:24px; font-weight:800; color:#0f172a; }
.login-logo p { font-size:12px; color:#94a3b8; margin-top:2px; }

/* ── Responsividade básica ── */
@media (max-width:900px) {
  .shell      { grid-template-columns:1fr; }
  .sidebar    { display:none; }
  .kpi-grid.c4 { grid-template-columns:repeat(2,1fr); }
  .grid2, .grid32 { grid-template-columns:1fr; }
}