:root{
  --bg:#0a0f1c; --panel:#111a2e; --panel2:#0d1526; --line:#24304a;
  --text:#e8ecf4; --muted:#8b96ab; --green:#22c55e; --blue:#2563eb;
  --warn:#d97706; --danger:#ef4444; --radius-lg:14px; --radius-sm:8px;
  --shadow:0 10px 30px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;margin:0}

/* O container real do layout é o #app (não o body) — é ele que precisa
   ser flex, porque é ele quem contém tanto a tela de login quanto o
   shell (sidebar + main). Sem isso, "flex:1" dentro do login/sidebar
   não tem efeito nenhum, porque o pai deles (body) não repassa altura
   nem contexto flex de verdade pro filho único (#app). */
#app{display:flex;flex-direction:column;min-height:100vh}

/* SIDEBAR — mobile-first: vira uma barra horizontal no topo (nav com
   scroll lateral se não couber), depois vira coluna lateral no desktop */
.sidebar{width:100%;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:9px;padding:14px 16px;font-weight:800;font-size:14.5px;border-bottom:1px solid var(--line)}
.brand i{color:var(--danger)}
.admin-pill{background:rgba(239,68,68,.15);color:var(--danger);font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;margin-left:auto}
.sidebar-nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-item{display:flex;align-items:center;gap:9px;padding:12px 16px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;flex-shrink:0}
.nav-item i{width:14px;text-align:center}
.nav-item:hover{color:var(--text);background:var(--panel2)}
.nav-item.active{color:var(--text);background:var(--panel2);border-bottom-color:var(--green)}
.nav-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.nav-footer-cargo{display:none}
.nav-footer .logout{color:var(--danger);cursor:pointer;font-weight:700;flex-shrink:0}

@media (min-width: 769px) {
  #app{flex-direction:row}
  .sidebar{width:220px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--line);height:100vh;position:sticky;top:0}
  .sidebar-nav{flex-direction:column;overflow-x:visible}
  .nav-item{border-bottom:none;border-left:3px solid transparent;padding:12px 18px}
  .nav-item.active{border-bottom:none;border-left-color:var(--green)}
  .nav-footer{flex-direction:column;align-items:flex-start;margin-top:auto}
  .nav-footer-cargo{display:inline}
}

/* MAIN */
.main{flex:1;min-width:0;padding:20px;overflow-y:auto}
h2{margin:0 0 4px}
.sub{color:var(--muted);font-size:12.5px;margin:0 0 22px}

@media (min-width: 769px) {
  .main{padding:32px}
}

/* LOGIN — flex:1 aqui agora funciona de verdade, porque o pai (#app)
   já é flex e ocupa min-height:100vh */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(145deg,#06101f 0%,#0a1729 100%)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px;width:100%;max-width:380px;box-shadow:none;text-align:left}
.login-card-wide{max-width:460px;text-align:center}
.login-card h1{font-size:24px;margin:0 0 6px;font-weight:800}
.login-card h1 span{color:var(--green)}
.login-card .sub{margin-bottom:22px}
.brand-mark{width:54px;height:54px;margin:0 auto 14px;border-radius:12px;display:grid;place-items:center;background:#07101f;border:1px solid var(--line);overflow:hidden}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand-logo{width:32px;height:32px;object-fit:contain;flex:0 0 auto}
.auth-form{display:grid;gap:12px;margin-top:16px}
.code-input{text-align:center;letter-spacing:.45em;font-size:20px}
.auth-error{color:var(--danger);font-size:12px;text-align:left}
.mfa-qr{display:block;width:min(300px,78vw);height:auto;aspect-ratio:1;object-fit:contain;background:#fff;padding:12px;border-radius:8px;margin:14px auto;image-rendering:pixelated}
.mfa-secret{text-align:left;color:var(--muted);font-size:12px;margin-bottom:12px}
.mfa-secret code{display:block;overflow-wrap:anywhere;margin-top:8px;color:var(--text)}

/* CARDS / STATS — mobile-first: 1 coluna, 2 no tablet, 4 no desktop */
.stats-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:24px}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.stat-icon{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.stat-label{font-size:11px;color:var(--muted)}
.stat-value{font-size:22px;font-weight:800;margin-top:2px}
.dash-2col{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;min-width:0;overflow:hidden}
.card h3{margin:0 0 12px;font-size:14px}
.attn-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:12.5px;gap:10px}
.attn-row:first-of-type{border-top:none}
.activity-row{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:12px}
.activity-row:first-of-type{border-top:none}
.activity-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0}
.see-all{color:var(--blue);font-size:11.5px;font-weight:700;cursor:pointer;display:block;margin-top:10px;text-align:center;background:none;border:none;width:100%}

@media (min-width: 560px) {
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 769px) {
  .stats-grid{grid-template-columns:repeat(5,1fr)}
  .dash-2col{grid-template-columns:1.3fr 1fr}
}

/* FORM CONTROLS */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.input,.select{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;font-family:inherit;min-width:0}
.input{flex:1;min-width:160px}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit}
.btn-primary{background:var(--green);border-color:var(--green);color:#06210f;font-weight:700}
.btn-block{width:100%;justify-content:center}

/* TABLE — com scroll horizontal próprio em telas estreitas, pra não
   espremer o layout inteiro da página */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--line)}
table{width:100%;min-width:640px;border-collapse:collapse;background:var(--panel);font-size:var(--text-sm)}
th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top}
tr:last-child td{border-bottom:none}
.org-name{font-weight:700}
.org-sub{color:var(--muted);font-size:11.5px;margin-top:2px}

/* BADGES */
.badge{padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;display:inline-block;white-space:nowrap}
.b-green{background:rgba(34,197,94,.15);color:var(--green)}
.b-blue{background:rgba(37,99,235,.18);color:#60a5fa}
.b-red{background:rgba(239,68,68,.15);color:var(--danger)}
.b-yellow{background:rgba(217,119,6,.15);color:var(--warn)}

/* TOGGLE */
.switch{position:relative;width:36px;height:20px;flex-shrink:0;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--line);border-radius:20px;cursor:pointer;transition:.2s}
.slider:before{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--green)}
.switch input:checked + .slider:before{transform:translateX(16px)}

.link-btn{color:var(--blue);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;background:none;border:none;padding:0;font-family:inherit}
.restore-link{color:var(--warn);font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;background:none;border:none;font-family:inherit}
.user-cell{display:flex;align-items:center;gap:8px}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.code{font-family:monospace;font-size:11px;color:var(--muted);background:var(--panel2);padding:1px 6px;border-radius:4px}

/* MODAL */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:999;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);max-width:480px;width:100%;max-height:85vh;overflow-y:auto;padding:24px}
.modal h3{margin:0 0 2px}
.modal .sub{margin-bottom:16px}
.mod-group{margin-bottom:14px}
.mod-group-title{font-size:10.5px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
.mod-item{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:13px;gap:10px}
.mod-item:first-of-type{border-top:none}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}

/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--line);color:var(--text);padding:12px 20px;border-radius:var(--radius-sm);font-size:13px;opacity:0;pointer-events:none;transition:.25s;box-shadow:var(--shadow);z-index:9999;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-error{border-color:var(--danger);color:var(--danger)}
.toast-success{border-color:var(--green)}

.loading{padding:2rem;text-align:center;color:var(--muted)}
.empty{padding:2rem;text-align:center;color:var(--muted)}