/* ==========================================================================
   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)}

/* 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%}