/* VillaFitness — © 2026 Netgoing, Lda. — Todos os direitos reservados. */
:root{
  --bg:#0a0b0d;--panel:#101216;--panel-2:#15171d;--panel-3:#1c1f26;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.14);
  --txt:#f3f4f6;--dim:#9aa0aa;--faint:#5e636d;
  --volt:#d4f84c;--ok:#54d98c;--warn:#ffb547;--full:#ff5d5d;--blue:#5db8ff;
  --display:'Bebas Neue','Archivo',system-ui,sans-serif;--body:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{font-family:var(--body);background:var(--bg);color:var(--txt);font-size:14px;}
::selection{background:var(--volt);color:#000;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#23262e;border-radius:6px;border:2px solid var(--bg);}
a{color:inherit;text-decoration:none;}
.disp{font-family:var(--display);letter-spacing:.5px;line-height:.95;}
button{font-family:var(--body);cursor:pointer;}
input,select,textarea{font-family:var(--body);}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 600px at 70% -10%,#1a1d24 0,transparent 55%),radial-gradient(800px 500px at 0% 100%,#15171d 0,transparent 50%),var(--bg);}
.login-card{width:100%;max-width:400px;background:linear-gradient(160deg,#13151a,#0c0d11);border:1px solid var(--line);border-radius:24px;padding:40px 34px;box-shadow:0 40px 90px -30px #000;}
.login-card .logo{display:flex;justify-content:center;margin-bottom:8px;}
.login-card h1{font-family:var(--display);font-size:30px;text-align:center;letter-spacing:1px;margin:18px 0 4px;}
.login-card p.sub{text-align:center;color:var(--dim);margin:0 0 26px;font-size:13px;}
.fld{margin-bottom:14px;}
.fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-bottom:6px;}
.inp{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;color:var(--txt);font-size:15px;outline:none;transition:.15s;}
.inp:focus{border-color:var(--volt);}
.hint{font-size:11px;color:var(--faint);text-align:center;margin-top:18px;line-height:1.7;}

/* ---------- BUTTONS ---------- */
.btn{border:none;border-radius:12px;font-weight:700;font-size:14px;padding:13px 18px;transition:.15s;color:#000;background:var(--txt);}
.btn:active{transform:scale(.98);}
.btn.block{width:100%;}
.btn.volt{background:var(--volt);}
.btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--line);}
.btn.ghost:hover{color:var(--txt);border-color:var(--line-2);}
.btn.danger{background:transparent;color:var(--full);border:1px solid rgba(255,93,93,.4);}
.btn.sm{padding:8px 13px;font-size:13px;border-radius:10px;}
.btn.icon{padding:9px;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;}

/* ---------- SHELL ---------- */
.shell{display:flex;min-height:100vh;}
.sidebar{width:248px;flex:0 0 248px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sb-logo{padding:24px 22px 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);}
.sb-logo svg{width:120px;}
.sb-nav{flex:1;padding:16px 12px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;}
.nav-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:12px;color:var(--dim);font-weight:600;cursor:pointer;transition:.12s;position:relative;}
.nav-item svg{width:20px;height:20px;flex:0 0 20px;}
.nav-item:hover{background:var(--panel-2);color:var(--txt);}
.nav-item.active{background:var(--volt);color:#0a0a0a;}
.nav-item .badge{margin-left:auto;background:var(--full);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 6px;}
.nav-item.active .badge{background:#0a0a0a;color:var(--volt);}
.sb-foot{padding:14px 12px;border-top:1px solid var(--line);}
.sb-user{display:flex;align-items:center;gap:11px;padding:8px 10px;}
.sb-user .av{width:38px;height:38px;border-radius:50%;background:var(--panel-3);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:18px;color:var(--volt);flex:0 0 38px;}
.sb-user .nm{flex:1;min-width:0;}
.sb-user .nm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user .nm span{font-size:11px;color:var(--faint);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;gap:14px;padding:22px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,11,13,.85);backdrop-filter:blur(12px);z-index:30;}
.topbar h1{font-family:var(--display);font-size:30px;letter-spacing:.6px;text-transform:uppercase;flex:1;}
.topbar .menu-btn{display:none;}
.content{padding:28px 32px 60px;flex:1;}

/* ---------- CARDS / GRID ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:28px;}
.stat-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:20px 22px;}
.stat-card .v{font-family:var(--display);font-size:44px;line-height:1;color:var(--volt);}
.stat-card .l{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;margin-top:8px;}
.stat-card.alt .v{color:var(--txt);}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:20px;}
.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.panel-h h2{font-family:var(--display);font-size:22px;letter-spacing:.5px;text-transform:uppercase;}
.section-label{font-family:var(--display);font-size:13px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin:0 0 14px;}

/* ---------- TABLE ---------- */
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint);font-weight:700;padding:0 14px 12px;border-bottom:1px solid var(--line);}
.table td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle;}
.table tbody tr{cursor:pointer;transition:.1s;}
.table tbody tr:hover{background:var(--panel-2);}
.table .name-cell{display:flex;align-items:center;gap:12px;font-weight:700;}
.av-sm{width:34px;height:34px;border-radius:50%;background:var(--panel-3);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;color:var(--volt);flex:0 0 34px;}
.muted{color:var(--dim);}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--panel-3);border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;}
.tag.volt{background:rgba(212,248,76,.12);border-color:rgba(212,248,76,.3);color:var(--volt);}
.tag.alert{background:rgba(255,93,93,.14);border-color:rgba(255,93,93,.35);color:var(--full);}
.tag.ok{background:rgba(84,217,140,.14);border-color:rgba(84,217,140,.35);color:var(--ok);}
.tag.warn{background:rgba(255,181,71,.14);border-color:rgba(255,181,71,.4);color:var(--warn);}

/* search */
.search{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:0 14px;}
.search input{flex:1;background:none;border:none;color:var(--txt);padding:12px 0;outline:none;font-size:14px;}
.search svg{color:var(--faint);}

/* ---------- CLASS CARDS ---------- */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.class-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;border-top:3px solid var(--volt);}
.class-card .ch{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.class-card .ch b{font-size:18px;}
.class-card .csub{color:var(--dim);font-size:13px;margin-bottom:14px;}
.class-card .cmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.slot-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.slot-chip{background:var(--panel-3);border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;}
.slot-chip .x{color:var(--full);cursor:pointer;font-weight:800;}
.class-card .cacts{display:flex;gap:8px;}

/* occupancy / sessions */
.sess-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);}
.sess-row:last-child{border-bottom:none;}
.sess-time{font-family:var(--display);font-size:22px;width:60px;flex:0 0 60px;}
.sess-info{flex:1;min-width:0;}
.sess-info b{font-size:15px;display:flex;align-items:center;gap:8px;}
.sess-info .swatch{width:10px;height:10px;border-radius:3px;}
.sess-info span{font-size:12px;color:var(--dim);}
.bar{height:8px;border-radius:5px;background:var(--panel-3);overflow:hidden;width:180px;flex:0 0 180px;}
.bar i{display:block;height:100%;border-radius:5px;background:var(--ok);transition:width .3s;}
.sess-cap{width:96px;flex:0 0 96px;text-align:right;font-weight:700;font-size:13px;}
.sess-act{flex:0 0 auto;}

/* date strip */
.datestrip{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:18px;}
.dchip{flex:0 0 64px;height:78px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:.12s;}
.dchip:hover{border-color:var(--line-2);}
.dchip .dow{font-size:11px;color:var(--dim);text-transform:uppercase;}
.dchip .dnum{font-family:var(--display);font-size:26px;}
.dchip.active{background:var(--volt);border-color:var(--volt);}
.dchip.active .dow,.dchip.active .dnum{color:#0a0a0a;}
.dchip .dot{width:5px;height:5px;border-radius:50%;background:var(--volt);}
.dchip.active .dot{background:#0a0a0a;}

/* tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap;}
.tab{padding:11px 16px;color:var(--dim);font-weight:700;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tab:hover{color:var(--txt);}
.tab.active{color:var(--volt);border-bottom-color:var(--volt);}

/* editor rows */
.erow{display:grid;gap:10px;margin-bottom:10px;align-items:center;}
.erow .inp{padding:10px 12px;font-size:14px;}
.erow .del{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:transparent;border:1px solid rgba(255,93,93,.4);color:var(--full);font-size:18px;}
.meta-edit{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
input[type=range]{accent-color:var(--volt);}

/* notif */
.notif{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.notif.unread{border-color:var(--volt);background:linear-gradient(160deg,rgba(212,248,76,.06),var(--panel-2));}
.notif .nt{font-size:14px;line-height:1.45;}
.notif .nd{font-size:11px;color:var(--faint);margin-top:6px;}

/* progress */
.goal{margin-bottom:14px;}
.goal .gh{display:flex;justify-content:space-between;margin-bottom:6px;}
.goal .gh b{font-size:14px;}
.goal .gh span{color:var(--volt);font-weight:700;}

/* empty */
.empty{text-align:center;color:var(--faint);padding:50px 20px;}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;animation:fade .15s;}
.modal{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line-2);border-radius:20px;padding:26px;box-shadow:0 40px 90px -20px #000;animation:pop .2s;}
.modal h3{font-family:var(--display);font-size:26px;letter-spacing:.5px;text-transform:uppercase;margin:0 0 4px;}
.modal .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@keyframes fade{from{opacity:0;}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98);}}
.swatch-pick{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.sw{width:32px;height:32px;border-radius:9px;cursor:pointer;border:2px solid transparent;}
.sw.sel{border-color:#fff;}

/* ---------- TOAST ---------- */
.toast{position:fixed;top:24px;right:24px;background:var(--volt);color:#0a0a0a;font-weight:800;padding:13px 20px;border-radius:12px;z-index:200;opacity:0;transform:translateY(-12px);transition:.25s;box-shadow:0 16px 40px -12px #000;}
.toast.show{opacity:1;transform:translateY(0);}
.toast.err{background:var(--full);color:#fff;}

.loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--faint);}
.spin{width:26px;height:26px;border:3px solid var(--panel-3);border-top-color:var(--volt);border-radius:50%;animation:rot .7s linear infinite;}
@keyframes rot{to{transform:rotate(360deg);}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:880px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:.22s;box-shadow:0 0 60px #000;}
  .sidebar.open{transform:translateX(0);}
  .sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;}
  .topbar .menu-btn{display:inline-flex;}
  .topbar h1{font-size:24px;}
  .content{padding:20px 16px 60px;}
  .sess-row{flex-wrap:wrap;}
  .bar{flex:1;width:auto;}
  .modal .grid2{grid-template-columns:1fr;}
}
.chartwrap{position:relative;}
.chart-tip{position:absolute;transform:translate(-50%,-130%);background:#0a0a0c;border:1px solid var(--line-2);border-radius:10px;padding:7px 12px;font-size:13px;color:var(--txt);pointer-events:none;white-space:nowrap;display:none;z-index:6;box-shadow:0 10px 24px -10px #000;}
.chart-tip b{color:var(--volt);font-size:15px;}
.chart-tip span{display:block;color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.6px;margin-top:2px;}
@media(max-width:760px){ .kpi-cols{ grid-template-columns:1fr !important; } }
.fade-in{animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}}

/* Produtos / consumos (balcão) */
.btn.xs{padding:5px 10px;font-size:12px;border-radius:8px;}
.prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.prodchip{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;color:var(--txt);font-family:inherit;transition:.12s;}
.prodchip:hover{border-color:var(--volt);transform:translateY(-1px);}
.prodchip b{display:block;font-size:14px;margin-bottom:2px;}
.prodchip span{font-size:13px;color:var(--volt);font-weight:700;}
.kpi-box{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:center;}
.kpi-box .kv{font-family:var(--display);font-size:26px;line-height:1;color:var(--volt);}
.kpi-box .kl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);margin-top:5px;}
.link{color:var(--volt);cursor:pointer;text-decoration:underline;}

/* Relatório de consumos */
.rep-filters{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:680px){.rep-filters{grid-template-columns:1fr;}}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.segbtn{background:none;border:none;color:var(--dim);padding:9px 14px;font-family:inherit;font-size:13px;cursor:pointer;}
.segbtn.on{background:var(--volt);color:#000;font-weight:700;}
.prodcheck{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:180px;overflow-y:auto;padding:4px 2px;}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt);cursor:pointer;}
.chk input{accent-color:var(--volt);}
input[type=date].inp,input[type=month].inp,select.inp{color-scheme:dark;}