/* ============================================================
   Euro Shed Parts — UI polish pass
   Loaded AFTER styles.css. Component overrides + new components
   for the bottom tab bar, header settings link, brand/category
   chip rails, stock filter, active-filter summary, empty states,
   day-focused dashboard, and 44px tap targets.
   ============================================================ */

/* ============ Bottom tab bar ============ */
.tab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.tab-bar.collapsed {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.tab-bar-toggle {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 55;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.tab-bar-toggle .icon { width: 22px; height: 22px; }
.tab-bar-toggle:hover { background: #f0f0f2; }
.tab-bar-toggle.collapsed { transform: translateX(-50%) rotate(180deg); }
.tab-bar.collapsed + .tab-bar-toggle { bottom: env(safe-area-inset-bottom); }
.tab-bar.collapsed ~ .app-main { padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important; }
.tab-item {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding: 6px 4px 5px;
  color: var(--muted);
  font-size: 11.5px; font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.tab-item .tab-icon {
  width: 24px; height: 24px;
  color: var(--muted);
  transition: color 0.15s ease;
}
.tab-item:hover { color: var(--ink); }
.tab-item:hover .tab-icon { color: var(--ink); }
.tab-item.active { color: #8a6a1d; }
.tab-item.active .tab-icon { color: var(--gold); }
.tab-item.active::after {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
}
/* Consistent professional active state — gold pill behind the selected tab
   (matches chips/seg-btns; no green anywhere). */
.tab-item.active {
  background: rgba(212, 168, 67, 0.14);
  color: #8a6a1d;
}
.tab-item.active .tab-icon { color: var(--gold); }

/* Header settings link (replaces the old horizontal nav strip) */
.header-settings {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  color: #cfcfd2; font-size: 20px; line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.header-settings:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.header-settings.active { color: var(--gold); background: rgba(212, 168, 67, 0.13); }
.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.header-icon { width: 21px; height: 21px; display: block; }

/* Keep content clear of the fixed tab bar */
.app-main { padding-bottom: 96px; }
.auth-page .app-main { padding-bottom: 48px; }

/* Hide chrome on print + login */
@media print {
  .tab-bar, .app-header, .toast { display: none !important; }
  /* Neutralise the screen-only A4 sheet so real printing stays clean A4:
     white page, no shadow, full width, no forced preview min-heights. */
  .print-page, .print-page .app-main { background: #fff !important; }
  .print-page .print-doc {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .print-page .print-doc .doc { min-height: calc(297mm - 32px) !important; }
}
.auth-page .tab-bar { display: none; }

/* Sticky save bar must sit ABOVE the fixed tab bar (both were z-60) and clear
   the 56px tab bar plus the home indicator on notched phones. */
.sticky-bar {
  z-index: 70;
  bottom: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: 10px;
}

/* ============ Brand / category chip rails ============ */
.chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.chip-rail::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.chip:hover { background: #f0f0f2; }
.chip:active { transform: scale(0.98); }
.chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1a1a;
}

/* Search box with a custom clear (✕) button */
.search-wrap { position: relative; }
.search-input { padding-right: 52px; }
.search-clear {
  position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: none; background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.search-clear:hover { background: #f0f0f2; color: var(--ink); }

/* ============ Stock filter (segmented) ============ */
.stock-filter {
  margin-top: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.stock-filter::-webkit-scrollbar { display: none; }
.stock-filter .seg-btn {
  min-height: 44px;
  padding: 10px 8px;
  font-size: 12px;
}
.stock-filter .seg-btn.active {
  background: var(--gold);
  color: #1a1a1a;
}

/* ============ Active-filter summary ============ */
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}
.filter-summary .summary-label {
  font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.clear-filters {
  border: none; background: transparent;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 13px; font-weight: 700;
  color: var(--gold-dark);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.clear-filters:hover { text-decoration: underline; }

/* ============ Empty states ============ */
.empty-state {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 24px;
  text-align: center;
}
.empty-state .es-icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f0f0f2;
  color: var(--muted);
  display: grid; place-items: center;
  font-size: 24px;
}
.empty-state h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.empty-state p { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.empty-state .btn { min-height: 44px; }

/* ============ Parts & Prices rows (design spec 4) ============ */
.parts-scroll .drow { min-height: 56px; }
.parts-scroll .p-name { font-size: 16px; font-weight: 600; }
.parts-scroll .p-meta { font-size: 12px; }
.pl-row { min-height: 56px; }
.pl-name { font-size: 16px; font-weight: 600; }

/* ============ Dashboard: day stats + recent list ============ */
.stat-card {
  min-height: 96px;
  display: flex; flex-direction: column; justify-content: center;
}
.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  min-height: 56px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.recent-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 26px rgba(0, 0, 0, 0.07);
}
.recent-main { flex: 1 1 auto; min-width: 0; }
.recent-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-price { flex: 0 0 auto; text-align: right; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.recent-price .recent-gbp { display: block; font-size: 11px; font-weight: 500; color: var(--faint); }

/* ============ Tap targets (≥44px) ============ */
.btn { min-height: 44px; }
.btn-sm { min-height: 44px; padding: 10px 14px; }
.btn-lg { min-height: 48px; }
.seg-btn { min-height: 44px; }
.input, .select, .textarea { min-height: 48px; }
.item-remove { width: 44px; height: 44px; }
.item-row { grid-template-columns: 1fr 64px 118px 44px; }
.ta-item { padding: 12px 14px; }
.hint-btn {
  display: inline;
  padding: 12px 4px;
  margin: -12px -4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ============ Focus visible (a11y) ============ */
.chip:focus-visible, .btn:focus-visible, .tab-item:focus-visible,
.seg-btn:focus-visible, .clear-filters:focus-visible, .search-clear:focus-visible,
.header-settings:focus-visible, .item-remove:focus-visible, .ta-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============ Responsive ============ */
@media (max-width: 640px) {
  .item-row { grid-template-columns: 1fr 58px 100px 44px; }
  /* iOS auto-zoom: keep inputs at 16px on small screens */
  .input, .select, .textarea, .sb-input, .price-field .item-price { font-size: 16px; }
}
@media (max-width: 380px) {
  .item-row { grid-template-columns: 1fr 54px 90px 44px; }
}

/* ============================================================
   MOBILE FIXES v2 — real-device polish (appended)
   1) scroll unlock · 2) long-name wrapping · 3) icon-only print
   toolbar · 4) parts head/row alignment · 5) curved header ·
   6) touch targets + multi-select FABs · 7) print-doc mobile fit
   ============================================================ */

/* ---------- (1) SCROLL FIX ----------
   styles.css/polish.css have no html/body overflow:hidden or height:100vh
   traps today, but the whole app depends on document-flow scrolling staying
   intact (the fixed .tab-bar/.sticky-bar and the sticky .app-header all
   assume the page scrolls). These overrides neutralise the classic mobile
   scroll-lock traps — shell overflow:hidden, height:100%+overflow combos,
   overscroll locking, scroll-lock JS — and make .app-main a
   momentum-scrolling container if anything ever constrains its height. */
html, body {
  overflow: auto !important;
  height: auto !important;
  overscroll-behavior-y: auto !important;
}
.app-main {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hard ~110px bottom clearance so the fixed .sticky-bar never covers the
   last field/button. The earlier :has() rule (`.app-main:has(.sticky-bar)`)
   is dropped by older Android WebView / iOS Safari < 15.4, so enforce the
   clearance on plain .app-main instead (tab-bar pages just get extra air). */
.app-main { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
.form-page .app-main, .print-page .app-main { padding-bottom: 210px !important; }
.form-page .tab-bar { display: none !important; }
.auth-page .app-main { padding-bottom: 48px !important; }

/* ---------- (5) CURVED HEADER — rounded bottom corners on the black bar */
.app-header {
  border-radius: 0 0 20px 20px;
  box-shadow: none;
  border-bottom: none;
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}
/* Typeahead / customer dropdowns sit above the sticky header (z-50). */
.typeahead-results, .cust-results { z-index: 55; }
/* Consistent selected states — every active chip/seg/tab uses the gold accent
   so nothing renders green or mismatched next to the brand. */
.seg-btn.active {
  background: var(--gold);
  color: #1a1a1a;
}
.seg-btn.active.available { background: var(--gold); color: #1a1a1a; }
.seg-btn.active.unavailable { background: var(--gold); color: #1a1a1a; }
.seg-btn.active.on-order { background: var(--gold); color: #1a1a1a; }
.chip.active { background: var(--gold); color: #1a1a1a; border-color: var(--gold); }

/* ---------- (4) COLUMN ALIGNMENT — dashboard parts head + rows ----------
   styles.css gave .dthead/.drow the same template, but the last column was
   `1fr` while its min-content (5 action buttons ≈ 216px: 5×40px + 4×4px
   gaps) can exceed the fr share on narrower screens — the row grid then
   grows that track past the head's, pushing NAME/PRICE/STOCK/ACTIONS out
   of line and letting the buttons clip/scroll past the card edge.
   A FIXED 236px actions track (216px buttons + 20px slack) makes both
   grids resolve identical track sizes at every width, so the 5-button
   action bar always sits fully inside the card — no overflow, no swipe.
   Covers the new .parts-head/.parts-row pair at ALL widths and the classic
   .dthead/.drow pair wherever the head is shown (≥641px; below that
   styles.css stacks .drow into cards and hides .dthead — left intact). */
.app-main .parts-head,
.app-main .parts-row {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.05fr) minmax(0, 1.45fr) 236px !important;
}
@media (min-width: 641px) {
  .app-main .dthead,
  .app-main .drow {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.05fr) minmax(0, 1.45fr) 236px !important;
  }
}

/* ---------- (6) TOUCH TARGETS + multi-select FABs ---------- */
/* Selected part row — gold-tinted highlight (inset ring avoids layout shift) */
.sel {
  background: rgba(212, 168, 67, 0.14) !important;
  box-shadow: inset 0 0 0 1.5px var(--gold), var(--shadow) !important;
}
.sel .p-name, .sel .pl-name { color: var(--gold-dark); }

/* Floating "Done" pill — dark, gold text, fixed bottom centre.
   bottom clears the 56px fixed tab-bar (74 + safe-area). */
.fab-done {
  position: static !important;
  margin: 0;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: #000;
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fab-done .icon { width: 20px; height: 20px; }

/* Floating "Cancel" ghost circle */
.fab-cancel {
  position: static !important;
  margin: 0;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fab-cancel .icon { width: 24px; height: 24px; }
/* Selection hint / info bar */
.sel-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 168, 67, 0.14);
  border: 1px solid rgba(212, 168, 67, 0.4);
  color: #8f6f1d;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- ICON-ONLY PRINT TOOLBAR (all widths) ----------
   The Print/Download/Share buttons are icon-only (their .pt-txt label spans
   were removed from the markup). Hide any residual label text at every width
   and keep the buttons as clean 44px tap targets with 20px icons so the
   toolbar looks professional on desktop and mobile alike. */
.print-toolbar .pt-txt { display: none !important; }
.print-toolbar .pt-btn,
.print-toolbar .pt-back {
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 14px;
  border-radius: 10px;
  gap: 6px;
}
.print-toolbar .pt-back {
  width: 44px;
  padding: 0;
  justify-content: center;
  flex: 0 0 auto;
}
.print-toolbar .pt-btn .icon,
.print-toolbar .pt-back .icon { width: 20px; height: 20px; }
.print-toolbar .pt-actions { gap: 8px; }

/* ---------- (2)(3)(6)(7) small-screen block (≤560px) ---------- */
@media (max-width: 560px) {
  /* (2) LONG NAMES — wrap part/item/customer/notes text instead of
     overflowing (print-doc cells, part names, list cells, typeahead) */
  .app-main .p-name, .app-main .p-meta,
  .app-main .pl-name, .app-main .pl-meta,
  .app-main .ta-name, .app-main .ta-sub,
  .app-main .item-name, .app-main .item-sub,
  .app-main .recent-name, .app-main .recent-meta,
  .app-main .d-cell.c-customer, .app-main .c-name,
  .app-main .doc-row .d-cell,
  .print-page .print-doc .item-name-cell,
  .print-page .print-doc .doc-cust,
  .print-page .print-doc .doc-note {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  /* undo nowrap+ellipsis on line items so long part names show fully */
  .app-main .item-name, .app-main .item-sub {
    white-space: normal !important;
  }

  /* (3) ICON-ONLY PRINT TOOLBAR — hide labels, keep icons, 44px targets */
  .print-toolbar .pt-txt { display: none !important; }
  .print-toolbar .pt-btn,
  .print-toolbar .pt-back {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .print-toolbar .pt-btn {
    flex: 1 1 auto;
    padding: 0 6px;
  }
  .print-toolbar .pt-actions { gap: 6px; }

  /* (6) part action buttons — 40px touch targets, 6px gap */
  .part-actions { gap: 6px !important; }
  .app-main .pa-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* (7) PRINT DOC — snug mobile fit (white A4 sheet, full width) */
  .print-page .print-doc {
    padding: 16px 14px !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }
  .print-page .print-doc .doc { min-height: 1090px; }
  .print-page .print-doc .doc-items th { white-space: normal; }
  .print-page .print-doc .doc-items td, th { padding: 6px 4px; }
  .print-page .print-doc .doc-items td { font-size: 11px; }

  /* (5) STAT CARDS — value font 14px on phones so long LKR totals fit the
     two-column stat grid without wrapping (MED polish backlog). */
  .stat-card .stat-value { font-size: 14px; }
}

/* Print toolbar sticks below the sticky black header (header is 58px tall:
   10px padding + 38px logo), otherwise it slides underneath it (z-20 < z-50)
   and the Print/Download/Share buttons become unreachable while scrolling. */
.print-page .print-toolbar { top: calc(58px + env(safe-area-inset-top)); }
/* Stop horizontal page scroll from the A4 print doc on phones. */
.print-page { overflow-x: hidden; }

/* ---------- PRINT PREVIEW PAGE - polished A4 sheet on gray ----------
   The in-app #/print/quote|invoice/:id page now renders the document as a
   centered white A4 sheet (794px) with a soft shadow on a light-gray studio
   background instead of a cramped full-width strip, so it reads as a
   professional PDF preview. The sticky blurred toolbar sits above it. */
.print-page { background: #f0f0f2; }
.print-page .app-main { background: #f0f0f2; }
.print-page .print-doc {
  max-width: 794px;
  margin: 0 auto 56px;
  padding: 40px 48px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  min-height: 1122px;
}
.print-page .print-doc .doc { min-height: 1042px; }

/* END mobile fixes v2 */

/* ---------- FORM-ROUTE FIX (MED polish backlog item 3) ----------
   On quote/invoice/part new+edit routes the fixed .tab-bar overlapped the
   sticky save bar. js/app.js route() tags <body> with .form-route (renamed
   from .form-page and extended to parts forms). Hide the tab bar there, let
   the sticky bar sit at the very bottom (safe-area only), and keep the tall
   bottom clearance so the form's last field/button stays above the bar. */
body.form-route .tab-bar { display: none !important; }
body.form-route .sticky-bar { bottom: env(safe-area-inset-bottom); }
body.form-route .app-main { padding-bottom: 210px !important; }

/* ============================================================
   QUOTE/INVOICE LIST + FORM MODERNISATION (appended)
   1) Modern stroke icons for download & share (24x24, currentColor)
   2) Quote/invoice row action buttons: roomier layout + Edit first
   3) .pa-btn/.pt-btn subtle modern look (consistent radius, hover lift)
   4) Editable line-item name input styling
   ============================================================ */

/* ---------- (1) MODERN ICONS ----------
   Download: rounded square + centered down arrow (modern app style).
   Share: iOS-style export glyph (box + up arrow). Both stroke-based,
   24x24, inherit currentColor like the rest of the icon set. */
.icon-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'%3E%3C/rect%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='m8.5 12.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}
.icon-share {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpolyline points='16 6 12 2 8 6'/%3E%3Cline x1='12' y1='2' x2='12' y2='15'/%3E%3C/svg%3E");
}

/* ---------- (2) ACTION BUTTON SPACING + EDIT ----------
   Roomier actions cell: flex with 8px gaps so the six row buttons
   (Edit, Delete, Open, Download, Share, Print) never pile together. */
.doc-row .c-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* Widen the 6th grid column so all six buttons fit on one line.
   Desktop ≥641px only — below that .doc-row stacks into cards
   (styles.css 1fr 1fr) with the actions cell spanning full width. */
@media (min-width: 641px) {
  .list-head,
  .doc-row {
    grid-template-columns: 1.2fr 1.8fr 1fr 0.9fr 1.1fr minmax(288px, 1fr);
  }
}
/* 44px touch targets for row actions on mobile (covers the 561-640px
   band; ≤560px is already handled by the earlier polish rule). */
@media (max-width: 640px) {
  .doc-row .c-actions { gap: 8px; }
  .app-main .pa-btn { min-width: 44px !important; min-height: 44px !important; }
}

/* ---------- (3) MODERN .pa-btn / .pt-btn ----------
   Consistent 10px radius, subtle resting shadow, hover lift. */
.pa-btn {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.pa-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.pa-btn:active { transform: scale(0.94); box-shadow: none; }
.print-toolbar .pt-btn,
.print-toolbar .pt-back {
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.print-toolbar .pt-btn:hover,
.print-toolbar .pt-back:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}
.print-toolbar .pt-btn:active,
.print-toolbar .pt-back:active { transform: scale(0.97); }

/* ---------- (4) EDITABLE LINE-ITEM NAME ----------
   The item name in quote/invoice rows is now a text input; style it as a
   quiet inline editor — transparent until hover, gold ring on focus. */
.item-name-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  margin-left: -8px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.item-name-input:hover { background: #fff; border-color: rgba(0, 0, 0, 0.12); }
.item-name-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.25);
}


/* ============================================================
   MOBILE ACTION BUTTONS + CHIP-RAIL WRAP + PRINT PREVIEW (2026-08-11)
   Appended, scoped overrides. Do not disturb earlier rules.
   ============================================================ */

/* ---------- (TASK 1) ACTION BUTTONS OUT OF THE CARD ----------
   Collapsed mobile quote/invoice/part rows: make the actions cell a
   compact full-width wrapping flex row. Children are inline-flex and
   flex:1 on tiny screens so they fill the row, wrap onto a second
   line when needed, and keep ~36-40px tap targets. Desktop keeps the
   inline icon buttons (base .c-actions/.pa-btn rules untouched). */
@media (max-width: 640px) {
  .doc-row .c-actions {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 6px;
  }
  /* clear any overflow/height constraint that could hide the row */
  .doc-row .c-actions,
  .doc-row .c-actions > * {
    overflow: visible !important;
  }
  /* child buttons: full-width-friendly, ~36px height, visible outline */
  .doc-row .c-actions .pa-btn,
  .doc-row .c-actions button,
  .doc-row .c-actions .btn,
  .doc-row .c-actions .sb-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 8px;
    white-space: nowrap;
    outline: 1px solid rgba(0, 0, 0, 0.12);
  }
  /* add the class-style "card" border so the actions read as a framed row */
  .doc-row .c-actions {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
    padding: 6px;
  }
}

/* ---------- (TASK 2) CATEGORY CHIP-RAIL WRAP ON MOBILE ----------
   On phones the rail wraps instead of scrolling horizontally so every
   category chip is reachable without a horizontal swipe. Desktop keeps
   the horizontal-scroll behaviour (base .chip-rail rule untouched). */
@media (max-width: 640px) {
  .chip-rail {
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .chip-rail .chip {
    flex: 0 1 auto !important;
    margin: 0 !important;
  }
}

/* ---------- (TASK 5) MOBILE PRINT PREVIEW ----------
   The in-page #/print/... route on a phone: toolbar stays sticky at top,
   the A4 sheet scales to the viewport (max-width 100%, no horizontal
   scroll), and body copy drops to ~12px at 360px so nothing overflows. */
@media (max-width: 640px) {
  .print-page .print-toolbar {
    position: sticky !important;
    top: calc(58px + env(safe-area-inset-top)) !important;
    left: 0; right: 0; z-index: 30;
    padding: 8px 12px !important;
  }
  .print-page .print-doc {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto 32px !important;
    padding: 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    font-size: 12px;
  }
  .print-page .print-doc .doc {
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
  }
  .print-page .print-doc .doc-header { flex-wrap: wrap; gap: 10px; }
  .print-page .print-doc .doc-items th { white-space: normal; }
  .print-page .print-doc .doc-items td,
  .print-page .print-doc .doc-items th { padding: 6px 4px !important; font-size: 11px; }
  .print-page { overflow-x: hidden !important; }
}

/* ---------- (TASK 6) DE-CIRCLE DOC HEADER LOGO (in-app print preview)
   Flatten the rounded "circle" fallback badge on the in-page print doc so
   it renders as a small rect, consistent with the square brand logo. */
.print-page .print-doc .doc-logo-circle,
.print-doc .doc-logo-circle {
  border-radius: 4px !important;
}

/* ---------- (ACTION BAR) dashboard part-row buttons stay INSIDE the card ----------
   Desktop: the ACTIONS grid track is a fixed 236px (see block 4 above) so the
   5-button bar (216px min-content) always fits the track — no clip, no swipe.
   Mobile: the actions cell is full-width but was right-aligned, so ~244px of
   44px buttons (5×44 + 4×6 gaps) spilled past narrow cards. Now the bar is
   left-aligned, fills the cell, and WRAPS to a second row when the card is
   too narrow (< ~312px viewport) instead of overflowing. The subtle strip
   makes it read as a deliberate action-bar row. Scoped to dashboard rows. */
@media (max-width: 640px) {
  .dtc.actions { justify-content: flex-start !important; }
  .dtc.actions .part-actions {
    width: 100%;
    flex-wrap: wrap;
        background: rgba(0, 0, 0, 0.035);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 6px;
        box-sizing: border-box;
      }
    }

    /* ============================================================
       DELIVERY NOTE FORM POLISH (2026-08-11)
       c2: styled, hoverable remove buttons on the delivery line items
       (the inline style was stripped in delivery-note.js so these rules
       apply). M5: the amount uses App.fmtLKR which already adds
       thousands separators, so nothing extra needed there.
       ============================================================ */
    .dn-item-row .dn-i-rm {
      flex: 0 0 auto;
      width: 40px;
      height: 44px;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 10px;
      background: #fafafc;
      color: #d70015;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    }
    .dn-item-row .dn-i-rm:hover,
    .dn-item-row .dn-i-rm:focus-visible {
      background: #fdecea;
      border-color: rgba(215, 0, 21, 0.4);
    }
    .dn-item-row .dn-i-rm:active { transform: scale(0.94); }

/* ============================================================
   PREMIUM INK & GOLD BACKGROUND (2026-08-11)
   User asked to move away from the flat black look. Elegant,
   STATIC, gold-on-charcoal "spare-parts workshop" base. NO
   video/animation/gif/canvas — pure static gradients +
   a CSS-generated dot texture. Loaded last so it wins.
   ============================================================ */

/* Base: deep charcoal-to-ink vertical gradient + faint gold
   radial blooms (top-centre & right) + a faint premium dot
   texture overlay. Static. */
body {
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(212,168,67,0.10), transparent 60%),
    radial-gradient(760px 480px at 85% -20%, rgba(212,168,67,0.08), transparent 62%),
    radial-gradient(1100px 820px at 50% 120%, rgba(212,168,67,0.07), transparent 62%);
  background-color: var(--bg);
  background-attachment: fixed;
}
/* Subtle gold vignette overlay pinned to the viewport (never
   moves while scrolling). Reinforces the premium frame without
   touching content readability. Static. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(140% 90% at 50% 0%, transparent 62%, rgba(0,0,0,0.55) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.35) 48%, transparent 75%);
}
/* Faint dot/grain texture via a pure-CSS radial pattern — no image. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(rgba(212,168,67,0.55) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* Readability guard: every light content surface (cards, stat cards,
   search, typeahead, seg controls, item-row form rows) keeps its
   original light/white fill so text on them stays high-contrast and
   pops cleanly off the dark base. */
.card,
.stat-card,
.recent-row,
.empty-state,
.empty,
.typeahead-results,
.ta-item:hover,
.seg,
.chip,
.stock-filter .seg,
.drow,
.pl-row,
.doc-row,
.items .item-row,
.form-error {
  background-color: var(--card) !important;
}
.items .item-row { background-color: #fafafc !important; }
.search-input,
.input, .select, .textarea {
  background-color: #fff !important;
}

/* Header stays gold-on-dark (brand). Slightly lift the black so it
   reads as deep ink matching the new base rather than flat #000. */
.app-header {
  background: linear-gradient(180deg, #151518 0%, #0e0e10 100%) !important;
}
.app-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.45), transparent);
}
.app-header .logo {
  background: #0e0e10;
  border-color: rgba(212,168,67,0.6);
  box-shadow: 0 0 0 1px rgba(212,168,67,0.15), 0 2px 10px rgba(212,168,67,0.18);
}

/* Auth (login) page gets its own matching ink-and-gold backdrop.
   The `auth-page` + `login-card` white panel pops off the dark base
   exactly like every light card elsewhere. Header is hidden on this
   page, so no double treatment needed. */
.auth-page {
  background:
    radial-gradient(720px 460px at 50% -10%, rgba(212,168,67,0.13), transparent 62%),
    radial-gradient(900px 700px at 50% 115%, rgba(212,168,67,0.09), transparent 64%);
  background-color: #0b0b0d;
}
/* The login panel + logo: gold ring on the logo, crisp white card. */
.auth-page .login-card {
  background: var(--card);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}
.auth-page .login-logo {
  background: #0e0e10;
  border-color: rgba(212,168,67,0.65);
}
.auth-page .login-foot { color: rgba(255,255,255,0.55); }

/* Page titles/paragraph text that previously sat on a light page must
   now read against the dark ink base. Cards handle their own inner
   text; only elements that live directly on the dark page background
   (page titles, section labels, subtitles, list metadata outside cards)
   are brightened here. Keep muted tones but lifted for contrast. */
.app-main .page-title { color: #fff; }
.app-main .page-sub { color: #b9b9bf; }
.app-main .section-title { color: #cfcfd4; }
.app-main .brand-sub { color: #a6a6ac; }


/* ===== Header & login brand logo (real logo image, not the C monogram) ===== */
.logo .logo-img,
.login-logo .logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.app-header .logo {
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(212, 168, 67, 0.55);
  overflow: hidden;
}
.auth-page .login-logo {
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  border: 1px solid rgba(212, 168, 67, 0.5);
}


/* ============================================================
   ANIMATED PREMIUM INK & GOLD BACKGROUND (2026-08-11, v46)
   User changed mind: wants a LIVE/animated background, not static.
   Slow, classy gold motion on charcoal — drifting aurora radials +
   floating gold dust. Pure CSS transforms+opacity (GPU-cheap, no
   canvas/video). Content cards stay light for readability.
   ============================================================ */

/* Aurora drift: the three gold radial blooms slowly sweep across */
@keyframes goldDrift {
  0%   { background-position: 20% -10%, 85% -20%, 50% 120%; }
  50%  { background-position: 32% -6%, 72% -14%, 58% 118%; }
  100% { background-position: 20% -10%, 85% -20%, 50% 120%; }
}
body {
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(212,168,67,0.13), transparent 60%),
    radial-gradient(760px 480px at 85% -20%, rgba(212,168,67,0.10), transparent 62%),
    radial-gradient(1100px 820px at 50% 120%, rgba(212,168,67,0.09), transparent 62%);
  background-color: var(--bg);
  background-attachment: fixed;
  background-size: 160% 160%, 170% 170%, 150% 150%;
  animation: goldDrift 24s ease-in-out infinite;
}

/* Floating gold dust particles (second ::before layer, animated upward) */
@keyframes dustRise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.5; }
  100% { transform: translateY(-100vh); opacity: 0; }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(140% 90% at 50% 0%, transparent 62%, rgba(0,0,0,0.55) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.35) 48%, transparent 75%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(rgba(212,168,67,0.55) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
/* A few slowly rising gold motes, all pure-CSS */
.mote-anim {
  position: fixed;
  z-index: -1;
  bottom: -10vh;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(212,168,67,0.75);
  box-shadow: 0 0 6px rgba(212,168,67,0.6);
  animation: dustRise 18s linear infinite;
  pointer-events: none;
}