/* =============================================
   Nexcod POS — User Dashboard Styles
   Used on dashboard, billing, inventory, customers, reports, settings, plans, support
   ============================================= */

:root {
  --d-sidebar-w: 240px;
  --d-topbar-h: 60px;
}

body.dash-body {
  background: var(--bg-subtle);
  font-family: var(--ff-sans);
  margin: 0;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.dash-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--d-sidebar-w);
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.dash-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.dash-sidebar .brand-icon { width: 32px; height: 32px; border-radius:8px; background: #1d4ed8; display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--ff-sans);font-weight:800; box-shadow:0 4px 12px rgba(79,70,229,0.30); }
.dash-sidebar .brand-text { font-family:var(--ff-sans); font-weight:700; font-size:16px; color: var(--text); }

.dash-nav { flex: 1; padding: 14px 12px; }

.dash-nav-section { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 14px 12px 6px; }

.dash-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius:8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: all .15s;
}
.dash-link:hover { background: var(--bg-subtle); color: var(--text); }
.dash-link.active {
  background: linear-gradient(135deg, rgba(79,70,229,0.10), rgba(124,58,237,0.10));
  color: var(--brand-700);
  font-weight: 600;
}
.dash-link svg { width: 17px; height: 17px; flex-shrink: 0; }

.dash-user {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-user-avatar {
  width: 34px; height: 34px; border-radius:50%;
  background: #3b82f6;
  color: #fff; display:flex;align-items:center;justify-content:center;
  font-weight: 600; font-size: 13px;
}
.dash-user-info { flex:1; min-width: 0; }
.dash-user-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash-user-plan { font-size: 11px; color: var(--text-muted); }

/* ===== Topbar + main ===== */
.dash-main { margin-left: var(--d-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.dash-topbar {
  height: var(--d-topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 14px;
  position: sticky; top: 0; z-index: 50;
}

.dash-topbar h1 {
  font-family: var(--ff-sans);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}

.dash-topbar .spacer { flex: 1; }

.dash-content {
  flex: 1;
  padding: 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Plan banner ===== */
.plan-banner {
  background: #1d4ed8;
  color: #fff;
  padding: 14px 20px;
  border-radius:3px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.plan-banner-icon { font-size: 24px; }
.plan-banner-text { flex: 1; font-size: 13px; }
.plan-banner-text strong { display: block; font-size: 15px; margin-bottom: 2px; }
.plan-banner .btn { background: rgba(255,255,255,0.2); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.plan-banner .btn:hover { background: rgba(255,255,255,0.3); }
.plan-banner.warn { background: #f59e0b; }
.plan-banner.danger { background: #e11d48; }

/* ===== POS billing layout ===== */
.pos-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  height: calc(100vh - var(--d-topbar-h) - 48px);
}
.pos-products, .pos-cart {
  background: #fff;
  border: 1px solid var(--border);
  border-radius:3px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pos-search {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.pos-search input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius:8px;
  font-size: 14px;
  outline: none;
}
.pos-search input:focus { border-color: var(--brand-500); }

.pos-product-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  justify-content: start;   /* left-align tiles — single product no longer stretches wide */
  align-content: start;     /* pack rows to top — no awkward vertical stretch */
  gap: 10px;
  padding: 14px;
}

.pos-product {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius:8px;
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
  font-size: 12.5px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pos-product:hover { border-color: var(--brand-500); }
.pos-product .name { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.pos-product .price { color: var(--brand-700); font-weight: 700; font-size: 14px; }
.pos-product .stock { color: var(--text-muted); font-size: 11px; }

.pos-cart-header { padding: 16px; border-bottom: 1px solid var(--border); }
.pos-cart-header h2 { margin: 0; font-size: 16px; font-family: var(--ff-sans); }
.pos-cart-items { flex: 1; overflow-y: auto; }
.pos-cart-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 100px 80px 24px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.pos-cart-item .iname { font-weight: 600; }
.pos-cart-item .iprice { color: var(--text-muted); font-size: 11px; }
.pos-cart-item .qty { display: flex; gap: 4px; align-items: center; }
.pos-cart-item .qty input { width: 50px; padding: 4px 6px; text-align: center; border: 1px solid var(--border); border-radius:5px; }
.pos-cart-item .total { text-align: right; font-weight: 600; }
.pos-cart-item .rmv { color: #dc2626; cursor: pointer; text-align: center; }

.pos-cart-summary {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.pos-cart-summary .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.pos-cart-summary .row.total { font-size: 18px; font-weight: 700; font-family: var(--ff-sans); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--border); }
.pos-cart-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; }

/* ===== Mobile ===== */
@media (max-width: 720px) {
  .dash-sidebar { transform: translateX(-100%); transition: transform .25s; }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-main { margin-left: 0; }
  .pos-layout { grid-template-columns: 1fr; height: auto; }
}

/* Reuse admin styles - import key bits */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #f4f8ff; border: 1px solid #e1e8f7; border-radius:9px; padding: 20px; box-shadow: 0 1px 2px rgba(37,99,235,.05); transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { border-color: rgba(37,99,235,.30); }
.stat-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stat-card-icon { width: 38px; height: 38px; border-radius:9px; display: flex; align-items: center; justify-content: center; }
.stat-card-icon svg { width: 18px; height: 18px; }
.stat-icon-indigo { background: rgba(79,70,229,0.1); color: #1d4ed8; }
.stat-icon-violet { background: rgba(124,58,237,0.1); color: #1d4ed8; }
.stat-icon-emerald{ background: rgba(16,185,129,0.1); color: #10b981; }
.stat-icon-amber  { background: rgba(245,158,11,0.1); color: #f59e0b; }
.stat-value { font-family: var(--ff-sans); font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1;
  color: #2563eb; background: #2563eb; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.form-section { background: #fff; border: 1px solid var(--border); border-radius:3px; padding: 22px; margin-bottom: 18px; }
.form-section h3 { font-family: var(--ff-sans); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.form-section .section-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }

/*
 * Scrolls sideways when a table is wider than the page.
 *
 * This was `overflow: hidden` — there to clip the rounded corners, but it clipped the
 * CONTENT too. A wide list (Bills has nine columns) simply ran off the right edge with
 * no scrollbar and no way to reach the last columns at all.
 */
.dash-table-wrap { background: #fff; border: 1px solid var(--border); border-radius:3px;
                   overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.dash-table-wrap::-webkit-scrollbar { height: 9px; }
.dash-table-wrap::-webkit-scrollbar-track { background: var(--bg-subtle); border-radius:0 0 3px 3px; }
.dash-table-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius:5px; }
.dash-table-wrap::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.dash-table { width: 100%; border-collapse: collapse; }
/*
 * A sensible default row, kept in step with the admin panel.
 *
 * On the counter software this is overridden anyway — topnav.css forces 2px rows with
 * !important for the tight Marg-ERP look. This is what applies if that file is ever not
 * loaded, so the two no longer disagree by a factor of six.
 */
.dash-table thead th { background: var(--bg-subtle); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.dash-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--text); }

/*
 * No button sizing here on purpose.
 *
 * topnav.css already sets `.dash-table .btn-sm { padding: 1px 6px !important }` for the
 * counter software's tight Marg-style rows, and it loads last. Adding a height here
 * would have made those buttons TALLER, not smaller — the opposite of the point.
 */
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover { background: var(--bg-subtle); }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.page-title { font-family: var(--ff-sans); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.5px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.empty { padding: 50px 20px; text-align: center; }
.empty h3 { font-family: var(--ff-sans); font-size: 16px; margin: 0 0 4px; }
.empty p { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ============================================================
   Form controls for dashboard pages (inventory, customers,
   settings, support, reports, billing). These classes were only
   defined in public.css/admin.css which the dashboard does not
   load — so inputs rendered unstyled. Added here to match.
   ============================================================ */
.form-group { margin-bottom: 14px; }

.form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border .15s, box-shadow .15s;
  box-sizing: border-box;
}
.form-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }
textarea.form-input, textarea { font-family: inherit; min-height: 90px; resize: vertical; }

.form-select {
  width: 100%;
  padding: 10px 38px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  color: var(--text);
  font-size: 14px;
  outline: none;
  appearance: none;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' 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 12px center;
}
.form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }

/* Form section / card wrapper used across dashboard pages */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.form-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.section-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }

/* Two-column form grid helper */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   Row/table-based Billing screen (.bill-*) — indigo theme
   ============================================================ */
.bill-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: stretch;
  height: calc(100vh - 132px);
  min-height: 520px;
}

/* LEFT */
.bill-main {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-lg);
  overflow: hidden;
  min-width: 0;
}
.bill-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.bill-search-box { position: relative; flex: 1; display: flex; align-items: center; }
.bill-search-box svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.bill-search-box input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.bill-search-box input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }

.bill-search-results {
  display: none;
  position: absolute;
  top: 46px; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow: 0 16px 40px rgba(2,6,23,0.18);
  z-index: 40;
  max-height: 420px;
  overflow-y: auto;
}
.sr-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover, .sr-item.hl { background: var(--bg-subtle); }
.sr-name { font-weight: 600; font-size: 13.5px; }
.sr-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.sr-price { font-weight: 700; color: var(--brand-600); font-size: 14px; }
.sr-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: 13px; }

.bill-table-scroll { flex: 1; overflow: auto; }
/* Billing items table — Marg-ERP style: full gridlines, tight rows, small font */
.bill-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bill-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--brand-600);
  color: #fff;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  white-space: nowrap;
  border: 1px solid var(--brand-700, #1e40af);
}
.bill-table thead th.r { text-align: right; }
.bill-table tbody td { padding: 1px 4px; border: 1px solid var(--border); vertical-align: middle; }
.bill-table tbody td.muted { color: var(--text-muted); }
.bill-table tbody td.r { text-align: right; }
.bill-table .amount { font-weight: 700; white-space: nowrap; font-size: 12px; }
.bill-table .cell {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 5px;
  border-radius:3px;
  font-size: 12px;
  height: 25px;
  line-height: 1.4;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
select.cell, .bill-table select.cell { padding: 0 2px; height: 25px; appearance: auto; }
.bill-table .cell:hover { border-color: var(--border); }
.bill-table .cell:focus { border-color: var(--brand-500); background: #eef2ff; box-shadow: none; outline: 1px solid var(--brand-500); outline-offset: -1px; }
.bill-table .cell.name { font-weight: 600; }
.bill-table .cell.r { text-align: right; }
.bill-table .rmv { color: #dc2626; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 4px; }
.bill-table .rmv:hover { color: #991b1b; }
.bill-empty td { text-align: center; color: var(--text-muted); padding: 40px 16px !important; font-size: 13px; }

/* RIGHT */
.bill-side {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-lg);
  overflow: hidden;
}
.bill-side-scroll { flex: 1; overflow-y: auto; padding: 16px; }
.bill-card { margin-bottom: 14px; }
.bill-card-head { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--brand-600); margin-bottom: 10px; }

.bill-summary {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius:var(--r-md);
  padding: 14px;
}
.bill-summary .row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 0; color: var(--text); }
.bill-summary .row span:first-child { color: var(--text-muted); }
.bill-summary .row.grand {
  margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--border-strong);
  font-size: 17px; font-weight: 800;
}
.bill-summary .row.grand span:first-child { color: var(--text); }
.bill-summary .row.grand span:last-child { color: var(--brand-600); }

.bill-actions { padding: 14px 16px; border-top: 1px solid var(--border); background: var(--surface); }

@media (max-width: 900px) {
  .bill-wrap { grid-template-columns: 1fr; height: auto; }
  .bill-table-scroll { max-height: 50vh; }
}

/* ============================================================
   Inventory inline quick-edit + density (compact/comfortable)
   ============================================================ */
.qe {
  width: 78px;
  text-align: right;
  border: 1px solid transparent;
  background: transparent;
  border-radius:6px;
  padding: 5px 7px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.qe:hover { border-color: var(--border-strong); }
.qe:focus { border-color: var(--brand-500); background: var(--surface); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.qe.low { color: #dc2626; font-weight: 600; }

.inv-table.compact thead th { padding: 6px 10px; }
.inv-table.compact tbody td { padding: 3px 10px; }
.inv-table.compact .inv-sub { display: none; }       /* hide category/barcode line -> more rows per page */
.inv-table.compact .qe { padding: 3px 6px; font-size: 12px; width: 70px; }
.inv-table.compact tbody td div:first-child { font-size: 12.5px; }

/* ============================================================
   Notification bell + dropdown (top-bar)
   ============================================================ */
.notif-wrap { position: relative; margin-right: 4px; }
.notif-bell {
  position: relative; width: 38px; height: 38px; border-radius:3px;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); transition: all .15s;
}
.notif-bell:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--bg-subtle); }
.notif-bell svg { width: 18px; height: 18px; }
.notif-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #dc2626; color: #fff; border-radius:3px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.notif-panel {
  position: absolute; top: 48px; right: 0; width: 340px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--border); border-radius:3px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.20); z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.notif-panel.open { opacity: 1; visibility: visible; transform: none; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.notif-markall { background: none; border: none; color: var(--brand-600); font-size: 12px; font-weight: 600; cursor: pointer; }
.notif-markall:hover { text-decoration: underline; }
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(99,102,241,0.05); }
a.notif-item:hover { background: var(--bg-subtle); }
.notif-bar { width: 3px; flex-shrink: 0; }
.notif-item-body { padding: 12px 14px; flex: 1; min-width: 0; }
.notif-item-title { font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.notif-item.unread .notif-item-title::after { content: '•'; color: #dc2626; margin-left: 6px; }
.notif-item-msg { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 4px; }
.notif-item-time { font-size: 11px; color: var(--text-muted); opacity: .8; }
.notif-empty { padding: 36px 16px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.8; }

/* ============================================================
   Collapsible sidebar (hide/show from the top-bar button)
   ============================================================ */
.dash-sidebar { transition: transform .22s ease; }
.dash-main { transition: margin-left .22s ease; }
body.sidebar-collapsed .dash-sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .dash-main { margin-left: 0; }

.sidebar-toggle {
  width: 38px; height: 38px; border-radius:3px; flex-shrink: 0;
  border: 1px solid rgba(37,99,235,.30); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #2563eb; transition: all .15s;
}
.sidebar-toggle:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--bg-subtle); }
.sidebar-toggle svg { width: 18px; height: 18px; }

/* ============================================================
   Quick-nav strip (visible only when sidebar is collapsed) + fullscreen btn
   ============================================================ */
.dash-quicknav { display: none; }
body.sidebar-collapsed .dash-quicknav {
  display: flex; gap: 2px; align-items: center; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: thin; margin: 0 4px;
}
body.sidebar-collapsed .dash-topbar h1 { display: none; }       /* free the row for the quick-nav */
body.sidebar-collapsed .dash-topbar .spacer { display: none; }
.qn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 58px; padding: 4px 7px; border-radius:9px; flex-shrink: 0;
  text-decoration: none; color: #2563eb; background: #eff6ff; border: 1px solid rgba(37,99,235,0.22); transition: all .12s;
}
.qn-item svg { width: 17px; height: 17px; }
.qn-item span { font-size: 9.5px; font-weight: 600; white-space: nowrap; line-height: 1.1; }
.qn-item:hover { background: #dbeafe; color: #1d4ed8; border-color: rgba(37,99,235,0.45); }
.qn-item.active { background: #2563eb; color: #fff; border-color: transparent; }
.qn-item.active svg, .qn-item.active span { color: #fff; }
[data-theme="dark"] .qn-item { background: rgba(37,99,235,0.14); color: #93b4ff; border-color: rgba(96,131,255,0.35); }
[data-theme="dark"] .qn-item:hover { background: rgba(37,99,235,0.24); color: #bcd2ff; }
[data-theme="dark"] .qn-item.active { background: #2563eb; color: #fff; }

.fs-btn {
  width: 38px; height: 38px; border-radius:3px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); transition: all .15s;
}
.fs-btn:hover { color: var(--brand-600); border-color: var(--brand-500); background: var(--bg-subtle); }
.fs-btn svg { width: 18px; height: 18px; }

/* ============================================================
   Soft-navigation loading bar (top) + content fade
   ============================================================ */
#navBar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; opacity: 0;
  background: var(--brand-500);
  box-shadow: 0 0 8px rgba(99,102,241,0.6);
  transition: width .2s ease, opacity .25s ease;
}
#navBar.on { opacity: 1; }
.dash-content { transition: opacity .15s ease; }
/* ===== Inline button spinner (loading state) ===== */
.nxcd-spin { display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:nxcdSpin .6s linear infinite; }
@keyframes nxcdSpin { to { transform:rotate(360deg); } }
button.is-loading, .btn.is-loading, input.is-loading { opacity:.8 !important; cursor:wait !important; pointer-events:none !important; }

/* ===== Button loading spinner (global submit guard) ===== */
.nxcd-btn-spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:nxcdspin .6s linear infinite;vertical-align:-2px;margin-right:5px}
@keyframes nxcdspin{to{transform:rotate(360deg)}}
button.is-loading,.btn.is-loading,a.btn.is-loading{opacity:.8;cursor:progress;pointer-events:none}

/* ============================================================
   Dashboard sidebar — admin-console dark look + active glow
   ============================================================ */
.dash-sidebar { background: #0f172a; border-right: 1px solid rgba(255,255,255,.06); }
.dash-sidebar .brand { border-bottom: 1px solid rgba(255,255,255,.08); }
.dash-sidebar .brand-text { color: #f1f5f9; }
.dash-nav-section { color: #334155; }
.dash-link { color: #cbd5e1; position: relative; }
.dash-link svg { color: inherit; }
.dash-link:hover { background: #1e293b; color: #fff; }
.dash-link.active {
  background: linear-gradient(135deg, rgba(99,102,241,.26), rgba(168,85,247,.26));
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(124,58,237,.22);   /* subtle, no heavy glow */
}
.dash-link.active svg { color: #fff; }
.dash-link.active::before {
  content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px;
  background: #60a5fa; border-radius:0 3px 3px 0;
  box-shadow: 0 0 4px rgba(129,140,248,.45);                                          /* gentle accent */
}
/* keep it dark in dark-mode too (admin console is always dark) */
[data-theme="dark"] .dash-sidebar { background: #0f172a !important; }
[data-theme="dark"] .dash-link { color: #cbd5e1; }
[data-theme="dark"] .dash-link:hover { background: #1e293b; color: #fff; }

/* Inventory filter tabs — blue themed */
.inv-tab.btn-ghost { color: #2563eb; border: 1px solid rgba(37,99,235,.35); background: #fff; }
.inv-tab.btn-ghost:hover { background: #eff6ff; border-color: rgba(37,99,235,.55); }
[data-theme="dark"] .inv-tab.btn-ghost { background: transparent; color: #93b4ff; border-color: rgba(96,131,255,.4); }
[data-theme="dark"] .inv-tab.btn-ghost:hover { background: rgba(96,131,255,.12); }

/* ============================================================
   THEME REDESIGN v2 — clean & premium (reference-based)
   ============================================================ */
.dash-main { background: #f7f9fc; }
[data-theme="dark"] .dash-main { background: var(--bg); }

/* Topbar + headings — refined type */
.dash-topbar h1 { font-family:var(--ff-sans); font-weight:700; letter-spacing:-.3px; }

/* Stat cards — label + soft-tint icon, big clean number */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr;} }
.stat-card { background:#fff; border:1px solid #eef1f6; border-radius:9px; padding:18px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.stat-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.stat-top { font-size:12.5px; color:#334155; font-weight:500; }
.stat-card-icon { width:38px; height:38px; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.stat-card-icon svg { width:19px; height:19px; }
.stat-value { font-size:26px; font-weight:700; color:#0f172a; letter-spacing:-.6px; line-height:1.1; background:none; -webkit-text-fill-color:#0f172a; }
.stat-label { font-size:12.5px; color:#94a3b8; margin-top:3px; }
.stat-icon-emerald { background:#e7f7f0; color:#0f9d6e; }
.stat-icon-indigo  { background:#eaf0fe; color:#3b6fe0; }
.stat-icon-violet  { background:#f1ecfe; color:#7c5cf0; }
.stat-icon-amber   { background:#fef3e2; color:#e0902b; }
[data-theme="dark"] .stat-card { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .stat-value { color:var(--text); -webkit-text-fill-color:var(--text); }

/* Sidebar plan card (with features) */
.dash-plan-card { margin:6px 12px 8px; background:#15203a; border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:13px 14px; }
.dpc-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.dpc-badge { font-size:11.5px; font-weight:700; color:#fff; background:#1d4ed8; padding:3px 11px; border-radius:7px; text-transform:capitalize; }
.dpc-days { font-size:11px; color:#94a3b8; }
.dpc-features { list-style:none; margin:0; padding:0; }
.dpc-features li { display:flex; align-items:flex-start; gap:7px; font-size:11.5px; color:#cbd5e1; line-height:1.45; margin-bottom:6px; }
.dpc-features li svg { width:13px; height:13px; color:#4ade80; flex-shrink:0; margin-top:1px; }
.dpc-upgrade { display:block; text-align:center; margin-top:11px; background:#fff; color:#1e293b; font-size:12.5px; font-weight:600; padding:8px; border-radius:9px; text-decoration:none; }
.dpc-upgrade:hover { filter:brightness(.96); }

/* Quicknav (collapsed topbar) — clean refined pills */
.qn-item { background:#fff; border:1px solid #e9edf3; color:#475569; border-radius:3px; }
.qn-item svg { width:16px; height:16px; }
.qn-item:hover { background:#f1f5f9; color:#1e293b; border-color:#dbe2ea; }
.qn-item.active { background:#1d4ed8; color:#fff; border-color:transparent; }
.qn-item.active svg, .qn-item.active span { color:#fff; }
[data-theme="dark"] .qn-item { background:var(--surface-2); border-color:var(--border); color:var(--text-muted); }
[data-theme="dark"] .qn-item:hover { background:var(--surface); color:var(--text); }
[data-theme="dark"] .qn-item.active { background:#1d4ed8; border-color:transparent; color:#fff; }

/* ============================================================
   Sidebar overflow fix — plan card always visible (all zooms/screens)
   ============================================================ */
.dash-sidebar { height: 100vh; }
.dash-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.dash-nav::-webkit-scrollbar { width: 6px; }
.dash-nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius:6px; }
.dash-plan-card, .dash-user { flex-shrink: 0; }

/* ============================================================
   Sidebar plan (minimal) + visible user text + size control
   ============================================================ */
.dash-plan-mini { margin: 8px 12px 6px; display:flex; align-items:center; gap:8px; }
.dpm-badge { font-size:12px; font-weight:700; color:#fff; background:#1d4ed8; padding:5px 13px; border-radius:7px; text-transform:capitalize; white-space:nowrap; }
.dpm-up { margin-left:auto; font-size:11.5px; color:#93b4ff; text-decoration:none; font-weight:600; }
.dpm-up:hover { color:#bcd2ff; }
/* name + email must be readable on the dark sidebar */
.dash-user-name { color:#f1f5f9 !important; }
.dash-user-plan { color:#94a3b8 !important; }
.dash-user { border-top-color: rgba(255,255,255,.08) !important; }

/* Topbar display-size control */
.size-ctrl { display:flex; align-items:center; gap:2px; background:var(--surface-2,#f1f5f9); border:1px solid var(--border); border-radius:9px; padding:2px; flex-shrink:0; }
.sc-btn { width:26px; height:26px; border:none; background:transparent; color:#2563eb; font-size:18px; font-weight:700; line-height:1; cursor:pointer; border-radius:7px; display:flex; align-items:center; justify-content:center; }
.sc-btn:hover { background:#dbe6ff; }
.sc-val { border:none; background:transparent; color:var(--text-muted); font-size:11.5px; font-weight:600; cursor:pointer; min-width:40px; padding:0 2px; }
.sc-val:hover { color:#2563eb; }
[data-theme="dark"] .size-ctrl { background:var(--surface); }
[data-theme="dark"] .sc-btn:hover { background:rgba(37,99,235,.22); }
@media (max-width:640px){ .size-ctrl{ display:none; } }

/* ============================================================
   Compact, scroll-free sidebar nav (fits all devices + future items)
   ============================================================ */
.dash-sidebar .brand { padding-top: 14px; padding-bottom: 12px; }
.dash-nav { padding: 8px 10px; }
.dash-nav-section { padding: 9px 12px 4px; font-size: 9.5px; }
.dash-link { padding: 7px 11px; margin-bottom: 1px; font-size: 13.5px; }
.dash-link svg { width: 18px; height: 18px; }
.dash-user { padding: 12px 16px; }
/* nav only scrolls if it truly overflows (e.g. many future items on a short screen) */
.dash-nav { scrollbar-width: none; }
.dash-nav::-webkit-scrollbar { width: 0; }
.dash-nav:hover { scrollbar-width: thin; }
.dash-nav:hover::-webkit-scrollbar { width: 5px; }
/* ============================================================
   PREMIUM POLISH v3 — blue header, light-blue canvas, tight margins
   ============================================================ */
:root { --d-topbar-h: 58px; }

/* Blue filled header */
.dash-topbar { background: #0f2557 !important; border-bottom: none !important; box-shadow: 0 2px 12px rgba(15,37,87,.28); padding: 0 16px; }
.dash-topbar h1 { color: #fff !important; }
.dash-topbar > span { color: rgba(255,255,255,.92) !important; font-weight: 500; }
/* top menu (Sales, Purchase, Inventory …) sits on the blue bar — keep it white & readable */
.dash-topbar .nx-item { color: #fff !important; opacity: .9; }
.dash-topbar .nx-item:hover { opacity: 1; background: rgba(255,255,255,.18) !important; }
.dash-topbar .nx-item.active, .dash-topbar .nx-drop.active > .nx-item { opacity: 1; background: rgba(255,255,255,.24) !important; }
.dash-topbar .nx-item svg { stroke: #fff; }
.dash-topbar .nx-burger { color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
/* dropdown panels open on white, so their links stay dark for contrast */
.dash-topbar .nx-panel a { color: var(--text, #111827) !important; }
.dash-topbar .nx-panel a.on { color: var(--primary, #1d4ed8) !important; }
.sidebar-toggle { background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.30) !important; color: #fff !important; }
.sidebar-toggle:hover { background: rgba(255,255,255,.28) !important; }
.fs-btn { color: rgba(255,255,255,.92) !important; border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.12) !important; }
.fs-btn:hover { background: rgba(255,255,255,.26) !important; color: #fff !important; }
.notif-bell { color: #fff !important; background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.30) !important; }
.notif-bell:hover { background: rgba(255,255,255,.28) !important; color: #fff !important; }
.size-ctrl { background: rgba(255,255,255,.15) !important; border: 1px solid rgba(255,255,255,.30) !important; }
.sc-btn { color: #fff !important; } .sc-btn:hover { background: rgba(255,255,255,.22) !important; }
.sc-val { color: #fff !important; }
/* quicknav pills on the blue header */
.qn-item { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); color: #fff; }
.qn-item:hover { background: rgba(255,255,255,.26); color: #fff; border-color: rgba(255,255,255,.45); }
.qn-item.active { background: #fff; color: #1d4ed8; border-color: #fff; }
.qn-item.active svg, .qn-item.active span { color: #1d4ed8; }

/* Light-blue premium canvas — subtle bluish so white cards/tables pop cleanly */
.dash-main { background: #e8eef8; }
[data-theme="dark"] .dash-main { background: var(--bg); }
[data-theme="dark"] .dash-topbar { background: #1e3a8a !important; }

/* Tight margins — no big page gap */
.dash-content { padding: 14px 16px !important; max-width: none !important; margin: 0 !important; }
.stat-grid { gap: 14px; margin-bottom: 16px; }

/* ============================================================
   Billing screen — bigger area, Excel-like table, de-carded, tight margins
   ============================================================ */
.page-billing .dash-content { padding: 10px 12px !important; }
/* clean cream page like a printed form — white bordered panels sit on top */
body.page-billing, body.page-billing .dash-main, body.page-billing .dash-content { background:#f4f2ea; }
body.page-billing .bill-main, body.page-billing .bill-side { background:#fff; border:1px solid #cbd5e1; border-radius:3px; }
body.page-billing .bill-toolbar { background:#fbfaf6; border-bottom:1px solid #e2e0d6; border-radius:3px 3px 0 0; }
body.page-billing .bill-botbar { background:#fbfaf6; border-top:1px solid #e2e0d6; border-radius: 0 0 3px 3px; }
[data-theme="dark"] body.page-billing, [data-theme="dark"] body.page-billing .dash-content { background:var(--bg); }
[data-theme="dark"] body.page-billing .bill-main, [data-theme="dark"] body.page-billing .bill-side { background:var(--surface); border-color:var(--border); }
.bill-wrap { height: calc(100vh - var(--d-topbar-h) - 14px); min-height: 540px; gap: 12px; grid-template-columns: minmax(0,1fr) 330px; }
body.sidebar-collapsed .bill-wrap { grid-template-columns: minmax(0,1fr) 350px; }

/* Card heads with clean icon (no emoji) */
.bill-card-head { display:flex; align-items:center; gap:7px; text-transform:none; letter-spacing:0; font-size:12.5px; font-weight:700; color:#475569; margin-bottom:9px; }
.bill-card-head svg { width:15px; height:15px; color:#2563eb; flex-shrink:0; }

/* Clean spreadsheet-style cart — full grid lines, light header, high readability */
.bill-table-scroll { background:#fff; }
.bill-table { background:#fff; }
.bill-table thead th {
  background:#eef2f8; color:#334155; padding:9px 10px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px;
  border-right:1px solid #cbd5e1; border-bottom:2px solid #cbd5e1;
}
.bill-table thead th:last-child { border-right:none; }
.bill-table tbody td { padding:0; border-bottom:1px solid #dbe2ea; border-right:1px solid #e6ebf1; color:#0f172a; }
.bill-table tbody td:last-child { border-right:none; }
.bill-table tbody tr:nth-child(even) { background:#f8fafc; }
.bill-table tbody tr:hover { background:#eef5ff; }
.bill-table tbody tr:last-child td { border-bottom:none; }
.bill-table .cell { border-radius:0; padding:9px; border-color:transparent; background:transparent; color:#0f172a; font-weight:500; }
.bill-table .cell.name { font-weight:600; }
.bill-table .cell:hover { border-color:transparent; background:#e6f0ff; }
.bill-table .cell:focus { box-shadow:inset 0 0 0 2px #2563eb; background:#fff; border-color:transparent; }
.bill-table tbody td.muted { text-align:center; padding:0 6px; color:#334155; }
.bill-table .amount { padding:9px 10px; color:#0f172a; }
.bill-table .rmv { padding:0 8px; }
[data-theme="dark"] .bill-table, [data-theme="dark"] .bill-table-scroll { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .bill-table tbody td { border-color:var(--border); color:var(--text); }
[data-theme="dark"] .bill-table thead th { background:#1e293b; color:#e2e8f0; border-color:var(--border); }
[data-theme="dark"] .bill-table tbody tr:nth-child(even) { background:rgba(255,255,255,.02); }

/* Right panel: clean, no inner boxes, fits without scroll */
.bill-side-scroll { padding:12px; }
.bill-side-scroll .form-input { margin-bottom:6px !important; padding:8px 11px; font-size:13px; }
.bill-side-scroll textarea.form-input { min-height:46px; }
.bill-summary { background:transparent; border:none; border-radius:0; padding:12px 0 0; margin-top:4px; border-top:1px solid var(--border); }
.bill-summary .row { padding:5px 0; font-size:13px; }
.bill-summary .row.grand { border-top:1px solid var(--border); margin-top:6px; padding-top:10px; font-size:16px; }
.bill-card { margin-bottom:10px; } .bill-card:last-child { margin-bottom:0; }
@media (max-width:980px){ .bill-wrap{ grid-template-columns:1fr; height:auto; } .bill-side-scroll{ overflow:visible; } }

/* ============================================================
   Tight sections everywhere — minimal margin/padding (premium, locked)
   ============================================================ */
.form-section { padding: 16px 18px !important; margin-bottom: 12px !important; }
.page-header { margin-bottom: 12px !important; }
.stat-card { padding: 16px !important; }
.card { margin-bottom: 12px; }
.dash-content > h1, .dash-content > h2 { margin-top: 4px; }
/* white cards sit cleanly on the light-blue canvas */
.form-section, .table-wrap, .card { box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* ============================================================
   Checkout modal + reusable modal system (Phase 3)
   ============================================================ */
/* Billing is now single column (no side box) */
.page-billing .bill-wrap { grid-template-columns: minmax(0,1fr) !important; }
.bill-toptotal { font-size:13px; color:var(--text-muted); margin-right:6px; }
.bill-toptotal b { color:#0f172a; font-size:15px; }
#goBtn:disabled { opacity:.5; cursor:not-allowed; }

/* Reusable modal */
.nx-modal { position:fixed; inset:0; background:rgba(15,23,42,.55);  z-index:9999; display:flex; align-items:center; justify-content:center; padding:18px; }
.nx-modal-card { background:#fff; border-radius:3px; width:100%; max-width:640px; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,.3); overflow:hidden; }
.nx-modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.nx-modal-head h3 { margin:0; font-size:16px; font-family:var(--ff-sans); }
.nx-modal-x { background:none; border:none; font-size:24px; line-height:1; color:#94a3b8; cursor:pointer; padding:0 4px; }
.nx-modal-x:hover { color:#0f172a; }
.nx-modal-body { padding:16px 18px; overflow-y:auto; }
.nx-modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:14px 18px; border-top:1px solid var(--border); background:#f8fafc; }
.nx-modal-foot .btn { width:auto; min-width:120px; }
[data-theme="dark"] .nx-modal-card { background:var(--surface); }
[data-theme="dark"] .nx-modal-foot { background:var(--surface-2); }

/* Checkout layout */
.co-grid { display:grid; grid-template-columns:1fr 240px; gap:18px; }
@media (max-width:620px){ .co-grid{ grid-template-columns:1fr; } }
.co-sec { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#2563eb; margin:10px 0 6px; }
.co-sec:first-child { margin-top:0; }
.co-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.co-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.co-summary { margin-top:12px; background:#f7f9fc; border-radius:3px; padding:12px; }
.co-summary .row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; color:var(--text); }
.co-summary .row span:first-child { color:var(--text-muted); }
.co-summary .row.grand { border-top:1px solid var(--border); margin-top:6px; padding-top:8px; font-size:16px; font-weight:800; }
.co-summary .row.grand span:last-child { color:#2563eb; }
[data-theme="dark"] .co-summary { background:var(--surface-2); }

/* ============================================================
   Billing compact + bottom totals bar (Phase 3.1)
   ============================================================ */
.page-billing .dash-content { padding: 8px 10px !important; }
.bill-wrap { height: calc(100vh - var(--d-topbar-h) - 12px); }
/* smaller fonts so everything fits without zoom */
.bill-table { font-size: 12px; }
.bill-table thead th { padding: 7px 8px; font-size: 9.5px; }
.bill-table .cell { padding: 7px; font-size: 12px; }
.bill-search-box input { font-size: 12.5px; }
.bill-toolbar .btn { font-size: 12px; }
/* bottom totals bar — always visible */
.bill-botbar { display:flex; align-items:center; gap:14px; padding:9px 14px; border-top:2px solid var(--border); background:#fff; flex-wrap:wrap; }
.bb-totals { display:flex; gap:18px; flex:1; flex-wrap:wrap; font-size:13px; color:var(--text-muted); }
.bb-totals b { color:#0f172a; font-weight:700; margin-left:4px; }
.bb-totals .bb-disc b { color:#16a34a; }
.bb-totals .bb-grand { font-size:15px; color:#0f172a; }
.bb-totals .bb-grand b { color:#2563eb; font-size:17px; }
.bill-botbar .btn { min-width:160px; }
[data-theme="dark"] .bill-botbar { background:var(--surface); }
/* smaller input/search labels across app */
.form-label { font-size: 12px; }
.bill-search-box input::placeholder { font-size: 12.5px; }

/* ============================================================
   FINAL FIX — billing TRUE full-width + all buttons filled (violet)
   ============================================================ */
/* Billing: force single full-width column (kills leftover 340px blank) */
.page-billing .dash-content { max-width:none !important; width:100% !important; margin:0 !important; padding:8px 10px !important; }
.page-billing .bill-wrap { display:grid !important; grid-template-columns:1fr !important; width:100% !important; max-width:none !important; gap:0 !important; }
.page-billing .bill-main { width:100% !important; max-width:none !important; }

/* Ghost/secondary used to be forced violet with WHITE text here. The glossy pass
   (assets/css/topnav.css) gives them a LIGHT surface, and this white text stayed
   behind — that is what made every View / Download / Edit label invisible.
   Colour is left to topnav.css now, so the inline text colours (blue Download,
   green WhatsApp) come through. */
/* delete buttons -> solid red (clear danger) */
/*
 * A button coloured by an inline style keeps readable text.
 *
 * This matched only "dc2626", so the same button written with #b91c1c — the darker red used
 * on the destructive ones — was not covered, and its label could be lost against whatever
 * the theme put behind it. Reported as "clear all data button text not visible in settings".
 * The buttons themselves now use .btn-danger; this stays as the floor for every other inline
 * red still in the app, and covers the darker shades too.
 */
.btn[style*="dc2626"], .btn[style*="b91c1c"], .btn[style*="7f1d1d"], .btn[style*="991b1b"] {
  color:#fff !important; border:none !important; text-shadow:none !important;
}
.btn[style*="dc2626"] { background:#dc2626 !important; }
.btn[style*="dc2626"]:hover, .btn[style*="b91c1c"]:hover, .btn[style*="7f1d1d"]:hover { filter:brightness(.94); }

/* ============================================================
   Wallet hero (premium earnings card) + dashboard animations
   ============================================================ */
.wallet-hero { display:flex; align-items:center; gap:18px; background:#1d4ed8; border-radius:3px; padding:18px 22px; margin-bottom:16px; color:#fff; box-shadow:0 12px 30px rgba(79,70,229,.28); }
.wallet-hero .wallet-anim { background:rgba(255,255,255,.14); border-radius:8px; padding:4px; flex-shrink:0; }
.wallet-hero .wallet-label { font-size:12px; opacity:.85; letter-spacing:.4px; text-transform:uppercase; }
.wallet-hero .wallet-amount { font-size:30px; font-weight:800; font-family:var(--ff-sans); line-height:1.15; margin:2px 0 8px; }
.wallet-hero .wallet-chips { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; }
.wallet-hero .wallet-chips span { opacity:.9; }
.wallet-hero .wallet-chips b { display:block; font-size:15px; font-weight:700; opacity:1; }
@media (max-width:560px){ .wallet-hero{ flex-direction:column; text-align:center; } .wallet-hero .wallet-chips{ justify-content:center; } }
/* topbar notification bell animation sizing */
.dash-topbar dotlottie-player.bell-anim { width:26px; height:26px; vertical-align:middle; }

/* ============================================================
   Excel-like data-entry grid for Purchase Order / Return
   ============================================================ */
#poItems, #prItems { border-collapse: collapse; }
#poItems thead th, #prItems thead th { padding: 5px 7px !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .3px; background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); }
#poItems td, #prItems td { padding: 0 !important; border: 1px solid var(--border); }
#poItems input, #prItems input { border: none !important; background: transparent !important; height: 30px; border-radius:0 !important; width: 100%; padding: 0 7px !important; font-size: 11.5px; min-width: 0 !important; }
#poItems input:focus, #prItems input:focus { background: #eef2ff !important; outline: 1.5px solid #1d4ed8; outline-offset: -1.5px; }
#poItems .lt, #prItems .lt { padding: 0 8px; font-variant-numeric: tabular-nums; }
#poItems .rm, #prItems .rm { height: 26px; padding: 0 8px; }
/* compact inventory + master list tables (Excel feel) */
.page-inventory .dash-table th, .page-inventory .dash-table td { padding: 2px 7px !important; font-size: 12px; line-height: 1.35; }
/* Excel-sheet inventory: edge-to-edge, tight rows, thin gridlines, side-scroll for full details */
.page-inventory .dash-content { padding: 8px 10px !important; }
.page-inventory .dash-table-wrap { border-radius:6px; overflow-x: auto; }
.page-inventory .dash-content > div[style*="grid"] { gap: 8px !important; }
.inv-table thead th { padding: 3px 7px !important; }
.inv-table tbody td { padding: 2px 7px !important; }
.inv-table tbody td .inv-sub { font-size: 10px !important; line-height: 1.25; margin-top: 0; }
.inv-table tbody td div:first-child { font-size: 12px; }
.inv-table .qe { height: 22px; width: 62px; font-size: 11.5px; }
.inv-table tbody tr.batch-subrow td { padding: 1px 7px 3px !important; }

/* ============================================================
   Dashboard sales boxes (4 clean cards with wallet animation)
   ============================================================ */
.sales-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
@media (max-width:900px){ .sales-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .sales-grid{ grid-template-columns:1fr; } }
.sales-card { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:14px 16px; box-shadow:0 1px 3px rgba(15,23,42,.04); }
.sales-card .sales-anim { flex-shrink:0; background:#eef2ff; border-radius:3px; padding:2px; }
.sales-card .sales-top { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted); font-weight:600; }
.sales-card .sales-val { font-size:22px; font-weight:800; font-family:var(--ff-sans); color:#0f172a; line-height:1.15; margin:2px 0; }
.sales-card .sales-sub { font-size:11.5px; color:var(--text-muted); }
.sales-card-total { background:#1d4ed8; border-color:transparent; }
.sales-card-total .sales-top, .sales-card-total .sales-sub { color:rgba(255,255,255,.85); }
.sales-card-total .sales-val { color:#fff; }
.sales-card-total .sales-anim { background:rgba(255,255,255,.16); }
[data-theme="dark"] .sales-card .sales-val { color:#f1f5f9; }

/* ============================================================
   Inventory — Excel/spreadsheet look (bordered cells, tight)
   ============================================================ */
.inv-table { border-collapse: collapse; font-size: 12px; }
.inv-table thead th { background: var(--surface-2, #f1f5f9); border: 1px solid var(--border); padding: 4px 7px !important; font-size: 10px; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; }
.inv-table tbody td { border: 1px solid var(--border); padding: 3px 7px !important; vertical-align: middle; }
.inv-table tbody tr:nth-child(even) { background: rgba(99,102,241,.03); }
.inv-table tbody td div:first-child { font-size: 12.5px; }
.inv-table .inv-sub { font-size: 10.5px !important; }
.inv-table .qe { border: 1px solid transparent !important; background: transparent; width: 66px; height: 24px; text-align: right; border-radius:4px; padding: 0 5px; font-size: 12px; }
.inv-table .qe:focus { background: #eef2ff !important; outline: 1.5px solid #1d4ed8; outline-offset: -1px; }
.inv-table .qe.low { color: #dc2626; font-weight: 700; }
.inv-table tbody tr.batch-subrow:nth-child(even) { background: var(--bg-subtle); }

/* Batch purchase info — compact chips (batch · qty · exp · date · supplier · PO) */
.batch-chip { border: 1px solid var(--border); border-radius:4px; padding: 0 6px; font-size: 10px; line-height: 1.7; background: var(--bg, #fff); white-space: nowrap; }
.batch-chip b { font-weight: 700; }
.batch-tgl { font-size: 10px; font-weight: 600; color: #2563eb; text-decoration: none; margin-left: 6px; white-space: nowrap; }
.batch-tgl:hover { text-decoration: underline; }

/* ============================================================
   Store Settings — compact, native feel, tight margins
   ============================================================ */
.page-settings .dash-content { padding: 10px 12px !important; }
.page-settings .form-section { padding: 14px 16px !important; margin-bottom: 12px !important; border-radius:3px; }
.page-settings h3 { font-size: 14.5px !important; margin: 0 0 10px !important; }
.page-settings .form-group { margin-bottom: 9px !important; }
.page-settings .form-label { font-size: 11.5px !important; margin-bottom: 3px !important; font-weight: 600; color: var(--text-muted); }
.page-settings .form-input, .page-settings .form-select, .page-settings textarea.form-input {
  padding: 6px 9px !important; font-size: 12.5px !important; border-radius:7px !important; min-height: 0 !important; }
.page-settings textarea.form-input { rows: 2; }
.page-settings .form-section > div[style*="grid"] { gap: 10px !important; }
.page-settings small { font-size: 10.5px !important; }
.page-settings .btn { padding: 7px 14px !important; font-size: 13px !important; }
/* tighten the two-column settings layout */
.page-settings div[style*="grid-template-columns:1fr 1fr"] { gap: 12px !important; }

/* ============================================================
   Notification panel — compact / native (no extra margin)
   ============================================================ */
.notif-panel { border-radius:3px !important; }
.notif-head { padding: 9px 12px !important; font-size: 13px !important; }
.notif-item-body { padding: 8px 12px !important; }
.notif-item-title { font-size: 12.5px !important; margin-bottom: 1px !important; }
.notif-item-msg { font-size: 11.5px !important; line-height: 1.4 !important; margin-bottom: 2px !important; }
.notif-item-time { font-size: 10.5px !important; }
.notif-list { max-height: 360px; }
.notif-empty, .notif-panel .empty { padding: 16px 12px !important; }
/* topbar refresh button matches other buttons */
.dash-topbar #refreshBtn svg { width: 18px; height: 18px; }

/* ===== Mobile patch (v4.1) — small-screen usability ===== */
@media (max-width: 768px) {
  /* wide tables scroll sideways instead of getting cut */
  .dash-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dash-table { min-width: 640px; }
  .dash-table thead th, .dash-table tbody td { padding: 10px 10px; }

  /* billing grid: full-width rows, horizontal scroll for the item table */
  .bill-table { min-width: 760px; }
  .bill-toolbar { flex-wrap: wrap; gap: 6px; }
  .bill-toolbar .bill-search-box { flex: 1 1 100%; }
  .bill-toptotal { font-size: 13px; }

  /* checkout modal comfortable on phone */
  .nx-modal-card { max-width: 100%; border-radius:3px 3px 0 0; max-height: 96vh; align-self: flex-end; }
  .co-fieldgrid { grid-template-columns: 1fr; }

  /* page chrome */
  .dash-topbar h1 { font-size: 16px; }
  .form-section { padding: 14px 12px; }
  .dash-main { padding-left: 0; padding-right: 0; }
}
@media (max-width: 480px) {
  .dash-table { min-width: 560px; }
  .inv-tab { font-size: 12px; padding: 5px 9px; }
}

/* ---- Inventory pager -------------------------------------------------- */
/* Inventory used to print every product into one page; a shop with a few
   thousand medicines got tens of thousands of table cells and a browser that
   crawled. Rows are paged now, so this strip sits under the table. */
.inv-pager {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-subtle);
}
.inv-pager-info { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.inv-pager-gap  { flex: 1 1 12px; }
@media (max-width: 720px) {
  .inv-pager { justify-content: center; }
  .inv-pager-gap { flex-basis: 100%; }
}

/* ---- Billing: batch picker ---------------------------------------------- */
/* One line tall, always. The bill table has twelve columns, so this cell must
   never grow: a long batch number is cut with an ellipsis and the full text is
   in the tooltip and in the open list. Amber = this medicine has more than one
   batch in stock, so check what you are actually handing over. */
.bill-table .cell.batch-pick {
  font-size: 11.5px; font-weight: 700; height: 25px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  max-width: 100%;
  /* the batch number is the thing a chemist double-checks against the strip, so
     it gets a real border and dark text instead of fading into the row */
  border: 1px solid #94a3b8; color: #0f172a; background: #fff;
}
.bill-table .cell.batch-pick.multi {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}
[data-theme="dark"] .bill-table .cell.batch-pick.multi { background: rgba(245,158,11,.14); color: #fbbf24; }

/* ---- Support page: quick contact ---------------------------------------- */
.qc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.qc-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1.5px solid #111827; border-radius:8px;
  background: #f8fafc; color: #111827; font-size: 13px; line-height: 1.45;
  text-decoration: none; transition: transform .12s, box-shadow .12s;
}
.qc-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.14); }
.qc-item svg { width: 22px; height: 22px; flex: none; }
.qc-item b { font-weight: 700; }
.qc-item.qc-wa { background: #f0fdf4; border-color: #166534; color: #14532d; }
[data-theme="dark"] .qc-item { background: rgba(148,163,184,.10); color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .qc-item.qc-wa { background: rgba(22,163,74,.14); color: #bbf7d0; border-color: #16a34a; }

/* Loose rows: the quantity is a count of single tablets, not of strips. Same
   violet as the Pack/Loose selector so the two read as one thing, and no extra
   line so the row height never changes. */
.bill-table .cell.qty-loose {
  background: #faf5ff; border-color: #c4b5fd; color: #1e40af; font-weight: 700;
}
[data-theme="dark"] .bill-table .cell.qty-loose { background: rgba(139,92,246,.16); color: #ddd6fe; }

/* ---- Billing: pack + loose counters ------------------------------------- */
/* Two boxes, one line. A strip and a single tablet are different things to sell,
   so the counter has a box for each rather than a mode to flip between. */
.bill-table .qty-pair { display: flex; align-items: center; gap: 3px; }
.bill-table .qty-pair .cell { width: 46px; min-width: 0; text-align: right; }
.bill-table .qty-sep { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.bill-table .cell.qty-pack  { background: #f8fafc; border-color: #cbd5e1; font-weight: 700; }
.bill-table .cell.qty-loose { background: #faf5ff; border-color: #c4b5fd; color: #1e40af; font-weight: 700; }
[data-theme="dark"] .bill-table .cell.qty-pack  { background: rgba(148,163,184,.12); }
[data-theme="dark"] .bill-table .cell.qty-loose { background: rgba(139,92,246,.16); color: #ddd6fe; }

/* ---- Product form: what the GST rate actually does ---------------------- */
/* "GST 12%" next to an MRP reads like "12% will be added" unless the shop's
   own setting is stated. It is, and the rupees are worked out live underneath. */
.gst-mode {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.55; padding: 9px 12px; border-radius:7px;
  margin: -4px 0 14px;
}
.gst-mode.incl { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.gst-mode.excl { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.gst-mode.none { background: #f1f5f9; border: 1px solid #cbd5e1; color: #334155; }
.gst-mode a { color: inherit; text-decoration: underline; }
.gst-worked { flex-basis: 100%; font-size: 12.5px; font-family: 'JetBrains Mono', monospace; padding-top: 3px; }
[data-theme="dark"] .gst-mode.incl { background: rgba(22,163,74,.14); color: #bbf7d0; border-color: #16a34a; }
[data-theme="dark"] .gst-mode.excl { background: rgba(245,158,11,.14); color: #fde68a; border-color: #b45309; }
[data-theme="dark"] .gst-mode.none { background: rgba(148,163,184,.14); color: #e2e8f0; border-color: #475569; }

/* Units mode: one box counts tablets, the box beside it shows the strips that
   comes to. Same violet as loose used to be — that idea has not gone away, it is
   just no longer something the seller has to think about. */
.bill-table .cell.qty-units  { background: #eef2ff; border-color: #a5b4fc; color: #1e3a8a; font-weight: 700; }
.bill-table .cell.qty-strips { background: #faf5ff; border-color: #c4b5fd; color: #1e40af; font-weight: 700; }
[data-theme="dark"] .bill-table .cell.qty-units  { background: rgba(99,102,241,.16); color: #c7d2fe; }
[data-theme="dark"] .bill-table .cell.qty-strips { background: rgba(139,92,246,.16); color: #ddd6fe; }

/* ---- Square edges + the same solid colours the buttons use ---------------
   Rounded panels and pale grey figures made the numbers read as decoration.
   These are the numbers a shopkeeper checks first, so they get a hard edge, a
   black border and a real block of colour — the same treatment as a button. */
.sales-card {
  border-radius:4px !important;
  border: 1.5px solid #111827 !important;
  box-shadow: none !important;
}
.sales-card .sales-anim { border-radius:4px !important; }
/* Today's Profit / 30 Days / Net Profit — green.  Stock Value — blue. */
.sales-grid .sales-card { background: #f8fafc; }
.sales-grid .sales-card[style*="#16a34a"] { background: #ecfdf5; }
.sales-grid .sales-card[style*="#2563eb"] { background: #eff6ff; }
/* Total Sales is the one card with white text. The rule above was repainting it
   pale and leaving the text white, so the figure vanished. It keeps a solid dark
   block — the same colour as the primary button — and its text stays white. */
.sales-grid .sales-card.sales-card-total,
.sales-card.sales-card-total { background: #1d4ed8; border-color: #111827 !important; }
.sales-card.sales-card-total .sales-top,
.sales-card.sales-card-total .sales-sub { color: rgba(255,255,255,.9); }
.sales-card.sales-card-total .sales-val { color: #fff; }
.sales-card.sales-card-total .sales-anim { background: rgba(255,255,255,.18); }
[data-theme="dark"] .sales-card { border-color: #475569 !important; background: var(--surface); }

/* Billing footer: subtotal / discount / GST / total as solid blocks, not text */
.bill-botbar { border-radius:0 !important; }
body.page-billing .bill-botbar { border-radius:0 !important; }
.bb-totals { gap: 8px; align-items: stretch; }
.bb-totals > span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius:4px;
  border: 1.5px solid #111827; background: #eef2f8; color: #111827;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.bb-totals > span b { color: inherit; margin-left: 2px; font-weight: 800; }
.bb-totals .bb-disc  { background: #ecfdf5; }
.bb-totals .bb-disc b { color: #14532d; }
.bb-totals .bb-grand { background: #1d4ed8; color: #fff; border-color: #111827; font-size: 14px; }
.bb-totals .bb-grand b { color: #fff; font-size: 16px; }
[data-theme="dark"] .bb-totals > span { background: rgba(148,163,184,.14); color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .bb-totals .bb-grand { background: #1d4ed8; color: #fff; }

/* ---- Add-a-product popup at the counter --------------------------------- */
/* Everything here is chosen, not typed: the batch is what is on the shelf and
   the quantity is buttons. Square edges and hard borders, like the buttons. */
.addpop .nx-modal-card { border-radius:4px; border: 1.5px solid #111827; }
.addpop .ap-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.addpop .ap-meta span {
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius:4px;
  border: 1.5px solid #111827; background: #eef2f8; color: #111827;
}
/* Stock is the one figure that decides whether the sale can happen at all, so it
   gets the strongest block of the lot — same as a button, not a grey tag.
   Two boxes, because the seller asks it two ways: "how many tablets have I got"
   and "how many strips is that". One number alone always left half unanswered. */
.addpop .ap-stockrow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.addpop .ap-sbox {
  flex: 1; min-width: 128px; padding: 8px 11px;
  border: 2px solid #111827; color: #fff;
}
.addpop .ap-sbox .k {
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; opacity: .9; margin-bottom: 1px;
}
.addpop .ap-sbox .v { font-size: 16.5px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.addpop .ap-sbox.tabs  { background: #1e40af; }   /* what the customer asks for */
.addpop .ap-sbox.packs { background: #15803d; }   /* what is on the shelf */
.addpop .ap-sbox.out   { background: #b91c1c; flex-basis: 100%; }
.addpop .ap-label { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #334155; margin: 12px 0 6px; }
.addpop .ap-batches { display: grid; gap: 6px; }
.addpop .ap-batch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 8px 11px; border-radius:4px; border: 1.5px solid #cbd5e1; background: #fff;
  font-size: 13px; color: #0f172a;
}
.addpop .ap-batch b { font-weight: 800; }
.addpop .ap-batch span { font-size: 11.5px; color: #334155; }
.addpop .ap-batch.on { border-color: #1d4ed8; background: #eff6ff; }
.addpop .ap-batch.on span { color: #1e40af; }
.addpop .ap-qty { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.addpop .ap-qty .btn { min-width: 40px; border-radius:4px; }
.addpop .ap-num { width: 96px; text-align: center; font-size: 17px; font-weight: 800; border-radius:4px; }
.addpop .ap-or { font-size: 12px; color: #334155; margin: 0 2px; }
.addpop .ap-sum {
  display: flex; align-items: baseline; gap: 10px; margin-top: 14px;
  padding: 10px 13px; border-radius:4px; border: 1.5px solid #111827; background: #1d4ed8; color: #fff;
}
.addpop .ap-sum b { font-size: 20px; font-weight: 800; }
.addpop .ap-sum span { font-size: 12px; opacity: .9; }
[data-theme="dark"] .addpop .ap-batch { background: var(--surface); color: #e2e8f0; border-color: #475569; }
[data-theme="dark"] .addpop .ap-meta span { background: rgba(148,163,184,.14); color: #e2e8f0; border-color: #475569; }
.addpop .ap-help { font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 8px; }
.addpop .ap-help b { color: #0f172a; }
.addpop .ap-sum .ap-short { flex-basis: 100%; font-size: 12px; font-weight: 700; color: #fecaca; }
[data-theme="dark"] .addpop .ap-help { color: #94a3b8; }

/* Add/Edit Product: what one tablet comes to. Never typed — always worked out. */
.per-unit {
  font-size: 12.5px; line-height: 1.55; padding: 9px 12px; border-radius:4px;
  margin: -4px 0 12px; border: 1.5px solid #1d4ed8; background: #eff6ff; color: #1e3a8a;
}
.per-unit b { color: #0f172a; }
.per-unit span { display: block; font-size: 11.5px; color: #475569; margin-top: 2px; }
[data-theme="dark"] .per-unit { background: rgba(29,78,216,.16); color: #bfdbfe; border-color: #1d4ed8; }
[data-theme="dark"] .per-unit b, [data-theme="dark"] .per-unit span { color: #e2e8f0; }
/* Sub-labels on table headers: "per pack", "packs", "before GST". Small, quiet,
   and always there — a number column that does not say its unit is a guess. */
.dash-table thead th .th-sub,
.inv-table thead th .th-sub { display:block; font-weight:400; font-size:9.5px; letter-spacing:.2px; opacity:.75; text-transform:none; margin-top:1px; }


/* ============================================================
   COUNTER COLOUR — the billing screen's worktop
   ============================================================

   A counter is looked at all day, and shops differ on what is easy on the eye under a
   tube light. `counter-yellow` on the body paints the billing screen bright yellow with
   hard black gridlines; the shop turns it on in Store Settings and nothing else in the
   software changes.

   Every rule below is scoped to a .bill-* element, and those exist on billing.php alone.
   The class rides on the body of every page — one place reads the setting — but it can
   only ever reach the counter. The buttons, the layout, the type and every figure stay
   exactly where they were: this is paint, not a redesign.

   The printed bill is deliberately untouched. A bill is photocopied, faxed to a TPA and
   run through a thermal roll that has no colour at all, so it stays black on white — see
   includes/invoice-skin.php.

   Contrast: #111 on #FFE500 is about 15:1, and the blue buttons keep white type on blue.
   Nothing here is left carrying meaning in colour alone.
   ============================================================ */
.counter-yellow {
  --counter-bg:   #FFE500;   /* the worktop */
  --counter-line: #111111;   /* every rule on it */
}
.counter-yellow .bill-main,
.counter-yellow .bill-toolbar,
.counter-yellow .bill-table-scroll,
.counter-yellow .bill-botbar { background: var(--counter-bg); }

.counter-yellow .bill-main   { border: 2px solid var(--counter-line); }
.counter-yellow .bill-toolbar,
.counter-yellow .bill-botbar { border-color: var(--counter-line); }

/* the search box stays white, so what is being typed is never lost in the yellow */
.counter-yellow .bill-search-box input,
.counter-yellow .bill-search-box { background: #fff; }
.counter-yellow .bill-search-box { border: 1.5px solid var(--counter-line); }

/* the heading row inverts: black band, white type — it has to hold its own against the
   yellow, and it is the one row that is read as a label rather than as data */
.counter-yellow .bill-table thead th {
  background: var(--counter-line);
  color: #fff;
  border: 1px solid var(--counter-line);
}
.counter-yellow .bill-table tbody td { border: 1px solid var(--counter-line); color: #111; }
.counter-yellow .bill-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.045); }
.counter-yellow .bill-table .bill-empty td { background: transparent; text-align: center; }
.counter-yellow .bill-table td.muted { color: #3a3a00; }

/* a cell being typed into goes white, so the caret is obvious */
.counter-yellow .bill-table .cell { color: #111; }
.counter-yellow .bill-table .cell:focus { background: #fff; border-color: var(--counter-line); outline-color: var(--counter-line); }

/* the running totals read as tiles on the worktop, as in the shop's mock-up */
.counter-yellow .bill-botbar { border-top: 2px solid var(--counter-line); }
.counter-yellow .bill-botbar .bb-totals > span {
  background: #fff;
  border: 1.5px solid var(--counter-line);
  border-radius: 3px;
  padding: 5px 12px;
  color: #111;
}
.counter-yellow .bill-toptotal { color: #111; font-weight: 700; }