/* ===== LetSplitit for Restaurants — portal ===== */
:root{
  --ink:#15171C; --ink-2:#4B525A; --ink-3:#869099;
  --line:#E6E9ED; --line-2:#F4F6F8; --surface:#FFFFFF; --bg:#F4F6F8;
  --brand:#0E9E86; --brand-ink:#0A7B68; --brand-soft:#E7F4F0;
  --r:14px; --r-lg:20px;
  --sh-sm:0 1px 2px rgba(20,24,30,.05),0 1px 3px rgba(20,24,30,.04);
  --sh:0 6px 22px rgba(20,24,30,.09);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:var(--font); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; line-height:1.45}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
.muted{color:var(--ink-3); font-weight:500}

/* topbar */
.r-top{display:flex; align-items:center; justify-content:space-between; padding:14px 22px; background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10}
.r-brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px}
.r-brand img{width:28px; height:28px}
.r-brand span{color:var(--ink-3); font-weight:600; font-size:14px}
.r-top-actions{display:flex; gap:8px}

/* buttons */
.r-btn{border-radius:999px; font-weight:700; font-size:14px; padding:11px 18px; transition:transform .12s ease, filter .2s ease}
.r-btn:active{transform:scale(.97)}
.r-btn.primary{background:var(--brand); color:#062B23}
.r-btn.primary:hover{filter:brightness(1.03)}
.r-btn.dark{background:var(--ink); color:#fff}
.r-btn.ghost{background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); border:1px solid var(--line)}
.r-btn.lg{width:100%; padding:14px; font-size:15px}
.r-btn.sm{padding:9px 13px; font-size:13px}

/* layout */
.r-wrap{max-width:1000px; margin:0 auto; padding:34px 22px 60px}

/* hero / setup */
.r-hero{text-align:center; max-width:620px; margin:10px auto 30px}
.r-hero h1{font-size:34px; font-weight:800; letter-spacing:-.025em; line-height:1.1; text-wrap:balance}
.r-sub{margin-top:12px; font-size:16px; color:var(--ink-2); font-weight:500; text-wrap:pretty}

.r-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh); padding:24px}
.setup-card{max-width:460px; margin:0 auto}
.setup-card h2{font-size:20px; font-weight:800}
.setup-card .muted{margin:4px 0 16px; font-size:14px}
.setup-card label, .r-modal-card label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:12px}
.setup-card input{font-size:15px; font-weight:600; padding:12px 13px; border:1.5px solid var(--line); border-radius:12px; background:var(--surface)}
.setup-card input:focus{outline:none; border-color:var(--brand)}
.row2{display:flex; gap:12px}
.row2 label{flex:1}

/* login */
.login-card{max-width:420px; margin:6vh auto 0}
.login-card h2{font-size:22px; font-weight:800}
.login-card .muted{margin:6px 0 18px; font-size:14px}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:14px}
.login-card input{font-size:16px; font-weight:600; padding:12px 13px; border:1.5px solid var(--line); border-radius:12px}
.login-card input:focus{outline:none; border-color:var(--brand)}
#lg-code{letter-spacing:.28em; text-align:center; font-weight:800}
.lg-err{color:#C0392B; font-weight:600; font-size:13px; margin-top:12px}

.r-steps{list-style:none; display:flex; gap:14px; max-width:680px; margin:26px auto 0; padding:0}
.r-steps li{flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.r-steps b{display:block; font-size:14px; font-weight:800; color:var(--brand-ink)}
.r-steps span{font-size:13px; color:var(--ink-3); font-weight:500}

/* pricing */
.r-pricing{display:flex; justify-content:center; margin-top:34px}
.plan{background:var(--ink); color:#fff; border-radius:22px; padding:26px; width:100%; max-width:380px; text-align:center; box-shadow:var(--sh)}
.plan .tag{display:inline-block; background:var(--brand); color:#062B23; font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:999px}
.plan .price{margin:14px 0 2px; display:flex; align-items:baseline; justify-content:center; gap:6px}
.plan .price b{font-size:44px; font-weight:800; letter-spacing:-.03em}
.plan .price span{color:#C4CBD2; font-weight:600; font-size:14px}
.plan .price-alt{color:#9AA3AB; font-size:13px; font-weight:600}
.plan ul{list-style:none; text-align:left; margin:18px 0; display:flex; flex-direction:column; gap:9px}
.plan ul li{font-size:14px; font-weight:500; padding-left:24px; position:relative; color:#E4E8EC}
.plan ul li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:800}
.plan .r-btn{width:100%}

/* fair-by-design */
.r-fair{max-width:760px; margin:34px auto 0; text-align:center}
.r-fair h3{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:16px}
.fair-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px}
.fair-grid div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; text-align:left}
.fair-grid b{display:block; font-size:14.5px; font-weight:800; margin-bottom:4px}
.fair-grid span{font-size:13px; color:var(--ink-3); font-weight:500}

/* dashboard */
.r-dash-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px}
.r-dash-head h1{font-size:26px; font-weight:800; letter-spacing:-.02em}
.tables{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px}
.t-card{background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-sm); border:1px solid var(--line); padding:16px; text-align:center; transition:box-shadow .2s}
.t-card.open{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--sh-sm)}
.t-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.t-label{font-weight:800; font-size:16px}
.t-status{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; background:var(--line-2); color:var(--ink-3)}
.t-status.open{background:var(--brand-soft); color:var(--brand-ink)}
.t-qr{width:140px; height:140px; margin:4px auto 12px; display:block; border-radius:10px; background:var(--line-2)}
.t-amt{font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; margin-bottom:10px}
.t-amt.muted{color:var(--ink-3); font-weight:600; font-size:13px}
.t-actions{display:flex; gap:8px}
.t-actions .r-btn{flex:1; padding:9px; font-size:13px}

/* floor plan */
.dash-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.seg-view{display:inline-flex; background:#E6EAEE; border-radius:10px; padding:3px; gap:3px}
.seg-view button{padding:7px 13px; border-radius:8px; font-weight:700; font-size:13px; color:var(--ink-2)}
.seg-view button.on{background:var(--surface); box-shadow:var(--sh-sm); color:var(--ink)}
.floor-legend{display:flex; align-items:center; gap:18px; margin:0 2px 10px; font-size:12.5px; font-weight:600; color:var(--ink-2); flex-wrap:wrap}
.floor-legend span{display:inline-flex; align-items:center; gap:6px}
.floor-legend .dot{width:11px; height:11px; border-radius:50%}
.floor-legend .dot.idle{background:#C7CDD4}
.floor-legend .dot.open{background:#E0A23C}
.floor-legend .legend-hint{color:var(--ink-3); font-weight:500}
.floor{position:relative; min-height:62vh; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; touch-action:none;
  background-image:radial-gradient(var(--line) 1.2px, transparent 1.2px); background-size:24px 24px; background-position:12px 12px}
.tchip{position:absolute; width:84px; height:84px; border-radius:18px; background:var(--line-2);
  border:2px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:grab; user-select:none; box-shadow:var(--sh-sm); transition:box-shadow .15s ease, border-color .15s ease}
.tchip:hover{box-shadow:var(--sh)}
.tchip:active{cursor:grabbing; box-shadow:var(--sh)}
.tchip.open{background:#FFF7ED; border-color:#E0A23C}
.tchip .tn{font-weight:800; font-size:16px}
.tchip .ta{font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-3)}
.tchip.open .ta{color:#B5701A}
.tchip .tdot{position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%; background:#C7CDD4}
.tchip.open .tdot{background:#E0A23C}

/* modal */
.r-modal{position:fixed; inset:0; z-index:50; background:rgba(8,14,12,.55); backdrop-filter:blur(4px); display:grid; place-items:center; padding:22px; animation:rfade .2s ease both}
.r-modal-card{background:var(--surface); border-radius:22px; padding:26px 24px; width:100%; max-width:440px; box-shadow:var(--sh); position:relative; max-height:88vh; overflow:auto; animation:rpop .28s cubic-bezier(.22,1,.36,1) both}
.r-x{position:absolute; top:14px; right:16px; font-size:26px; color:var(--ink-3); width:34px; height:34px; border-radius:10px; line-height:1}
.eyebrow{display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.r-modal-card h2{font-size:22px; font-weight:800; margin-top:2px}
.r-modal-card .muted{font-size:13.5px; margin:6px 0 16px}
.bm-add{display:flex; gap:8px; margin-bottom:12px}
.bm-add input{font-weight:600; font-size:15px; padding:11px; border:1.5px solid var(--line); border-radius:12px; min-width:0}
.bm-add #bm-name{flex:1}
.bm-add .bm-price{width:84px; text-align:right; font-variant-numeric:tabular-nums}
.bm-add input:focus{outline:none; border-color:var(--brand)}
.bm-items{display:flex; flex-direction:column; gap:7px; margin-bottom:12px}
.bm-row{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--line-2); border-radius:10px; font-size:14px; font-weight:600}
.bm-row span{flex:1}
.bm-row b{font-variant-numeric:tabular-nums}
.bm-row button{color:var(--ink-3); font-size:18px; width:22px}
.bm-empty{color:var(--ink-3); font-weight:500; font-size:14px; text-align:center; padding:14px}
.bm-total{display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:17px; padding:12px 2px; border-top:1px dashed var(--line)}
.bm-total b{font-variant-numeric:tabular-nums}
.bm-actions{display:flex; gap:10px; margin-top:14px}
.bm-actions .r-btn{flex:1}

@keyframes rfade{from{opacity:0}to{opacity:1}}
@keyframes rpop{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* print: QR tents */
#print-sheet{display:none}
@media print{
  body *{visibility:hidden}
  #print-sheet, #print-sheet *{visibility:visible}
  #print-sheet{display:block; position:absolute; inset:0}
  .tent{page-break-inside:avoid; break-inside:avoid; text-align:center; padding:48px 24px; border:2px dashed #ccc; margin:0 0 24px; border-radius:18px}
  .tent h2{font-size:26px; margin-bottom:4px}
  .tent .tnum{font-size:20px; color:#555; margin-bottom:18px}
  .tent img{width:260px; height:260px}
  .tent p{margin-top:14px; font-size:15px; color:#333; font-weight:600}
  .tent-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px}
}

@media(max-width:560px){
  .r-hero h1{font-size:27px}
  .row2{flex-direction:column; gap:0}
  .r-steps{flex-direction:column}
  .r-dash-head{flex-direction:column; align-items:stretch; gap:12px}
}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:8px}
/* paid state — bill covered, table just needs clearing */
.t-card.paid{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--sh-sm)}
.t-status.paid{background:var(--brand-soft); color:var(--brand-ink)}
.floor-legend .dot.paiddot{background:var(--brand)}
.tchip.paid{background:var(--brand-soft); border-color:var(--brand)}
.tchip.paid .ta{color:var(--brand-ink)}
.tchip.paid .tdot{background:var(--brand)}

.sub-banner{margin:14px 0; padding:12px 16px; border-radius:12px; background:#FFF4E8; color:#8A5A1F; font-weight:600; font-size:14px}
.sub-banner.ok{background:var(--brand-soft); color:var(--brand-ink)}

/* ── insights ── */
.ins-head{display:flex; justify-content:flex-end; margin-bottom:14px}
.ins-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px}
.stat{background:var(--surface); border-radius:var(--r); padding:16px 18px; box-shadow:var(--sh-sm)}
.stat .k{display:block; font-size:12px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em}
.stat .v{display:block; font-size:24px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums}
.stat small{color:var(--ink-3); font-size:12px}
.ins-row2{display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:14px}
.ins-card{background:var(--surface); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh-sm)}
.ins-card h3{font-size:14px; font-weight:700; margin-bottom:12px}
.ins-chart{display:flex; align-items:flex-end; gap:8px; height:140px}
.bar-wrap{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%}
.bar{position:relative; width:100%; max-width:38px; flex:1; background:var(--line-2); border-radius:8px; overflow:hidden}
.bar i{position:absolute; bottom:0; left:0; right:0; background:#C9D6D2; border-radius:8px 8px 0 0}
.bar i.paidbar{background:var(--brand)}
.bar-wrap span{font-size:10.5px; color:var(--ink-3); font-weight:600}
.busy-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.busy-row:last-child{border-bottom:none}
.busy-row b{font-variant-numeric:tabular-nums}
#staff-card{margin-bottom:14px}
.staff-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.staff-row span{flex:1; overflow:hidden; text-overflow:ellipsis}
.staff-row i{font-style:normal; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--brand-ink); background:var(--brand-soft); padding:3px 8px; border-radius:999px}
.staff-row button{width:26px; height:26px; border-radius:50%; background:var(--line-2); color:var(--ink-3); font-size:15px; line-height:1}
.staff-row button:hover{background:#F3DEDB; color:#B3372A}
.staff-add{display:flex; gap:8px; margin-top:12px}
.staff-add input{flex:1; padding:10px 14px; border:1.5px solid var(--line); border-radius:10px; font:inherit; font-size:14px}
.staff-add input:focus{outline:none; border-color:var(--brand)}

.connect-card{display:flex; align-items:center; justify-content:space-between; gap:18px}
.connect-card p{font-size:13.5px; margin-top:4px; max-width:520px}
.connect-card code{background:var(--line-2); border-radius:6px; padding:1px 6px; font-size:12px}
.ins-note{margin-top:10px; font-size:13.5px}
@media(max-width:760px){.ins-row2{grid-template-columns:1fr}.connect-card{flex-direction:column; align-items:flex-start}}

.r-foot{margin:34px 0 18px; text-align:center; color:var(--ink-3); font-size:13px}
.r-foot a{color:inherit; text-decoration:none}
.r-foot a:hover{color:var(--brand-ink)}
@media print{.r-foot{display:none}}