/* ============================================================
   OBIX POS — design system  ·  Uber Eats / DoorDash vibe
   Orange · Black · White. Clean, minimal, universal.
   ============================================================ */
:root {
    /* brand orange */
    --brand:#ff5a1f; --brand-d:#e2440f; --brand-dd:#b8360b; --brand-l:#fff1eb; --brand-l2:#ffe0d3;
    --brand-ring:rgba(255,90,31,.28);
    /* legacy aliases so older inline styles keep working */
    --green:var(--brand); --green-d:var(--brand-d); --green-l:var(--brand-l); --green-ring:var(--brand-ring);
    /* ink + neutrals */
    --ink:#0f0f0f; --ink-2:#1b1b1b;
    --bg:#f7f6f4; --card:#ffffff; --surface-2:#f3f2f0; --line:#ececea; --line-2:#e0e0dc;
    --text:#111111; --muted:#6f6f6c; --danger:#e5484d; --amber:#f5a300;
    /* shape + depth */
    --radius:16px; --r-sm:11px; --r-lg:22px; --r-pill:999px; --navh:62px;
    --sh-1:0 1px 2px rgba(17,17,17,.04), 0 1px 3px rgba(17,17,17,.06);
    --sh-2:0 8px 24px rgba(17,17,17,.08);
    --sh-pop:0 24px 60px rgba(17,17,17,.16);
    --ease:cubic-bezier(.22,.61,.36,1); --dur:.26s;
}
/* ── Icons ── */
svg.ic { width:22px; height:22px; flex:none; display:inline-block; vertical-align:-.18em; }
.btn .ic { width:20px; height:20px; }

/* ── Navigation loading bar ── */
#loadbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:100; background:linear-gradient(90deg,var(--brand),#ffb08a);
    opacity:0; transition:width .5s var(--ease), opacity .3s; }
#loadbar.go { opacity:1; }

/* ── Empty states ── */
.empty { text-align:center; padding:38px 20px; color:var(--muted); }
.empty .ic { width:40px; height:40px; color:var(--line-2); margin-bottom:10px; }
.empty h3 { margin:0 0 4px; font-size:1rem; color:var(--text); }
.empty p { margin:0 0 16px; font-size:.88rem; }

/* ── Installed-app (standalone) safe area under the status bar ── */
@media (display-mode:standalone) {
    .topbar { padding-top:env(safe-area-inset-top,0px); height:calc(62px + env(safe-area-inset-top,0px)); }
    .nav { top:auto; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; }
body {
    background:var(--bg); color:var(--text); min-height:100dvh;
    font-family:"Anuphan","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
h1, h2, h3 { letter-spacing:-.02em; }
:focus-visible { outline:3px solid var(--brand-ring); outline-offset:2px; border-radius:6px; }

/* ── App chrome ── */
.topbar { position:sticky; top:0; z-index:20; height:62px; padding:0 18px;
    display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#fff; }
.brand { font-weight:800; font-size:1.18rem; line-height:1; }
.brand small { display:block; font-weight:600; color:var(--brand); font-size:.66rem; letter-spacing:.16em; margin-top:3px; text-transform:uppercase; }
.top-right { display:flex; align-items:center; gap:12px; font-size:.88rem; }
.top-right form { margin:0; }
.who { display:inline-flex; align-items:center; gap:6px; }
.btn-logout { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:11px; padding:8px 13px; font:inherit; font-weight:600; cursor:pointer; transition:background var(--dur); }
.btn-logout:hover { background:rgba(255,255,255,.26); }
@media (max-width:520px) { .btn-logout .lbl { display:none; } }

/* Bottom tab bar (mobile-app style) */
.nav { position:fixed; left:0; right:0; bottom:0; z-index:40; height:var(--navh);
    display:flex; justify-content:space-around; gap:2px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
    border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(17,17,17,.07); }
.nav a { position:relative; flex:1; max-width:100px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    font-size:.66rem; font-weight:600; color:var(--muted); border-radius:14px; padding:4px; transition:color var(--dur), background var(--dur); }
.nav a .ic { width:24px; height:24px; transition:transform var(--dur) var(--ease); }
.nav a.active { color:var(--brand); }
.nav a.active::before { content:''; position:absolute; top:-6px; width:22px; height:3px; border-radius:0 0 3px 3px; background:var(--brand); }
.nav a.active .ic { transform:translateY(-1px) scale(1.1); }
.nav a:active .ic { transform:scale(.86); }

.wrap { max-width:1120px; margin:0 auto; padding:22px 18px calc(var(--navh) + 34px); animation:rise .4s var(--ease) both; }
h1.page { display:flex; align-items:center; gap:10px; font-size:1.5rem; font-weight:800; margin:2px 0 20px; }
h1.page .ic { width:26px; height:26px; color:var(--brand); }

/* ── Cards ── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sh-1); }

/* ── Buttons ── */
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    cursor:pointer; border:none; border-radius:var(--r-pill); font:inherit; font-weight:700; padding:14px 22px; min-height:48px;
    transition:transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur), border-color var(--dur); }
.btn:active { transform:scale(.97); }
.btn-green { background:var(--brand); color:#fff; box-shadow:0 6px 16px var(--brand-ring); }
.btn-green:hover { background:var(--brand-d); box-shadow:0 10px 24px var(--brand-ring); transform:translateY(-1px); }
.btn-dark { background:var(--ink); color:#fff; }
.btn-dark:hover { background:var(--ink-2); transform:translateY(-1px); }
.btn-outline { background:#fff; color:var(--text); border:1.5px solid var(--line-2); box-shadow:var(--sh-1); }
.btn-outline:hover { border-color:var(--ink); transform:translateY(-1px); }
.btn-danger { background:#fff; color:var(--danger); border:1.5px solid #f2d6d7; }
.btn-danger:hover { background:#fdecec; }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.ripple { position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); pointer-events:none; animation:ripple .5s var(--ease); }
.btn-outline .ripple, .btn-danger .ripple { background:rgba(255,90,31,.18); }

/* ── Fields ── */
.field { display:block; margin-bottom:15px; }
.field label { display:block; font-size:.82rem; color:var(--muted); margin-bottom:7px; font-weight:600; }
.field input, .field textarea, .field select {
    width:100%; padding:13px 15px; border:1.5px solid var(--line-2); border-radius:13px; font:inherit; background:#fff;
    transition:border-color var(--dur), box-shadow var(--dur); }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
.err { color:var(--danger); font-size:.82rem; margin-top:5px; }

/* ── Toast ── */
.flash { background:var(--brand-l); color:var(--brand-dd); border:1px solid var(--brand-l2); padding:13px 16px; border-radius:14px; margin-bottom:18px; font-weight:600; }
#toast { position:fixed; left:50%; bottom:calc(var(--navh) + 18px); transform:translate(-50%,16px); z-index:80;
    opacity:0; visibility:hidden; pointer-events:none;
    background:var(--ink); color:#fff; padding:14px 20px; border-radius:14px; font-weight:600; box-shadow:var(--sh-pop);
    transition:transform .38s var(--ease), opacity .3s var(--ease); max-width:88vw; }
#toast.show { transform:translate(-50%,0); opacity:1; visibility:visible; }

/* ── Stat tiles (dashboard / income) ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--sh-1); }
.stat .label { color:var(--muted); font-size:.82rem; font-weight:600; }
.stat .value { font-size:1.9rem; font-weight:800; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .value.brand { color:var(--brand); }
.stat-grid .stat { animation:rise .45s var(--ease) both; }
.stat-grid .stat:nth-child(2) { animation-delay:.06s; }
.stat-grid .stat:nth-child(3) { animation-delay:.12s; }
.stat-grid .stat:nth-child(4) { animation-delay:.18s; }
.brand { max-width:60vw; line-height:1.05; }

/* ── Animations ── */
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes ripple { to { transform:scale(2.4); opacity:0; } }
@keyframes pop { 0% { transform:scale(1); } 40% { transform:scale(1.14); } 100% { transform:scale(1); } }
.pop { animation:pop .32s var(--ease); }

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
    .btn:hover { transform:none; }
}