/* American Logowear Sales — tablet-first (landscape) CRM PWA.
   ALW brand palette pulled from the accounting app's stars-&-stripes login:
   flag navy #16294d, flag red #a8232f, cream #f4f2ee, plus the house
   material-blue accent #1683e2. Every tap target is ≥48px. */

:root {
  --bg: #f4f2ee;               /* cream field */
  --card: #ffffff;
  --ink: #2b3138;
  --muted: #7a828a;
  --line: #e2dfd8;
  --line-strong: #cfd5db;

  --navy: #16294d;             /* flag canton */
  --navy-soft: #223a68;
  --red: #a8232f;              /* flag stripe */
  --red-bg: #fdecea;
  --accent: #1683e2;           /* house material blue */
  --accent-hover: #1276cf;
  --accent-tint: rgba(22, 131, 226, .10);
  --green: #2e9e5b;  --green-bg: #e7f7ee;
  --gold: #ffcc00;   --gold-ink: #3a2d00;

  --shadow: 0 1px 2px rgba(20, 40, 80, .06);
  --radius: 10px;
  --topbar-h: 60px;
  --rail-w: 96px;
  --touch: 48px;               /* minimum touch target */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding: calc(var(--topbar-h) + 16px) 16px 24px calc(var(--rail-w) + 16px);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 16px; margin: 0 0 12px; }
h2 .muted { font-weight: 400; }
.muted { color: var(--muted); font-size: 13px; }
.prewrap { white-space: pre-wrap; }
code { background: var(--accent-tint); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 12px 0 0;
  background: var(--navy); color: #fff; z-index: 60;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.topbar-brand {
  height: var(--topbar-h); width: var(--rail-w); min-width: var(--rail-w);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-bottom: 3px solid var(--red);
}
.topbar-brand img { height: 40px; width: auto; }
.topbar-title { font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.topbar-cta {
  margin-left: auto; display: inline-flex; align-items: center; min-height: var(--touch);
  padding: 0 20px; border-radius: 8px; background: var(--red); color: #fff;
  font-weight: 700; font-size: 15px;
}
.topbar-cta:hover { background: #921e29; text-decoration: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.tb-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .22);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
}
.tb-logout-form { margin: 0; }
.tb-logout {
  background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  border-radius: 8px; min-height: var(--touch); padding: 0 16px; font: inherit;
  font-size: 14px; cursor: pointer;
}
.tb-logout:hover { background: rgba(255, 255, 255, .12); }

/* ── Left rail (landscape tablet) ────────────────────────────────────── */
.siderail {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--rail-w);
  background: #fff; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding-top: 8px; z-index: 50;
}
.rail-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 72px; color: #4a5157; font-size: 12px; font-weight: 600;
  border-left: 4px solid transparent; padding: 6px 4px;
}
.rail-link:hover { background: #f4f7fa; text-decoration: none; }
.rail-link.active { color: var(--red); border-left-color: var(--red); background: #fdf5f5; }
.rail-link .ico { color: currentColor; }

/* ── Flash messages ──────────────────────────────────────────────────── */
.flash {
  margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius);
  font-weight: 600; box-shadow: var(--shadow);
}
.flash-success { background: var(--green-bg); color: var(--green); }
.flash-error { background: var(--red-bg); color: var(--red); }

/* ── Layout ──────────────────────────────────────────────────────────── */
.wrap { max-width: 1280px; margin: 0 auto; }
.wrap-narrow { max-width: 860px; }
.pagehead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 2px 0 16px; flex-wrap: wrap;
}
.pagehead-actions { display: flex; gap: 10px; align-items: center; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.err-card { max-width: 560px; margin: 40px auto; text-align: center; }

/* ── Buttons & inputs (48px+ touch) ──────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 18px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: #f4f7fa; text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-quiet { border-color: transparent; color: var(--muted); }
.btn-big { font-size: 17px; min-height: 56px; padding: 0 26px; }
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 8px;
  min-height: var(--touch); padding: 10px 12px; width: 100%;
}
textarea { line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
label { display: block; font-size: 13.5px; font-weight: 600; }
label input, label select, label textarea { margin-top: 5px; font-weight: 400; }
.check-label { display: flex; align-items: center; gap: 10px; min-height: var(--touch); }
.check-label input { width: 24px; height: 24px; min-height: 0; }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.formgrid .span2 { grid-column: 1 / -1; }
.two-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formactions { margin-top: 6px; }
.formerr { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 12px 14px; font-weight: 600; }

/* ── Segmented mine/all toggle ───────────────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg-btn {
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding: 0 20px; color: var(--ink); font-weight: 600; background: #fff;
}
.seg-btn:hover { text-decoration: none; background: #f4f7fa; }
.seg-btn.on { background: var(--navy); color: #fff; }

/* ── Dashboard status cards ──────────────────────────────────────────── */
.status-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.status-card {
  display: flex; flex-direction: column; gap: 2px; min-height: 76px;
  border: 1px solid var(--line); border-left: 5px solid var(--muted);
  border-radius: 8px; padding: 10px 12px; color: var(--ink); background: #fff;
}
.status-card:hover { text-decoration: none; box-shadow: var(--shadow); border-color: var(--line-strong); }
.sc-count { font-size: 24px; font-weight: 800; line-height: 1.1; }
.sc-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* Pipeline colors — shared by status cards, pills, and the status select. */
[data-status="new_prospect"]      { border-left-color: #8a939b; }
[data-status="first_visit"]       { border-left-color: #1592a6; }
[data-status="interested"]        { border-left-color: var(--accent); }
[data-status="mockup_created"]    { border-left-color: #5e5ce6; }
[data-status="quote_sent"]        { border-left-color: #c2680a; }
[data-status="follow_up"]         { border-left-color: var(--gold); }
[data-status="negotiating"]       { border-left-color: #b0851f; }
[data-status="awaiting_approval"] { border-left-color: #7e3ff2; }
[data-status="won"]               { border-left-color: var(--green); }
[data-status="lost"]              { border-left-color: var(--red); }
[data-status="reorder"]           { border-left-color: var(--navy); }

/* ── Pills ───────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--accent-tint); color: var(--ink);
  border-left-width: 5px; border-left-style: solid; border-left-color: transparent;
}
.pill-type { background: var(--accent-tint); color: var(--accent); border-left: 0; text-transform: capitalize; }
.pill-red { background: var(--red-bg); color: var(--red); border-left: 0; }
.pill-gold { background: #fff6d6; color: var(--gold-ink); border-left: 0; }

/* ── Lists (activity, follow-ups, users…) ────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 2px; border-top: 1px solid var(--line);
}
.list-item:first-child { border-top: 0; }
.list-item.overdue { background: #fffafa; }
.list-item.inactive .li-main { opacity: .55; }
.li-main { min-width: 0; }
.li-note { margin: 2px 0; }
.list-item form { margin: 0; flex: 0 0 auto; }
.bullets { margin: 8px 0; padding-left: 22px; }
.bullets li { margin: 6px 0; }

/* ── Leads list ──────────────────────────────────────────────────────── */
.filterbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filterbar .fb-search { flex: 2 1 260px; }
.filterbar select { flex: 1 1 170px; width: auto; }
.filterbar .btn { flex: 0 0 auto; }
.lead-list { padding: 4px 0; }
.lead-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 64px; padding: 10px 18px; color: var(--ink);
  border-top: 1px solid var(--line);
}
.lead-row:first-child { border-top: 0; }
.lead-row:hover { background: #f7f9fb; text-decoration: none; }
.lr-main { min-width: 0; }
.lr-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.lr-value { font-weight: 700; }

/* ── Lead profile ────────────────────────────────────────────────────── */
.lead-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px;
}
.lead-facts > div { display: flex; flex-direction: column; gap: 2px; }
.lead-notes p { margin: 0; }
.status-form { margin: 0; }
.status-select {
  width: auto; font-weight: 700; border-left-width: 6px; border-left-style: solid;
}
.quicknote { margin-bottom: 14px; display: grid; gap: 10px; }
.qn-types { display: flex; gap: 8px; flex-wrap: wrap; }
.qn-type { position: relative; }
.qn-type input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; }
.qn-type span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 600; background: #fff;
}
.qn-type input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.followup-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.followup-form input[type="datetime-local"] { flex: 0 1 230px; width: auto; }
.followup-form input[type="text"] { flex: 1 1 200px; width: auto; }
.addbox summary {
  cursor: pointer; min-height: var(--touch); display: flex; align-items: center;
  color: var(--accent); font-weight: 700;
}
.addbox[open] summary { margin-bottom: 10px; }

/* ── Voice note (webkitSpeechRecognition enhancement) ────────────────── */
.voice-wrap { position: relative; }
.voice-btn {
  position: absolute; right: 8px; bottom: 8px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: #fff;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.voice-btn.listening { background: var(--red); border-color: var(--red); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(168, 35, 47, .18); } }
.voice-wrap textarea { padding-right: 60px; }

/* ── Dupe warning on the lead form ───────────────────────────────────── */
.dupe-warning {
  background: #fff6d6; border: 1px solid #e7cc57; border-radius: 8px;
  padding: 12px 14px; font-size: 14px;
}
.dupe-warning strong { color: var(--gold-ink); }
.dupe-warning ul { margin: 6px 0 0; padding-left: 20px; }

/* ── Login (flag-ribbon card on navy, matching the accounting app) ───── */
.auth {
  display: flex; min-height: 100vh; align-items: center; justify-content: center;
  padding: 20px; margin: calc(-1 * (var(--topbar-h) + 16px)) -16px -24px calc(-1 * (var(--rail-w) + 16px));
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .07), transparent 60%),
    var(--navy);
}
.auth-card {
  width: min(420px, calc(100vw - 32px)); padding: 0 0 30px; text-align: center; background: #fff;
  border: 1px solid rgba(15, 25, 50, .25); border-radius: 8px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(5, 10, 25, .5), 0 3px 14px rgba(5, 10, 25, .35);
}
.ribbon { height: 7px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ribbon i:nth-child(1) { background: var(--navy); }
.ribbon i:nth-child(2) { background: var(--bg); border-top: 1px solid #e2e2df; border-bottom: 1px solid #e2e2df; }
.ribbon i:nth-child(3) { background: var(--red); }
.auth-card .inner { padding: 30px 36px 0; }
.auth-card .authlogo { height: 88px; margin: 4px auto 6px; display: block; max-width: 100%; object-fit: contain; }
.auth-card .place { color: var(--muted); font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 20px; }
.auth-card .place b { color: var(--red); font-weight: 600; }
.auth-card .placesub { margin-top: -14px; }
.auth-card label { text-align: left; margin: 12px 0 0; }
.auth-card .btn { width: 100%; margin-top: 20px; font-size: 16px; font-weight: 700; }
.auth-foot {
  margin-top: 16px; color: rgba(244, 242, 238, .85); font-size: 12.5px; text-align: center;
  text-shadow: 0 1px 4px rgba(5, 10, 25, .6);
}

/* ── Catalog browse ──────────────────────────────────────────────────── */
.cat-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff;
  color: var(--ink); font-weight: 600; font-size: 14px;
}
.cat-chip:hover { background: #f4f7fa; text-decoration: none; }
.cat-chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cat-chip .cc-count { color: var(--muted); font-size: 12px; font-weight: 600; }
.cat-chip.on .cc-count { color: rgba(255, 255, 255, .7); }
.cat-sep { color: var(--muted); font-weight: 700; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.prod-card {
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--ink);
}
.prod-card:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: 0 2px 8px rgba(20, 40, 80, .12); }
.pc-img { display: flex; align-items: center; justify-content: center; height: 170px; border-radius: 6px; overflow: hidden; background: #fff; }
.pc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pc-noimg { color: var(--muted); font-size: 13px; }
.pc-name { font-weight: 700; line-height: 1.3; }
.pc-price { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-weight: 700; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0; }

/* ── Product detail ──────────────────────────────────────────────────── */
.prod-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: start; }
.prod-imgbox {
  display: flex; align-items: center; justify-content: center; min-height: 320px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-bottom: 12px;
}
.prod-imgbox img { max-width: 100%; max-height: 440px; object-fit: contain; }
.prod-side { margin-bottom: 14px; }
.prod-side .seg-btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.prod-side .seg-btn:disabled { opacity: .4; cursor: default; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px; min-height: var(--touch); padding: 6px 4px;
  border: 2px solid var(--line); border-radius: 8px; background: #fff;
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.swatch img { width: 56px; height: 56px; object-fit: contain; }
.swatch .sw-name { line-height: 1.15; text-align: center; color: var(--muted); }
.swatch.on { border-color: var(--accent); }
.swatch.on .sw-name { color: var(--accent); font-weight: 700; }
.size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font-weight: 700;
}
.tablewrap { overflow-x: auto; }
.tier-table { width: 100%; border-collapse: collapse; }
.tier-table th, .tier-table td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); }
.tier-table thead th { border-top: 0; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.cost-block { border-left: 5px solid var(--gold); }

/* ── Admin settings (margin form) ────────────────────────────────────── */
.margin-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.margin-form label { flex: 0 1 280px; }
.margin-form .btn { flex: 0 0 auto; }

/* ── Project design + artwork (W2A) ──────────────────────────────────── */
.proj-design { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.proj-preview {
  display: flex; align-items: center; justify-content: center; min-height: 180px;
  background:
    repeating-conic-gradient(#f0eee9 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px; /* checker = transparency */
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.proj-preview img { max-width: 100%; max-height: 260px; object-fit: contain; }
.proj-design-side p { margin: 0 0 8px; }
.proj-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Quality grade badges — honest labels from real pixel dimensions. */
.grade-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.grade-production { background: var(--green-bg); color: var(--green); }
.grade-review     { background: #fff6d6; color: var(--gold-ink); }
.grade-mockup     { background: var(--red-bg); color: var(--red); }

/* Capture editor */
.aw-sources { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.aw-drop {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 22px 14px; text-align: center; font-weight: 600; color: var(--ink);
}
.aw-drop.over { border-color: var(--accent); background: var(--accent-tint); }
.aw-noscript { margin-top: 12px; display: grid; gap: 10px; }
#aw-editor { margin-top: 14px; }
.aw-stagewrap { display: flex; gap: 12px; align-items: flex-start; }
.aw-stage {
  position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: repeating-conic-gradient(#f0eee9 0% 25%, #ffffff 0% 50%) 0 0 / 20px 20px;
  touch-action: pan-y; /* pointer-drag crop still gets horizontal gestures */
}
.aw-stage.cropping { cursor: crosshair; touch-action: none; }
.aw-stage canvas { max-width: 100%; }
.aw-cropbox {
  position: absolute; border: 2px dashed var(--accent);
  background: rgba(22, 131, 226, .12); pointer-events: none;
}
.aw-before { flex: 0 0 auto; text-align: center; }
.aw-before canvas {
  display: block; border: 1px solid var(--line); border-radius: 6px;
  background: repeating-conic-gradient(#f0eee9 0% 25%, #ffffff 0% 50%) 0 0 / 12px 12px;
}
.aw-meta { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.aw-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.aw-tools .btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.aw-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Artwork gallery */
.aw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.aw-gallery-compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.aw-item {
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
a.aw-item:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.aw-item.primary { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.aw-thumb {
  display: flex; align-items: center; justify-content: center; height: 120px;
  border-radius: 6px; overflow: hidden;
  background: repeating-conic-gradient(#f0eee9 0% 25%, #ffffff 0% 50%) 0 0 / 16px 16px;
}
.aw-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aw-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 80px; border: 2px solid var(--red); border-radius: 6px;
  color: var(--red); font-weight: 800; background: #fff;
}
.aw-item-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.aw-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px;
}
.aw-item-actions { display: flex; gap: 8px; margin-top: auto; }
.aw-item-actions form { margin: 0; }
.aw-legend { margin: 14px 0 0; }

/* ── W2B: quote builder ──────────────────────────────────────────────── */
.quote-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; align-items: start; }
.q-sentbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff6d6; border: 1px solid #e7cc57; border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; font-size: 14px;
}
.q-sentbar .btn { margin-left: auto; }
.q-addline { width: 100%; border-style: dashed; }
.qline-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.qline-thumb { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; flex: 0 0 auto; }
.qline-noimg { display: inline-block; width: 64px; height: 64px; border: 1px dashed var(--line-strong); border-radius: 8px; background: #fafafa; flex: 0 0 auto; }
.qline-title { min-width: 0; flex: 1; }
.q-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; max-height: 132px; overflow-y: auto; }
.q-swatches .swatch { width: 64px; padding: 4px 2px; }
.q-swatches .swatch img { width: 42px; height: 42px; }
.q-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.q-size { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; }
.q-size input { width: 68px; text-align: center; padding: 8px 6px; }
.q-mini { display: inline-flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.q-mini input { width: 110px; }
.q-qty input { width: 90px; text-align: center; }
.q-pricerow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; }
.q-stat { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.q-stat strong { font-size: 16px; }
.q-amount strong { color: var(--navy); font-size: 18px; }
.q-decos { display: grid; gap: 8px; margin-bottom: 10px; }
.q-deco {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 10px;
}
.q-deco select { width: auto; min-width: 150px; flex: 0 1 auto; }
.q-deco .q-mini input { width: 90px; }
.q-decoprice { align-self: center; margin-left: auto; }
.q-summary { position: sticky; top: calc(var(--topbar-h) + 16px); }
.q-rows { display: grid; gap: 8px; }
.q-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.q-inputrow input { width: 110px; text-align: right; }
.q-total { border-top: 2px solid var(--line-strong); padding-top: 10px; font-size: 17px; }
.q-total strong { font-size: 22px; color: var(--navy); }
.q-taxnote { margin: 0; }
.q-costbox { border-left: 5px solid var(--gold); background: #fffdf3; border-radius: 8px; padding: 8px 12px; display: grid; gap: 6px; }
.q-memo { margin-top: 4px; }
.q-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.q-actions .btn-primary { flex: 1; }
.q-emailform { margin-top: 12px; }

/* Modals (product picker + customer chooser) */
.modal-back {
  position: fixed; inset: 0; z-index: 100; background: rgba(15, 25, 50, .45);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
}
.modal {
  background: #fff; border-radius: var(--radius); box-shadow: 0 18px 60px rgba(5, 10, 25, .4);
  width: min(720px, 100%); max-height: calc(100vh - 80px); overflow-y: auto; padding: 18px 20px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.prod-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.prod-pick {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px;
  font: inherit; font-size: 13px; cursor: pointer; min-height: var(--touch);
}
.prod-pick:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.prod-pick img { width: 100%; height: 110px; object-fit: contain; }
.prod-pick .pp-name { font-weight: 700; line-height: 1.25; }
.prod-pick .pp-price { font-weight: 700; color: var(--navy); }
.cust-opt {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; cursor: pointer;
}
.cust-opt input { width: 22px; height: 22px; min-height: 0; margin-top: 3px; }

/* ── W2B: dashboard extras ───────────────────────────────────────────── */
.won-card { border-left: 5px solid var(--green); }
.won-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.won-stats > div { display: flex; flex-direction: column; gap: 2px; }
.won-stats .sc-count { color: var(--green); }

/* ── W2B: present & approve (full-screen customer view) ──────────────── */
.present { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.pr-top {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  background: var(--navy); color: #fff; border-bottom: 4px solid var(--red);
}
.pr-top img { height: 46px; background: #fff; border-radius: 6px; padding: 2px 6px; }
.pr-title { display: flex; flex-direction: column; line-height: 1.3; }
.pr-title strong { font-size: 18px; }
.pr-title span { color: rgba(255, 255, 255, .75); font-size: 13px; }
.pr-status {
  margin-left: auto; padding: 6px 16px; border-radius: 999px; font-weight: 800;
  background: rgba(255, 255, 255, .18); font-size: 14px;
}
.pr-status[data-state="Approved"] { background: var(--green); }
.pr-status[data-state="Declined"] { background: var(--red); }
.pr-exit { color: rgba(255, 255, 255, .6); font-size: 22px; padding: 8px 6px; }
.pr-exit:hover { color: #fff; text-decoration: none; }
.pr-main { width: min(860px, 100%); margin: 0 auto; padding: 22px 18px 40px; }
.pr-mockup {
  text-align: center; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.pr-mockup img { max-width: 100%; max-height: 340px; object-fit: contain; display: block; margin: 0 auto 6px; }
.pr-lines { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; margin-bottom: 16px; }
.pr-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.pr-line:first-child { border-top: 0; }
.pr-line img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; }
.pr-noimg { width: 62px; height: 62px; border: 1px dashed var(--line); border-radius: 8px; flex: 0 0 auto; }
.pr-line-main { flex: 1; min-width: 0; font-size: 16px; }
.pr-qty { font-weight: 800; font-size: 16px; white-space: nowrap; }
.pr-totals { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px; }
.pr-trow { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 16px; }
.pr-grand { font-size: 22px; font-weight: 800; color: var(--navy); border-top: 2px solid var(--line-strong); padding-top: 12px; }
.pr-dep { color: var(--muted); }
.pr-banner { border-radius: var(--radius); padding: 16px 20px; font-size: 18px; font-weight: 700; margin-bottom: 18px; text-align: center; }
.pr-banner-ok { background: var(--green-bg); color: var(--green); }
.pr-banner-bad { background: var(--red-bg); color: var(--red); }
.pr-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pr-approve {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  min-height: 68px; padding: 0 30px; border-radius: 12px; background: var(--green);
  color: #fff; font-size: 21px; font-weight: 800; box-shadow: var(--shadow);
}
.pr-approve:hover { background: #268a4e; text-decoration: none; }
.pr-refresh { min-height: 68px; }
.pr-fineprint { color: var(--muted); font-size: 13px; text-align: center; margin-top: 14px; }

/* ── Portrait tablet / phone: rail becomes a bottom tab bar ──────────── */
@media (max-width: 900px) {
  body { padding: calc(var(--topbar-h) + 12px) 12px calc(84px + env(safe-area-inset-bottom)) 12px; }
  .topbar-brand { width: auto; min-width: 0; padding: 0 12px; }
  .topbar-title { display: none; }
  .siderail {
    top: auto; bottom: 0; left: 0; right: 0; width: auto;
    flex-direction: row; border-right: 0; border-top: 1px solid var(--line);
    padding: 0 0 env(safe-area-inset-bottom); box-shadow: 0 -2px 8px rgba(20, 40, 80, .08);
  }
  .rail-link { flex: 1; min-height: 64px; border-left: 0; border-top: 4px solid transparent; }
  .rail-link.active { border-top-color: var(--red); }
  .two-col { grid-template-columns: 1fr; }
  .prod-layout { grid-template-columns: 1fr; }
  .quote-layout { grid-template-columns: 1fr; }
  .q-summary { position: static; }
  .proj-design { grid-template-columns: 1fr; }
  .formgrid { grid-template-columns: 1fr; }
  .formgrid .span2 { grid-column: auto; }
  .auth { margin: calc(-1 * (var(--topbar-h) + 12px)) -12px calc(-1 * (84px + env(safe-area-inset-bottom))) -12px; }
}