/* ============================================================
   Euro Shed Parts — Internal Pricing
   Premium mobile-first design system.
   Background #f5f5f7 · Cards white · Ink #000 · Gold #D4A843
   ============================================================ */

:root {
  --gold: #D4A843;
  --gold-dark: #b98f2e;
  --bg: #0d0d0f;
  --card: #ffffff;
  --ink: #000000;
  --muted: #6e6e73;
  --faint: #76767c;
  --border: rgba(0, 0, 0, 0.09);
  --green: #34c759;
  --red: #ff3b30;
  --amber: #ff9f0a;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============ SVG Icons (inline, 24x24, currentColor) ============ */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: currentColor;
}
.icon-sm { width: 20px; height: 20px; }
.icon-lg { width: 28px; height: 28px; }
.icon-xl { width: 32px; height: 32px; }

/* Print icon - modern printer */
.icon-print {
  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='M6 9V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v7'%3E%3C/path%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5'%3E%3C/path%3E%3Cpath d='M18 18h2a2 2 0 0 0 2-2v-5'%3E%3C/path%3E%3Cline x1='6' y1='14' x2='18' y2='14'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Share icon - 3 dots connected */
.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%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Download icon - arrow down to tray */
.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%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Preview/Eye icon */
.icon-eye {
  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='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Delete/Trash icon */
.icon-trash {
  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%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Recycle bin icon - circular arrows */
.icon-recycle {
  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='M7 19H5a5 5 0 0 1-5-5V6'%3E%3C/path%3E%3Cpath d='M21 5h-2a5 5 0 0 0-5 5v11'%3E%3C/path%3E%3Cpath d='M7 5l-5 5 5 5'%3E%3C/path%3E%3Cpath d='M17 5l5 5-5 5'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Checkmark icon */
.icon-check {
  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Cancel/X icon */
.icon-x {
  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Search icon */
.icon-search {
  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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Clear/Close icon */
.icon-close {
  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%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Edit icon */
.icon-edit {
  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='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Quote/clipboard icon */
.icon-quote {
  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='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Invoice/receipt icon */
.icon-invoice {
  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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cline x1='10' y1='9' x2='8' y2='9'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Arrow back/left icon */
.icon-back {
  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%3Cline x1='19' y1='12' x2='5' y2='12'%3E%3C/line%3E%3Cpolyline points='12 19 5 12 12 5'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Plus/add icon */
.icon-plus {
  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%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Recycle/Restore icon - arrow returning */
.icon-restore {
  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='M7 19H5a5 5 0 0 1-5-5V6'%3E%3C/path%3E%3Cpath d='M21 5h-2a5 5 0 0 0-5 5v11'%3E%3C/path%3E%3Cpath d='M7 5l-5 5 5 5'%3E%3C/path%3E%3Cpath d='M17 5l5 5-5 5'%3E%3C/path%3E%3Cpath d='M12 2v4'%3E%3C/path%3E%3Cpath d='M8 6l4 4-4 4'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Settings/gear icon */
.icon-settings {
  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%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Empty state box icon */
.icon-box {
  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='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'%3E%3C/path%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'%3E%3C/polyline%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Search/magnifying glass icon */
.icon-search-alt {
  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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Alert/magnifying glass icon for empty state */
.icon-alert {
  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%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Star/favorite icon */
.icon-star {
  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%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
}
a { color: var(--ink); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }

/* ============ Header ============ */
.app-header {
  background: #000;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px;
  background: #000;
  color: var(--gold);
  display: grid; place-items: center;
  font-weight: 700; font-size: 20px;
  border: 1px solid rgba(212, 168, 67, 0.45);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: 0.2px; color: #fff; white-space: nowrap; }
.brand-sub { font-size: 11px; color: #9a9a9f; }
.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.header-settings {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: #cfcfd2; transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.header-icon { width: 20px; height: 20px; }
.header-settings:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.header-settings.active { color: var(--gold); background: rgba(212, 168, 67, 0.13); }


/* ============ Layout ============ */
.app-main { max-width: 1080px; margin: 0 auto; padding: 22px 16px 72px; }
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; }
.page-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.section-gap { margin-top: 22px; }

/* ============ Cards ============ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted); margin-bottom: 16px;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer; font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--radius-sm);
  background: #f0f0f2; color: #000;
  transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
  user-select: none; text-align: center; line-height: 1;
  white-space: nowrap;
}
.btn:hover { background: #e4e4e8; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn-gold { background: var(--gold); color: #1a1a1a; }
.btn-gold:hover { background: #b8902f; color: #1a1a1a; }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: #1c1c1f; }
.btn-ghost { background: transparent; border: 1px solid rgba(0, 0, 0, 0.16); color: #000; }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.045); }
.btn-danger-ghost { background: transparent; border: 1px solid rgba(255, 59, 48, 0.4); color: #ff3b30; }
.btn-danger-ghost:hover { background: rgba(255, 59, 48, 0.08); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-lg { padding: 14px 22px; font-size: 15px; }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.input, .select, .textarea {
  font: inherit; font-size: 15px; color: #000; background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 11px;
  padding: 10px 12px; width: 100%; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.18);
}
.input::placeholder { color: var(--faint); }
.textarea { resize: vertical; min-height: 64px; }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
}
.hint { font-size: 12.5px; color: var(--gold-dark); font-weight: 600; }
.hint-btn { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.form-error {
  background: #fff1f0; color: #d70015; font-size: 13px;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 14px;
}
.error-card h2 { font-size: 18px; margin-bottom: 6px; }
.error-card p { color: var(--muted); margin-bottom: 14px; font-size: 14px; }
.page-loading { padding: 44px; text-align: center; color: var(--muted); }
.empty {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 34px; text-align: center; color: var(--muted); font-size: 14px;
}

/* ============ Segmented control ============ */
.seg { display: flex; background: #efeff1; border-radius: 11px; padding: 3px; gap: 3px; }
.seg-btn {
  flex: 1; border: none; background: transparent; border-radius: 10px;
  padding: 8px 6px; font-size: 12.5px; font-weight: 600;
  color: #5f5f64; cursor: pointer; white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:hover { color: #000; }
.seg-btn.active.available { background: var(--green); color: #fff; }
.seg-btn.active.unavailable { background: var(--red); color: #fff; }
.seg-btn.active.on-order { background: var(--amber); color: #1a1a1a; }
/* Quote/invoice status segmented control — the selected status must be clearly
   visible (previously only stock statuses had active colours). */
.seg-btn.active.status-d { background: #8e8e93; color: #fff; }
.seg-btn.active.status-s { background: #007aff; color: #fff; }
.seg-btn.active.status-pd { background: #007aff; color: #fff; }
.seg-btn.active.status-pa { background: var(--green); color: #fff; }
.seg-btn.active.status-a { background: var(--green); color: #fff; }
.seg-btn.active.status-r { background: var(--red); color: #fff; }
.seg-btn.active.status-c { background: var(--red); color: #fff; }
.seg-btn.active.status-p { background: #007aff; color: #fff; } /* legacy short key */
/* Hide the browser's native search ✕ so only the custom .search-clear shows
   (both used to appear side-by-side in the parts search box). */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.seg-big .seg-btn { padding: 10px 8px; font-size: 13px; }

/* ============ Stat cards ============ */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 14px;
}
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.stat-label { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.stat-gold .stat-value { color: var(--gold-dark); }
.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }

/* ============ Data table (parts) ============ */
.parts-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 720px; }
.dthead, .drow {
  display: grid;
  grid-template-columns: 2.4fr 1.1fr 1.6fr 1fr;
  gap: 12px; align-items: center;
}
.dthead {
  padding: 6px 16px; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.drow {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 16px; margin-bottom: 8px;
}
.dth, .dtc { min-width: 0; }
.dtc { font-size: 14px; }
.p-name { font-weight: 600; }
.p-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.p-lkr { font-weight: 600; white-space: nowrap; }
.p-gbp { font-size: 12px; color: var(--muted); }
.price-stack { text-align: right; }
/* Price column header aligns with the right-aligned values below */
.dth:nth-child(2) { text-align: right; }
.row-actions { display: flex; gap: 6px; }
.form-error {
  grid-column: 1 / -1;
  background: #fdecec; color: #b3261e; border: 1px solid #f5c2c0;
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
}
.stat-green .stat-value { color: #1e8e3e; }
.stat-red .stat-value { color: #c5221f; }
.stat-amber .stat-value { color: #b06000; }

/* ============ Image thumbnails in tables ============ */
.p-img, .p-thumb, .p-img-badge {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  vertical-align: middle;
  margin: 0 12px 0 0;
  flex: 0 0 auto;
  background: #fafafa;
  border: 1px solid #e8e4dc;
}
.p-img-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8964f;
  font-size: 26px;
  line-height: 1;
}

/* ============ Simple list rows (quotes / invoices) ============ */
.list-head {
  display: grid;
  grid-template-columns: 44px 1.2fr 1.8fr 1fr 0.9fr 1.1fr minmax(132px,1fr);
  gap: 12px; padding: 6px 16px;
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.doc-row {
  display: grid;
  grid-template-columns: 44px 1.2fr 1.8fr 1fr 0.9fr 1.1fr minmax(132px,1fr);
  gap: 12px; align-items: center;
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 8px; cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.doc-row:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.07); }
.d-cell { font-size: 14px; min-width: 0; }
.d-cell.c-number { font-weight: 700; }
.d-cell.c-total { font-weight: 600; }

/* ============ Badges ============ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-gray { background: #efeff1; color: #55555a; }
.badge-gold { background: rgba(212, 168, 67, 0.18); color: #8f6f1d; }
.badge-green { background: rgba(52, 199, 89, 0.14); color: #1c7e3a; }
.badge-red { background: rgba(255, 59, 48, 0.12); color: #c22b23; }
.badge-amber { background: rgba(255, 159, 10, 0.18); color: #96620a; }
.badge-blue { background: rgba(0, 122, 255, 0.12); color: #0056b3; }

/* ============ Type-ahead ============ */
.typeahead { position: relative; }
.typeahead-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  z-index: 40; overflow: hidden; max-height: 280px; overflow-y: auto;
}
.ta-item {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 10px 14px; cursor: pointer; font-size: 14px;
}
.ta-item:hover { background: #f5f5f7; }
.ta-item + .ta-item { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.ta-name { font-weight: 600; }
.ta-sub { font-size: 12px; color: var(--muted); }
.ta-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* ============ Quote / invoice line items ============ */
.items { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.item-row {
  display: grid; grid-template-columns: 1fr 64px 118px 34px;
  gap: 8px; align-items: center;
  background: #fafafc; border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px;
}
.item-main { min-width: 0; }
.item-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-remove {
  border: none; background: transparent; color: #ff3b30; font-size: 16px;
  cursor: pointer; width: 34px; height: 34px; border-radius: 10px; line-height: 1;
}
.item-remove:hover { background: rgba(255, 59, 48, 0.08); }
.item-remove:disabled { opacity: 0.3; cursor: default; }

/* ============ Totals ============ */
.totals { margin-top: 18px; max-width: 340px; margin-left: auto; }
.t-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 14px; color: var(--muted); gap: 12px;
}
.t-row > span:last-child { color: #000; font-weight: 600; white-space: nowrap; }
.t-row.t-total {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px;
}
.t-row.t-total > span { color: var(--gold-dark); font-size: 18px; font-weight: 700; }
.t-row input { max-width: 130px; }
.t-row .t-label { flex: 1; }

/* ============ Filters ============ */
.filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 16px; }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* ============ Login ============ */
.login-wrap {
  min-height: calc(100vh - 40px);
  min-height: calc(100dvh - 40px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card { width: 100%; max-width: 400px; padding: 34px 28px; text-align: center; }
.login-logo { width: 56px; height: 56px; border-radius: 12px; font-size: 30px; margin: 0 auto 14px; border: 1px solid rgba(212, 168, 67, 0.5); }
.login-title { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.login-sub { color: var(--muted); font-size: 13px; margin: 4px 0 22px; }
.login-card form { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.login-foot { margin-top: 22px; font-size: 12.5px; color: var(--muted); }
.auth-page .app-header { display: none; }

/* ============ Toast ============ */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  background: rgba(0, 0, 0, 0.9); color: #fff;
  font-size: 13.5px; font-weight: 500;
  padding: 11px 18px; border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #c22b23; }

/* ============ Settings ============ */
.setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.setting-grid .full { grid-column: 1 / -1; }
.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.pass-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* ============ Responsive ============ */
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .setting-grid { grid-template-columns: 1fr; }
  .dthead, .drow { grid-template-columns: 2fr 1fr 1.5fr 1fr; }
  .data-table { min-width: 0; }
}

@media (max-width: 640px) {
  .app-main { padding: 16px 12px 88px; }
  .header-inner { padding: 10px 12px; gap: 8px; }
  .brand-name { font-size: 14px; }
  .page-title { font-size: 23px; }
  .page-head { align-items: center; }
  .card { padding: 16px; border-radius: 14px; }

  /* parts → stacked cards */
  .parts-scroll { overflow: visible; }
  .data-table { min-width: 0; }
  .dthead { display: none; }
  .drow { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 14px 16px; border-radius: 14px; }
  .dtc {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font-size: 13.5px;
  }
  .dtc::before {
    content: attr(data-label);
    font-size: 10.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .dtc.name { grid-column: 1 / -1; display: block; }
  .dtc.name::before { display: none; }
  .dtc.price { grid-column: 1 / -1; justify-content: flex-start; gap: 8px; }
  .dtc.price::before { margin-right: auto; }
  .dtc.actions { grid-column: 1 / -1; justify-content: flex-start; }
  .dtc.actions::before { display: none; }
  .price-stack { text-align: right; }
  .row-actions { margin-left: auto; }
  
  /* Image thumbnails on mobile */
  .p-img, .p-thumb, .p-img-badge {
    width: 50px;
    height: 50px;
  }

  /* quote / invoice rows → stacked cards */
  .list-head { display: none; }
  .doc-row { grid-template-columns: 1fr 1fr; gap: 5px 12px; }
  .doc-row .c-number { grid-column: 1 / -1; font-size: 15px; }
  .doc-row .d-cell { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .doc-row .d-cell::before {
    content: attr(data-label);
    font-size: 10.5px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.4px;
  }
  .doc-row .c-number::before { display: none; }

  /* line items */
  .item-row { grid-template-columns: 1fr 58px 100px 34px; padding: 9px 10px; }
}

/* Small phones */
@media (max-width: 380px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .item-row { grid-template-columns: 1fr 54px 90px 30px; }
}

/* ============ Delivery Note Mobile Optimization ============ */
@media (max-width: 560px) {
  /* Form fields - full width, better spacing */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .form-grid .field {
    margin-bottom: 8px;
  }
  .form-grid .field.full {
    grid-column: auto;
  }
  
  /* Cards - tighter padding */
  .card {
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .section-title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  /* Input fields - larger touch targets */
  .input, .textarea, .select {
    min-height: 48px;
    font-size: 16px; /* Prevent iOS zoom */
    padding: 12px 14px;
  }
  .textarea {
    min-height: 80px;
  }
  
  /* Typeahead search */
  .typeahead {
    margin-bottom: 12px;
  }
  #dn-search {
    padding-right: 52px;
  }
  
  /* Items list - better mobile layout */
  .dn-item-row {
    flex-direction: column !important;
    gap: 8px;
    align-items: stretch;
    padding: 12px;
    background: var(--card);
    border-radius: 10px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
  }
  .dn-item-row .dn-i-name {
    width: 100%;
    flex: none;
  }
  .dn-item-row .dn-i-qty,
  .dn-item-row .dn-i-price {
    width: 100%;
    flex: none;
  }
  .dn-item-row > div[style*="position:relative"] {
    width: 100%;
  }
  .dn-item-row .dn-i-amt {
    width: 100%;
    text-align: right;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }
  .dn-item-row .dn-i-rm {
    align-self: flex-end;
    width: 44px;
    height: 44px;
  }
  
  /* Sticky bar - icon only on mobile */
  .sticky-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    z-index: 70;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .sb-totals {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .sb-row.sb-total {
    font-size: 17px;
  }
  .sb-row.sb-total span:last-child {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold-dark);
  }
  .sb-actions {
    display: flex;
    gap: 6px;
  }
  .sb-actions .btn {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }
  .sb-actions .btn .icon {
    width: 24px;
    height: 24px;
  }
  .sb-actions .btn .pt-txt {
    display: none !important;
  }
  .sb-actions .btn-lg {
    min-height: 48px;
  }
  
  /* Status segment buttons */
  .status-seg {
    display: flex;
    gap: 8px;
  }
  .seg-btn {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }
  
  /* Add custom item button */
  #dn-add-row {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  
  /* Print/Share buttons in form */
  .page-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-head .btn-ghost {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
  }
}

/* Ultra small phones */
@media (max-width: 380px) {
  .app-main { padding: 12px 10px 100px; }
  .card { padding: 12px; }
  .section-title { font-size: 14px; }
  .input, .textarea, .select { padding: 10px 12px; }
  .sb-actions .btn { width: 44px; height: 44px; }
  .sb-row.sb-total span:last-child { font-size: 18px; }
}

/* Tablet landscape - intermediate breakpoint */
@media (max-width: 1024px) and (min-width: 861px) {
  .app-main { padding: 20px 16px 80px; }
  .data-table { min-width: 0; }
  .dthead, .drow { grid-template-columns: 2fr 1fr 1.5fr 1fr; }
}

/* ============ Price List (#/prices) ============ */
.pl-group { margin-bottom: 28px; }
.pl-brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink);
  margin: 0 2px 10px;
}
.pl-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.pl-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted);
  background: #efeff1; border-radius: 999px; padding: 2px 10px; letter-spacing: 0;
}
.pl-row {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 16px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
}
.pl-info { flex: 1 1 auto; min-width: 0; }
.pl-name { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.pl-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pl-stock {
  flex: 0 0 auto; font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; letter-spacing: 0.2px;
}
.st-available { background: rgba(52, 199, 89, 0.12); color: #1a9e43; }
.st-unavailable { background: rgba(255, 59, 48, 0.12); color: #d70015; }
.st-onorder { background: rgba(255, 159, 10, 0.16); color: #c26d00; }
.pl-price {
  flex: 0 0 auto; text-align: right; font-size: 16px; font-weight: 800;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pl-gbp { display: block; font-size: 12px; font-weight: 500; color: var(--faint); margin-top: 1px; }

@media (max-width: 560px) {
  .pl-row { flex-wrap: wrap; padding: 11px 13px; }
  .pl-info { flex: 1 1 100%; }
  .pl-price { font-size: 15px; }
}

/* ==== counter-flow v1 (quote/invoice forms) ==== */
.item-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
}
.item-main { min-width: 0; }
.item-name { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.item-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.item-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--card); flex: 0 0 auto;
}
.step-btn {
  width: 44px; height: 44px; font-size: 20px; font-weight: 700;
  background: transparent; border: none; color: var(--text);
  cursor: pointer; touch-action: manipulation; line-height: 1;
}
.step-btn:active { background: #e8e8ea; }
.step-val {
  min-width: 40px; text-align: center; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.price-field {
  display: flex; align-items: center; gap: 2px; flex: 1 1 150px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  padding: 0 6px 0 12px; height: 44px;
}
.pf-prefix { font-size: 13px; font-weight: 600; color: var(--muted); }
.price-field .item-price {
  border: none; background: transparent; height: 42px; font-size: 15px;
  font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 6px;
}
.item-line-amt {
  font-size: 14px; font-weight: 800; color: var(--gold-dark);
  white-space: nowrap; font-variant-numeric: tabular-nums; margin-left: auto;
}
.item-remove {
  width: 40px; height: 40px; border-radius: 10px; border: none;
  background: #fbecea; color: #d70015; font-size: 15px; cursor: pointer;
  flex: 0 0 auto;
}
.addr-toggle {
  display: inline-flex; align-items: center; min-height: 44px; background: none; border: none; color: var(--gold-dark);
  font-size: 13px; font-weight: 700; padding: 12px 0; cursor: pointer;
}
.addr-box { display: none; }
.addr-box.open { display: block; }
.status-card { margin-bottom: 12px; }
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--card); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.sb-totals { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sb-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted);
}
.sb-row span:last-child { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sb-total { font-size: 16px; }
.sb-total span:last-child { color: var(--gold-dark); font-size: 19px; font-weight: 800; }
.sb-input {
  width: 110px; height: 38px; padding: 0 10px; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sb-actions { display: flex; gap: 8px; }
.sb-actions .btn { flex: 1 1 auto; }
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sb-btn .icon { width: 20px; height: 20px; }
.sb-btn .pt-txt { display: inline; }
.sb-share, .sb-dl { flex: 0 0 auto; width: 52px; font-size: 18px; }
.sb-share .icon, .sb-dl .icon { width: 22px; height: 22px; }

/* While html2pdf captures the doc clone, hide the app UI (the clone sits at
   z-index:-1, visible only to the canvas renderer). */
body.pdf-generating .app-header,
body.pdf-generating .tab-bar,
body.pdf-generating .app-main,
body.pdf-generating .toast { visibility: hidden; }
.ta-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; text-align: left; background: var(--card);
  border: 1px solid var(--border); border-bottom: none; cursor: pointer;
}
.ta-item:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 12px 12px; }
.ta-item:first-child { border-radius: 12px 12px 0 0; }
.ta-item:active { background: #f0f0f2; }
.ta-main { flex: 1 1 auto; min-width: 0; }
.ta-name { font-size: 13.5px; font-weight: 700; }
.ta-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.ta-price { font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pdf-holder { width: 794px; background: #fff; }

/* ============================================================
   Part action buttons (compact Q / I / E / De — parts rows)
   ============================================================ */
.part-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pa-btn .icon { width: 20px; height: 20px; }
.pa-btn:active { transform: scale(0.94); }
.pa-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Q — add to quote (gold) */
.pa-q { background: #D4A843; color: #1a1a1a; }
.pa-q:hover { background: #b98f2e; color: #fff; }

/* I — add to invoice (green) */
.pa-i { background: #1a7f37; color: #fff; }
.pa-i:hover { background: #14652d; }

/* E — edit (neutral ghost) */
.pa-e { background: #fff; border-color: rgba(0, 0, 0, 0.18); color: #000; }
.pa-e:hover { background: #f0f0f2; }

/* De — delete (red ghost) */
.pa-d { background: #fff; border-color: rgba(217, 48, 37, 0.45); color: #d93025; }
.pa-d:hover { background: rgba(217, 48, 37, 0.08); }

/* ============================================================
   Quote / invoice list — PDF button cell (6th column)
   ============================================================ */
/* Compact PDF button on desktop (overrides polish.css .btn-sm 44px tap target) */
.doc-row .row-pdf {
  width: 100%;
  min-height: 40px;
  padding: 5px 8px;
  font-size: 11.5px;
}

/* ============================================================
   In-page print view (#/print/quote|invoice/:id)
   ============================================================ */
.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  padding: 10px 16px;
  margin-bottom: 18px;
}
.pt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pt-btn .icon { width: 20px; height: 20px; }
.pt-btn .pt-txt { display: inline; }
.pt-back { display: inline-flex; align-items: center; gap: 6px; }
.pt-back .icon { width: 20px; height: 20px; }
.print-doc {
  max-width: 210mm;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 4px;
  min-height: 297mm;
}

/* ============================================================
   Customer typeahead (quote / invoice forms)
   ============================================================ */
.cust-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  z-index: 45;
  max-height: 240px;
  overflow-y: auto;
}
.cust-item { display: flex; align-items: center; gap: 10px; }
.cust-item:hover { background: #f5f5f7; }
.ta-go {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--gold-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   Print rules (in-page print view)
   ============================================================ */
@media print {
  .app-header, .tab-bar, .print-toolbar { display: none !important; }
  .print-page { padding: 0; }
  .print-doc {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* ============================================================
   Small phones / touch (≤560px)
   ============================================================ */
@media (max-width: 560px) {
  /* part action buttons grow to 40×40 tap targets */
  .pa-btn { min-width: 40px; min-height: 40px; font-size: 12px; border-radius: 10px; }

  /* quote/invoice rows: PDF button on its own full-width row */
  .doc-row .c-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .doc-row .c-actions::before { display: none; }
  .doc-row .row-pdf { min-height: 44px; }

  /* print toolbar stacks; action buttons fill the row */
  .print-toolbar { padding: 10px 12px; }
  .pt-actions { width: 100%; }
  .pt-actions .btn { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; }

  /* keep the last card clear of the fixed sticky-bar */
  .app-main:has(.sticky-bar) { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}


/* ===== Scoped print-doc styles for PDF capture (from print.css) ===== */
.pdf-holder /* ============================================================
   Euro Shed Parts — Print documents (quotes & invoices)
   Loaded in the print window. Renders a clean A4 document.
   ============================================================ */



*{ box-sizing: border-box; margin: 0; padding: 0; }.pdf-holder html{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }.pdf-holder .doc{ max-width: none; margin: 0; min-height: 1082px; display: flex; flex-direction: column; }.pdf-holder .doc.doc-compact .doc-items td{ padding: 6px 6px; font-size: 12.5px; }.pdf-holder .doc.doc-compact .doc-items td.item-name-cell{ font-size: 12.5px; }.pdf-holder .doc.doc-compact .item-meta{ font-size: 10px; margin-top: 1px; }.pdf-holder .doc.doc-compact .doc-totals{ margin-top: 10px; }.pdf-holder .doc.doc-compact .doc-sign{ margin-top: 14px; }.pdf-holder .doc.doc-compact .doc-footer{ padding-top: 8px; }.pdf-holder .doc.doc-compact .doc-brand-logos{ margin-top: 6px; padding-top: 4px; gap: 4px; }.pdf-holder .doc-body{ flex: 1 1 auto; display: flex; flex-direction: column; }.pdf-holder .doc-body .doc-items{ flex: 1 1 auto; }.pdf-holder /* ---------- Header ---------- */
.doc-header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}.pdf-holder .doc-brand{ display: flex; align-items: center; gap: 14px; }.pdf-holder .doc-logo-text{ font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }.pdf-holder .doc-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }.pdf-holder .doc-logo{
  width: 72px; height: 72px; flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
.pdf-holder .doc-shop{ font-size: 21px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.1; white-space: nowrap; }.pdf-holder .doc-sub{ font-size: 12.5px; color: var(--muted); }.pdf-holder .doc-title-box{ text-align: right; }.pdf-holder .doc-kind{
  font-size: 13px; font-weight: 800; letter-spacing: 3px; color: var(--gold-dark);
}.pdf-holder .doc-number{ font-size: 18px; font-weight: 700; margin-top: 2px; white-space: nowrap; }.pdf-holder .doc-line{ font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.doc-contact{
  margin-top: 14px;
  font-size: 12.5px;
  color: #333;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 8px 12px;
  background: #fafafa;
}.pdf-holder .gold-divider{
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin: 16px 0 20px;
}.pdf-holder /* ---------- Bill to ---------- */
.doc-billto{ margin-bottom: 16px; }.pdf-holder .doc-billto-label{
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted);
  margin-bottom: 4px;
}.pdf-holder .doc-cust{ font-size: 13.5px; }.pdf-holder /* ---------- Items table ---------- */
.doc-items{ width: 100%; border-collapse: collapse; }.pdf-holder .doc-items thead{ display: table-header-group; }.pdf-holder .doc-items th{
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--muted); text-transform: uppercase;
  border-bottom: 1.5px solid var(--ink);
  padding: 10px 8px; text-align: left;
  white-space: nowrap;
}.pdf-holder .doc-items th.num, .doc-items td.num{ text-align: right; }.pdf-holder .doc-items th.qty, .doc-items td.qty{ text-align: center; }.pdf-holder .doc-items th.desc{ text-align: center; }.pdf-holder .doc-items td{
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}.pdf-holder .doc-items tbody tr{ page-break-inside: avoid; }.pdf-holder .doc-items td.item-name-cell{ font-weight: 600; text-align: center; }.pdf-holder .item-name{ font-weight: 600; font-size: 13.5px; }.pdf-holder .doc-items .item-meta{
  font-size: 11px; font-weight: 400; color: var(--muted);
  margin-top: 2px;
}.pdf-holder .doc-items tbody tr:last-child td{ border-bottom: none; }.pdf-holder /* ---------- Totals ---------- */
.doc-totals{
  margin-top: 16px; margin-left: auto; width: 320px; max-width: 100%;
}.pdf-holder .doc-totals .t-row{
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 13px; color: #333;
  font-variant-numeric: tabular-nums;
}.pdf-holder .doc-totals .t-row.t-total{
  border-top: 1.5px solid var(--ink); margin-top: 6px; padding-top: 8px;
  font-weight: 800; font-size: 15px; color: var(--ink);
}.pdf-holder .doc-totals .t-row.t-total span:last-child{ color: var(--gold-dark); }.pdf-holder /* ---------- Signature ---------- */
.doc-sign{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 28px;
  page-break-inside: avoid;
}
.pdf-holder .sig-date-line{ font-size: 11px; color: var(--muted); letter-spacing: 0.4px; }.pdf-holder .sig-row{ display: flex; justify-content: flex-end; gap: 40px; }.pdf-holder .sig-box{ flex: 1; max-width: 260px; }.pdf-holder .sig-line{ border-bottom: 1px solid #333; height: 30px; width: 190px; max-width: 190px; }.pdf-holder .sig-label{ font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.4px; }.pdf-holder /* ---------- Footer ---------- */
.doc-footer{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }.pdf-holder .gold-rule{ height: 2px; background: var(--gold); border-radius: 2px; margin-bottom: 12px; flex-basis: 100%; }.pdf-holder .doc-foot-item{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }.pdf-holder .doc-foot-item svg{ flex: 0 0 auto; }.pdf-holder .doc-foot-contact{ flex: 1 1 auto; text-align: center; font-size: 11px; color: var(--muted); font-weight: 400; }.pdf-holder .doc-footer .doc-brand-logos{ flex-basis: 100%; }.pdf-holder .doc .doc-sign{ margin-top: 28px; }.pdf-holder .doc .doc-footer{ padding-top: 20px; }.pdf-holder /* ---------- Print rules ---------- */


  .doc-items td{ padding: 10px 8px; }.pdf-holder .doc-footer{ margin-top: auto; padding-top: 20px; }.pdf-holder .doc-sign{ margin-top: 28px; }
.pdf-holder /* ============================================================
   Price list document (#/prices → Print Price List)
   ============================================================ */

.doc-note{
  margin: 10px 0 16px;
  font-size: 11.5px;
  color: #555;
}.pdf-holder .pl-group{ margin-bottom: 20px; page-break-inside: avoid; }.pdf-holder .pl-brand{
  font-size: 12.5px; font-weight: 800; letter-spacing: 2px;
  color: #000;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px; margin-bottom: 6px;
}.pdf-holder .pl-head, .pl-row{
  display: grid;
  grid-template-columns: 2.2fr 1.4fr 1.6fr 1.2fr;
  gap: 10px; align-items: baseline;
}.pdf-holder .pl-head{
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
  color: var(--muted); text-transform: uppercase;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}.pdf-holder .pl-row{
  padding: 5px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  page-break-inside: avoid;
}.pdf-holder .pl-row .pl-name{ font-weight: 700; font-size: 12.5px; }.pdf-holder .pl-row .pl-meta{ color: #444; font-size: 11.5px; }.pdf-holder .pl-row .pl-price{
  text-align: right; font-weight: 800; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}.pdf-holder .doc-foot{
  margin-top: 18px;
  font-size: 11px; color: #666;
  text-align: center;
  letter-spacing: 0.4px;
}


/* ===== A4 page size for in-page printing ===== */
@page { size: A4; margin: 12mm 10mm; }

/* ===== Print doc IN-PAGE view (#print-doc): mirror the scoped .pdf-holder rules ===== */
.print-doc{ font-family: var(--font); color: var(--ink); font-size: 13px; line-height: 1.5; }
.print-doc .doc{ display: flex; flex-direction: column; min-height: calc(273mm - 32px); }
.print-doc .doc-body{ flex: 1 1 auto; display: flex; flex-direction: column; }
.print-doc .doc-body .doc-items{ flex: 1 1 auto; }
.print-doc .doc-brand{ display: flex; align-items: center; gap: 14px; }
.print-doc .doc-logo-text{ font-size: 24px; font-weight: 800; letter-spacing: -0.4px; color: var(--ink); }
.print-doc .doc-logo-img{ width: 64px; height: 64px; flex: 0 0 auto; object-fit: contain; border-radius: 10px; }
.print-doc .doc-logo-circle{
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 12px; background: #111; color: var(--gold);
  display: grid; place-items: center; font-weight: 700; font-size: 30px;
  border: 1px solid rgba(212, 168, 67, 0.45);
}
.print-doc .doc-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.print-doc .doc-shop{ font-size: 21px; font-weight: 800; letter-spacing: 1.5px; line-height: 1.1; white-space: nowrap; }
.print-doc .doc-title-box{ text-align: right; }
.print-doc .doc-kind{ font-size: 13px; font-weight: 700; letter-spacing: 3px; color: var(--gold); }
.print-doc .doc-number{ font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.print-doc .doc-line{ font-size: 12px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.print-doc .doc-items th{ border-bottom: 2px solid var(--border); padding: 10px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }
.print-doc .doc-items th.num, .print-doc .doc-items td.num{ text-align: right; }
.print-doc .doc-items th.qty, .print-doc .doc-items td.qty{ text-align: center; }
.print-doc .doc-items th.desc{ text-align: center; }
.print-doc .doc-items td{ border-bottom: 1px solid var(--border); padding: 12px 8px; font-size: 12px; vertical-align: top; }
.print-doc .doc-items td.item-name-cell{ font-weight: 600; text-align: center; }
.print-doc .item-name{ font-weight: 600; font-size: 12px; }
.print-doc .doc-items .item-meta{ font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.print-doc .sig-box{ flex: 1; max-width: 260px; }
.print-doc .sig-line{ border-bottom: 1px solid #333; height: 30px; width: 190px; max-width: 190px; }
.print-doc .sig-label{ font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.4px; }
.print-doc .gold-rule{ height: 2px; background: var(--gold); border-radius: 2px; margin-bottom: 12px; flex-basis: 100%; }
.print-doc .doc-foot-item{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.print-doc .doc-foot-item svg{ flex: 0 0 auto; }
.print-doc .doc-foot-contact{ flex: 1 1 auto; text-align: center; font-size: 11px; color: var(--muted); font-weight: 400; }

/* Brand logos row in footer */
.print-doc .doc-brand-logos,
.pdf-holder .doc-brand-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  flex-basis: 100%;
}
.print-doc .doc-brand-logos img,
.pdf-holder .doc-brand-logos img {
  height: 24px;
  width: auto;
  max-width: 55px;
  object-fit: contain;
  opacity: 0.85;
}
.print-doc .doc-footer { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.print-doc .doc .doc-sign { margin-top: 28px; }
.print-doc .doc .doc-footer { padding-top: 20px; }
.print-doc .sig-date-line { font-size: 11px; color: var(--muted); letter-spacing: 0.4px; }
.print-doc .sig-row { display: flex; justify-content: flex-end; gap: 40px; }
.print-doc .doc.doc-compact .doc-brand-logos { margin-top: 6px; padding-top: 4px; gap: 4px; }

/* Status select styling */
.status-select {
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

/* Brand logo in doc header (SVG) */
.doc-logo-img {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
/* Fallback circle badge (black square + gold 'C') when no logo image is set */
.doc-logo-circle {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #111;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 30px;
  border: 1px solid rgba(212, 168, 67, 0.45);
}

/* ============ Status selection (2026-08) ============ */
/* Segmented status control in quote/invoice forms: each button carries a
   colored dot; the active button is filled with its status color. */
.status-seg .seg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; flex: 1 1 auto;
}
.status-seg .seg-btn::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #9a9aa2; flex: none;
}
.status-seg .seg-btn.status-draft::before { background: #6b6b76; }
.status-seg .seg-btn.status-sent::before,
.status-seg .seg-btn.status-pending::before { background: #007aff; }
.status-seg .seg-btn.status-accepted::before,
.status-seg .seg-btn.status-paid::before { background: #34c759; }
.status-seg .seg-btn.status-rejected::before,
.status-seg .seg-btn.status-cancelled::before { background: #ff3b30; }
.status-seg .seg-btn.active { color: #fff; }
.status-seg .seg-btn.active.status-draft { background: #6b6b76; }
.status-seg .seg-btn.active.status-sent,
.status-seg .seg-btn.active.status-pending { background: #007aff; }
.status-seg .seg-btn.active.status-accepted,
.status-seg .seg-btn.active.status-paid { background: #34c759; }
.status-seg .seg-btn.active.status-rejected,
.status-seg .seg-btn.active.status-cancelled { background: #ff3b30; }
.status-seg .seg-btn.active::before { background: rgba(255, 255, 255, 0.92); }

/* Status pill + popover menu in quote/invoice list rows. */
.status-wrap { position: relative; display: inline-block; }
.status-pill { border: 0; font-family: inherit; cursor: pointer; padding: 5px 12px; min-height: 28px; }
.status-pill:active { opacity: 0.7; }
.status-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  background: #fff; border: 1px solid #e6e6ea; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14); padding: 4px; min-width: 136px;
}
.status-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; padding: 10px 12px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #1a1a1a; text-align: left; cursor: pointer;
}
.status-menu button:active { background: #f2f2f5; }
.status-menu button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #9a9aa2; flex: none;
}
.status-menu button.m-draft::before { background: #6b6b76; }
.status-menu button.m-sent::before,
.status-menu button.m-pending::before { background: #007aff; }
.status-menu button.m-accepted::before,
.status-menu button.m-paid::before { background: #34c759; }
.status-menu button.m-rejected::before,
.status-menu button.m-cancelled::before { background: #ff3b30; }
.status-menu button.m-cur { background: #f2f2f5; }


/* ===== Row selection (per-list-type colors) ===== */
.row-sel-label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; }
.row-sel { position: absolute; opacity: 0; pointer-events: none; }
.row-sel-box { width: 20px; height: 20px; border: 2px solid #c9c9cf; border-radius: 6px; display: inline-block; position: relative; transition: all .12s ease; background: #fff; }
.row-sel:checked + .row-sel-box { background: #D4A843; border-color: #D4A843; }
.row-sel:checked + .row-sel-box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #1a1a1a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.doc-row.sel { box-shadow: 0 0 0 2px var(--gold, #D4A843), 0 10px 26px rgba(0,0,0,.08); }
/* quotes = gold tint */
.doc-row.sel.sel-quotes { background: #fbf4e1; }
/* invoices = blue tint */
.doc-row.sel.sel-invoices { background: #e8f1ff; }
/* deliveries = green tint */
.doc-row.sel.sel-deliveries { background: #e9f7ec; }

/* ============================================================
   DE-CIRCLE DOC HEADER LOGO + MOBILE ACTIONS GUARD (2026-08-11)
   Appended, scoped. Flatten the rounded fallback doc-header badge to
   a small rect in all render paths (html2pdf holder + in-app preview).
   ============================================================ */
.pdf-holder .doc-logo-circle,
.print-doc .doc-logo-circle,
.doc-logo-circle {
  border-radius: 4px;
}


/* (FIX) PDF footer: official logo LEFT, contact number RIGHT */
.pdf-holder .doc-foot-logo { flex: 0 0 auto; }
.pdf-holder .doc-foot-logo-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,.12); }
.pdf-holder .doc-foot-item.doc-foot-contact { margin-left: auto; text-align: right; justify-content: flex-end; }