/* ============ base ============ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

h1 { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.25; }
h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============ app shell ============ */
.app-header {
  position: relative;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.app-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
}
.app-header__brand {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}
.app-header__user {
  font-size: var(--fs-sm);
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-header__email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-header__user .btn-ghost {
  color: var(--color-primary-contrast);
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.app-header__link.is-active {
  background: rgba(255, 255, 255, 0.15);
}

/* Mobile hamburger — hidden on desktop, visible below 640px */
.app-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-primary-contrast);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  min-height: 40px;
  cursor: pointer;
}
.app-header__menu-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile dropdown — anchored under the hamburger. Hidden on desktop. */
.app-header__menu {
  display: none;
  position: absolute;
  right: var(--space-4);
  top: calc(100% - 4px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: 50;
  overflow: hidden;
}
.app-header__menu[hidden] { display: none !important; }
.app-header__menu-id {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__menu-item {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.app-header__menu-item:hover,
.app-header__menu-item.is-active {
  background: var(--color-surface-raised);
}
.app-header__menu-item--danger { color: var(--color-danger); }

@media (max-width: 639px) {
  .app-header__user { display: none; }
  .app-header__menu-btn { display: inline-flex; }
  /* Phase 7: dropdown replaced by slide-in side panel; never render the
     old anchored dropdown even if some component path still produces it. */
  .app-header__menu { display: none !important; }
}

.app-main { padding: var(--space-5) 0 var(--space-7); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--color-surface);
  color: var(--color-text);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-raised); }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #882828; }

.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: var(--space-3) var(--space-5); font-size: var(--fs-md); }

/* ============ forms ============ */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); }

.input, .textarea, select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-base);
}
.textarea { min-height: 160px; resize: vertical; }
.input:focus, .textarea:focus, select:focus { border-color: var(--color-primary); }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.form-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}

.form-error:empty { display: none; }

/* ============ cards ============ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.totals-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.totals-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  font-size: var(--fs-base);
}
.totals-card__row + .totals-card__row { border-top: 1px dashed var(--color-border); }
.totals-card__row--grand {
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-primary);
}

/* ============ home tiles ============ */
.tile-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-5);
}
.tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
  width: 100%;
  min-height: 88px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tile__icon {
  font-size: 28px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}
.tile__body { display: flex; flex-direction: column; gap: 2px; }
.tile__title { font-size: var(--fs-md); font-weight: 700; }
.tile__sub { font-size: var(--fs-sm); color: var(--color-text-muted); }

.tips {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  position: relative;
}
.tips__title { font-weight: 700; margin-bottom: var(--space-2); font-size: var(--fs-sm); }
.tips__list { padding-left: var(--space-5); list-style: disc; font-size: var(--fs-sm); }
.tips__list li { margin: 2px 0; }
.tips__dismiss {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: 4px 8px;
}

/* ============ list with status dots ============ */
.list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.list-item__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.list-item.is-processing .list-item__dot { background: var(--color-warning); animation: pulse 1.4s infinite; }
.list-item.is-complete   .list-item__dot { background: var(--color-success); }
.list-item.is-failed     .list-item__dot { background: var(--color-danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============ record button ============ */
.record-stage {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-6) var(--space-4);
  gap: var(--space-4);
}
.record-btn {
  width: 160px; height: 160px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  border: 4px solid transparent;
}
.record-btn:disabled { background: var(--color-text-muted); cursor: not-allowed; }
.record-btn.is-recording {
  background: var(--color-danger);
  border-color: var(--color-danger-bg);
  animation: rec-pulse 1.6s infinite;
}
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(164, 51, 51, 0.55); }
  50% { box-shadow: 0 0 0 18px rgba(164, 51, 51, 0); }
}
.record-meta {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}
.record-hint { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }

/* ============ estimate view ============ */
.estimate-header { margin-bottom: var(--space-4); }
.estimate-header__customer { font-size: var(--fs-sm); color: var(--color-text-muted); }

.scope-section { margin-bottom: var(--space-5); }
.scope-section__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
  margin-bottom: var(--space-3);
}
.scope-section__title { font-size: var(--fs-lg); font-weight: 700; }
.scope-section__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  margin-bottom: var(--space-3);
}

/* Editable scope title — rendered as a textarea (rows=1 + JS autoresize in
   scope-card.js) so long titles wrap to a second line instead of being
   clipped inside a fixed-width <input>. `resize: none` keeps the drag
   handle off (height is driven by content length). */
.scope-section__title-input {
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
  min-height: 40px;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Editable description — ~5 lines tall by default so scanning doesn't
   require scroll on first render. User can still drag the grab-handle. */
.scope-section__desc-input {
  min-height: 120px;
  margin-bottom: var(--space-3);
}

.line-items-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.line-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}
.line-item + .line-item { border-top: 1px solid var(--color-border); }
.line-item__name { font-weight: 600; font-size: var(--fs-sm); }
.line-item__meta { grid-column: 1; font-size: var(--fs-xs); color: var(--color-text-muted); }
.line-item__cost { grid-column: 2; grid-row: 1; font-size: var(--fs-sm); color: var(--color-text-muted); text-align: right; }
.line-item__customer { grid-column: 2; grid-row: 2; font-size: var(--fs-sm); font-weight: 600; text-align: right; }

.line-item.is-zero-qty {
  background: var(--color-warning-bg);
}
.line-item__chip {
  display: inline-block;
  background: var(--color-warning);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
}

.line-item.is-deemphasized .line-item__customer { opacity: 0.45; text-decoration: line-through; }

.markup-row, .override-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.markup-row__label { color: var(--color-text-muted); }

.scope-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--fs-md);
}

.notes-collapsible {
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}
.notes-collapsible[open] { background: var(--color-surface-raised); }
.notes-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-sm);
  list-style: none;
}
.notes-collapsible summary::-webkit-details-marker { display: none; }
.notes-collapsible__body {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
  white-space: pre-wrap;
}

.copy-inline {
  font-size: var(--fs-xs);
  padding: 4px 10px;
  min-height: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

/* ============ processing page ============ */
.processing-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--space-4);
  gap: var(--space-4);
  text-align: center;
}
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ toast ============ */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
  pointer-events: none;
  width: min(360px, calc(100% - var(--space-5)));
}
.toast {
  background: var(--color-text);
  color: var(--color-primary-contrast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toast-in var(--duration-med) var(--ease-out);
}
.toast--error { background: var(--color-danger); }
.toast--success { background: var(--color-success); }
@keyframes toast-in {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.muted { color: var(--color-text-muted); }
.text-sm { font-size: var(--fs-sm); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* ============ modal ============ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 22, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 200;
  animation: modal-fade var(--duration-fast) var(--ease-out);
}
.modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: min(480px, 100%);
  max-height: calc(100vh - 2 * var(--space-4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: none;
  animation: modal-rise var(--duration-med) var(--ease-out);
}
.modal__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal__header h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}
.modal__body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.modal__actions {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--color-surface-raised);
}
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-rise {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ============ editable inline fields ============ */
.editable {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.editable:hover { background: var(--color-surface-raised); }
.editable:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
  outline: none;
}
.editable--block { display: block; width: 100%; }
.editable__status {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.editable__status.is-error { color: var(--color-danger); }
.editable__status.is-success { color: var(--color-success); }

/* Editable line-items: table-like single-row layout.
   Columns: name (flex, dominant) | qty | unit | unit cost | customer price | × action.
   Name uses `minmax(0, 1fr)` so it claims every pixel the fixed columns
   don't. The fixed widths live as CSS custom properties on the <ul>
   so the drag-to-resize handles in line-items-table.js can mutate them
   without rebuilding the grid. Defaults are sized for typical values
   (qty up to 6 digits, unit up to 4 chars, $ + 5-digit cost). Price
   uses `tabular-nums` so digits line up across rows. */
.line-items-table--editable {
  --col-qty-w:   64px;
  --col-unit-w:  56px;
  --col-cost-w:  88px;
  --col-price-w: 88px;    /* ~$99,999 range visible; beyond that truncates */
}
.line-items-table--editable .line-item {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--col-qty-w)
    var(--col-unit-w)
    var(--col-cost-w)
    var(--col-price-w)
    24px;
  grid-template-areas: "name qty unit cost price action";
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
}

/* Column resize handles. Live on the right edge of qty / unit / cost / price
   header cells; drag to widen that column (name shrinks to compensate).
   Double-click resets to defaults. */
.li-col--resizable { position: relative; }
.li-col__resizer {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: -6px;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 0;
}
/* Always-visible divider so users see the column is resizable.
   Subtle at rest, forest-green + thicker on hover/drag. */
.li-col__resizer::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 4px;
  width: 2px;
  background: var(--color-text-muted);
  border-radius: 1px;
  opacity: 0.35;
  transition: opacity 120ms ease, background 120ms ease, width 120ms ease;
}
.li-col__resizer:hover::after,
.li-col__resizer.is-dragging::after {
  background: var(--color-primary);
  opacity: 1;
  width: 3px;
}
/* Flip on a body-level class while a resize is in flight so the cursor
   stays `col-resize` and nothing in the page accidentally text-selects. */
body.is-resizing-columns {
  cursor: col-resize !important;
  user-select: none;
}
body.is-resizing-columns * {
  cursor: col-resize !important;
}
.line-items-table--editable .line-item--editable:hover {
  background: var(--color-surface-raised);
}
.line-items-table--editable .li-col--price {
  font-variant-numeric: tabular-nums;
}

.line-item--header {
  background: var(--color-surface-raised);
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.line-item--header .li-col {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.li-col { min-width: 0; }
.li-col--name   { grid-area: name;   }
.li-col--qty    { grid-area: qty;    }
.li-col--unit   { grid-area: unit;   }
.li-col--cost   { grid-area: cost;   }
/* Price caps at --col-price-w; anything wider truncates with an ellipsis
   and the full value is available via the `title` tooltip set in JS. */
.li-col--price {
  grid-area: price;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  padding: 0 var(--space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
}
.li-col--action { grid-area: action; }

/* Inputs stay compact. */
.li-edit-input {
  min-height: 32px;
  padding: 4px 8px;
  font-size: var(--fs-sm);
  width: 100%;
}
.li-edit-unitcost { padding-left: 20px; }

/* Numeric inputs: strip the native spin buttons so they stop stealing
   horizontal space from already-tight columns. Users type/paste or use
   keyboard arrows. Apply broadly to any number input marked .no-spin and
   to all number inputs inside the estimate-view editor. */
.li-edit-input[type="number"],
.no-spin[type="number"],
.scope-section input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.li-edit-input[type="number"]::-webkit-outer-spin-button,
.li-edit-input[type="number"]::-webkit-inner-spin-button,
.no-spin[type="number"]::-webkit-outer-spin-button,
.no-spin[type="number"]::-webkit-inner-spin-button,
.scope-section input[type="number"]::-webkit-outer-spin-button,
.scope-section input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.li-edit-adorned {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.li-edit-prefix {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* × remove icon — small, red, quiet until hover. */
.li-edit-x {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-danger);
  font-size: 18px;
  line-height: 1;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.li-edit-x:hover:not(:disabled) {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-bg);
}
.li-edit-x:disabled { opacity: 0.4; cursor: default; }

/* Mobile: two rows per item. Name fills row 1 (edit-friendly), then
   qty / unit / cost / price share row 2. 5-col grid so each cell gets its
   own width instead of inheriting the row-1 column sizes. */
@media (max-width: 639px) {
  .line-items-table--editable .line-item {
    grid-template-columns: 64px 56px minmax(0, 1fr) 96px 24px;
    grid-template-areas:
      "name  name  name  name  action"
      "qty   unit  cost  price price";
    gap: 6px var(--space-2);
    padding: var(--space-2) var(--space-3);
  }
  .line-items-table--editable .line-item--header {
    display: none; /* Column labels don't align when the rows are split. */
  }
  /* Resize grips live on the header row; mobile layout doesn't show a
     header, and the grid reflows anyway, so hide them there too. */
  .line-items-table--editable .li-col__resizer { display: none; }
  .li-col--qty, .li-col--unit, .li-col--cost { min-width: 0; }
  .li-col--price { padding: 0; }
}

.scope-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.add-scope-btn, .add-line-item-btn {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  min-height: 40px;
  width: 100%;
  margin-top: var(--space-3);
}
.add-scope-btn:hover, .add-line-item-btn:hover {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-style: solid;
  border-color: var(--color-primary);
}

/* ============ history page ============ */
.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.history-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.history-controls select {
  min-height: 36px;
  padding: 4px 10px;
  width: auto;
}
.history-list { display: flex; flex-direction: column; gap: var(--space-2); }
.history-list .list-item {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.history-list .list-item:hover { background: var(--color-surface-raised); }
.history-list__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history-list__name { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-list__date { font-size: var(--fs-xs); color: var(--color-text-muted); }
.history-list__menu { position: relative; }
.history-list__menu-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  min-height: 32px;
  font-size: var(--fs-sm);
}
.history-list__menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 120px;
  z-index: 5;
  overflow: hidden;
}
.history-list__menu-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  text-align: left;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--color-text);
}
.history-list__menu-item:hover { background: var(--color-surface-raised); }
.history-list__menu-item.is-danger { color: var(--color-danger); }

.metrics-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.metrics-card__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.metrics-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.metrics-card__count {
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-primary);
}
.metrics-card__total {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.team-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ============ settings + team (Phase 6) ============ */
.role-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  margin-right: 6px;
}
.role-pill--owner   { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.role-pill--manager { background: #e6ecdf; color: var(--color-primary); border-color: #cfd8c3; }
.role-pill--sales   { background: var(--color-surface); color: var(--color-text-muted); }

.catalog-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.catalog-list-table th,
.catalog-list-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.catalog-list-table th {
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
}

.catalog-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.catalog-badge--active {
  background: var(--color-success);
  color: #fff;
}

.catalog-preview {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
  margin-top: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.catalog-preview th,
.catalog-preview td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.catalog-preview th {
  background: var(--color-surface-raised);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* ============ media ============ */
@media (min-width: 640px) {
  body { font-size: var(--fs-md); }
  .container { padding: 0 var(--space-5); }
  .app-main { padding: var(--space-6) 0 var(--space-8); }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile.tile--span-2 { grid-column: span 2; }
  h1 { font-size: var(--fs-3xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Phase 7: spinners, loading, network banner, slide-in nav ============ */

/* Existing `.spinner` (44px) is the big processing-page spinner; we keep it.
   These size variants are for inline + placeholder use. */
.spinner--sm {
  width: 18px;
  height: 18px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
.spinner--md {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}
.spinner--inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.loading-placeholder {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Offline banner — fixed at the very top of the viewport. */
.network-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fef3c7;
  color: #78350f;
  border-bottom: 2px solid var(--color-warning);
  padding: 8px 16px;
  text-align: center;
  font-size: var(--fs-sm);
}

/* ---- Slide-in side nav (replaces the dropdown for mobile) ---- */
.side-nav {
  display: none;
}
.side-nav.is-open {
  display: block;
}
.side-nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 90;
}
.side-nav__panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(80vw, 320px);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-4);
  z-index: 91;
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.side-nav.is-open .side-nav__panel {
  transform: translateX(0);
}
.side-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.side-nav__title {
  font-size: var(--fs-md);
  font-weight: 700;
}
.side-nav__close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.side-nav__close:hover {
  background: var(--color-surface-raised);
}
.side-nav__id {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-nav__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-nav__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}
.side-nav__item:hover,
.side-nav__item.is-active {
  background: var(--color-surface-raised);
}
.side-nav__item--danger {
  color: var(--color-danger);
}