/* ============================================================
   KSE CANTEEN — Design System v2
   Reference direction: clean white-card admin console (sidebar +
   soft shadows + pastel icon badges), reskinned in KSE navy/green.
   Desktop: sidebar shell. Mobile: bottom tab bar, app-like screens.
   ============================================================ */

:root{
  --bg:#FAFAFB;
  --surface:#FFFFFF;
  --surface-soft:#F7F6FE;
  --border:#E9E5FB;
  --ink:#1D1B3A;
  --ink-soft:#6E6A94;
  --navy:#2A2560;
  --blue:#6C63FF;
  --blue-dark:#4C3FD6;
  --blue-soft:#EEECFC;
  --coral:#FF6584;
  --coral-soft:#FFE7EC;
  --green:#2FA360;
  --green-soft:#E6F7EC;
  --amber-soft:#FFF4E3;
  --amber:#C9860B;
  --red:#E14545;
  --red-soft:#FDEAEA;
  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  --shadow-card:0 12px 32px -14px rgba(42,37,96,.16);
  --shadow-pop:0 22px 50px -16px rgba(42,37,96,.28);
  --sidebar-w:250px;
}

*{box-sizing:border-box;}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0;
  font-family:'Inter',-apple-system,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at -8% -12%, rgba(255,101,132,.03), transparent 55%),
    radial-gradient(1000px 680px at 108% -8%, rgba(108,99,255,.04), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(108,99,255,.03), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{ font-family:'Sora','Inter',sans-serif; color:var(--ink); margin:0; letter-spacing:-0.02em; }
p{ color:var(--ink-soft); line-height:1.6; margin:0 0 8px;}
a{ color:inherit; text-decoration:none;}
button{ font-family:inherit;}
::selection{ background:var(--blue-soft); }

/* ---------------- shared surfaces ---------------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-card); }
.card-pad{ padding:24px; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); margin-bottom:6px;}
.section-title{ display:flex; align-items:center; justify-content:space-between; margin:32px 0 16px;}
.section-title h2{ font-size:18px; font-weight:700;}

/* ---------------- buttons & inputs ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:14.5px;
  border:none; cursor:pointer; transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:scale(.97);}
.btn-primary{ background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; box-shadow:0 12px 26px -10px rgba(108,99,255,.6);}
.btn-primary:hover{ background:linear-gradient(135deg,var(--blue-dark),var(--blue-dark)); box-shadow:0 16px 32px -10px rgba(108,99,255,.7);}
.btn-green{ background:linear-gradient(135deg,var(--green),#3FBF74); color:#fff; box-shadow:0 10px 22px -10px rgba(47,163,96,.6);}
.btn-ghost{ background:var(--surface-soft); color:var(--navy); border:1px solid var(--border);}
.btn-ghost:hover{ background:var(--blue-soft);}
.btn-outline{ background:transparent; border:1.5px solid var(--border); color:var(--navy);}
.btn-danger{ background:var(--red-soft); color:var(--red);}
.btn-sm{ padding:8px 16px; font-size:13px;}
.btn-block{ width:100%;}
.btn-lg{ padding:16px 28px; font-size:15.5px;}

.field{ margin-bottom:18px; min-width:0;}
.field label{ display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:7px;}
.field-input, input.field-input, select.field-input, textarea.field-input{
  width:100%; min-width:0; box-sizing:border-box; padding:12px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface-soft); font-size:14.5px; font-family:'Inter',sans-serif; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field-input:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-soft);}
.field-hint{ font-size:12.5px; color:var(--ink-soft); margin-top:6px;}
.field-error{ font-size:12.5px; color:var(--red); margin-top:6px;}

/* ---------------- app shell: sidebar (admin/unit-admin/outlet) ---------------- */
.app-shell{ display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:22px 16px; position:fixed; top:0; bottom:0; left:0; z-index:60;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 26px;}
.sidebar-brand img{ height:38px; width:auto; border-radius:9px;}
.sidebar-brand .name{ font-family:'Sora',sans-serif; font-weight:800; font-size:16px; color:var(--navy); line-height:1.15;}
.sidebar-brand .role{ font-size:11px; color:var(--ink-soft); font-weight:600;}
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1;}
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px;
  font-size:14px; font-weight:600; color:var(--ink-soft); transition:all .15s ease;
}
.sidebar-link .ic{ width:20px; text-align:center; font-size:16px;}
.sidebar-link:hover{ background:var(--surface-soft); color:var(--navy);}
.sidebar-link.active{ background:var(--blue-soft); color:var(--blue-dark);}
.sidebar-foot{ border-top:1px solid var(--border); padding-top:14px; margin-top:14px;}
.sidebar-user{ display:flex; align-items:center; gap:10px; padding:8px 10px;}
.sidebar-avatar{
  width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; font-weight:700; font-size:13px; flex-shrink:0;
}
.sidebar-user .u-name{ font-size:13.5px; font-weight:700; color:var(--navy);}
.sidebar-user .u-role{ font-size:11.5px; color:var(--ink-soft);}
.sidebar-logout{ display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--red); padding:8px 10px;}

.main-area{ margin-left:var(--sidebar-w); flex:1; min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; padding:18px 32px;
  background:rgba(242,245,252,.85); backdrop-filter:blur(10px); position:sticky; top:0; z-index:40;
  border-bottom:1px solid transparent;
}
.topbar h1{ font-size:22px;}
.topbar .sub{ font-size:13px; color:var(--ink-soft); margin-top:2px;}
.topbar-actions{ display:flex; align-items:center; gap:10px;}
.icon-btn{
  width:40px; height:40px; border-radius:12px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink-soft);
}
.mobile-topbar{ display:none; }
.sidebar-toggle{ display:none; }

.page-content{ padding:8px 32px 60px;}

/* ---------------- KPI + stat cards ---------------- */
.grid{ display:grid; gap:18px;}
.grid > *{ min-width:0;}
.grid-2{ grid-template-columns:repeat(2,1fr);}
.grid-3{ grid-template-columns:repeat(3,1fr);}
.grid-4{ grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr;} }

.kpi{ padding:20px; display:flex; flex-direction:column; gap:10px;}
.kpi-top{ display:flex; align-items:center; justify-content:space-between;}
.kpi-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue-dark); font-size:18px;
}
.kpi-icon.green{ background:var(--green-soft); color:#1E7A45;}
.kpi-icon.amber{ background:var(--amber-soft); color:var(--amber);}
.kpi-icon.red{ background:var(--red-soft); color:var(--red);}
.kpi-trend{ font-size:11.5px; font-weight:700; padding:4px 8px; border-radius:8px; background:var(--green-soft); color:#1E7A45;}
.kpi-label{ font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.kpi-value{ font-family:'Sora',sans-serif; font-size:26px; font-weight:700; color:var(--navy);}

/* simple bar / sparkline widgets (server-rendered, no chart lib) */
.chart-card{ padding:22px;}
.chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.chart-head h3{ font-size:15px; font-weight:700;}
.bars{ display:flex; align-items:flex-end; gap:10px; height:140px; padding-top:10px;}
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px;}
.bar-track{ width:100%; max-width:26px; height:100px; background:var(--surface-soft); border-radius:8px; display:flex; align-items:flex-end; overflow:hidden;}
.bar-fill{ width:100%; background:linear-gradient(180deg,var(--blue),var(--blue-dark)); border-radius:8px 8px 0 0; min-height:4px;}
.bar-label{ font-size:11px; color:var(--ink-soft); font-weight:600;}
.sparkline{ width:100%; height:70px;}

/* ---------------- tables & lists ---------------- */
.table-modern{ width:100%; border-collapse:collapse;}
.table-modern th{
  text-align:left; font-size:12.5px; color:var(--ink-soft);
  padding:10px 14px; border-bottom:1px solid var(--border); font-weight:700;
}
.table-modern td{ padding:14px; border-bottom:1px solid var(--border); font-size:14px; color:var(--ink);}
.table-modern tr:last-child td{ border-bottom:none;}
.table-modern tr:hover td{ background:var(--surface-soft);}

.txn-row{ display:flex; align-items:center; justify-content:space-between; padding:13px 6px; border-bottom:1px solid var(--border);}
.txn-row:last-child{ border-bottom:none;}
.txn-left{ display:flex; align-items:center; gap:12px;}
.txn-avatar{ width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;}
.txn-name{ font-weight:600; font-size:13.5px; color:var(--navy);}
.txn-meta{ font-size:12px; color:var(--ink-soft);}
.txn-amount{ font-weight:700; font-size:14.5px; color:var(--red); font-family:'Sora',sans-serif;}
.txn-amount.positive{ color:var(--green);}

.badge{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700;}
.badge-blue{ background:var(--blue-soft); color:var(--blue-dark);}
.badge-green{ background:var(--green-soft); color:#1E7A45;}
.badge-grey{ background:var(--surface-soft); color:var(--ink-soft); border:1px solid var(--border);}
.badge-red{ background:var(--red-soft); color:var(--red);}

.empty-state{ text-align:center; padding:44px 20px; color:var(--ink-soft);}
.empty-state .icon{ font-size:34px; margin-bottom:10px;}

.list-card a.list-row, .list-row{
  display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--border); transition:background .15s ease;
}
.list-row:last-child{ border-bottom:none;}
.list-row:hover{ background:var(--surface-soft);}

.msg-banner{ padding:12px 18px; border-radius:14px; background:var(--green-soft); color:#1E7A45; font-size:13.5px; font-weight:600; margin-bottom:16px;}
.msg-banner.error{ background:var(--red-soft); color:var(--red);}

/* ---------------- decorative floating shapes (reference motif) ---------------- */
.float-shape{ position:absolute; pointer-events:none; z-index:0;}
.float-square{ border:3px solid rgba(108,99,255,.35); border-radius:10px;}
.float-circle{ border-radius:50%; background:rgba(255,101,132,.28);}
.float-circle.outline{ background:none; border:3px solid rgba(255,101,132,.35);}

/* ---------------- auth pages (staff / user login + landing) ---------------- */
.authpage{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.authpage-frame{
  width:100%; max-width:960px; background:var(--surface); border-radius:28px; overflow:hidden;
  box-shadow:0 30px 80px -28px rgba(20,39,92,.28); display:grid; grid-template-columns:1fr .82fr;
  border:1px solid var(--border);
}
@media(max-width:860px){ .authpage-frame{ grid-template-columns:1fr;} }
@media(max-width:860px){ .authpage-frame{ grid-template-areas:"illus" "form"; display:flex; flex-direction:column;} }
@media(max-width:480px){ .auth-form-panel{ padding:36px 24px;} }

.auth-form-panel{ padding:48px 44px; display:flex; flex-direction:column; justify-content:center;}

/* centered logo + name + subtitle block, shared by every login page */
.login-brand{ text-align:center; margin-bottom:32px;}
.login-brand-logo{ width:64px; height:64px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center;}
.login-brand-logo img{ display:block; max-width:100%; max-height:100%; object-fit:contain;}
.login-brand-fallback{
  width:100%; height:100%; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:26px;
}
.login-brand-name{
  font-family:'Sora',sans-serif; font-weight:800; color:var(--navy); text-transform:uppercase;
  letter-spacing:.02em; line-height:1.2; font-size:clamp(20px,6vw,27px); white-space:nowrap;
}
.login-brand-tagline{
  font-size:12.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase;
  letter-spacing:.08em; margin-top:8px;
}
.auth-form-panel .sub{ font-size:13.5px; color:var(--ink-soft); margin-bottom:26px; max-width:340px;}

.input-icon-wrap{ position:relative;}
.input-icon-wrap .field-ic{
  position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:15px; pointer-events:none;
}
.input-icon-wrap .field-input{ padding-left:42px;}
.input-icon-wrap .pw-toggle{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer;
  color:var(--ink-soft); font-size:14px; padding:4px;
}
.auth-links-row{ display:flex; justify-content:flex-end; margin:-10px 0 18px;}
.auth-links-row a{ font-size:12.5px; font-weight:600; color:var(--blue);}
.auth-divider{ display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--ink-soft); font-size:12px;}
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--border);}
.auth-footnote{ font-size:12.5px; color:var(--ink-soft); text-align:center;}
.auth-switch-link{ text-align:center; margin-top:18px; font-size:13px;}
.auth-switch-link a{ color:var(--blue); font-weight:700;}

.auth-illustration-panel{
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(360px 260px at 20% 15%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(165deg, var(--blue-soft) 0%, #C9C2FF 45%, var(--blue) 130%);
  padding:30px 26px 0;
  min-height:260px;
}
.auth-illustration-panel .badge-float{
  position:absolute; z-index:2; background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-radius:14px; padding:9px 13px; font-size:11.5px; font-weight:700; color:var(--navy);
  box-shadow:0 10px 24px -10px rgba(20,39,92,.35); display:flex; align-items:center; gap:6px;
}
.auth-illustration-panel .tagline-overlay{
  position:relative; z-index:2; color:var(--navy); font-family:'Sora',sans-serif; font-weight:700;
  font-size:16px; line-height:1.3; margin-bottom:20px; max-width:220px;
}
.auth-illustration-panel svg{ position:relative; z-index:1; display:block; width:100%; height:auto;}
@media(max-width:860px){ .auth-illustration-panel{ min-height:200px; padding-top:20px;} }

/* ---------------- landing / chooser page ---------------- */
.landing-shell{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px;}
.landing-brand{ text-align:center; margin-bottom:38px;}
.landing-brand img{ height:52px; border-radius:14px; margin-bottom:14px;}
.landing-brand .name{ font-family:'Sora',sans-serif; font-weight:800; font-size:24px; color:var(--navy);}
.landing-brand .tagline{ font-size:13.5px; color:var(--ink-soft); font-weight:600; margin-top:2px;}
.landing-choices{ display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; max-width:640px;}
@media(max-width:560px){ .landing-choices{ grid-template-columns:1fr;} }
.choice-card{
  background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:30px 26px;
  box-shadow:var(--shadow-card); text-align:left; transition:transform .15s ease, box-shadow .15s ease;
}
.choice-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop);}
.choice-card .ic{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:21px; margin-bottom:16px; background:var(--blue-soft); color:var(--blue-dark);
}
.choice-card.green .ic{ background:var(--green-soft); color:#1E7A45;}
.choice-card h3{ font-size:17px; margin-bottom:6px;}
.choice-card p{ font-size:13px; margin-bottom:18px;}

/* ---------------- mobile app shell (employee / outlet) ----------------
   These pages run inside the native app's WebView, which supplies its own
   header and navigation — so no header or nav bar is ever rendered here. */
.site-shell{ max-width:640px; margin:0 auto; min-height:100vh; padding-bottom:40px; position:relative;}
.site-avatar{ width:36px; height:36px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;}
.site-body{ padding:20px;}

.balance-hero{
  border-radius:24px; padding:26px 24px; color:var(--navy); position:relative; overflow:hidden;
  background:var(--blue-soft); border:1px solid var(--border); box-shadow:var(--shadow-card);
}
.balance-hero .label{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); position:relative; z-index:1;}
.balance-hero .amount{ font-family:'Sora',sans-serif; font-size:38px; font-weight:800; margin:6px 0 14px; color:var(--navy); position:relative; z-index:1;}
.balance-hero .progress-track{ height:8px; border-radius:999px; background:var(--surface-soft); overflow:hidden; position:relative; z-index:1;}
.balance-hero .progress-fill{ height:100%; border-radius:999px; background:var(--blue);}
.balance-hero .foot{ font-size:12px; color:var(--ink-soft); margin-top:8px; position:relative; z-index:1;}
.balance-hero .warn{ font-size:12.5px; font-weight:700; color:var(--red); margin-top:8px; position:relative; z-index:1;}

.scan-cta{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:18px; border-radius:20px; margin-top:16px; border:none; cursor:pointer;
  background:var(--surface); color:var(--navy); font-weight:700; font-size:15px;
  box-shadow:var(--shadow-card); border:1.5px dashed var(--blue);
}
.scan-cta .ic{
  width:38px; height:38px; border-radius:12px; background:var(--blue-soft); color:var(--blue-dark);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}

.mstat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px;}
.mstat{ background:var(--surface); border-radius:18px; padding:16px; border:1px solid var(--border);}
.mstat .l{ font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.mstat .v{ font-family:'Sora',sans-serif; font-size:19px; font-weight:700; color:var(--navy); margin-top:4px;}

/* ---------------- QR scan screen ---------------- */
.scan-shell{ position:fixed; inset:0; background:#0A1330; z-index:500; display:flex; flex-direction:column; color:#fff;}
.scan-top{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px;}
.scan-top .close-btn{ width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:16px;}
.scan-viewport{ flex:1; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.scan-viewport video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.scan-frame{ width:min(72vw,280px); height:min(72vw,280px); border:3px solid rgba(255,255,255,.85); border-radius:24px; position:relative; z-index:2; box-shadow:0 0 0 2000px rgba(10,19,48,.55);}
.scan-frame::before, .scan-frame::after{ content:''; position:absolute; width:34px; height:34px; border-color:var(--green); }
.scan-hint{ position:absolute; bottom:34px; left:0; right:0; text-align:center; font-size:13.5px; color:rgba(255,255,255,.85); z-index:2; padding:0 30px;}
.scan-line{ position:absolute; left:8%; right:8%; height:2px; background:var(--green); box-shadow:0 0 12px var(--green); animation:scanmove 2.2s ease-in-out infinite;}
@keyframes scanmove{ 0%{ top:6%;} 50%{ top:92%;} 100%{ top:6%;} }

/* bottom sheet (amount entry + success) */
.sheet-overlay{ position:fixed; inset:0; background:rgba(10,19,48,.55); z-index:600; display:flex; align-items:flex-end; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease;}
.sheet-overlay.show{ opacity:1; pointer-events:all;}
.sheet{
  width:100%; max-width:480px; background:var(--surface); border-radius:28px 28px 0 0; padding:28px 24px 34px;
  transform:translateY(100%); transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.sheet-overlay.show .sheet{ transform:translateY(0);}
.sheet-handle{ width:40px; height:4px; border-radius:99px; background:var(--border); margin:0 auto 18px;}
.sheet-outlet{ display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.sheet-outlet .ic{ width:46px;height:46px;border-radius:14px; background:var(--blue-soft); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; font-size:20px;}
.amount-display{ text-align:center; margin:14px 0 22px;}
.amount-display .curr{ font-size:22px; color:var(--ink-soft); vertical-align:top; margin-right:4px;}
.amount-display .val{ font-family:'Sora',sans-serif; font-size:48px; font-weight:800; color:var(--navy);}
.keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px;}
.keypad button{
  padding:16px 0; border-radius:16px; border:none; background:var(--surface-soft); font-size:20px; font-weight:700;
  color:var(--navy); cursor:pointer;
}
.keypad button:active{ background:var(--blue-soft);}
.success-screen{ text-align:center; padding:20px 6px;}
.success-check{
  width:76px; height:76px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:38px; margin:0 auto 18px;
  animation:pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{ from{ transform:scale(0);} to{ transform:scale(1);} }
.sheet-error{ background:var(--red-soft); color:var(--red); padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:14px; display:none;}

/* mobile forms (employee pages reuse .card etc, just tighten padding) */
@media(max-width:480px){
  .card-pad{ padding:18px;}
}

/* ---------------- admin responsive (sidebar -> drawer) ---------------- */
@media(max-width:960px){
  .sidebar{ transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 0 2000px rgba(10,19,48,0); }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 0 2000px rgba(10,19,48,.4);}
  .main-area{ margin-left:0;}
  .sidebar-toggle{ display:flex; }
  .topbar{ padding:16px 18px;}
  .page-content{ padding:8px 18px 60px;}
}
.sidebar-toggle{
  width:38px; height:38px; border-radius:12px; background:var(--surface); border:1px solid var(--border);
  align-items:center; justify-content:center; font-size:16px; cursor:pointer;
}

/* payment-received popup (outlet): centred, a little above the bottom, then fades out */
.pay-popup{
  position:fixed; left:50%; bottom:22%; z-index:300; width:min(86vw,340px); text-align:center;
  padding:22px 20px; border-radius:24px; color:#fff;
  background:linear-gradient(135deg,var(--green),#1E7A45); box-shadow:0 24px 60px -12px rgba(15,60,35,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,24px) scale(.92); transition:opacity .3s ease, transform .3s ease, visibility 0s .3s;
}
.pay-popup.show{ opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); transition:opacity .3s ease, transform .3s ease;}
.pay-popup .pp-check{ width:38px; height:38px; margin:0 auto 8px; border-radius:50%; background:rgba(255,255,255,.22); font-size:20px; line-height:38px; font-weight:800;}
.pay-popup .pp-amt{ font-family:'Sora',sans-serif; font-size:38px; font-weight:800; line-height:1.1;}
.pay-popup .pp-sub{ font-size:14px; margin-top:6px; opacity:.95;}
.sound-enable{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%); z-index:250; border:0; cursor:pointer;
  padding:11px 18px; border-radius:999px; font:600 13px 'Inter',sans-serif; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,var(--navy),var(--blue)); box-shadow:var(--shadow-pop);
}
.sound-enable.hidden{ display:none;}
.qr-frame{ background:#fff; padding:18px; border-radius:20px; display:inline-block; box-shadow:var(--shadow-card);}
.qr-frame img{ display:block; width:200px; height:200px;}

/* ---------------- admin mobile polish ---------------- */
.tab-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
@media(max-width:960px){
  /* tables scroll sideways inside their card instead of being cut off */
  .card{ overflow-x:auto !important; -webkit-overflow-scrolling:touch;}
  .table-modern td, .table-modern th{ white-space:nowrap;}
}
@media(max-width:640px){
  .section-title{ flex-wrap:wrap; gap:10px; margin:24px 0 12px;}
  .section-title > span, .section-title > a{ margin-left:auto;}
  .grid-2.keep-2{ grid-template-columns:1fr 1fr; gap:12px;}
  .btn-block-mobile{ width:100%; justify-content:center; text-align:center;}
  .tab-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .tab-row .btn{ justify-content:center; text-align:center; padding:12px 8px;}
  .filter-bar{ flex-direction:column; align-items:stretch !important; gap:12px !important;}
  .filter-bar .field{ min-width:0 !important; width:100%;}
  .filter-bar .field .field-input{ width:100% !important;}
  .filter-bar .btn{ width:100%; justify-content:center; text-align:center;}
  .filter-bar .filter-total{ margin-left:0 !important; text-align:left !important; order:-1;
    background:var(--surface-soft); border-radius:14px; padding:12px 16px;}
  .topbar h1{ font-size:19px;}
}

/* outlet Home: compact so it needs little scrolling */
.home-kpis{ gap:10px;}
.home-kpis .kpi{ padding:14px; gap:4px;}
.home-kpis .kpi-value{ font-size:22px;}
.home-qr-card .qr-frame{ padding:8px; border-radius:14px; flex-shrink:0;}
.home-qr-card .qr-frame img{ width:96px; height:96px;}

/* outlet Home: Unit name + Outlet name strip under the QR preview */
.qr-card-foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.qr-card-unit{ font-family:'Sora',sans-serif; font-weight:800; font-size:14px; color:var(--navy);}
.qr-card-outlet{ font-size:12.5px; font-weight:600; color:var(--ink-soft); text-align:right;}

/* Leaves (admin): fixed sidebar form + table, stacked on narrow screens */
.leaves-admin-grid{ grid-template-columns:320px 1fr;}
@media(max-width:700px){ .leaves-admin-grid{ grid-template-columns:1fr;} }

/* searchable employee combobox (Employee-Wise report) */
.employee-combo-list{
  display:none; position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-pop); max-height:260px; overflow-y:auto;
}
.employee-combo-list.show{ display:block;}
.employee-combo-item{ padding:10px 14px; font-size:13.5px; cursor:pointer;}
.employee-combo-item:hover{ background:var(--surface-soft);}
.employee-combo-hint{ padding:8px 14px; font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);}

/* small manual refresh icon next to a section heading */
.refresh-btn{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; flex-shrink:0;
  color:var(--ink-soft); transition:transform .4s ease, color .15s ease;
}
.refresh-btn:hover{ color:var(--blue); border-color:var(--blue-soft);}
.refresh-btn.spin{ transform:rotate(360deg); color:var(--blue);}

/* small "back" link at the top of a page reached by drilling into More, since
   Employee/Outlet pages have no header/nav of their own to fall back on */
.back-link{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:36px; height:36px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border); color:var(--ink-soft); font-size:17px;
  margin-bottom:14px; box-shadow:var(--shadow-card);
}

/* small month label at the top-right of the employee balance card */
.balance-hero .month-pill{
  font-size:11px; font-weight:700; color:var(--ink-soft); background:var(--surface-soft);
  border:1px solid var(--border); padding:3px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0;
}