/* ==========================================================================
   Viber Slips — local design system (offline, no CDN).
   A curated Tailwind-style stylesheet: design tokens + utilities + components.
   ========================================================================== */
:root{
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f9fafb; --border:#e5e7eb;
  --fg:#111827; --muted:#6b7280; --muted-2:#9ca3af;
  --primary:#4f46e5; --primary-600:#4338ca; --primary-fg:#ffffff;
  --red:#dc2626; --red-bg:#fef2f2; --red-border:#fecaca;
  --amber:#d97706; --amber-bg:#fffbeb; --amber-border:#fde68a;
  --blue:#2563eb; --blue-bg:#eff6ff; --blue-border:#bfdbfe;
  --green:#059669; --green-bg:#ecfdf5;
  --violet:#7c3aed;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);
  --shadow-lg:0 10px 30px rgba(0,0,0,.15);
  --radius:12px; --radius-sm:8px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0d12; --surface:#151922; --surface-2:#1b202b; --border:#262c38;
    --fg:#e5e7eb; --muted:#9aa2b1; --muted-2:#6b7280;
    --primary:#6366f1; --primary-600:#4f46e5;
    --red:#f87171; --red-bg:#2a1416; --red-border:#5b2626;
    --amber:#fbbf24; --amber-bg:#2a2110; --amber-border:#5c4718;
    --blue:#60a5fa; --blue-bg:#0f1e33; --blue-border:#1e3a5f;
    --green:#34d399; --green-bg:#0f2a20;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Layout */
.container{max-width:1400px; margin:0 auto; padding:20px 24px}
.navbar{background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  position:sticky; top:0; z-index:50}
.navbar-inner{max-width:1400px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:16px}
.brand{font-weight:700; font-size:16px; display:flex; align-items:center; gap:8px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}
.spacer{flex:1}
.nav-user{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px}
.chip{background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px 10px; font-size:12px}

/* Flex/grid helpers */
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.row.end{align-items:flex-end}
.between{justify-content:space-between}
.grid{display:grid; gap:14px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:16px 0}
.mt{margin-top:16px}.mb{margin-bottom:16px}.muted{color:var(--muted)}.small{font-size:12px}

/* Cards */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:16px 18px}
.stat .k{font-size:12px; color:var(--muted); font-weight:500}
.stat .v{font-size:26px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; margin-top:2px}
.stat .u{font-size:13px; color:var(--muted); font-weight:600}
.stat.accent{border-top:3px solid var(--primary)}
.stat.green{border-top:3px solid var(--green)}
.stat.violet{border-top:3px solid var(--violet)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--fg); font:inherit; font-weight:600;
  cursor:pointer; transition:.12s; text-decoration:none; font-size:13px}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn.primary{background:var(--primary); border-color:var(--primary); color:var(--primary-fg)}
.btn.primary:hover{background:var(--primary-600)}
.btn.danger{color:var(--red); border-color:var(--red-border)}
.btn.sm{padding:5px 10px; font-size:12px}

/* Forms */
label.field{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); font-weight:600}
input[type=text],input[type=password],input[type=date],input[type=number],select{
  font:inherit; padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); min-width:150px}
input:focus,select:focus{outline:2px solid color-mix(in srgb,var(--primary) 40%, transparent); outline-offset:0; border-color:var(--primary)}

/* Table */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table{width:100%; border-collapse:collapse}
th,td{padding:11px 14px; text-align:left; white-space:nowrap; font-size:13px; border-bottom:1px solid var(--border)}
thead th{background:var(--surface-2); color:var(--muted); font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.amount{font-variant-numeric:tabular-nums; font-weight:700}
tr.flag-red td{background:var(--red-bg)!important}
tr.flag-blue td{background:var(--blue-bg)!important}

/* Badges */
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
  background:color-mix(in srgb,var(--primary) 14%,transparent); color:var(--primary)}
.tag{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; color:#fff}
.tag.red{background:var(--red)} .tag.violet{background:var(--violet)} .tag.gray{background:var(--muted-2)}
.tag.blue{background:var(--blue); color:#fff}

/* Legend */
.legend{display:flex; gap:18px; flex-wrap:wrap; margin:10px 2px; font-size:12.5px; color:var(--muted)}
.sw{display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:middle; margin-right:6px}

/* Thumbnails + modal */
.thumb{height:40px; border-radius:6px; cursor:zoom-in; border:1px solid var(--border); transition:.1s}
.thumb:hover{transform:scale(1.06)}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; align-items:center; justify-content:center; z-index:50; padding:24px}
.modal.open{display:flex}
.modal img{max-width:95vw; max-height:92vh; border-radius:10px; box-shadow:var(--shadow-lg)}
.modal .x{position:absolute; top:16px; right:24px; color:#fff; font-size:38px; cursor:pointer; line-height:1}

/* Alerts */
.alert{padding:12px 16px; border-radius:var(--radius-sm); font-size:13px; border:1px solid transparent}
.alert.err{background:var(--red-bg); color:var(--red); border-color:var(--red-border)}
.alert.ok{background:var(--green-bg); color:var(--green)}

/* Admin: inline number + shop rows */
.numlist{display:flex; flex-direction:column; gap:7px; white-space:normal}
.numrow{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.numtag{background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:5px 9px;
  font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; min-width:96px; text-align:center}
.numform{display:flex; align-items:center; gap:6px; margin:0}
.numform input[type=text]{min-width:170px; padding:6px 9px; font-size:13px}

/* Segmented toggle (Received / Slip) */
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:3px; gap:2px}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{padding:7px 16px; border-radius:999px; cursor:pointer; font-weight:600; font-size:13px; color:var(--muted); transition:.12s; user-select:none}
.seg input:checked + label{background:var(--primary); color:#fff; box-shadow:var(--shadow)}

/* Brand logo */
.brand img{height:26px; width:26px; display:block}
.brand .name{font-weight:800; letter-spacing:-.3px}
.brand .full{font-weight:500; color:var(--muted); font-size:12px}

/* Footer */
.footer{max-width:1400px; margin:24px auto 8px; padding:16px 24px; color:var(--muted); font-size:12.5px;
  display:flex; align-items:center; gap:8px; border-top:1px solid var(--border)}
.footer .g{font-weight:700; color:var(--fg)}

/* Auth / centered card */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.auth-card{width:100%; max-width:380px}
.auth-card .card-pad{padding:26px}
.auth-title{font-size:20px; font-weight:800; margin:0 0 4px}
.w-full{width:100%}

/* ==========================================================================
   Glassmorphism theme (overrides) — translucent frosted surfaces on a soft
   gradient with blurred colour orbs. Light + dark aware.
   ========================================================================== */
:root{
  --glass:      rgba(255,255,255,.60);
  --glass-2:    rgba(255,255,255,.42);
  --glass-brd:  rgba(255,255,255,.65);
  --page1:#e9eeff; --page2:#f5f6fb; --page3:#fdeef7;
  --shadow-glass:0 8px 30px rgba(2,6,23,.12);
}
@media (prefers-color-scheme:dark){
  :root{
    --glass:     rgba(22,26,36,.55);
    --glass-2:   rgba(30,35,47,.45);
    --glass-brd: rgba(255,255,255,.10);
    --page1:#0a0f1e; --page2:#0c1017; --page3:#141024;
    --shadow-glass:0 10px 34px rgba(0,0,0,.5);
  }
}
body{
  background:linear-gradient(135deg,var(--page1),var(--page2) 55%,var(--page3));
  background-attachment:fixed; min-height:100vh;
}
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.bg-orbs::before,.bg-orbs::after{content:""; position:absolute; width:520px; height:520px;
  border-radius:50%; filter:blur(90px); opacity:.45}
.bg-orbs::before{background:#6366f1; top:-170px; left:-120px}
.bg-orbs::after{background:#ec4899; bottom:-190px; right:-140px}

.navbar{background:var(--glass); border-bottom:1px solid var(--glass-brd);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%)}
.card,.table-wrap{background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--shadow-glass);
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%)}
.stat{background:var(--glass)}
thead th{background:var(--glass-2)}
tbody tr:hover td{background:rgba(127,127,127,.10)}
input[type=text],input[type=password],input[type=date],input[type=number],select,
.chip,.seg,.numtag,.btn{background:var(--glass-2); border:1px solid var(--glass-brd)}
.btn:hover{background:rgba(127,127,127,.14)}
.btn.primary{background:linear-gradient(135deg,#6366f1,#4f46e5); border:0; color:#fff;
  box-shadow:0 6px 18px rgba(79,70,229,.40)}
.btn.primary:hover{filter:brightness(1.07); background:linear-gradient(135deg,#6366f1,#4f46e5)}
.seg input:checked + label{background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff}
.footer{border-top:1px solid var(--glass-brd)}
/* flagged rows stay legible over glass */
tr.flag-red td{background:rgba(220,38,38,.15)!important}
tr.flag-blue td{background:rgba(37,99,235,.14)!important}

/* ==========================================================================
   Mobile responsiveness (desktop unchanged)
   ========================================================================== */
@media (max-width: 860px){
  .container{padding:14px}
  /* Navbar wraps neatly */
  .navbar-inner{padding:10px 14px; flex-wrap:wrap; gap:8px 6px}
  .brand .full{display:none}
  .nav-user{order:3}
  /* Filter fields stack full-width */
  form .row.end > label.field{flex:1 1 100%}
  label.field input, label.field select{width:100%; min-width:0}
  form .row.end .btn{flex:1 1 auto; justify-content:center}
  .seg{width:100%; justify-content:center}
  /* Stat cards two-up */
  .stats{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat .v{font-size:20px}

  /* Dashboard table -> stacked cards */
  table.resp thead{display:none}
  table.resp, table.resp tbody, table.resp tr, table.resp td{display:block; width:100%}
  table.resp tr{border:1px solid var(--glass-brd); border-radius:12px; margin-bottom:12px;
    padding:8px 12px; background:var(--glass-2); box-shadow:var(--shadow-glass)}
  table.resp td{border:0!important; padding:6px 2px; white-space:normal; text-align:right;
    display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13.5px}
  table.resp td::before{content:attr(data-label); color:var(--muted); font-weight:700;
    flex:0 0 42%; text-align:left}
  table.resp tr.flag-red, table.resp tr.flag-blue{border-width:2px}
  table.resp tr.flag-red{border-color:var(--red)}
  table.resp tr.flag-blue{border-color:var(--blue)}
  table.resp tr.flag-red td, table.resp tr.flag-blue td{background:transparent!important}
  .thumb{height:54px}
}
@media (max-width: 480px){
  .stats{grid-template-columns:1fr}
  .brand .name{font-size:15px}
  .navbar-inner .btn.sm{padding:5px 9px}
}