/* ============================================================
   1stCopy Hisab — design system (light + dark). No build step.
   ============================================================ */
:root{
  --app-css-ok: 1;            /* sentinel: foot.ejs checks this to detect a stale SW breaking CSS */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand: #4f46e5;           /* indigo */
  --brand-2: #6366f1;
  --brand-ink: #ffffff;
  --bg: #f4f5fb;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --elev: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.06);
  --elev-lg: 0 10px 30px rgba(16,24,40,.10);
  --text: #15192b;
  --muted: #6b7280;
  --faint: #9aa1ad;
  --border: #e7e9f1;
  --border-2: #eef0f6;
  --pos: #0f9d58; --pos-bg: #e6f6ee;
  --neg: #e5484d; --neg-bg: #fdecec;
  --warn: #c88a04; --warn-bg: #fdf4e3;
  --info: #0b7ec7; --info-bg: #e5f3fc;
  --radius: 16px; --radius-sm: 11px; --radius-xs: 8px;
  --sidebar-w: 250px;
  --topbar-h: 62px;
}
:root[data-bs-theme="dark"]{
  --brand: #7c82ff; --brand-2:#8b90ff; --brand-ink:#0b0d16;
  --bg: #0c0e14;
  --surface: #14171f;
  --surface-2: #1a1e28;
  --elev: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.35);
  --elev-lg: 0 14px 40px rgba(0,0,0,.5);
  --text: #e8eaf1;
  --muted: #9aa2b1;
  --faint: #6b7483;
  --border: #242a36;
  --border-2: #1e232e;
  --pos:#36d399; --pos-bg: rgba(54,211,153,.12);
  --neg:#f87171; --neg-bg: rgba(248,113,113,.13);
  --warn:#fbbf24; --warn-bg: rgba(251,191,36,.12);
  --info:#38bdf8; --info-bg: rgba(56,189,248,.12);
}

*{ -webkit-tap-highlight-color: transparent; }
body{ font-family:var(--font); background:var(--bg); color:var(--text); font-size:15px; }
input,select,textarea,.btn,.form-control,.form-select{ font-size:16px; } /* iOS no-zoom */
a{ color:var(--brand); }
::selection{ background:color-mix(in srgb, var(--brand) 25%, transparent); }

/* ---------- App shell ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  --bs-offcanvas-width: 260px;
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:.25rem;
}
@media (min-width:992px){
  .sidebar{ position:sticky; top:0; height:100vh; }
}
.sidebar-brand{ display:flex; align-items:center; justify-content:space-between; padding:1.05rem 1.1rem .75rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; font-size:1.18rem; color:var(--text); text-decoration:none; letter-spacing:-.02em; }
.brand-mark{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 4px 12px color-mix(in srgb,var(--brand) 40%,transparent); }
.sidebar-nav{ padding:.25rem .6rem; overflow-y:auto; flex:1; }
.sidebar-nav .nav-group{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; padding:.9rem .7rem .35rem; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.58rem .7rem; border-radius:10px;
  color:var(--muted); font-weight:500; font-size:.92rem; margin-bottom:2px; transition:all .15s ease;
}
.sidebar-nav .nav-link i{ font-size:1.12rem; width:20px; text-align:center; }
.sidebar-nav .nav-link:hover{ background:var(--surface-2); color:var(--text); }
.sidebar-nav .nav-link.active{ background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); font-weight:600; }
.sidebar-nav .nav-link.active i{ color:var(--brand); }
.sidebar-foot{ border-top:1px solid var(--border); padding:.8rem .9rem; }
.who{ display:flex; align-items:center; gap:.6rem; }
.who-meta{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.who-name{ font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-role{ font-size:.75rem; color:var(--faint); }
.avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); flex:0 0 auto; }
.avatar.sm{ width:30px; height:30px; font-size:.85rem; }

.app-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20; height:var(--topbar-h);
  display:flex; align-items:center; gap:.5rem; padding:0 clamp(16px,3vw,28px);
  background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-title{ font-size:1.12rem; font-weight:700; margin:0; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:.25rem; }
.btn-ghost{ background:transparent; border:0; color:var(--muted); border-radius:10px; padding:.4rem .55rem; display:inline-flex; align-items:center; }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); }
.theme-toggle .theme-light-icon{ display:none; } .theme-toggle .theme-dark-icon{ display:inline; }
:root[data-bs-theme="dark"] .theme-toggle .theme-light-icon{ display:inline; }
:root[data-bs-theme="dark"] .theme-toggle .theme-dark-icon{ display:none; }

.content{ flex:1; padding:clamp(16px,3vw,28px); width:100%; max-width:1180px; margin:0 auto; }
.content-foot{ text-align:center; color:var(--faint); font-size:.8rem; padding:1.5rem 0 .5rem; }

/* auth (login) */
.auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:20px;
  background:radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb,var(--brand) 18%,transparent), transparent),
             radial-gradient(900px 500px at 110% 10%, color-mix(in srgb,var(--brand-2) 16%,transparent), transparent), var(--bg); }

/* ---------- Cards ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--elev); }
.card-header{ background:transparent; border-bottom:1px solid var(--border-2); font-weight:600; }
.shadow-sm{ box-shadow:var(--elev)!important; }

/* ---------- KPI cards ---------- */
.kpi{ border-radius:var(--radius); transition:transform .15s ease, box-shadow .15s ease; overflow:hidden; position:relative; }
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--elev-lg); }
.kpi a{ text-decoration:none; color:inherit; display:block; }
.kpi .kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.kpi .label{ font-size:.78rem; color:var(--muted); font-weight:500; line-height:1.25; }
.kpi .value{ font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin-top:.35rem; }
.kpi .kpi-icon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:1.1rem; flex:0 0 auto;
  background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); }
.kpi.accent-neg .kpi-icon{ background:var(--neg-bg); color:var(--neg); }
.kpi.accent-pos .kpi-icon{ background:var(--pos-bg); color:var(--pos); }
.kpi.accent-warn .kpi-icon{ background:var(--warn-bg); color:var(--warn); }
.kpi.accent-info .kpi-icon{ background:var(--info-bg); color:var(--info); }

/* ---------- Quick action tiles (clean, icon-chip) ---------- */
.action-tile{
  --ac: var(--brand);
  display:flex; align-items:center; gap:.8rem; padding:.85rem .9rem;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  text-decoration:none; color:var(--text); min-height:68px;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.action-tile:hover{ transform:translateY(-2px); box-shadow:var(--elev-lg); border-color:var(--ac);
  background:color-mix(in srgb, var(--ac) 4%, var(--surface)); }
.action-tile .at-chip{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  font-size:1.35rem; color:var(--ac); background:color-mix(in srgb, var(--ac) 14%, transparent); transition:all .14s ease; }
.action-tile:hover .at-chip{ background:var(--ac); color:#fff; }
.action-tile .at-label{ font-weight:700; font-size:.98rem; letter-spacing:-.01em; line-height:1.1; }
.action-tile .at-sub{ font-size:.72rem; color:var(--faint); margin-top:1px; }
.action-tile .at-go{ margin-left:auto; color:var(--faint); opacity:0; transform:translateX(-4px); transition:all .14s ease; }
.action-tile:hover .at-go{ opacity:1; transform:none; color:var(--ac); }
@media (max-width:575px){ .action-tile{ padding:.7rem; min-height:60px; gap:.6rem; } .action-tile .at-chip{ width:38px; height:38px; font-size:1.15rem; } .action-tile .at-sub{ display:none; } }

/* ---------- Big action buttons (legacy, used elsewhere) ---------- */
.big-actions .btn{ min-height:92px; border:0; border-radius:var(--radius); color:#fff; font-weight:700; letter-spacing:-.01em;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem; box-shadow:var(--elev);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.big-actions .btn i{ font-size:1.75rem; }
.big-actions .btn:hover{ transform:translateY(-3px); box-shadow:var(--elev-lg); filter:brightness(1.04); }
.ba-purchase{ background:linear-gradient(135deg,#4f46e5,#6366f1); }
.ba-payment{ background:linear-gradient(135deg,#0f9d58,#19b86a); }
.ba-return{ background:linear-gradient(135deg,#e8820c,#f59e0b); }
.ba-promo{ background:linear-gradient(135deg,#0ea5e9,#38bdf8); }
.ba-refund{ background:linear-gradient(135deg,#e5484d,#f05a5f); }
.ba-staff{ background:linear-gradient(135deg,#7c3aed,#9361f2); }
.ba-baki{ background:linear-gradient(135deg,#475569,#64748b); }
.ba-reports{ background:linear-gradient(135deg,#0f766e,#14b8a6); }

/* ---------- Buttons ---------- */
.btn{ border-radius:var(--radius-sm); font-weight:600; }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:0; color:var(--brand-ink); }
.btn-primary:hover{ filter:brightness(1.05); background:linear-gradient(135deg,var(--brand),var(--brand-2)); }
.btn-sm{ border-radius:var(--radius-xs); }
.btn-success{ background:linear-gradient(135deg,#0f9d58,#19b86a); border:0; }
.btn-warning{ background:linear-gradient(135deg,#e8820c,#f59e0b); border:0; color:#fff; }
.btn-danger{ background:linear-gradient(135deg,#e5484d,#f05a5f); border:0; }

/* ---------- Forms ---------- */
.form-control,.form-select{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); padding:.52rem .8rem; }
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent); background:var(--surface); color:var(--text); }
.form-control-sm,.form-select-sm{ border-radius:var(--radius-xs); }
.form-label{ font-weight:600; font-size:.85rem; color:var(--text); margin-bottom:.3rem; }
.form-text{ color:var(--faint); }
.input-group-text{ background:var(--surface-2); border-color:var(--border); color:var(--muted); }

/* ---------- Tables ---------- */
.table{ --bs-table-bg:transparent; color:var(--text); border-color:var(--border-2); margin-bottom:0; }
.table > :not(caption) > * > *{ background:transparent; }
.table thead th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--faint); font-weight:700; border-bottom:1px solid var(--border); }
.table-light,.table thead.table-light th{ --bs-table-bg:var(--surface-2); background:var(--surface-2); color:var(--faint); }
.table-hover > tbody > tr:hover > *{ background:var(--surface-2); }
.table td,.table th{ border-color:var(--border-2); vertical-align:middle; }
.amount{ font-variant-numeric:tabular-nums; white-space:nowrap; font-feature-settings:"tnum"; }
.pos{ color:var(--pos)!important; } .neg{ color:var(--neg)!important; }

/* ---------- Badges / alerts ---------- */
.badge-soft{ background:var(--surface-2); color:var(--muted); font-weight:600; border:1px solid var(--border); border-radius:7px; padding:.3em .6em; }
.badge{ border-radius:7px; font-weight:600; }
.alert{ border:1px solid transparent; border-radius:var(--radius-sm); }
.alert-success{ background:var(--pos-bg); color:var(--pos); border-color:color-mix(in srgb,var(--pos) 25%,transparent); }
.alert-danger{ background:var(--neg-bg); color:var(--neg); border-color:color-mix(in srgb,var(--neg) 25%,transparent); }
.alert-info{ background:var(--info-bg); color:var(--info); border-color:color-mix(in srgb,var(--info) 25%,transparent); }
.alert-warning{ background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 25%,transparent); }
.alert-secondary{ background:var(--surface-2); color:var(--muted); border-color:var(--border); }

/* list groups, dropdowns adapt via bootstrap theme; soften */
.list-group-item{ background:var(--surface); border-color:var(--border-2); color:var(--text); }
.list-group-item-action:hover{ background:var(--surface-2); }
.dropdown-menu{ border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--elev-lg); background:var(--surface); }

/* sticky action bar (forms) */
.sticky-actions{ position:sticky; bottom:0; background:color-mix(in srgb,var(--surface) 90%,transparent); backdrop-filter:blur(8px);
  border-top:1px solid var(--border); padding:.75rem; margin:1rem -1.25rem -1.25rem; border-radius:0 0 var(--radius) var(--radius); display:flex; gap:.5rem; }

.flag{ font-size:.75rem; }
.item-row td{ padding:.35rem; }

/* page-entrance animation */
.content > *{ animation:fadeUp .35s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } }

@media (max-width:575px){
  .content{ padding:14px; }
  .kpi .value{ font-size:1.3rem; }
  .table-responsive{ font-size:.9rem; }
  .big-actions .btn{ min-height:82px; font-size:.95rem; }
}

/* Product thumbnails (purchase bills, inventory) */
.prod-thumb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-xs);overflow:hidden;flex:0 0 auto;text-decoration:none}
.prod-thumb img{width:40px;height:40px;object-fit:cover;display:block}
.prod-thumb.ph{background:var(--surface-2);color:var(--muted);border:1px dashed var(--border)}
.prod-thumb.ph:hover{color:var(--brand);border-color:var(--brand)}
.prod-thumb-lg{width:120px;height:120px;border-radius:var(--radius-sm)}
.prod-thumb-lg img{width:120px;height:120px;object-fit:cover}

/* WebX branding (sidebar sub-title + footer credit) */
.brand-titles{ display:flex; flex-direction:column; line-height:1.08; }
.brand-by{ font-size:.6rem; font-weight:600; color:var(--muted); letter-spacing:.01em; margin-top:1px; }
.foot-credit{ margin-top:.25rem; font-size:.74rem; color:var(--faint); }
.foot-credit strong{ color:var(--muted); font-weight:700; }
.foot-heart{ color:#e5484d; }
.auth-credit{ text-align:center; color:var(--faint); font-size:.78rem; margin-top:1.25rem; }
.auth-credit strong{ color:var(--muted); }
.auth-credit .foot-heart{ color:#e5484d; }

/* ---------- PWA install button + mobile (iOS/Android) ---------- */
/* Install button is hidden unless the app is actually installable (Android) or on iOS;
   never shown once already installed (running standalone). */
[data-pwa-install]{ display:none; }
.pwa-installable [data-pwa-install],
.pwa-ios [data-pwa-install]{ display:inline-flex; }
.pwa-standalone [data-pwa-install]{ display:none !important; }
.topbar .pwa-install{ color:var(--brand); }
.topbar .pwa-install:hover{ background:color-mix(in srgb,var(--brand) 12%,transparent); }

/* iOS safe-area insets (notch / Dynamic Island / home indicator) for the installed PWA */
.topbar{ padding-top:env(safe-area-inset-top); min-height:var(--topbar-h); height:auto; }
.content{ padding-bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom)); }
.sidebar-brand{ padding-top:calc(1.05rem + env(safe-area-inset-top)); }
.sidebar-foot{ padding-bottom:calc(.8rem + env(safe-area-inset-bottom)); }
.auth-wrap{ padding-top:max(20px, env(safe-area-inset-top)); padding-bottom:max(20px, env(safe-area-inset-bottom)); }

/* Small-screen polish */
@media (max-width:575px){
  .topbar-title{ font-size:1rem; }
  .card-body{ padding:1rem; }
  .btn-group{ flex-wrap:wrap; }
  h5{ font-size:1.08rem; }
  .table-responsive thead th{ white-space:nowrap; }
  .prod-thumb-lg{ width:88px; height:88px; }
  .prod-thumb-lg img{ width:88px; height:88px; }
}