/* MyBooks primitives — the Genica look, built once.
 *
 * Loaded AFTER global.css so it wins. Only tokens (tokens.css) are used here.
 * New screens: use the .mb-* classes. Old class names (.primary-button,
 * .secondary-button, .panel, .status-pill, ...) are aliased to the same look
 * so existing screens match without being rewritten.
 *
 * Catalog + rules: docs/DESIGN.md
 */

/* ---------------------------------------------------------------- Buttons */
/* Pill shaped. Primary = filled ink. Secondary = 1px hairline outline.
   Danger = outline with red text (never a red fill). Pressed = 0.6 opacity. */
.mb-btn,
.primary-button,
.secondary-button,
.mb-btn-danger {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--mb-radius-pill);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--mb-text-md);
  font-weight: var(--mb-weight-semibold);
  gap: 6px;
  justify-content: center;
  line-height: 1.2;
  min-height: var(--mb-control-h);
  padding: 0 16px;
  text-decoration: none;
  transition: background var(--mb-dur) var(--mb-ease), opacity 0.12s var(--mb-ease), border-color var(--mb-dur) var(--mb-ease);
  white-space: nowrap;
}

.mb-btn--primary,
.primary-button {
  background: var(--mb-brand);
  border-color: var(--mb-brand);
  color: var(--mb-on-brand);
}
.mb-btn--primary:hover,
.primary-button:hover { background: var(--mb-brand-strong); border-color: var(--mb-brand-strong); }

.mb-btn--secondary,
.secondary-button {
  background: transparent;
  border-color: var(--mb-border-strong);
  color: var(--mb-ink);
}
.mb-btn--secondary:hover,
.secondary-button:hover { background: var(--mb-surface-muted); }

.mb-btn--danger,
.mb-btn-danger {
  background: transparent;
  border-color: var(--mb-border-strong);
  color: var(--mb-danger);
}
.mb-btn--danger:hover,
.mb-btn-danger:hover { background: var(--mb-danger-bg); }

.mb-btn--ghost {
  background: transparent;
  color: var(--mb-muted);
  padding: 0 10px;
}
.mb-btn--ghost:hover { background: var(--mb-surface-muted); color: var(--mb-ink); }

.mb-btn--sm { font-size: var(--mb-text-sm); min-height: 30px; padding: 0 12px; }
.mb-btn--lg { font-size: var(--mb-text-lg); min-height: var(--mb-control-h-lg); padding: 0 20px; }

.mb-btn--icon,
.icon-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--mb-radius-pill);
  color: var(--mb-muted);
  cursor: pointer;
  display: inline-grid;
  height: var(--mb-control-h);
  min-height: 0;
  padding: 0;
  place-items: center;
  width: var(--mb-control-h);
}
.mb-btn--icon:hover,
.icon-button:hover { background: var(--mb-surface-muted); color: var(--mb-ink); }

/* Round send/voice style button (Genica composer). */
.mb-btn--circle {
  background: var(--mb-brand);
  border: 0;
  border-radius: 50%;
  color: var(--mb-on-brand);
  height: var(--mb-control-h);
  padding: 0;
  width: var(--mb-control-h);
}

.mb-btn:active,
.primary-button:active,
.secondary-button:active,
.mb-btn--icon:active,
.icon-button:active { opacity: 0.6; }

.mb-btn:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.mb-btn[aria-disabled="true"] {
  background: var(--mb-disabled-bg);
  border-color: transparent;
  color: var(--mb-disabled-text);
  cursor: not-allowed;
  opacity: 1;
}

:where(button, a, input, select, textarea, summary):focus-visible {
  box-shadow: var(--mb-focus);
  outline: none;
}

/* ------------------------------------------------------------ Cards/panels */
/* Flat: hairline border, no shadow. Sit directly on the page. */
.mb-card,
.panel {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-md);
  box-shadow: var(--mb-shadow-1);
  color: var(--mb-text);
}
.mb-card { padding: var(--mb-space-4); }

/* Filled group (settings groups, key/value blocks, summaries). */
.mb-card--fill {
  background: var(--mb-surface-muted);
  border-color: transparent;
  border-radius: var(--mb-radius-lg);
}

/* Section label: sentence case, small, semibold, secondary. */
.mb-section-label {
  color: var(--mb-muted);
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-weight-semibold);
  margin: 0;
}
.mb-section-label .mb-count { color: var(--mb-faint); font-weight: var(--mb-weight-regular); margin-left: 6px; }

/* ----------------------------------------------------------------- Status */
/* A 6px dot plus plain words. Never a colored slab.
   <span class="mb-status" data-tone="success">Paid</span>
   tones: neutral (default) | success | danger | warning | accent */
.mb-status,
.status-pill {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--mb-muted);
  display: inline-flex;
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-weight-medium);
  gap: 6px;
  padding: 0;
  white-space: nowrap;
}
.mb-status::before,
.status-pill::before {
  background: var(--mb-status-dot, var(--mb-faint));
  border-radius: 50%;
  content: "";
  flex: none;
  height: 6px;
  width: 6px;
}
.mb-status[data-tone="success"],
.status-pill.paid,
.status-pill.posted,
.status-pill.sent { --mb-status-dot: var(--mb-success); }
.mb-status[data-tone="danger"],
.status-pill.overdue,
.status-pill.void { --mb-status-dot: var(--mb-danger); }
.mb-status[data-tone="warning"],
.status-pill.partial,
.status-pill.attention-status { --mb-status-dot: var(--mb-warning); }
.mb-status[data-tone="accent"] { --mb-status-dot: var(--mb-accent); }

/* Unread / needs-you marker. */
.mb-dot-unread {
  background: var(--mb-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mb-bg);
  height: 11px;
  width: 11px;
}

/* ------------------------------------------------------------- Chips/tabs */
/* Filter chips: selected = filled ink, unselected = hairline outline. */
.mb-chip,
.chip {
  align-items: center;
  background: transparent;
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-radius-pill);
  color: var(--mb-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--mb-text-md);
  font-weight: var(--mb-weight-medium);
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
}
.mb-chip:hover,
.chip:hover { background: var(--mb-surface-muted); }
.mb-chip[aria-pressed="true"],
.mb-chip.is-active,
.chip.active,
.chip.is-active {
  background: var(--mb-brand);
  border-color: var(--mb-brand);
  color: var(--mb-on-brand);
}

/* Count badge (the one place blue fills). */
.mb-badge {
  background: var(--mb-accent);
  border-radius: var(--mb-radius-pill);
  color: var(--mb-on-accent);
  font-size: var(--mb-text-xs);
  font-weight: var(--mb-weight-semibold);
  padding: 2px 8px;
}

/* --------------------------------------------------------------- Fields */
/* Every input/select/textarea in the app gets this by element selector. */
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])),
select,
textarea {
  background: var(--mb-surface);
  border: 1px solid var(--mb-border-strong);
  border-radius: var(--mb-radius-sm);
  color: var(--mb-ink);
  font: inherit;
  font-size: var(--mb-text-md);
  min-height: var(--mb-control-h);
  padding: 0 12px;
}
textarea { line-height: 1.5; min-height: 84px; padding: 10px 12px; }
input::placeholder,
textarea::placeholder { color: var(--mb-faint); }
input:focus,
select:focus,
textarea:focus { border-color: var(--mb-accent); }
input:disabled,
select:disabled,
textarea:disabled { background: var(--mb-surface-muted); color: var(--mb-disabled-text); }
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--mb-brand); }

.mb-label {
  color: var(--mb-muted);
  display: grid;
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-weight-medium);
  gap: 6px;
}

/* Composer / search pill: the big rounded input with the soft shadow. */
.mb-composer {
  background: var(--mb-surface-raised);
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius-composer);
  box-shadow: var(--mb-shadow-2);
}

/* ------------------------------------------------------------- List rows */
/* Hairline-separated rows; no card per row. */
.mb-list { display: grid; }
.mb-row {
  align-items: center;
  border-bottom: 1px solid var(--mb-border);
  display: flex;
  gap: var(--mb-space-3);
  padding: 10px 0;
}
.mb-row:last-child { border-bottom: 0; }
.mb-row-title { color: var(--mb-ink); font-size: var(--mb-text-lg); }
.mb-row-sub { color: var(--mb-muted); font-size: var(--mb-text-md); }
.mb-row-meta { color: var(--mb-muted); font-size: var(--mb-text-md); font-variant-numeric: tabular-nums; margin-left: auto; }

/* Key/value block */
.mb-kv { background: var(--mb-surface-muted); border-radius: var(--mb-radius-md); padding: 0 14px; }
.mb-kv > div { border-bottom: 1px solid var(--mb-border); display: flex; font-size: var(--mb-text-md); justify-content: space-between; padding: 11px 0; }
.mb-kv > div:last-child { border-bottom: 0; }
.mb-kv dt, .mb-kv span:first-child { color: var(--mb-muted); }

/* ---------------------------------------------------------------- Tables */
table { border-collapse: collapse; color: var(--mb-text); }
th {
  color: var(--mb-muted);
  font-size: var(--mb-text-sm);
  font-weight: var(--mb-weight-semibold);
}
th, td { border-bottom: 1px solid var(--mb-border); }

/* ---------------------------------------------------------------- Toggle */
/* <button class="mb-switch" role="switch" aria-checked="true"></button> */
.mb-switch {
  background: var(--mb-disabled-bg);
  border: 0;
  border-radius: var(--mb-radius-pill);
  cursor: pointer;
  height: 26px;
  padding: 0;
  position: relative;
  transition: background var(--mb-dur) var(--mb-ease);
  width: 44px;
}
.mb-switch::after {
  background: var(--mb-paper);
  border-radius: 50%;
  content: "";
  height: 22px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform var(--mb-dur) var(--mb-ease);
  width: 22px;
}
.mb-switch[aria-checked="true"] { background: var(--mb-success); }
.mb-switch[aria-checked="true"]::after { transform: translateX(18px); }

/* ------------------------------------------------------ Toast, empty state */
.mb-toast {
  align-items: center;
  background: var(--mb-ink);
  border-radius: var(--mb-radius-pill);
  color: var(--mb-bg);
  display: inline-flex;
  font-size: var(--mb-text-md);
  font-weight: var(--mb-weight-medium);
  gap: 14px;
  padding: 12px 18px;
}
.mb-empty { color: var(--mb-muted); padding: 80px 16px; text-align: center; }
.mb-empty strong { color: var(--mb-ink); display: block; font-size: var(--mb-text-xl); font-weight: var(--mb-weight-semibold); margin-bottom: 8px; }

/* Appearance toggle in the account menu */
.theme-toggle { display: grid; gap: 8px; padding: 10px 12px; }
.theme-toggle-options { display: flex; gap: 6px; }
.theme-toggle .mb-chip { flex: 1; justify-content: center; padding: 0 8px; }

/* One font everywhere: Apple's system font (SF on Apple devices). Form controls
   must inherit it or browsers fall back to their own UI font. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ------------------------------------------------------ Spacing rhythm */
/* Vertical rhythm helpers. Use these (or the --mb-space-* tokens) instead of
   ad-hoc margins. See "Spacing rhythm" in docs/DESIGN.md. */
.mb-stack { display: grid; gap: var(--mb-space-3); }          /* related items */
.mb-stack--tight { gap: var(--mb-space-2); }                   /* label + value */
.mb-stack--loose { gap: var(--mb-space-6); }                   /* separate blocks */
.mb-cluster { align-items: center; display: flex; flex-wrap: wrap; gap: var(--mb-space-2); }
/* Title block: title, then a muted subtitle 4px under it. */
.mb-heading { display: grid; gap: var(--mb-space-1); }
.mb-heading > h1, .mb-heading > h2, .mb-heading > h3 { line-height: 1.25; margin: 0; }
.mb-heading > p { color: var(--mb-muted); font-size: var(--mb-text-md); line-height: 1.45; margin: 0; }

/* Paragraph/list text never collapses to the browser default 1.2. */
p, li { line-height: 1.45; }

/* ------------------------------------------------ Desktop spacing (shared) */
/* Panel title block (padding stays with the panel rule in 03). */
.panel-title { gap: var(--mb-space-4); margin-bottom: var(--mb-space-4); }
.panel-title h2, .panel-title h3 { line-height: 1.25; margin: 0; }
.panel-title p { line-height: 1.45; margin: var(--mb-space-1) 0 0; }

/* Table text: multi-line cells need air, small lines never touch. */
th, td { line-height: 1.4; }
td small, td .inline-muted { line-height: 1.4; }
td small + small, td .inline-muted + .inline-muted, td span + small, td strong + small, td .cell-truncate + small { margin-top: 2px; }

/* List toolbars inside a panel: search/filter row, summary line, bulk actions. */
.panel > .invoice-center-toolbar { margin-bottom: var(--mb-space-3); }
.panel > p.inline-muted { line-height: 1.4; margin: 0 0 var(--mb-space-3); }
.panel > .row-actions[style*="12px 20px"] { align-items: center; gap: var(--mb-space-3); padding: 0 0 var(--mb-space-3) !important; }
.panel > .row-actions.list-pagination,
.panel > .row-actions[style*="16px 20px"] { align-items: center; gap: var(--mb-space-3); padding: var(--mb-space-4) 0 0 !important; }
.transaction-list-controls { align-items: end; margin-bottom: var(--mb-space-3); }
.transaction-list-controls label > span { color: var(--mb-muted); font-size: var(--mb-text-sm); font-weight: var(--mb-weight-medium); }
.transaction-list-controls input,
.transaction-list-controls select { font-size: var(--mb-text-md); height: var(--mb-control-h); min-height: var(--mb-control-h); padding-block: 0; }
.list-pagination { align-items: center; gap: var(--mb-space-3); justify-content: flex-end; padding: var(--mb-space-4) 0 0; }

/* Alerts / notices: same padding, text never tight. */
.alert, .loading-band { line-height: 1.45; margin-bottom: var(--mb-space-3); padding: var(--mb-space-3) var(--mb-space-4); }

/* Forms: label above field, fields 12px apart, buttons 16px below the last field. */
.book-form { gap: var(--mb-space-4); margin-bottom: var(--mb-space-4); }
.book-form label { gap: 6px; }
.form-actions { gap: var(--mb-space-2); margin-top: var(--mb-space-2); }

/* Banking review drawer (rules live in 10-drawers; spacing tuned here). */
.bank-drawer { gap: var(--mb-space-5); padding: var(--mb-space-6); }
.bank-drawer-head { gap: var(--mb-space-3); padding-bottom: var(--mb-space-1); }
.bank-drawer-title strong { line-height: 1.3; }
.bank-drawer-title span { display: block; line-height: 1.4; margin-top: var(--mb-space-1); }
.bank-drawer-field { gap: var(--mb-space-2); }
.bank-drawer-grid-2 { gap: var(--mb-space-4); }
.bank-suggestions { margin: 0; }
.bank-descriptor-block { gap: var(--mb-space-2); }
.bank-match-card { gap: var(--mb-space-3); padding: var(--mb-space-3) var(--mb-space-4); }
.bank-match-card strong { line-height: 1.35; }
.bank-match-card span { line-height: 1.4; }
.bank-feed-section { gap: var(--mb-space-3); }
.bank-feed-grid { column-gap: var(--mb-space-4); row-gap: var(--mb-space-4); }
.bank-feed-cell { gap: var(--mb-space-1); }
.bank-feed-cell strong { line-height: 1.4; overflow-wrap: anywhere; }
.bank-attach-drop { padding: var(--mb-space-4); }
.bank-rule-toggle { gap: var(--mb-space-3); }
.bank-rule-toggle strong { line-height: 1.35; margin-bottom: var(--mb-space-1); }
.bank-rule-toggle span { line-height: 1.4; }
.bank-drawer-actions { padding-top: var(--mb-space-4); }
.bank-drawer-cancel { padding: var(--mb-space-3); }
.bank-drawer-grid-2, .bank-feed-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bank-drawer-field, .bank-drawer-field select, .bank-drawer-field input { min-width: 0; }
.bank-drawer { overflow-x: hidden; }

/* Grouped fields (Expense allocations etc.): same padding as a card, legend reads as a label. */
.form-fieldset { border: 1px solid var(--mb-border); border-radius: var(--mb-radius-md); display: grid; justify-items: start; gap: var(--mb-space-3); margin: 0; min-width: 0; padding: var(--mb-space-3) var(--mb-space-4) var(--mb-space-4); }
.form-fieldset > legend { color: var(--mb-muted); font-size: var(--mb-text-sm); font-weight: var(--mb-weight-semibold); padding: 0 var(--mb-space-2); }
.book-form label small, .book-form label .inline-muted, .book-form .field-hint { line-height: 1.4; }

/* Long names: the link inside a truncating <strong> must itself ellipsize, not hard-clip. */
.customer-layout .panel.wide td > strong > .link-button { display: block; max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; }

/* Bank deposit fields share the accounting form rhythm in either workspace theme. */
.bank-deposits form, .bank-deposits fieldset { min-width: 0; }
.bank-deposits .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mb-space-4); }
.bank-deposits form label:not(.mb-row) { display: grid; gap: var(--mb-space-2); min-width: 0; }
.bank-deposits form input:not([type="checkbox"]), .bank-deposits form select, .bank-deposits form textarea { width: 100%; min-width: 0; }
.bank-deposits form .mb-row { min-width: 0; }
.bank-deposits form .mb-row-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bank-deposits .mb-row-sub { display: block; }
.bank-deposits form .mb-row input[type="checkbox"] { flex: 0 0 auto; width: var(--mb-space-4); height: var(--mb-space-4); min-height: 0; }
.bank-deposits .row-actions-inline { display: flex; flex-wrap: wrap; gap: var(--mb-space-2); }
@media (max-width: 760px) {
  .bank-deposits .form-grid { grid-template-columns: minmax(0, 1fr); }
  .bank-deposits .row-actions-inline { align-items: stretch; }
  .bank-deposits .row-actions-inline > button { flex: 1 1 auto; }
}

.sales-receipt-form label { display: grid; gap: var(--mb-space-2); min-width: 0; }
.sales-receipt-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.sales-receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mb-space-4); }
.sales-receipt-form input:not([type="checkbox"]), .sales-receipt-form select, .sales-receipt-form textarea { min-width: 0; width: 100%; }
.sales-receipt-form label.sales-receipt-tax { display: flex; flex-wrap: nowrap; align-items: center; }
.sales-receipt-tax input { flex: 0 0 auto; width: var(--mb-space-4); height: var(--mb-space-4); min-height: 0; }
.sales-receipt-form .mb-cluster { flex-wrap: wrap; }
@media (max-width: 760px) {
  .sales-receipt-grid { grid-template-columns: minmax(0, 1fr); }
}

.section-invoices .credit-memos form.sales-receipt-form { grid-template-columns: minmax(0, 1fr); }
.section-invoices .credit-memos .sales-receipt-form label.sales-receipt-tax { flex-direction: row; }
.section-invoices .credit-memos .sales-receipt-form label > span { font-size: var(--mb-text-sm); letter-spacing: normal; text-transform: none; }

.invoice-save-fields { display: contents; }