/* Shared shell for the vertical demos (school, clinic). Deliberately mirrors
   the real product's chrome so what a visitor clicks looks like what they buy. */
:root{
  --bg:#0f172a;--surface:#1e293b;--s2:#243147;--s3:#2c3b56;--line:rgba(255,255,255,.075);
  --t:#f1f5f9;--m:#94a3b8;--f:#64748b;
  --em:#10b981;--em2:#34d399;--gold:#f0b429;--red:#ef4444;--blue:#3b82f6;--violet:#a855f7;
  --sidebar:236px;--head:58px;--r:12px;
  --font:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--t);font-family:var(--font);font-size:14px;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:rgba(16,185,129,.3)}

.app{display:flex;min-height:100vh}

/* ── sidebar ── */
.sb{width:var(--sidebar);background:#0b1220;border-right:1px solid var(--line);flex-shrink:0;
    display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:30;
    transition:transform .28s cubic-bezier(.22,1,.36,1)}
.sb-top{padding:16px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.sb-top img{width:32px;height:32px;border-radius:9px}
.sb-top b{font-size:15px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.2}
.sb-top span{font-size:10.5px;color:var(--f);font-weight:600}
.sb-nav{padding:12px 10px;flex:1;overflow-y:auto}
.sb-lbl{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--f);
        padding:14px 10px 7px}
.sb-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;cursor:pointer;
      color:var(--m);font-weight:600;font-size:13.5px;transition:background .16s,color .16s;
      border-left:2px solid transparent}
.sb-i:hover{background:rgba(255,255,255,.04);color:var(--t)}
.sb-i.on{background:rgba(16,185,129,.11);color:var(--em2);border-left-color:var(--em)}
.sb-i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;
          stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sb-user{padding:12px 14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.sb-user .av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
             justify-content:center;font-weight:800;font-size:12px;color:#04110b;flex-shrink:0}
.sb-user b{font-size:12.5px;display:block;line-height:1.25}
.sb-user span{font-size:10px;color:var(--f);font-weight:700;letter-spacing:.06em}

/* ── main ── */
.main{flex:1;margin-left:var(--sidebar);min-width:0}
.hd{height:var(--head);border-bottom:1px solid var(--line);display:flex;align-items:center;
    gap:14px;padding:0 clamp(14px,2.4vw,26px);position:sticky;top:0;background:rgba(15,23,42,.94);
    backdrop-filter:blur(12px);z-index:20}
.hd h1{font-size:17px;font-weight:800;letter-spacing:-.02em}
.hd .sub{font-size:11.5px;color:var(--f);font-weight:600}
.hd .sp{margin-left:auto}
.burger{display:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
        align-items:center;justify-content:center;flex-direction:column;gap:3.5px;background:none;cursor:pointer}
.burger i{width:15px;height:1.9px;background:var(--t);border-radius:2px;display:block}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:25}
@media(max-width:860px){
  .sb{transform:translateX(-100%)}
  .sb.open{transform:none}
  .main{margin-left:0}
  .burger{display:flex}
  .scrim.on{display:block}
}
.body{padding:clamp(16px,2.4vw,26px)}

/* ── bits ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;
     font-size:13px;border-radius:9px;padding:9px 15px;cursor:pointer;border:none;white-space:nowrap;
     transition:filter .16s,transform .16s}
.btn:active{transform:scale(.97)}
.btn-p{background:linear-gradient(135deg,#14c88a,#059669);color:#04110b}
.btn-p:hover{filter:brightness(1.08)}
.btn-g{background:transparent;border:1px solid var(--s3);color:var(--t)}
.btn-g:hover{border-color:var(--em);color:var(--em2)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.kpi .k{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--f);
        display:flex;align-items:center;gap:6px}
.kpi .k svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.kpi .v{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.028em;margin-top:9px;line-height:1}
.kpi .s{font-size:11.5px;color:var(--m);margin-top:6px;font-weight:600}
.kpi.em .v{color:var(--em2)}.kpi.gold .v{color:var(--gold)}
.kpi.red .v{color:var(--red)}.kpi.blue .v{color:var(--blue)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.panel-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.panel-h h2{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.panel-h .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.panel-b{padding:16px 18px}

.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
        color:var(--f);padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover{background:rgba(255,255,255,.022)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.who{display:flex;align-items:center;gap:10px}
.who .av{width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;
         font-weight:800;font-size:11px;color:#04110b;flex-shrink:0}
.who b{font-weight:700;display:block;line-height:1.25}
.who span{font-size:11px;color:var(--f);font-weight:600}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.03em;
      padding:4px 10px;border-radius:100px;white-space:nowrap}
.chip.ok{background:rgba(16,185,129,.14);color:var(--em2);border:1px solid rgba(16,185,129,.32)}
.chip.warn{background:rgba(240,180,41,.13);color:var(--gold);border:1px solid rgba(240,180,41,.3)}
.chip.bad{background:rgba(239,68,68,.13);color:#fca5a5;border:1px solid rgba(239,68,68,.32)}
.chip.info{background:rgba(59,130,246,.13);color:#93c5fd;border:1px solid rgba(59,130,246,.32)}
.chip.mute{background:rgba(255,255,255,.05);color:var(--m);border:1px solid var(--line)}

/* attendance / booking toggles */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{padding:6px 12px;font-size:11.5px;font-weight:800;background:none;border:none;cursor:pointer;
            color:var(--m);transition:background .14s,color .14s}
.seg button.on{color:#04110b}
.seg button.on[data-v=P],.seg button.on[data-v=Present]{background:var(--em)}
.seg button.on[data-v=A],.seg button.on[data-v=Absent]{background:var(--red);color:#fff}
.seg button.on[data-v=L],.seg button.on[data-v=Late]{background:var(--gold)}

.field{display:block;margin-bottom:13px}
.field span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
            color:var(--f);margin-bottom:6px}
.field input,.field select{width:100%;background:var(--bg);border:1px solid var(--s3);border-radius:9px;
  padding:10px 12px;font-size:13.5px;transition:border-color .16s,box-shadow .16s}
.field input:focus,.field select:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px rgba(16,185,129,.13)}

/* modal */
.mask{position:fixed;inset:0;background:rgba(3,7,14,.72);backdrop-filter:blur(4px);z-index:60;
      display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;visibility:hidden;
      transition:opacity .22s,visibility .22s}
.mask.on{opacity:1;visibility:visible}
.modal{background:var(--surface);border:1px solid var(--s3);border-radius:15px;width:min(460px,100%);
       max-height:88vh;overflow-y:auto;box-shadow:0 40px 90px rgba(0,0,0,.7);
       transform:translateY(12px) scale(.98);transition:transform .26s cubic-bezier(.22,1,.36,1)}
.mask.on .modal{transform:none}
.modal-h{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center}
.modal-h h3{font-size:15.5px;font-weight:800;letter-spacing:-.015em}
.modal-h button{margin-left:auto;background:none;border:none;color:var(--f);cursor:pointer;font-size:21px;line-height:1}
.modal-b{padding:20px}
.modal-f{padding:15px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}

/* receipt */
.receipt{background:#fff;color:#111;border-radius:11px;padding:22px;font-size:12.5px}
.receipt h4{font-size:15px;font-weight:800;letter-spacing:-.02em}
.receipt .rh{text-align:center;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:14px}
.receipt .rh p{font-size:11px;color:#555;margin-top:3px}
.receipt .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed #ccc}
.receipt .row.tot{border-bottom:0;border-top:2px solid #111;margin-top:8px;padding-top:10px;
                  font-weight:800;font-size:14.5px}
.receipt .rf{margin-top:16px;padding-top:12px;border-top:1px dashed #ccc;font-size:10.5px;color:#666;
             display:flex;justify-content:space-between}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#0b1220;
       border:1px solid var(--em);color:var(--em2);padding:12px 20px;border-radius:11px;font-weight:700;
       font-size:13px;z-index:80;box-shadow:0 18px 44px rgba(0,0,0,.6);opacity:0;visibility:hidden;
       transition:opacity .24s,transform .24s,visibility .24s;display:flex;align-items:center;gap:9px}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:var(--em2);fill:none;stroke-width:2.6;stroke-linecap:round}

/* demo ribbon */
.ribbon{position:fixed;top:0;left:0;right:0;height:26px;background:linear-gradient(90deg,#059669,#12b981);
        color:#04110b;font-size:11px;font-weight:800;letter-spacing:.05em;display:flex;align-items:center;
        justify-content:center;gap:8px;z-index:70}
.ribbon a{color:#04110b;text-decoration:underline;text-underline-offset:2px}
body.has-ribbon{padding-top:26px}
body.has-ribbon .sb,body.has-ribbon .hd{top:26px}
body.has-ribbon .sb{height:calc(100vh - 26px)}

.bars{display:flex;align-items:flex-end;gap:7px;height:118px;padding-top:8px}
.bars div{flex:1;background:linear-gradient(180deg,var(--em2),rgba(16,185,129,.22));border-radius:5px 5px 0 0;
          position:relative;min-height:3px;transition:height .8s cubic-bezier(.22,1,.36,1)}
.bars div span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:9.5px;
               color:var(--f);font-weight:700}
.bars-wrap{padding-bottom:22px}