*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg-0:#f5f5f8;--bg-1:#ffffff;--bg-2:#eeeef4;--bg-3:#e2e2ec;--fg-1:#121218;--fg-2:#3a3a48;--fg-3:#6a6a80;--fg-4:#9a9ab0;--bd-1:#d8d8e4;--bd-2:#c4c4d8;--accent:oklch(.55 .20 280);--accent-sub:oklch(.55 .20 280 / .12);--accent-fg:#fff;--danger:oklch(.52 .22 25);--danger-sub:oklch(.52 .22 25 / .10);--danger-fg:#fff;--success:oklch(.52 .18 150);--success-sub:oklch(.52 .18 150 / .10);--gold:oklch(.65 .16 85);--gold-sub:oklch(.65 .16 85 / .12);--plat:oklch(.60 .08 260);--plat-sub:oklch(.60 .08 260 / .12);--silver:oklch(.55 .04 260);--silver-sub:oklch(.55 .04 260 / .12);--radius:10px;--radius-sm:6px;--shadow:0 2px 8px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.12);--font:'Inter',system-ui,-apple-system,sans-serif;--ff-mono:'JetBrains Mono','Fira Code',monospace;--topbar-h:54px;--side-w:230px}
[data-theme="dark"],.dark{--bg-0:#0b0b10;--bg-1:#111118;--bg-2:#181820;--bg-3:#20202a;--fg-1:#eeedf2;--fg-2:#b9b7c4;--fg-3:#8886a0;--fg-4:#5c5a72;--bd-1:#2a2a38;--bd-2:#35354a;--accent:oklch(.65 .22 280);--accent-sub:oklch(.35 .12 280 / .2);--accent-fg:#fff;--danger:oklch(.6 .22 25);--danger-sub:oklch(.35 .12 25 / .2);--danger-fg:#fff;--success:oklch(.6 .18 150);--success-sub:oklch(.35 .10 150 / .2);--gold:oklch(.7 .16 85);--gold-sub:oklch(.45 .10 85 / .2);--plat:oklch(.7 .08 260);--plat-sub:oklch(.45 .05 260 / .2);--silver:oklch(.65 .04 260);--silver-sub:oklch(.45 .03 260 / .2);--shadow:0 2px 8px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.5)}
html{height:100%}
body{font-family:var(--font);background:var(--bg-0);color:var(--fg-1);font-size:13px;line-height:1.5;height:100%;overflow:hidden}
a{color:var(--accent);text-decoration:none}
.app{display:flex;height:100vh}
.side{width:var(--side-w);background:var(--bg-1);border-right:1px solid var(--bd-1);display:flex;flex-direction:column;transition:transform .25s ease,margin .25s ease;z-index:100;position:relative;overflow:hidden}
html.side-collapsed .side{margin-left:calc(var(--side-w)*-1)}
.side__head{padding:14px 16px;border-bottom:1px solid var(--bd-1);display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.3px}
.side__head svg{color:var(--accent)}
.side__body{flex:1;overflow-y:auto;padding:8px}
.stree{margin-bottom:2px}
.stree__head{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:0 0;border:none;color:var(--fg-2);font-size:12px;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s;text-align:left}
.stree__head:hover{background:var(--bg-2);color:var(--fg-1)}
.stree__head .sarr{transition:transform .2s;margin-left:auto}
.stree.open>.stree__head .sarr{transform:rotate(90deg)}
.stree__body{display:none;padding-left:4px}
.stree.open>.stree__body{display:block}
.sitem{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:0 0;border:none;color:var(--fg-3);font-size:12px;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s;text-align:left}
.sitem:hover{background:var(--bg-2);color:var(--fg-1)}
.sitem.active{background:var(--accent-sub);color:var(--accent);font-weight:600}
/* Itens de navegacao sao <a>: tira o sublinhado herdado do link. */
.sitem{text-decoration:none}
/* Item fora de grupo (Recebimentos): respira antes dos grupos. */
.sitem--solo{margin:6px 0}
/* Marca de link externo, discreta, encostada a direita. */
.sitem__ext{margin-left:auto;opacity:.45;flex-shrink:0}
/* Grupo FECHADO com filho ativo: sem isto voce perde a referencia de onde esta. */
.stree.has-active:not(.open)>.stree__head,
.stree.has-active:not(.open)>.stree__head svg{color:var(--accent)}
/* Foco visivel para quem navega por teclado. */
.sitem:focus-visible,.stree__head:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:oklch(.12 .01 280 / .7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd-1);gap:12px}
.topbar__left{display:flex;align-items:center;gap:12px}
.topbar__right{display:flex;align-items:center;gap:8px}
.topbar__toggle{background:0 0;border:none;color:var(--fg-2);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex}
.topbar__toggle:hover{color:var(--fg-1);background:var(--bg-2)}
.topbar__clock{font-size:11px;color:var(--fg-3);font-family:var(--ff-mono);padding:4px 8px;background:var(--bg-2);border-radius:var(--radius-sm)}
.content{flex:1;overflow-y:auto;padding:20px 24px}
.abar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.abar__title{font-size:18px;font-weight:700;letter-spacing:-.4px;display:flex;align-items:center;gap:8px}
.abar__count{font-size:11px;font-weight:600;color:var(--fg-3);background:var(--bg-2);padding:2px 8px;border-radius:20px}
.abar small{font-size:11px;font-weight:400;color:var(--fg-4)}
.tw{background:var(--bg-1);border:1px solid var(--bd-1);border-radius:var(--radius);overflow:hidden}
.t-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
thead{background:var(--bg-2)}
th{padding:10px 12px;text-align:left;font-weight:600;color:var(--fg-3);white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--bd-1)}
td{padding:10px 12px;border-bottom:1px solid var(--bd-1);color:var(--fg-2)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg-2)}
.col-check{width:36px;text-align:center}
.col-check-id{width:40px;color:var(--fg-4);font-size:11px}
.col-acoes{width:80px;text-align:left}
.act{background:0 0;border:none;color:var(--fg-3);cursor:pointer;padding:5px;border-radius:var(--radius-sm);transition:all .15s;display:inline-flex;vertical-align:middle}
.act:hover{background:var(--bg-3);color:var(--accent)}
.act--del:hover{color:var(--danger);background:var(--danger-sub)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font);white-space:nowrap}
.btn--primary{background:var(--accent);color:var(--accent-fg)}
.btn--primary:hover{filter:brightness(1.15)}
.btn--ghost{background:var(--bg-2);color:var(--fg-2)}
.btn--ghost:hover{background:var(--bg-3);color:var(--fg-1)}
.btn--sm{padding:5px 10px;font-size:11px}
.btn--danger{background:var(--danger);color:var(--danger-fg)}
.btn--danger:hover{filter:brightness(1.15)}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.badge--plat{background:var(--plat-sub);color:var(--plat)}
.badge--gold{background:var(--gold-sub);color:var(--gold)}
.badge--silver{background:var(--silver-sub);color:var(--silver)}
.badge--success{background:var(--success-sub);color:var(--success)}
.badge--danger{background:var(--danger-sub);color:var(--danger)}
.mod-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
.mod-overlay.open{display:flex}
.modal{background:var(--bg-1);border:1px solid var(--bd-2);border-radius:var(--radius);width:100%;max-width:520px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modalIn .2s ease}
.modal--sm{max-width:420px}
.modal--md{max-width:560px}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--bd-1);flex-shrink:0;position:sticky;top:0;background:var(--bg-1);z-index:1;border-radius:var(--radius) var(--radius) 0 0;gap:8px}
.modal__head-left{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:1}
.modal__head-icon{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--accent-sub);color:var(--accent);flex-shrink:0}
.modal__title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.modal__close{background:0 0;border:none;color:var(--fg-3);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex}
.modal__close:hover{background:var(--bg-2);color:var(--fg-1)}
.modal__body{padding:16px;flex:1;overflow-y:auto}
.modal__head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.modal__foot{display:flex;justify-content:flex-end;gap:6px;padding:12px 16px;border-top:1px solid var(--bd-1)}
.modal__foot--between{justify-content:space-between}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fg .full{grid-column:1/-1}
.ff{display:flex;flex-direction:column;gap:4px}
.ff label{font-size:11px;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.4px}
.ff input,.ff select{padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--bd-1);background:var(--bg-2);color:var(--fg-1);font-size:12px;font-family:var(--font);transition:border .15s;outline:none}
.ff input:focus,.ff select:focus{border-color:var(--accent)}
.ff input[readonly]{opacity:.6}
.ff input::placeholder{color:var(--fg-4)}
.del-warn{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--danger-sub);border-radius:var(--radius-sm);color:var(--danger);font-size:12px;font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat{background:var(--bg-1);border:1px solid var(--bd-1);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px}
.stat__icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--accent-sub);color:var(--accent);flex-shrink:0}
.stat__info{display:flex;flex-direction:column}
.stat__num{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.stat__label{font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.pagi{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-top:1px solid var(--bd-1);font-size:11px;color:var(--fg-3)}
.pagi__pages{display:flex;gap:3px}
.pagi a,.pagi span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;transition:all .15s}
.pagi a{color:var(--fg-2);background:var(--bg-2);text-decoration:none}
.pagi a:hover{background:var(--bg-3);color:var(--fg-1)}
.pagi .active{background:var(--accent);color:var(--accent-fg)}
.pagi .disabled{opacity:.3;pointer-events:none}
.toast-container{position:fixed;top:12px;right:12px;z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:500;box-shadow:var(--shadow);animation:slideIn .25s ease;pointer-events:auto;max-width:360px}
.toast--success{background:var(--success-sub);color:var(--success);border:1px solid var(--success)}
.toast--error{background:var(--danger-sub);color:var(--danger);border:1px solid var(--danger)}
.toast__close{background:0 0;border:none;color:inherit;cursor:pointer;padding:2px;border-radius:4px;display:flex;opacity:.6;margin-left:auto;flex-shrink:0}
.toast__close:hover{opacity:1}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.theme-btn{width:30px;height:30px;border:none;border-radius:var(--radius-sm);background:var(--bg-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--fg-2);font-size:14px;transition:transform .3s ease}
.theme-btn:hover{transform:rotate(40deg)}
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 0,var(--accent-sub) 0,transparent 60%),var(--bg-0);padding:20px}
.auth__card{width:100%;max-width:400px;background:var(--bg-1);border:1px solid var(--bd-2);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg)}
.auth__logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;margin-bottom:24px;justify-content:center}
.auth__logo svg{color:var(--accent)}
.auth__title{text-align:center;font-size:16px;font-weight:700;margin-bottom:4px}
.auth__sub{text-align:center;font-size:12px;color:var(--fg-3);margin-bottom:24px}
.auth__field{margin-bottom:14px}
.auth__field label{display:block;font-size:11px;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.auth__field input{width:100%;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid var(--bd-1);background:var(--bg-2);color:var(--fg-1);font-size:13px;font-family:var(--font);outline:none;transition:border .15s}
.auth__field input:focus{border-color:var(--accent)}
.auth__btn{width:100%;padding:10px;border-radius:var(--radius-sm);border:none;background:var(--accent);color:var(--accent-fg);font-size:13px;font-weight:700;cursor:pointer;transition:filter .15s;font-family:var(--font);margin-top:4px}
.auth__btn:hover{filter:brightness(1.15)}
.auth__footer{text-align:center;margin-top:16px;font-size:12px;color:var(--fg-3)}
.auth__error{background:var(--danger-sub);color:var(--danger);padding:8px 12px;border-radius:var(--radius-sm);font-size:12px;margin-bottom:14px;border:1px solid var(--danger)}
@media(max-width:768px){.side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}
.side.open{transform:translateX(0)}
html.side-collapsed .side{margin-left:0}
.stats{grid-template-columns:1fr 1fr}
.topbar__clock{display:none}
.content{padding:12px}}

/* --- rodape do menu: usuario + saude do sistema ------------------------
   Fica colado embaixo porque o .side e flex-column e o .side__body tem
   flex:1 — ele empurra este bloco para o pe, mesmo com poucos itens. */
.side__foot{border-top:1px solid var(--bd-1);padding:10px 8px 8px;flex-shrink:0}
.saude{padding:2px 8px 8px}
.saude__t{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--fg-3);opacity:.7;margin-bottom:6px}
.saude__l{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--fg-3);padding:2px 0}
.saude__p{width:7px;height:7px;border-radius:50%;background:var(--bd-1);flex-shrink:0;transition:background .2s}
.saude__p[data-e="ok"]{background:#22c55e}
.saude__p[data-e="falha"],.saude__p[data-e="parado"]{background:#ef4444}
.saude__p[data-e="desconhecido"]{background:#f59e0b}
.sfoot{display:flex;align-items:center;gap:9px;padding:8px;border-radius:var(--radius-sm);background:var(--bg-2)}
.sfoot__ini{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sfoot__id{min-width:0;flex:1}
.sfoot__nome{font-size:12px;font-weight:600;color:var(--fg-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfoot__nivel{font-size:10px;color:var(--fg-3)}
.sfoot form{display:flex}
.sfoot__sair{background:0 0;border:none;color:var(--fg-3);cursor:pointer;padding:5px;border-radius:var(--radius-sm);display:flex;transition:all .15s}
.sfoot__sair:hover{background:var(--bg-1);color:#ef4444}

/* --- menu sem faixa de cima -------------------------------------------
   O botao de fechar mora no cabecalho do menu, e o de tema no rodape. Como
   fechar o menu esconde os dois, existe o .reabrir: um botao pequeno que so
   aparece com o menu fechado. Sem ele, fechar seria caminho sem volta. */
.side__head{justify-content:space-between}
.side__fechar{margin-left:auto;background:0 0;border:none;color:var(--fg-3);cursor:pointer;padding:5px;border-radius:var(--radius-sm);display:flex;transition:all .15s}
.side__fechar:hover{background:var(--bg-2);color:var(--fg-1)}
.reabrir{display:none;position:fixed;top:12px;left:12px;z-index:200;width:32px;height:32px;align-items:center;justify-content:center;background:var(--bg-1);border:1px solid var(--bd-1);border-radius:var(--radius-sm);color:var(--fg-2);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.reabrir:hover{color:var(--fg-1);background:var(--bg-2)}
html.side-collapsed .reabrir{display:flex}
/* Sem a faixa, o conteudo precisa da propria folga no topo. */
html.side-collapsed .content{padding-left:56px}