/* =====================================================================================
   m4s-bridge.css — BAM-only glue between the old BAM stylesheets (variables.css, dashboard.css,
   buying.css) and the copied dashboard design system (m4s.css).

   Load order on every page: variables.css → dashboard.css / buying.css → m4s.css → m4s-bridge.css.
   The JS renderers (dashboard.js, review.js, buying.js) still emit BAM's own class names
   (.dash-section, .model-table, .btn-primary, .template-category-btn, .stat-item …) with inline
   styles. This file re-skins those classes onto the Heritage tokens so JS-rendered content matches
   the shell without touching the JS. As the renderers move to m4s.css classes, rules here go away.
   ===================================================================================== */

/* 1. Old BAM tokens now resolve to the design-system tokens. */
:root {
  --color-primary: var(--accent);
  --color-text-muted: var(--muted);
  --color-success: var(--ok);
  --color-danger: var(--bad);
  --color-warning: var(--warn);
  --color-border: var(--line2);
}

/* 2. Page chrome. dashboard.css styles bare <header>, .container and .tabs for the old layout. */
body { font: 15px/1.45 var(--sans); color: var(--ink); }
main a { color: var(--link); text-decoration: underline; }   /* beats Tailwind preflight's a{color:inherit} if it ever loads */
main a.btn, main .side a { text-decoration: none; }
main > header.page-head { background: none; box-shadow: none; padding: 0; border-radius: 0; margin-bottom: 24px; }
[data-layout="app"] main > header.page-head h1 { font: 600 30px/1.1 var(--display, var(--serif)); color: var(--ink); letter-spacing: -.01em; }
.page-head .sub { font-size: 14px; }

/* Sidebar badge next to Review (filled by review-badge.js) */
.side .item .badge:empty { display: none; }

/* 3. Section cards: .dash-section is what review.js / dashboard.js wrap content in. */
.dash-section {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px; box-shadow: var(--lift, none);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.dash-section-header { margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.dash-section-title { font: 600 20px/1.25 var(--serif); color: var(--ink); gap: 10px; }
.dash-section-title-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 16px; background: var(--tile) !important; }
.dash-section > p, .section-note { color: var(--muted); font-size: 13px; }

/* Count pills the templates render inline (orange/red rounded badges) → outlined Heritage pills */
.count-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.55); border: 1.5px solid currentColor; color: var(--muted); white-space: nowrap; }
.count-pill.warn { color: var(--warn); } .count-pill.bad { color: var(--bad); } .count-pill.ok { color: var(--ok); }

/* 4. Tables: .model-table (review, dashboard) and .buying-table (buying). */
.model-table th, .buying-table thead th, .buying-table th {
  background: transparent; font: 600 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--line); }
.model-table thead, .model-table thead th, .buying-table thead { background: var(--card-solid, #fff); }
:root[data-theme="heritage"] .model-table thead, :root[data-theme="heritage"] .model-table thead th,
:root[data-theme="heritage"] .buying-table thead { background: rgba(250,248,243,.96); }
.model-table td, .buying-table td { padding: 10px; border-bottom: 1px solid var(--line2); font-size: 14px; color: var(--ink); }
.model-table tr:hover td, .buying-table tbody tr:hover td { background: rgba(255,255,255,.35); }
.table-scroll { overflow: auto; max-height: 500px; border-radius: var(--radius-sm); border: 1px solid var(--line2); }
th .sort-indicator { color: var(--muted); }

/* 5. Buttons. m4s.css .btn is the outlined pill; BAM's variants were blue gradients. */
.btn { border: 1px solid var(--line); border-radius: 18px; padding: 0 14px; min-height: 36px; font: 500 14px var(--sans); box-shadow: none;
  --btn-glow: rgba(14,28,79,.16); transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s; }
.btn-primary, .btn-primary:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); box-shadow: 0 6px 16px rgba(51,102,89,.25); }
.btn-primary, .btn.primary, .btn.dark, .btn-accent, .btn-scan { --btn-glow: rgba(51,102,89,.38); }
.btn-accent { --btn-glow: rgba(14,28,79,.32); }
/* every clickable button glows on hover like the /orders stat tiles (Oliver, Oct 27); disabled ones stay flat */
.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--btn-glow), 0 0 18px 2px var(--btn-glow); }
.btn:not(:disabled):active { transform: translateY(0); box-shadow: 0 0 0 2px var(--btn-glow); }
.btn-primary:not(:disabled):hover { filter: brightness(1.08); box-shadow: 0 0 0 3px var(--btn-glow), 0 0 18px 2px var(--btn-glow), 0 6px 16px rgba(51,102,89,.25); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:not(:disabled):hover { transform: none; } }
.btn-secondary, .btn-secondary:hover { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--tabs-hover); }
.btn-accent, .btn-accent:hover { background: var(--navy, var(--ink)); border-color: var(--navy, var(--ink)); color: #fff; }
.btn-scan, .btn-scan:hover { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.btn-sm, .btn.btn-sm { min-height: 28px; font-size: 12px; padding: 0 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.qr-text-btn { color: var(--link); }

/* Category / filter buttons → chips */
.template-category-btn, .filter-pills .pill, .pill[data-family], .pill[data-status], .pill[data-source], .pill[data-lot] {
  min-height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 17px; border: 1px solid var(--line);
  background: rgba(255,255,255,.5); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; box-shadow: none; gap: 6px; }
.template-category-btn:hover, .filter-pills .pill:hover { background: var(--tabs-hover); border-color: var(--line); color: var(--ink); }
.template-category-btn.active, .filter-pills .pill.active, .pill.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* 6. Inputs (the topbar .search input keeps m4s.css's borderless style) */
.search input, .search input:focus { border: 0 !important; box-shadow: none !important; background: transparent !important; }
input:not([type=checkbox]):not([type=radio]):not(.search input), select, textarea {
  font: 14px var(--sans); border: 1px solid rgba(14,28,79,.12); border-radius: 8px; background: rgba(255,255,255,.65); color: var(--ink); }
.buying-input { border: 1px solid rgba(14,28,79,.12); border-radius: 8px; background: rgba(255,255,255,.65); min-height: 36px; }
.buying-input:focus, input:not(.search input):focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ok-bg); }

/* The hidden attribute must win over display rules on .tag/.flash/.btn etc. */
[hidden] { display: none !important; }

/* 7. Modals. The base .modal rules are duplicated from dashboard.css so pages that drop
   legacy_css (purchases, settings, accounts) still get a working overlay. */
.modal { display: none; position: fixed; inset: 0; background: rgba(14,28,79,.38); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.modal.active { display: flex; }
.modal-content { max-width: 520px; width: 100%; padding: 26px; max-height: calc(100vh - 32px); overflow-y: auto; }
.modal-content, .modal-overlay .modal-content { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(14,28,79,.18); background: #fbfaf7; }
.modal-title { font: 600 20px/1.25 var(--serif); color: var(--ink); }
.modal-header h3 { font: 600 18px var(--serif); }

/* 8. Buying stats bar → KPI tiles */
.buying-stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; background: none; border: 0; box-shadow: none; padding: 0; }
.stat-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; box-shadow: var(--lift, none); }
.stat-item:hover { background: var(--tab-on); }
.stat-item.stat-selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.stat-item, .stat-item[class*="stat-"] { background: var(--card); }
.stat-item:hover { transform: none; box-shadow: var(--lift, none); }
.stat-item .stat-value, .stat-item[class*="stat-"] .stat-value { font: 700 26px/1.2 var(--serif); color: var(--ink); }
.stat-item .stat-label, .stat-item[class*="stat-"] .stat-label { font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* the tile keeps its status colour as a top rule, like the dashboard's .pcard */
.stat-item { box-shadow: inset 0 3px 0 var(--late), var(--lift, 0 0 0 transparent); }
.stat-active { box-shadow: inset 0 3px 0 var(--accent), var(--lift, 0 0 0 transparent); }
.stat-lots { box-shadow: inset 0 3px 0 var(--info), var(--lift, 0 0 0 transparent); }
.stat-review, .stat-watching { box-shadow: inset 0 3px 0 var(--warn-dot), var(--lift, 0 0 0 transparent); }
.stat-purchased { box-shadow: inset 0 3px 0 var(--ok), var(--lift, 0 0 0 transparent); }
.stat-price-drops { box-shadow: inset 0 3px 0 var(--bad), var(--lift, 0 0 0 transparent); }
.stat-passed { box-shadow: inset 0 3px 0 var(--late), var(--lift, 0 0 0 transparent); }
.stat-item.stat-selected { transform: none; }
.buying-action-bar { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }
.buying-table-wrapper { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift, none); }
.buying-pagination, .pagination { color: var(--muted); font-size: 13px; }
.pagination button { border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); }

/* 9. Review: pricing grid (the read-only buy limits) */
.pricing-card { border: 1px solid var(--line2); border-radius: var(--radius-sm); background: rgba(255,255,255,.5); }
.pricing-card-title { background: transparent; font: 600 14px var(--serif); letter-spacing: 0; padding: 12px 14px 6px; }
.pricing-subhead, .pricing-row { border-top-color: var(--line2); }
.pricing-model { color: var(--ink); }
.pricing-live { color: var(--ok); } .pricing-live.pricing-unset { color: var(--late); } .pricing-live.pricing-unmapped { color: var(--bad); }
.pricing-old { color: var(--late); } .pricing-warn { color: var(--bad); }
.review-settings { border-top: 1px dashed var(--line); margin-top: 40px; padding-top: 24px; }
.review-settings-label { color: var(--muted); }
.bad-unit-open { color: var(--link); border-color: var(--link); background: transparent; border-radius: 8px; }
.refund-error, #refundIntegrity, #returnsOutOfSync { color: var(--bad); }

/* 10. Misc legacy colors */
.loading, .empty-state, .empty-hint { color: var(--muted); }
.empty-state p:first-child { color: var(--ink); font: 600 16px var(--serif); }
.acct { font-size: 11px; background: var(--info-bg); color: var(--info); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.toast-container .toast { border-radius: 10px; font: 600 13.5px var(--sans); }
.toast-success { background: var(--ok); } .toast-error { background: var(--bad); } .toast-warning { background: var(--warn); } .toast-info { background: var(--info); }