/* ───────────────────────────────────────────────────────────────────
 * desktop-modern.css — Hermès-flavor desktop design system
 *
 * Sibling of mobile-modern.css. Loaded AFTER each desktop page's
 * inline <style> block so cascade order makes us win on conflicts.
 * Pages that include us:
 *   public/index.html              — main SPA (order / quote / sales /
 *                                    customers / calendar tabs)
 *   public/customers.html          — Customer Master v2
 *   public/customer-rep-admin.html — Customer↔Rep override admin
 *
 * Density: ROOMY — max-width 1280px, larger headlines, more vertical
 * rhythm. Sales reps spend hours here; less eye fatigue beats
 * cramming more on screen.
 *
 * Color/type/shadow language matches mobile-modern.css so the brand
 * reads consistently across phone and laptop.
 *
 * What this file does NOT touch:
 *   - tier-badge styles (live in app-shared.css, stay loud)
 *   - branded loader (already a luxury moment)
 *   - JS-driven behavior — pure CSS.
 *   - print stylesheets (quote PDFs etc.) — those are inside scoped
 *     <style media="print"> rules that we don't override.
 * ─────────────────────────────────────────────────────────────────── */

/* ===== Refined design tokens ===== */
/* Override per-page :root tokens. Same palette as mobile so phone
   and desktop look like the same product. */
:root {
  --bg:           #fbfaf5;
  --surface:      #ffffff;
  --surface-2:    #f6f2e8;
  --surface-3:    #efeadb;

  --text:         #2a2521;
  --text-muted:   #6a655a;
  --text-faint:   #a09a8d;

  --accent:       #8e3650;   /* deep burgundy — the brand color */
  --accent-2:     #6c2a3d;
  --accent-3:     #4a1c2a;
  --accent-soft:  #f5e6ea;
  --accent-faint: #fbf3f5;

  --tan:          #c89b5e;
  --tan-soft:     #f5edde;

  --warn:         #c8941d;
  --warn-soft:    #fcf5e2;
  --success:      #588d5a;
  --success-soft: #e8f1e6;
  --danger:       #b03a3a;
  --danger-soft:  #f8eaea;

  --pending:      #b95c00;
  --pending-bg:   #fbecdb;
  --processed:    #588d5a;
  --processed-bg: #e8f1e6;
  --shipped:      #2c6ca0;
  --shipped-bg:   #dbe9f5;

  --divider:        rgba(20, 14, 6, 0.07);
  --divider-strong: rgba(20, 14, 6, 0.13);
  --border:         rgba(20, 14, 6, 0.10);   /* legacy compat */
  --border-strong:  rgba(20, 14, 6, 0.16);

  --shadow-1:     0 1px 2px rgba(31, 22, 14, 0.04),
                  0 2px 6px rgba(31, 22, 14, 0.04);
  --shadow-2:     0 2px 4px rgba(31, 22, 14, 0.05),
                  0 8px 20px rgba(31, 22, 14, 0.06);
  --shadow-3:     0 4px 16px rgba(31, 22, 14, 0.10);
  --shadow:       var(--shadow-1);            /* legacy compat */

  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  --font-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
}

/* ===== Page chrome ===== */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App container — bumped from 1040px → 1280px for the roomy feel.
   Lateral padding bumped too so content doesn't kiss the screen
   edges on 1366px-wide laptops. */
.app, .app-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px 96px;
}

/* Sticky header — translucent frosted, like mobile but with more
   horizontal room. Lower-key than the original solid bar. */
.header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 250, 245, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--divider);
  padding: 18px 0 0;
  margin-bottom: 32px;
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: var(--surface); }
}
.header-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
  gap: 16px;
}
.brand {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.brand-mark {
  width: 6px; height: 6px;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 50%;
}

/* ===== Header utility cluster (header-status row) =====
   Unified pill sizing across every utility item — admin badge, user
   email, mobile-version toggle, language picker, large-text toggle,
   sync, logout. Without this they were a mix of border-radius, height,
   font-size, and padding values that read as a messy ribbon. The shape
   below: 28-30px tall, 11px UPPERCASE TRACKED text, hairline border,
   subtle hover. */
.header-status {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.header-status > * { flex-shrink: 0; }

.admin-indicator {
  background: var(--accent-soft);
  color: var(--accent-2);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* User email — plain inline text, not a pill. Subtle, low-attention. */
.user-email, #user-email {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-right: 4px;
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lock-btn-small {
  background: transparent;
  border: 1px solid var(--divider-strong);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  min-height: 30px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lock-btn-small:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--surface-3);
}

/* .mobile-link inside the header — match the lock-btn-small pill shape
   so the row is visually uniform. (The class is reused for a few
   things, but in the header it acts as a utility pill.) */
.header-status .mobile-link,
.header-status select.mobile-link,
.mode-toggle-btn {
  background: transparent;
  border: 1px solid var(--divider-strong);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: inherit;
  min-height: 30px;
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.header-status .mobile-link:hover,
.header-status select.mobile-link:hover,
.mode-toggle-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-faint);
}
.mode-toggle-btn.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(142, 54, 80, 0.20);
}

/* ===== Mobile-version popover (collapsed by default) =====
   Native <details>/<summary> for zero-JS toggling. The 4 mobile-link
   pills used to live always-visible in the header — that pill cluster
   was the loudest source of "messy top section" feedback. Now they
   collapse behind a single 📱 モバイル pill that opens a small popover
   panel below. Outside-click closes it (handler in index.html). */
.header-menu {
  position: relative;
}
/* Hide the default disclosure triangle across browsers. Each engine
   has its own selector, hence the redundancy. */
.header-menu summary {
  list-style: none;
  cursor: pointer;
}
.header-menu summary::-webkit-details-marker { display: none; }
.header-menu summary::marker                 { display: none; }

/* Open state — burgundy fill so the trigger looks "engaged" while
   the panel is showing. */
.header-menu[open] > summary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(142, 54, 80, 0.20);
}

.header-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 6px;
  z-index: 30;
  display: flex; flex-direction: column;
  /* Subtle entry animation so the panel feels intentional, not jarring. */
  animation: hm-fade 0.16s ease-out;
}
@keyframes hm-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.header-menu-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  transition: background 0.12s;
}
.header-menu-panel a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .header-menu-panel { animation: none; }
}

/* ===== Tabs — refined underline ===== */
/* Switches from plain underline to a thicker burgundy mark that
   slides in on active. Inactive tabs are slightly muted; hover
   moves them up half a step. Desktop, so we can be a touch more
   ornamental. */
.tabs {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 0;
}
.tab {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 14px 22px 16px;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.15s, border-color 0.18s;
}
.tab:hover {
  color: var(--text);
}
.tab.active {
  color: var(--accent);
  font-weight: 500;
}
.tab.active::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px; bottom: -1px;
  height: 2.5px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(142, 54, 80, 0.30);
}
.tab.locked-tab::after { content: '🔒'; font-size: 9px; opacity: 0.6; margin-left: 2px; }
.tab.locked-tab.unlocked::after { content: ''; }

/* Tab badge — small numeric notification (e.g. "5 pending") next
   to a tab label. Pill-shaped, semantic color. */
.badge {
  background: var(--pending-bg);
  color: var(--pending);
  font-size: 11px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge:empty { display: none; }

/* ===== Cards — shadow not border, generous padding ===== */
.card, .approval-panel {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.18s ease;
}
.card h3 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* Soft burgundy ring when a focusable input inside a card is active.
   Was a hard accent-soft rectangle before — softer now. */
.card:has(:focus-visible) {
  box-shadow: 0 0 0 3px rgba(142, 54, 80, 0.10), var(--shadow-1);
}

/* ===== Headline typography — Noto Serif JP for the big stuff ===== */
h1, .page-title {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 12px;
}
h2, .section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 10px;
}

/* ===== Inputs — bigger touch zones, soft focus ring ===== */
input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input[type="email"], input[type="tel"],
input[type="password"],
select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--divider-strong);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 80px; line-height: 1.55; }

/* Override the previous "dashed border on empty + tinted bg" pattern.
   Modern feel is solid hairline border at all states; emptiness is
   communicated by lighter placeholder text alone. The dashed-empty
   look read as "broken/incomplete" in user testing — we want
   "ready to type" instead. */
input[type="text"]:placeholder-shown:not(:focus),
input[type="number"]:placeholder-shown:not(:focus),
input[type="search"]:placeholder-shown:not(:focus),
textarea:placeholder-shown:not(:focus) {
  background: var(--surface);
  border-style: solid;
  border-color: var(--divider-strong);
}
input[type="text"]:not(:placeholder-shown):not(:focus),
input[type="number"]:not(:placeholder-shown):not(:focus),
input[type="search"]:not(:placeholder-shown):not(:focus),
textarea:not(:placeholder-shown):not(:focus) {
  background: var(--surface);
  border-style: solid;
}
input::placeholder, textarea::placeholder {
  color: var(--text-faint);
  font-style: normal;
  font-size: 14px;
  opacity: 1;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(142, 54, 80, 0.10);
}
input[type="file"] { padding: 6px 0; border: none; background: none; }
label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* ===== Step number circles — serif numerals ===== */
.step-num {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  margin-right: 12px;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(142, 54, 80, 0.30);
  flex-shrink: 0;
}
.step-num.done { background: var(--success); box-shadow: 0 2px 6px rgba(88, 141, 90, 0.30); }
.step-num.done::before { content: '✓'; font-size: 14px; }
.step-num.done > .num-text { display: none; }
.step-hint {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 8px;
  margin-left: 42px;
  line-height: 1.6;
}

/* ===== Buttons — pill-shaped, soft shadow ===== */
.btn, .btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.08s;
  text-decoration: none;
}
.btn:active:not([disabled]),
.btn-primary:active:not([disabled]) { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(142, 54, 80, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover:not([disabled]) {
  background: var(--accent-2);
  box-shadow: 0 3px 12px rgba(142, 54, 80, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary[disabled] {
  background: var(--surface-3);
  color: var(--text-faint);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover:not([disabled]) { background: var(--accent-soft); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover:not([disabled]) {
  background: var(--surface-3);
  color: var(--text);
}

/* "+ 商品を追加" — keep as a soft dashed CTA but in modern shape. */
.btn-add-item {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  background: transparent;
  border: 1.5px dashed var(--divider-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-family: inherit;
}
.btn-add-item:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
  color: var(--accent);
}

/* ===== Tables — hairline rows, warm hover, mono numerals ===== */
table.cust, table.orders, table.items, table.pricing,
table[data-modern] {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
table.cust th, table.cust td,
table.orders th, table.orders td,
table.items th, table.items td,
table.pricing th, table.pricing td,
table[data-modern] th, table[data-modern] td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--divider);
}
table.cust th, table.orders th, table.items th, table.pricing th,
table[data-modern] th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface-2);
  border-bottom: 1px solid var(--divider-strong);
  user-select: none;
}
table.cust th.sortable { cursor: pointer; }
table.cust th.sortable:hover { color: var(--accent); }
table.cust th.sortable .sort-arrow { font-size: 10px; margin-left: 4px; opacity: 0.7; }

/* Override the previous blue-tinted alternating-row pattern on
   customers.html — pure surface + hairline divider reads cleaner
   and matches the warm palette. */
table.cust tbody tr:nth-child(odd)  td,
table.cust tbody tr:nth-child(even) td { background: var(--surface); }
table.cust tbody tr:hover td { background: var(--surface-3) !important; }

/* "Local-only" rows (created on Order tool, not synced to PCA yet) —
   keep the warm-amber accent but in our palette. */
table.cust tr.local td {
  background: var(--warn-soft) !important;
  border-left: 3px solid var(--warn);
}
table.cust tr.local:hover td { background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface-3)) !important; }

/* Numeric columns — mono font for column-aligned digits */
table .num, table td.num, table th.num,
table .price, table td.price, table th.price,
table .qty, table td.qty, table th.qty {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* ===== Approval panel (customers.html — pending tier-change list) ===== */
.approval-panel {
  background: var(--accent-faint);
  border: none;
  box-shadow: 0 1px 3px rgba(142, 54, 80, 0.06),
              0 8px 18px rgba(142, 54, 80, 0.04);
}
.approval-panel .ap-head {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--accent-3);
  margin-bottom: 14px;
}
.approval-row {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-1);
}
.approval-row .info .name { font-weight: 500; }
.approval-row button {
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.approval-row button.approve {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
  box-shadow: 0 1px 4px rgba(88, 141, 90, 0.25);
}
.approval-row button.reject {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

/* ===== Order total bar — luxury hero number on desktop ===== */
.order-total-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 28px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: none;
  border-radius: var(--radius);
  margin-top: 18px;
  box-shadow: var(--shadow-2);
}
.order-total-bar .total-label {
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.order-total-bar .total-amount {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.005em;
}

/* ===== Lock screen — refined catalog feel ===== */
.lock-card {
  background: var(--surface);
  border: none;
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  width: min(460px, 100%);
  box-shadow: var(--shadow-2);
}
.lock-app-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}
.lock-app-sub {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.lock-version-badge {
  background: var(--accent-soft);
  color: var(--accent-2);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 12px;
}

/* ===== Item rows on the order/quote forms ===== */
.item-row {
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.15s;
}
.item-row:hover { box-shadow: var(--shadow-2); }

/* Per-line subtotal row inside item-row (matches mobile pattern). */
.item-row .line-subtotal {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--divider);
  display: flex; justify-content: space-between; align-items: baseline;
}
.item-row .line-subtotal .formula { color: var(--text-muted); font-size: 12px; }
.item-row .line-subtotal .amount {
  font-family: var(--font-serif);
  color: var(--accent);
  font-weight: 500;
  font-size: 18px;
}

/* ===== Customer Master v2 — page-level chrome on customers.html ===== */
/* The page uses .topbar on customer-rep-admin.html and customers.html. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 250, 245, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--divider);
  padding: 14px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--surface); }
}

/* ===== Soft scrollbars (WebKit/Blink only) — hairline track ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--divider-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ===== Owner Dashboard (Master Data tab) =====
   Isaac-only. Sectioned digest of versions, data flow, recent
   shipped, planned next, operational TODOs, and quick refs. Sits
   above the existing master-content (master CSV explanation +
   担当者マッピング table) on the same page. */
.owner-dashboard {
  margin-bottom: 28px;
}

/* Header */
.owner-dashboard .dash-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dash-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
  letter-spacing: 0.005em;
}
.dash-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.dash-owner-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(142, 54, 80, 0.25);
}

/* Grid utilities — 2 or 4 columns, gap, drops to 1 col on narrow. */
.dash-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.dash-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dash-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) {
  .dash-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dash-grid-4, .dash-grid-2 { grid-template-columns: 1fr; }
}

/* Status cards (row 1) */
.dash-stat {
  background: var(--surface);
  border: none;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
  position: relative;
}
.dash-stat::before {
  content: '';
  position: absolute; top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 54, 80, 0.20), transparent);
}
.dash-stat-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dash-stat-value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.dash-stat-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.dash-stat-meta a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--divider-strong);
}
.dash-stat-meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Architecture map (row 2) */
.dash-arch-card { padding: 22px 24px; }
.dash-arch-card h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.dash-arch-card h3 .muted {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--text-faint);
  font-weight: 400;
}
.dash-arch {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (max-width: 1000px) {
  .dash-arch {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dash-arch .arch-arrow {
    text-align: center;
    transform: rotate(90deg);
  }
}
.arch-col {
  display: flex; flex-direction: column;
  gap: 10px;
}
.arch-col-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.arch-arrow {
  align-self: center;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--accent);
  opacity: 0.7;
  font-weight: 300;
}
.arch-node {
  background: var(--surface-2);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  display: flex; flex-direction: column; gap: 4px;
  border-left: 3px solid var(--divider-strong);
}
.arch-node strong {
  font-weight: 500;
  color: var(--text);
  font-size: 14px;
}
.arch-node .arch-sub {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.arch-node .arch-tags {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.55;
  margin-top: 2px;
}
.arch-node .arch-tags strong {
  font-size: 11px;
  color: var(--accent);
}
.arch-source { border-left-color: #c89b5e; }      /* tan — input */
.arch-sql    { border-left-color: var(--accent); } /* burgundy — primary store */
.arch-sp     { border-left-color: #8a8579; }       /* warm grey — legacy store */
.arch-app    { border-left-color: var(--success); }/* sage — consumer */

.dash-arch-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
}
.dash-arch-note code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text);
}

/* Recent / Next two-column cards (row 3) */
.dash-recent { padding: 18px 22px; }
.dash-recent h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.dash-recent h3 .muted {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--text-faint);
  font-weight: 400;
}
.dash-recent-shipped h3 { color: var(--success); }
.dash-recent-next h3    { color: var(--accent); }

.dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 9px;
}
.dash-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.dash-list li::before {
  position: absolute;
  left: 0; top: 0;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
.dash-recent-shipped .dash-list li::before { content: '✓'; color: var(--success); }
.dash-recent-next .dash-list li::before    { content: '→'; color: var(--accent); }
.dash-list code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text);
}
.dash-list-tight li { padding-left: 0; line-height: 1.7; }
.dash-list-tight li::before { content: ''; }

/* Operational TODO (row 4) */
.dash-ops { padding: 18px 22px; }
.dash-ops h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.dash-ops h3 .muted {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--text-faint);
  font-weight: 400;
}
.dash-ops-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.dash-ops-list li {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--divider-strong);
}
.dash-ops-list li strong {
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.dash-ops-list li > div { font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.dash-ops-list code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--divider);
}

.ops-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  height: fit-content;
  white-space: nowrap;
}
.ops-pill-pending  { background: var(--warn-soft);    color: var(--warn);  }
.ops-pill-deferred { background: var(--surface-3);    color: var(--text-muted); }
.ops-pill-info     { background: var(--accent-faint); color: var(--accent); }
.dash-ops-list li:has(.ops-pill-pending)  { border-left-color: var(--warn); }
.dash-ops-list li:has(.ops-pill-deferred) { border-left-color: var(--text-faint); }
.dash-ops-list li:has(.ops-pill-info)     { border-left-color: var(--accent); }

/* Quick reference (row 5) */
.dash-refs { padding: 18px 22px; }
.dash-refs h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.dash-refs h3 .muted {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--text-faint);
  font-weight: 400;
}
.dash-refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) {
  .dash-refs-grid { grid-template-columns: 1fr; gap: 14px; }
}
.dash-refs-grid > div strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dash-refs-grid code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 4px;
}
.dash-refs-grid a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.dash-refs-grid a:hover { border-bottom-color: var(--accent); }

/* ===== Reduced motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  .card, .btn, .btn-primary, .btn-secondary, .item-row,
  .lock-btn-small, .tab, .approval-row {
    transition: none !important;
  }
  .btn:active, .btn-primary:active { transform: none !important; }
}

/* ===== Org overview (Owner Dashboard row 4a) =====
   Manager → IC tree table. Team rows are clickable to expand/collapse
   the IC sub-rows. Attainment-bar progress at the right of each row. */
.dash-org { padding: 18px 22px; }
.dash-org h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.dash-org h3 .muted {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
  color: var(--text-faint);
  font-weight: 400;
}
.dash-org-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dash-org-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--divider);
}
.dash-org-table thead th.num,
.dash-org-table tbody td.num {
  text-align: right;
}
.dash-org-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.dash-org-table tr.team-row {
  cursor: pointer;
  background: var(--surface-2);
}
.dash-org-table tr.team-row:hover { background: var(--accent-faint); }
.dash-org-table tr.team-row td:first-child { padding-left: 10px; }
.dash-org-table tr.team-row strong {
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 14px;
}
.dash-org-table tr.member-row td.indent { padding-left: 28px; }
.dash-org-table tr.member-row { background: var(--surface); }
.dash-org-table tr.unassigned-head {
  background: var(--warn-soft);
  font-size: 12px;
}
.dash-org-table .team-toggle {
  display: inline-block;
  width: 14px;
  font-size: 9px;
  color: var(--text-muted);
  margin-right: 4px;
  vertical-align: middle;
}
.dash-org-table .org-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.dash-org-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-right: 6px;
  vertical-align: middle;
}
.dash-org-tag.team { background: var(--accent-faint); color: var(--accent); }
.dash-org-tag.mgr  { background: #fef3c7;             color: #b85f00; }

/* Attainment progress bar — clamped at 100% visually, label shows true %. */
.dash-org-bar {
  position: relative;
  width: 140px;
  height: 18px;
  background: var(--surface-3, var(--surface-2));
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-size: 11px;
  font-weight: 500;
}
.dash-org-bar .bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--text-muted);
  transition: width 0.3s ease;
}
.dash-org-bar.good .bar-fill { background: #2c8a3a; }
.dash-org-bar.warn .bar-fill { background: var(--warn); }
.dash-org-bar.low  .bar-fill { background: var(--accent); }
.dash-org-bar .bar-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text);
  mix-blend-mode: difference;
  filter: invert(1);
}

/* ===== Print — strip our shadows + frosted backgrounds ===== */
@media print {
  body { background: #fff; }
  .card, .item-row, .approval-row, .order-total-bar {
    box-shadow: none !important;
    border: 1px solid #e0e0e0 !important;
  }
  .header, .topbar { backdrop-filter: none; background: #fff; }
  .tabs, .tab, .lock-btn-small, .btn-add-item { display: none !important; }
}

/* ===== Quote history (desktop #page-quote) =====
   Compact table-style list pinned to the top of 見積書 page. Each row:
   ID + status pill / customer / meta / inline notes / convert button. */
.q-history-row {
  display: grid;
  grid-template-columns: 200px 200px 1fr 1.6fr 130px;
  gap: 14px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  font-size: 13px;
}
.q-history-row:last-child { border-bottom: none; }
.q-history-col-id strong  { font-family: ui-monospace, monospace; font-size: 12px; }
.q-history-col-id .q-pill { margin-left: 6px; }
.q-history-col-cust .muted,
.q-history-col-meta .muted,
.q-history-row .muted { color: var(--text-muted); font-size: 11px; }
.q-history-col-cust > div:first-child { font-weight: 500; }
.q-history-col-meta { color: var(--text-muted); font-size: 12px; padding-top: 1px; }
.q-note-input {
  width: 100%;
  font-size: 12px;
  font-family: var(--font-sans);
  padding: 6px 8px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  resize: vertical;
  min-height: 36px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.q-note-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-faint); }
.q-note-input.q-note-saved { border-color: #2c8a3a; box-shadow: 0 0 0 2px #e2f5e8; }
.q-note-input.q-note-error { border-color: #b94a4a; }
.q-history-col-actions { text-align: right; }
.q-converted-link {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ===== Quote convert modal ===== */
.q-convert-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(40, 30, 20, 0.5);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.q-convert-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  width: min(680px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.q-convert-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--divider);
}
.q-convert-head strong {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
}
.q-convert-head .close {
  background: transparent; border: none;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  cursor: pointer; padding: 4px 8px;
}
.q-convert-head .close:hover { color: var(--text); }
.q-convert-body {
  padding: 14px 20px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.q-convert-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm, 6px);
}
.q-convert-summary .muted { color: var(--text-muted); font-size: 11px; }
.q-convert-item {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.q-convert-item:last-child { border-bottom: none; }
.q-convert-item-name strong { font-size: 13px; }
.q-convert-item-name .muted { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.q-convert-item-qty {
  display: flex; gap: 8px; align-items: center;
}
.q-convert-item-qty label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted);
}
.q-convert-item-qty input {
  width: 72px;
  padding: 5px 8px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm, 6px);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.q-convert-foot {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--divider);
}
.q-convert-foot .status-text { margin-right: auto; font-size: 12px; }

@media (max-width: 900px) {
  .q-history-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .q-history-col-meta, .q-history-col-actions { grid-column: 1 / -1; }
  .q-history-col-notes { grid-column: 1 / -1; }
}

/* ===== Quote history — expand/collapse + items table ===== */
.q-history-row { position: relative; }
.q-history-toggle {
  background: transparent;
  border: none;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.q-history-toggle:hover { color: var(--text); }
.q-history-items {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm, 6px);
}
.q-history-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.q-history-items-table thead th {
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 4px 8px;
  border-bottom: 1px solid var(--divider);
}
.q-history-items-table thead th.num,
.q-history-items-table tbody td.num { text-align: right; }
.q-history-items-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
.q-history-items-table tbody tr:last-child td { border-bottom: none; }
.q-history-items-table tbody td .muted {
  font-size: 10px; color: var(--text-muted);
}
.q-history-col-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ===== Edit-mode banner (#page-new-order) =====
   Shown when the rep clicks ✏️ on a queue card. Sticks at the top of
   the New Order page so it's never out of sight while they're scrolling
   the form. Cancel button is on the right; clicking returns to the
   queue with the original order untouched. */
.edit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: var(--accent-faint);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
}
.edit-banner-icon { font-size: 18px; flex: 0 0 auto; }
.edit-banner-text { flex: 1 1 auto; }
.edit-banner-text strong { color: var(--accent); margin-right: 6px; }
.edit-banner-id {
  font-family: ui-monospace, monospace;
  color: var(--text);
  font-weight: 600;
  margin-right: 12px;
}
.edit-banner-hint { color: var(--text-muted); font-size: 11px; }
.edit-banner #edit-cancel { flex: 0 0 auto; color: var(--text-muted); }
.edit-banner #edit-cancel:hover { color: var(--accent); }

/* ===== Queue: multi-select + download badge ===== */
.queue-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: var(--accent-faint);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm, 8px);
  position: sticky;
  top: 60px;  /* below page header */
  z-index: 5;
}
.queue-bulk-bar .qbb-label { color: var(--text-muted); font-size: 13px; }
.queue-bulk-bar strong { color: var(--text); font-size: 15px; }

.queue-card-head-left {
  display: flex; gap: 10px; align-items: flex-start;
  flex: 1 1 auto; min-width: 0;
}
.queue-card-head-text { flex: 1 1 auto; min-width: 0; }
.queue-select {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
}
.queue-select-spacer {
  flex: 0 0 auto;
  display: inline-block;
  width: 18px;
}
.queue-card.downloaded {
  background: linear-gradient(180deg, var(--accent-faint) 0%, var(--surface) 30%);
}
.queue-download-badge {
  margin-top: 6px;
  padding: 5px 10px;
  background: #e2f5e8;
  color: #1f5a2c;
  border-radius: var(--radius-pill);
  font-size: 11px;
  display: inline-block;
  font-family: var(--font-sans);
}
.queue-download-badge .muted { color: #4a6c50; }
.queue-download-badge .qdb-reason {
  font-size: 10.5px;
  color: #1f5a2c;
  margin-top: 2px;
  font-style: italic;
}