/* ==========================================================================
   Softcare Application Pvt Ltd — Order Management
   app.css  •  Complete UI rebuild (v2)
   A clean, responsive admin interface. Mobile-first, accessible, print-ready.
   Class names & CSS custom-property names are kept identical to the previous
   build so every PHP page (incl. inline page styles) re-themes automatically.
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */
:root {
  /* Brand — blue, sampled straight from the Appsoware "A" mark */
  --brand:        #0a6fe0;
  --brand-d:      #0b4fa8;
  --brand-l:      #eef6ff;
  --brand-m:      #4fa9ff;
  --brand-ring:   rgba(10, 111, 224, .22);
  --brand-grad:   linear-gradient(135deg, #00b4f0 0%, #0a6fe0 55%, #0b3c8c 100%);
  --brand-cyan:   #00b4f0;
  --brand-navy:   #0b2a63;

  /* Accent — the orange swoosh from the mark */
  --accent:       #f97316;
  --accent-d:     #ea580c;
  --accent-l:     #fff4ec;
  --accent-m:     #fdba74;
  --accent-grad:  linear-gradient(135deg, #fb923c 0%, #f97316 55%, #ea4a0c 100%);

  /* Sidebar (deep Appsoware navy) */
  --sidebar-bg:   #0b1f45;
  --sidebar-bg-2: #071531;
  --sidebar-hv:   rgba(255, 255, 255, .07);
  --sidebar-tx:   #93a8c9;
  --sidebar-ak:   #ff8a3d;

  /* Status */
  --success:      #059669;
  --success-bg:   #ecfdf5;
  --warning:      #d97706;
  --warning-bg:   #fffbeb;
  --danger:       #dc2626;
  --danger-bg:    #fef2f2;
  --info:         #2563eb;
  --info-bg:      #eff6ff;

  /* Neutrals / surfaces */
  --bg:           #f2f5fa;
  --surface:      #ffffff;
  --surface-2:    #f7f9fd;
  --border:       #e4eaf3;
  --border-2:     #edf1f8;
  --text:         #0f172a;
  --muted:        #64748b;
  --subtle:       #94a3b8;

  /* Metrics */
  --sidebar-w:    250px;
  --topbar-h:     60px;

  --r-sm:         8px;
  --r:            12px;
  --r-lg:         16px;

  --sh-sm:        0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --sh-md:        0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
  --sh-lg:        0 12px 32px rgba(15, 23, 42, .14);
  --ring:         0 0 0 3px var(--brand-ring);

  --font:         'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:         'JetBrains Mono', 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t:            .18s cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------ *
 * 2. Reset & base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -.011em; }
a { color: var(--brand-d); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
svg { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

.font-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }

/* Small layout utilities used inline across pages */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.full { width: 100%; }

::selection { background: var(--brand-m); color: #04203f; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* ------------------------------------------------------------------ *
 * 3. App shell — sidebar
 * ------------------------------------------------------------------ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-tx);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  border-right: 1px solid rgba(255, 255, 255, .04);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  position: relative;
}
.sidebar-brand::after {
  content: '';
  position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand) 45%, var(--accent) 100%);
  opacity: .85;
}
.sidebar-logo {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { min-width: 0; }
.brand-name {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em;
  line-height: 1.1;
}
.brand-sub {
  font-size: 11px; color: var(--sidebar-tx); margin-top: 2px;
  letter-spacing: .02em;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 8px;
  -webkit-overflow-scrolling: touch;
}
.nav-section {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #5b6b82;
  padding: 16px 12px 7px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--sidebar-tx);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t), color var(--t);
  position: relative;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--sidebar-hv); color: #e2e8f0; text-decoration: none; }
.nav-item.active {
  background: var(--sidebar-hv);
  color: #fff;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-ak);
}
.nav-item.active svg { color: var(--sidebar-ak); }

/* Install-app button */
.btn-install-app {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px dashed rgba(255, 138, 61, .38);
  background: rgba(255, 138, 61, .08);
  color: var(--sidebar-ak);
  font-size: 13px; font-weight: 600;
  transition: background var(--t);
}
.btn-install-app:hover { background: rgba(255, 138, 61, .16); }
.btn-install-app svg { width: 17px; height: 17px; }

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
  font-size: 13px; font-weight: 600; color: #e2e8f0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role { font-size: 11px; color: var(--sidebar-tx); text-transform: capitalize; }
.btn-logout {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--sidebar-tx);
  transition: background var(--t), color var(--t);
  flex-shrink: 0;
}
.btn-logout svg { width: 18px; height: 18px; }
.btn-logout:hover { background: rgba(220, 38, 38, .15); color: #fca5a5; }

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

/* ------------------------------------------------------------------ *
 * 4. Topbar
 * ------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  margin-left: var(--sidebar-w);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 -3px 0 -2px var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  padding-top: env(safe-area-inset-top);
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
  z-index: 500;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.page-title {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-toggle {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  color: var(--text);
  align-items: center; justify-content: center;
  transition: background var(--t);
}
.sidebar-toggle:hover { background: var(--surface-2); }
.sidebar-toggle svg { width: 22px; height: 22px; }

/* Let the title/subtitle block shrink so its ellipsis works instead of
   pushing into the right-hand controls. */
.topbar-left > div { min-width: 0; }

/* ------------------------------------------------------------------ *
 * Shop switcher (topbar) — a self-contained pill. Previously unstyled,
 * which let the native <select> overflow and overlap the page title on
 * narrow screens. Bounded width + ellipsis keeps it aligned everywhere.
 * ------------------------------------------------------------------ */
.shop-switch { display: inline-flex; align-items: center; margin: 0; }
.shop-pick {
  display: inline-flex; align-items: center; gap: 7px;
  position: relative;
  height: 38px; padding: 0 30px 0 11px;
  max-width: 230px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text);
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.shop-pick:hover { border-color: var(--brand); }
.shop-pick > svg:first-child { width: 17px; height: 17px; color: var(--muted); flex: 0 0 auto; }
.shop-pick select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background: transparent; color: var(--text);
  font-size: 13px; font-weight: 600; line-height: 1;
  padding: 0; margin: 0; cursor: pointer; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-pick select:focus { outline: none; }
.shop-pick .chev {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--muted); pointer-events: none;
}
.shop-pick--static { cursor: default; padding-right: 12px; }
.shop-pick--static:hover { border-color: var(--border); }
.shop-pick--static b {
  font-size: 13px; font-weight: 700; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ *
 * 5. Main content
 * ------------------------------------------------------------------ */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  max-width: 1480px;
}

/* ------------------------------------------------------------------ *
 * 6. Buttons
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform .08s, color var(--t);
  text-decoration: none;
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 111, 224, .28);
}
.btn-primary:hover { background: var(--brand-d); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--sh-sm);
}
.btn-secondary:hover { background: var(--surface-2); border-color: #d4dae3; }

.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 1px 2px rgba(220, 38, 38, .25);
}
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: 8px 13px; font-size: 12.5px; border-radius: 7px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { padding: 13px 26px; font-size: 15px; }

.btn-icon { padding: 8px; }
.btn-icon svg { width: 16px; height: 16px; }
.btn-sm.btn-icon { padding: 7px; }

.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ *
 * 7. Cards
 * ------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
}
.card-header h2 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.card-body { padding: 20px; }

/* ------------------------------------------------------------------ *
 * 8. Stat cards & dashboard grid
 * ------------------------------------------------------------------ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  padding: 17px 18px;
  transition: box-shadow var(--t), transform var(--t);
}
.stat-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.stat-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 23px; height: 23px; }
.stat-icon.indigo { background: var(--brand-l);  color: var(--brand); }
.stat-icon.blue   { background: var(--brand-l);  color: var(--brand); }
.stat-icon.orange { background: var(--accent-l); color: var(--accent-d); }
.stat-icon.green  { background: var(--success-bg); color: var(--success); }
.stat-icon.amber  { background: var(--warning-bg); color: var(--warning); }
.stat-icon.red    { background: var(--danger-bg);  color: var(--danger); }
.stat-value {
  font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  align-items: start;
}

/* ------------------------------------------------------------------ *
 * 9. Tables
 * ------------------------------------------------------------------ */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Companion scrollbar mirrored ABOVE a wide table so you don't have to scroll to
   the bottom to reach the horizontal bar. Injected by app.js only when the table
   actually overflows sideways; it stays in sync with the table's own scroll. */
.table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #d0d5dd) transparent;
}
.table-scroll-top > div { height: 1px; }
.table-scroll-top::-webkit-scrollbar { height: 10px; }
.table-scroll-top::-webkit-scrollbar-track { background: transparent; }
.table-scroll-top::-webkit-scrollbar-thumb { background: var(--border, #d0d5dd); border-radius: 6px; }
.table-scroll-top::-webkit-scrollbar-thumb:hover { background: #aeb6c2; }
@media print { .table-scroll-top { display: none !important; } }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--surface-2); }

.low-stock { color: var(--danger); font-weight: 700; }
.table-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
/* Actions live in the last column and are right-aligned; align the column's
   header the same way and keep the icon buttons on one row so they line up. */
.responsive-table thead th:last-child { text-align: right; }
.responsive-table td:last-child { white-space: nowrap; }

/* Right-aligned "amount" columns, used across Orders/Collection/Products/etc. */
.tr, td.tr, th.tr { text-align: right; }
.font-mono, .tr, td.tr { white-space: nowrap; }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.pagination a, .pagination span {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
.pagination a:hover { background: var(--surface-2); border-color: #d4dae3; text-decoration: none; }
.pagination .active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ------------------------------------------------------------------ *
 * 10. Forms
 * ------------------------------------------------------------------ */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}
.form-group label.required::after,
label.required::after { content: ' *'; color: var(--danger); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=email], input[type=tel],
input[type=search], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  -webkit-appearance: none;
  appearance: none;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--subtle); }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover { border-color: #d0d7e2; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
input:disabled, input[readonly], select:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: not-allowed;
}
input[readonly] { cursor: default; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 36px;
}

/* Search bar (orders / lists) */
.search-bar {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 380px;
  display: flex;
  align-items: center;
}
.search-bar svg {
  position: absolute; left: 12px;
  width: 17px; height: 17px;
  color: var(--subtle);
  pointer-events: none;
}
.search-bar input { padding-left: 38px; }

.orders-filter-row { gap: 10px; }
.orders-filter-row > select,
.orders-filter-row > input[type=date],
.orders-filter-row > input[type=text]:not(.search-bar input) {
  width: auto;
  flex: 0 0 auto;
}
.orders-filter-row > input[type=date] { min-width: 150px; }
.orders-count-badge { white-space: nowrap; }

/* Labeled, responsive orders filter */
.orders-filter .filter-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.orders-filter .ff { display: flex; flex-direction: column; gap: 5px; }
.orders-filter .ff > label { font-size: 11px; font-weight: 600; color: var(--muted); }
.orders-filter .ff-search { flex: 1 1 240px; min-width: 200px; }
.orders-filter .ff-search .search-bar { min-width: 0; max-width: none; flex: 1; }
.orders-filter .ff select, .orders-filter .ff input[type=date] { min-width: 150px; }
.orders-filter .ff-actions { flex-direction: row; gap: 8px; margin-left: auto; }
.orders-filter .filter-meta { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: right; }
@media (max-width: 768px) {
  .orders-filter .ff-search { flex-basis: 100%; }
  .orders-filter .ff { flex: 1 1 calc(50% - 6px); }
  .orders-filter .ff-actions { flex-basis: 100%; margin-left: 0; }
  .orders-filter .ff-actions .btn { flex: 1; }
  .orders-filter .filter-meta { text-align: center; }
}
@media (max-width: 430px) {
  .orders-filter .ff { flex-basis: 100%; }
}

/* Hide non-essential table columns on small screens */
@media (max-width: 560px) { .hide-sm { display: none !important; } }

/* Sidebar stock-deduction toggle */
.sidebar-settings { padding: 2px 12px 4px; }
.stock-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: #cbd5e1; font-size: 12.5px; font-family: inherit; cursor: pointer;
  text-align: left; transition: background .15s, border-color .15s;
}
.stock-toggle:hover { background: rgba(255,255,255,.1); }
.stock-toggle .st-ico { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.stock-toggle .st-text { flex: 1; line-height: 1.2; }
.stock-toggle .st-text strong { font-weight: 700; color: #94a3b8; }
.stock-toggle.on { color: #a7f3d0; border-color: rgba(16,185,129,.4); }
.stock-toggle.on .st-ico { opacity: 1; }
.stock-toggle.on .st-text strong { color: #34d399; }
.st-switch { position: relative; width: 34px; height: 20px; flex-shrink: 0; border-radius: 999px; background: rgba(255,255,255,.2); transition: background .15s; }
.stock-toggle.on .st-switch { background: #10b981; }
.st-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.stock-toggle.on .st-knob { left: 16px; }

/* ------------------------------------------------------------------ *
 * 11. Badges
 * ------------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: .01em;
  line-height: 1.5;
  white-space: nowrap;
}
.badge-pending    { background: var(--warning-bg); color: #b45309; }
.badge-confirmed  { background: var(--info-bg);    color: #1d4ed8; }
.badge-dispatched { background: #f3e8ff;           color: #7e22ce; }
.badge-delivered  { background: var(--success-bg); color: #047857; }
.badge-cancelled  { background: var(--danger-bg);  color: #b91c1c; }
.badge-active     { background: var(--success-bg); color: #047857; }
.badge-inactive   { background: #f1f5f9;           color: #64748b; }

.free-qty-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--success-bg);
  color: #047857;
  font-size: 10.5px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 12. Alerts
 * ------------------------------------------------------------------ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 18px;
  border: 1px solid transparent;
  border-left-width: 4px;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
}
.alert button {
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: .55;
  padding: 0 2px;
  transition: opacity var(--t);
  cursor: pointer;
}
.alert button:hover { opacity: 1; }
.alert-success { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; border-left-color: var(--success); }
.alert-warning { background: var(--warning-bg); color: #92400e; border-color: #fcd9a5; border-left-color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  color: #991b1b; border-color: #fbcaca; border-left-color: var(--danger); }
.alert-info    { background: var(--info-bg);    color: #1e40af; border-color: #bfdbfe; border-left-color: var(--info); }
/* An error/warning that must not be missed: draw the eye once on arrival. */
.alert-danger, .alert-warning { animation: alertPop .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes alertPop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Reusable field-level validation styling ──────────────────────────────
   Add .input-error to any input/select/textarea to flag it, and .field-shake
   for a one-off attention nudge. .field-msg shows a short reason under it. */
.input-error,
input.input-error, select.input-error, textarea.input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 15%, transparent) !important;
}
.field-msg { display: block; font-size: 12px; font-weight: 600; color: var(--danger); margin-top: 5px; }
.field-shake { animation: fieldShake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes fieldShake {
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}

/* ------------------------------------------------------------------ *
 * 13. Order totals & "new order" extras
 * ------------------------------------------------------------------ */
.order-total-box,
.order-total-row.grand,
.order-total-row {
  font-variant-numeric: tabular-nums;
}
.order-total-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
}
.order-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  color: var(--muted);
}
.order-total-row span:last-child { color: var(--text); font-weight: 600; font-family: var(--mono); }
.order-total-row.grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.order-total-row.grand span:last-child { color: var(--brand-d); font-weight: 800; }

.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--brand-m);
  background: var(--brand-l);
  color: var(--brand-d);
  font-size: 13.5px;
  font-weight: 600;
  transition: background var(--t), border-color var(--t);
}
.add-row-btn:hover { background: #dfeeff; border-color: var(--brand); }

/* Stock banner (new-order page) */
.stock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
}
.stock-banner.on  { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.stock-banner.off { background: var(--surface-2);  color: var(--muted); border-color: var(--border); }

/* ------------------------------------------------------------------ *
 * 14. Masters layout
 * ------------------------------------------------------------------ */
.masters-layout.single { grid-template-columns: 1fr; }
.masters-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}

/* ------------------------------------------------------------------ *
 * 15. Invoice (order_view) — base styles; page also has scoped tweaks
 * ------------------------------------------------------------------ */
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 24px; flex-wrap: nowrap; }
.invoice-company { flex: 1 1 auto; min-width: 0; }
.invoice-company h2 { font-size: 22px; font-weight: 800; color: var(--brand-d); letter-spacing: -.02em; }
.invoice-meta { text-align: right; flex: 0 0 auto; }
.invoice-meta .order-no { font-size: 18px; font-weight: 700; font-family: var(--mono); white-space: nowrap; }
@media (max-width: 600px) { .invoice-header { flex-wrap: wrap; } .invoice-meta { text-align: left; } }
.invoice-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 18px;
}
.invoice-party h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.invoice-party p { font-size: 13.5px; line-height: 1.6; }

.inv-table th { background: var(--sidebar-bg); color: #fff; border-color: rgba(255,255,255,.12); }
.inv-table td { font-size: 13px; }
.inv-total { display: flex; justify-content: flex-end; }
.inv-total-box { min-width: 280px; margin-top: 16px; }
.inv-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.inv-row.grand { font-size: 16px; font-weight: 800; border-top: 2px solid var(--border); margin-top: 6px; padding-top: 9px; color: var(--brand-d); }

/* ------------------------------------------------------------------ *
 * 16. Dialog (modal)
 * ------------------------------------------------------------------ */
.dlg-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 9000;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.dlg-overlay.show { opacity: 1; visibility: visible; }
.dlg-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  width: 100%; max-width: 420px;
  overflow: hidden;
  transform: translateY(8px) scale(.97);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
.dlg-overlay.show .dlg-box { transform: translateY(0) scale(1); }
.dlg-head { padding: 26px 26px 20px; text-align: center; }
.dlg-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 16px;
}
.dlg-icon svg { width: 30px; height: 30px; }
.dlg-icon.error   { background: var(--danger-bg);  color: var(--danger); }
.dlg-icon.success { background: var(--success-bg); color: var(--success); }
.dlg-icon.warning { background: var(--warning-bg); color: var(--warning); }
.dlg-icon.confirm { background: var(--brand-l);    color: var(--brand-d); }
.dlg-icon.info    { background: var(--info-bg);    color: var(--info); }
.dlg-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.dlg-msg { font-size: 14px; color: var(--muted); line-height: 1.6; }
.dlg-list {
  text-align: left;
  list-style: none;
  background: var(--danger-bg);
  border: 1px solid #fbcaca;
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin-top: 6px;
}
.dlg-list li {
  font-size: 13px; color: #991b1b; padding: 3px 0 3px 18px; position: relative;
}
.dlg-list li::before { content: '•'; position: absolute; left: 4px; color: var(--danger); }
.dlg-foot {
  display: flex; gap: 10px; justify-content: center;
  padding: 0 26px 24px;
}
.dlg-foot .btn { min-width: 110px; }

/* ------------------------------------------------------------------ *
 * 17. Toast
 * ------------------------------------------------------------------ */
.toast-container {
  position: fixed;
  top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9500;
  max-width: calc(100vw - 32px);
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  padding: 13px 15px;
  min-width: 280px;
  animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1);
}
.toast.success { border-left-color: var(--success); }
.toast.danger  { border-left-color: var(--danger); }
.toast.info    { border-left-color: var(--info); }
.toast.warning { border-left-color: var(--warning); }
.toast-ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast-ico.success { color: var(--success); }
.toast-ico.danger  { color: var(--danger); }
.toast-ico.info    { color: var(--info); }
.toast-ico.warning { color: var(--warning); }
.toast-body { flex: 1; min-width: 0; }
.toast-msg { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.toast-close {
  font-size: 18px; line-height: 1; color: var(--subtle);
  padding: 0 2px; transition: color var(--t);
}
.toast-close:hover { color: var(--text); }

@keyframes toastIn  { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(110%); } }

/* ------------------------------------------------------------------ *
 * 18. Login
 * ------------------------------------------------------------------ */
.login-bg {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}
.login-art {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #0b3c8c 0%, #0a6fe0 48%, #071f4a 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.login-art-circles span {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}
.login-art-circles span:nth-child(1) { width: 360px; height: 360px; top: -90px; left: -90px; }
.login-art-circles span:nth-child(2) { width: 240px; height: 240px; bottom: -70px; right: -50px; background: rgba(249, 115, 22, .18); }
.login-art-circles span:nth-child(3) { width: 150px; height: 150px; top: 45%; right: 12%; background: rgba(255, 255, 255, .05); }
.login-art-content { position: relative; z-index: 1; text-align: center; color: #fff; max-width: 360px; }
.login-art-logo {
  width: min(300px, 80%);
  margin: 0 auto 20px;
  display: grid; place-items: center;
  /* drop-shadow follows the artwork's alpha, unlike box-shadow which would
     draw a rectangle around a transparent PNG. */
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .30));
}
.login-art-logo img { width: 100%; height: auto; }
.login-art-company { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.login-art-divider {
  width: 84px; height: 3px; border-radius: 3px; margin: 16px auto;
  background: linear-gradient(90deg, var(--brand-cyan) 0%, #ffffff 50%, var(--accent) 100%);
}
.login-art-tagline { font-size: 15px; color: rgba(255, 255, 255, .85); font-weight: 500; }

.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  padding-top: max(40px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  background: var(--bg);
}
.login-box { width: 100%; max-width: 380px; }
.login-mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-mobile-brand img { width: 52px; height: 52px; object-fit: contain; }
.login-mobile-brand.lockup img { width: auto; height: 46px; }
.login-mobile-brand-name { font-size: 18px; font-weight: 800; color: var(--brand-d); }
.login-mobile-brand-tagline { font-size: 12.5px; color: var(--muted); }
.login-welcome { font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 6px; }
.login-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
.login-box .btn-primary { width: 100%; padding: 13px; font-size: 15px; }
.login-hint {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); text-align: center;
}
.login-hint code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; color: var(--brand-d);
}

/* ------------------------------------------------------------------ *
 * 18b. Searchable picker (.pick-*) — customers & products forms
 * ------------------------------------------------------------------ */
.pick-wrap { position: relative; }
.pick-input { width: 100%; cursor: pointer; }
.pick-input:focus { cursor: text; }
.pick-drop {
  position: fixed;
  background: var(--surface);
  border: 1.5px solid var(--brand);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-lg);
  max-height: 240px;
  overflow-y: auto;
  z-index: 99998;
  display: none;
}
.pick-drop.open { display: block; }
.pick-opt {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-2);
  transition: background .12s;
}
.pick-opt:last-child { border-bottom: none; }
.pick-opt:hover, .pick-opt.hl { background: var(--brand-l); }
.pick-opt-code { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.pick-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* Master add/edit forms */
.master-form { display: flex; flex-direction: column; gap: 14px; }

/* ------------------------------------------------------------------ *
 * 19. Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .masters-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: var(--sh-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .topbar, .main-content { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .main-content { padding: 16px; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
  .topbar { padding: 0 14px; padding-top: env(safe-area-inset-top); height: calc(54px + env(safe-area-inset-top)); }
  .page-title { font-size: 16px; }
  .topbar-right { gap: 8px; }
  .shop-pick { max-width: 150px; height: 36px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .stat-card { padding: 14px; gap: 12px; }
  .stat-icon { width: 40px; height: 40px; }
  .stat-icon svg { width: 19px; height: 19px; }
  .stat-value { font-size: 21px; }
  .stat-label { font-size: 11.5px; }
  .card-body { padding: 16px; }
  .card-header { padding: 11px 14px; }
  .card-header h2 { font-size: 14px; }
  .mb-4 { margin-bottom: 11px; }
  .mt-4 { margin-top: 11px; }
  table:not(.responsive-table):not(.inv-table) { font-size: 12.5px; }
  /* Generic (non-responsive-table) tables — e.g. Dashboard's recent-orders /
     low-stock lists — get the same tighter row padding on small screens. */
  table:not(.responsive-table):not(.inv-table) thead th { padding: 8px 12px; font-size: 10px; }
  table:not(.responsive-table):not(.inv-table) tbody td { padding: 8px 12px; }

  /* List-page toolbar (search + filter badges + "View Inactive"/"+ Add …"
     buttons) — used on Products, Customers, Masters. On narrow screens the
     two halves used to sit on one row and push the Add button off-screen;
     now everything wraps and the search box goes full width. */
  .flex.justify-between.items-center.mb-4 {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .flex.justify-between.items-center.mb-4 > .flex {
    flex-wrap: wrap;
    width: 100%;
    row-gap: 8px;
  }
  .flex.justify-between.items-center.mb-4 .search-bar {
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
  }

  /* Stacked / label-based responsive tables */
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table tr {
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--sh-sm);
    margin-bottom: 8px;
    padding: 4px 14px;
    background: var(--surface);
  }
  .responsive-table tbody tr:hover td { background: transparent; }
  .responsive-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-2);
    text-align: right;
  }
  .responsive-table td > *:last-child { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
  .responsive-table td:last-child { border-bottom: none; }
  .responsive-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    text-align: left;
    flex-shrink: 0;
  }
  .responsive-table td[data-label=""]::before,
  .responsive-table td:not([data-label])::before { content: ''; }
  .responsive-table .table-actions { justify-content: flex-end; }

  /* Filter rows stack and go full-width */
  .orders-filter-row { flex-direction: column; align-items: stretch; }
  .orders-filter-row .search-bar { min-width: 0; max-width: none; }
  .orders-filter-row select,
  .orders-filter-row input[type=date],
  .orders-filter-row .btn { width: 100%; }
  .orders-count-badge { margin-left: 0 !important; text-align: center; }

  /* Login -> single column. The art panel is replaced by the full lockup,
     centred; its adjacent text is dropped because the company name is already
     repeated by .login-welcome directly beneath it. */
  .login-bg { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-mobile-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
  }
  .login-mobile-brand img { width: auto; height: 68px; }
  .login-mobile-brand > div { display: none; }
  .login-panel { align-items: flex-start; padding-top: max(56px, env(safe-area-inset-top)); }
}

@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topbar-right .btn span { display: none; }
  .topbar-right .btn { padding: 9px; }
  .shop-pick { max-width: 118px; padding: 0 26px 0 8px; gap: 5px; }
  .shop-pick select { font-size: 12px; }
  /* On the narrowest screens the shop pill is the clearest indicator of which
     shop is active, so drop the smaller subtitle under the page title to give
     both the title and the pill room and prevent any overlap. */
  .topbar-left > div > div:last-child { display: none; }
}

/* Tablet/desktop: sidebar visible by default, collapsible via the hamburger */
@media (min-width: 769px) {
  .sidebar { transform: none; transition: transform .22s ease; }
  .topbar, .main-content { transition: margin-left .22s ease; }
  .sidebar-backdrop { display: none; }
  body.nav-collapsed .sidebar { transform: translateX(-100%); }
  body.nav-collapsed .topbar,
  body.nav-collapsed .main-content { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * 20. Motion & print
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sidebar, .sidebar-backdrop, .topbar, .no-print, .btn-group.no-print { display: none !important; }
  .main-content { margin: 0; padding: 0; max-width: none; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; }
  .inv-table th { background: #1f2937 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Documents must NEVER collapse to the phone stack on paper. Chrome sizes an
     A4 page as < 768px, so the mobile card-stacking / grid-collapse rules would
     otherwise leak in (receipt parties stacked, applied-invoices as label rows).
     Force real tables and a side-by-side parties grid for print. */
  .invoice-parties { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .table-wrapper { overflow: visible !important; }
  .responsive-table { display: table !important; width: 100% !important; min-width: 0 !important; }
  .responsive-table thead { display: table-header-group !important; }
  .responsive-table tbody { display: table-row-group !important; }
  .responsive-table tr { display: table-row !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
  .responsive-table th, .responsive-table td { display: table-cell !important; width: auto !important; white-space: normal; padding: 7px 10px !important; }
  .responsive-table td::before { content: none !important; display: none !important; }
  /* An A4 page is narrower than the phone breakpoint, so the phone layout's
     right-aligned cells leaked into print (item names pushed to the right).
     Text columns print left-aligned again; figures (.tr) stay right. */
  .responsive-table td { text-align: left; }
  .responsive-table td.tr { text-align: right; }
  .responsive-table td.text-center, .responsive-table td.tc { text-align: center; }
}

/* ------------------------------------------------------------------ *
 * 19b. Extended responsive layer
 *
 * Everything below refines how the *existing* layout behaves at sizes the
 * original breakpoints didn't cover (small iPhones, large tablets, wide
 * desktops, landscape phones). No element is moved, renamed or restructured
 * — only spacing, sizing and wrapping are tuned per viewport.
 * ------------------------------------------------------------------ */

/* Nothing may push the page sideways on a phone. */
body { overflow-x: clip; }
body { -webkit-tap-highlight-color: rgba(10, 111, 224, .12); }

/* Common overflow culprits: flex/grid children default to min-width:auto,
   so long unbroken strings (emails, order numbers) blow the row out. */
.stat-card, .card, .form-group, .topbar-left, .user-info,
.dashboard-grid > *, .masters-layout > * { min-width: 0; }
.card-header h2, .page-title, .stat-label { overflow-wrap: break-word; }

/* Horizontal table scroll should not hand the gesture to the page. */
.table-wrapper { overscroll-behavior-x: contain; }

/* ---- Wide desktops & ultrawide ---------------------------------- */
@media (min-width: 1600px) {
  .main-content { max-width: 1640px; padding: 28px 32px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (min-width: 1920px) {
  .main-content { max-width: 1820px; }
}

/* ---- Small laptops / large tablets ------------------------------
   1024px-wide screens lose a quarter of their width to the sidebar, so
   trim it slightly instead of cramping the content column. */
@media (min-width: 769px) and (max-width: 1180px) {
  :root { --sidebar-w: 218px; }
  .main-content { padding: 20px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

/* ---- Tablet portrait -------------------------------------------- */
@media (max-width: 900px) {
  .invoice-parties { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---- Phones ------------------------------------------------------ */
@media (max-width: 768px) {
  /* iOS Safari zooms the whole page when a focused field is under 16px.
     Compact in-card controls (product tiles) set their own size and are
     unaffected by this rule. */
  input[type=text], input[type=password], input[type=number],
  input[type=date], input[type=email], input[type=tel],
  input[type=search], select, textarea { font-size: 16px; }

  /* Comfortable touch targets without changing any button's role or place. */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .nav-item { padding: 11px 12px; }
  .sidebar { width: min(var(--sidebar-w), 84vw); }

  /* Notch / home-indicator safe areas on iPhone. */
  .sidebar { padding-top: env(safe-area-inset-top); }
  .sidebar-nav { padding-bottom: 12px; }
  .sidebar-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }

  /* Toasts span the width so long messages stay readable. */
  .toast-container { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top)); max-width: none; }
  .toast { min-width: 0; width: 100%; }

  /* Modals breathe on small screens. */
  .dlg-overlay { padding: 16px; }
  .dlg-box { max-width: none; }
  .dlg-head { padding: 22px 20px 16px; }
  .dlg-foot { padding: 0 20px 20px; }
  .dlg-foot .btn { flex: 1; min-width: 0; }

  .btn-group > .btn { flex: 1 1 auto; }
  .card-header { padding: 14px 16px; }
}

/* ---- Small phones (iPhone SE / mini, 360–390px) ------------------ */
@media (max-width: 400px) {
  .main-content { padding: 12px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .topbar { padding: 0 10px; }
  .page-title { font-size: 15px; }
  .stats-grid { gap: 10px; }
  .stat-card { padding: 12px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .stat-icon svg { width: 19px; height: 19px; }
  .stat-value { font-size: 19px; }
  .stat-label { font-size: 11.5px; }
  .card-body { padding: 14px; }
  .responsive-table tr { padding: 4px 12px; }
  /* Dashboard's compact tables side-scroll inside .table-wrapper by design;
     tighter cells mean far less of that scrolling on a 320–400px screen. */
  table:not(.responsive-table):not(.inv-table) thead th,
  table:not(.responsive-table):not(.inv-table) tbody td { padding: 7px 9px; }
  .pagination a, .pagination span { min-width: 32px; height: 32px; padding: 0 8px; font-size: 12.5px; }
  .login-panel { padding: 32px 16px; }
  .login-welcome { font-size: 22px; }
}

/* ---- Very narrow (320px, folded devices) ------------------------- */
@media (max-width: 340px) {
  .stats-grid { grid-template-columns: 1fr; }
  .btn { padding: 10px 12px; }
}

/* ---- Landscape phones: reclaim vertical space -------------------- */
@media (max-height: 480px) and (orientation: landscape) {
  .login-panel { align-items: flex-start; padding-top: 24px; padding-bottom: 24px; }
  .login-welcome { font-size: 21px; }
  .login-sub { margin-bottom: 18px; }
  .sidebar-brand { padding: 12px 16px 10px; }
  .sidebar-logo { width: 34px; height: 34px; }
  .dlg-overlay { align-items: center; }
  .dlg-box { max-height: 92vh; overflow-y: auto; }
}

/* ---- Pointer-quality tweaks -------------------------------------- */
@media (hover: none) {
  /* Hover lifts feel like lag on touch devices. */
  .stat-card:hover { transform: none; box-shadow: var(--sh-sm); }
  tbody tr:hover td { background: transparent; }
}

/* ------------------------------------------------------------------ *
 * 21. Appsoware theme additions — reports, statements, numeric tables
 *     (kept at the end so they layer over the shared base above;
 *      no existing rule or class name is modified)
 * ------------------------------------------------------------------ */

/* Report hub tab strips — scroll horizontally rather than wrapping into a
   tall block on narrow phones. */
.rep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 560px) {
  .rep-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .rep-tabs::-webkit-scrollbar { display: none; }
  .rep-tabs > .btn { flex: 0 0 auto; }
}

/* Report filter bar — reuses the responsive .orders-filter grid, with a
   couple of report-only affordances layered on top. */
.orders-filter .ff-actions .btn { white-space: nowrap; }
.orders-filter .ff-wide { flex: 1 1 220px; min-width: 180px; }

/* Active-filter chips shown above a report's table. */
.rep-filter-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.rep-filter-note .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-l);
  color: var(--brand-d);
  border: 1px solid var(--brand-ring);
  font-weight: 600;
  font-size: 12px;
}

/* WhatsApp share button — brand colour is fixed by WhatsApp, so it is the
   one button that intentionally sits outside the Appsoware palette. */
.btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
.btn-whatsapp:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }

/* Very small phones (iPhone SE / 320px): keep report action rows usable. */
@media (max-width: 380px) {
  .btn-group { flex-wrap: wrap; }
  .btn-group > .btn { flex: 1 1 100%; justify-content: center; }
  .orders-filter .ff select,
  .orders-filter .ff input[type=date] { min-width: 0; width: 100%; }
}

/* ── Horizontal side-scroll for ALL data tables on phone/tablet SCREENS ────
   Every table keeps its columns and scrolls sideways inside its .table-wrapper.
   Scoped to `screen` so none of it can leak into the print / Save-as-PDF page
   (Chrome evaluates an A4 page as < 768px wide, so an unscoped rule here would
   force the table to content-width and overflow the sheet). Last block, so it
   wins over the earlier card-stacking rules for .responsive-table. */
@media screen and (max-width: 768px) {
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrapper > table,
  .responsive-table {
    /* Columns size to their content so nothing collides; the table fills at
       least the viewport, then scrolls sideways. */
    width: max-content;
    min-width: 100%;
  }

  /* Undo the card-stacking so responsive tables scroll sideways as plain tables. */
  .responsive-table { display: table !important; width: max-content !important; min-width: 100% !important; }
  .responsive-table thead { display: table-header-group !important; }
  .responsive-table tbody { display: table-row-group !important; }
  .responsive-table tr {
    display: table-row !important;
    padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  .responsive-table thead th,
  .responsive-table td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
    /* Comfortable, even gaps between every column so nothing reads as joined. */
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--border,#e2e8f0) !important;
    vertical-align: middle;
  }
  .responsive-table td::before { content: none !important; display: none !important; }
  .responsive-table td > div { white-space: nowrap; }
  /* Right-aligned money columns keep a little breathing room from the number
     to their left so the two never touch. */
  .responsive-table td.tr, .responsive-table th.tr { padding-left: 22px !important; }

  /* Document tables (statements / receipts) that live outside .table-wrapper. */
  .mscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .mscroll > table { min-width: max-content; }
}

/* ==========================================================================
 * 22. Consistency & alignment layer  (additive; no earlier rule is removed)
 *   One shared spacing scale + one shared control height so form fields,
 *   selects and buttons line up to the pixel on every toolbar, filter row and
 *   form — the most common source of "off by a few pixels" misalignment.
 * ========================================================================== */
:root {
  /* 4px-based spacing scale — use these instead of ad-hoc px for new work. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  /* Shared height for every interactive control so they align on one row. */
  --control-h: 40px;
  --control-h-sm: 34px;
  /* Consistent page gutter, wired to the safe-area so notches never clip. */
  --gutter: 24px;
}

/* Inputs, selects and primary buttons share the SAME height → perfect
   baseline alignment wherever they sit side by side (filters, forms). */
input[type=text], input[type=password], input[type=number],
input[type=date], input[type=email], input[type=tel],
input[type=search], select {
  min-height: var(--control-h);
}
.btn { min-height: var(--control-h); }
.btn-sm { min-height: var(--control-h-sm); }
.btn-icon, .btn-sm.btn-icon { aspect-ratio: 1 / 1; }   /* square icon buttons */

/* Cards and toolbars use the scale so vertical rhythm is uniform app-wide. */
.card-body { padding: var(--sp-5); }
.card-header { padding: var(--sp-4) var(--sp-5); }
.mb-4 { margin-bottom: var(--sp-4); }
.mt-4 { margin-top: var(--sp-4); }
.gap-2 { gap: var(--sp-2); }

/* Prevent a single wide flex/grid child from forcing horizontal page scroll.
   (We deliberately do NOT set overflow-x:hidden on body — that would force the
   vertical axis into a scroll container and break the sticky topbar/headers.) */
.main-content, .main-content > * { min-width: 0; }
.main-content { max-width: 100%; }
.card, .card-body, .stat-card { min-width: 0; }

/* Touch targets: on finger devices, small buttons / nav rows / pager cells
   grow to a comfortable 40px so taps land accurately (WCAG 2.5.5). */
@media (hover: none) {
  .btn-sm { min-height: var(--control-h); }
  .pagination a, .pagination span { min-height: var(--control-h); }
  .nav-item { padding-top: 11px; padding-bottom: 11px; }
}

/* Tablet portrait (a genuine gap between phone and desktop): keep stat cards
   and form grids from stretching into awkward single columns too early. */
@media (min-width: 641px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .form-grid  { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .order-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Landscape phones: reclaim vertical space so forms/tables stay usable. */
@media (max-height: 500px) and (orientation: landscape) {
  .card-body { padding: var(--sp-3) var(--sp-4); }
  .stat-card { padding: var(--sp-3); }
}