/* ═══════════════════════════════════════════════════════════════════════
   MERIDIAN PRO — V14.1.0 LEGACY ADAPTATION LAYER
   (Full Website Rebuild §21/§23)
   Maps every legacy component class (fx-* / pm-* / sb-* / v14-*)
   onto the new institutional system: solid surfaces, hairline borders,
   compact density, no glass, no glow, no aurora. Loaded LAST in the
   cascade. Structural rebuild (rail/topbar/palette/login/page
   compositions) lives in meridian.css + restructured templates.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Kill residual decoration layers on ANY page ── */
.fx-bg-decor, .fx-mesh, .fx-particles, #pmParticles,
.aurora-blob, .particle-bg, .fx-blob-1, .fx-blob-2 { display: none !important; }
body { background: var(--bg) !important; }

/* ── 2. Cards → Meridian panels ── */
.fx-card, .pm-card, .fx-glass-panel, .pm-glass-panel {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fx-card > .head, .pm-card > .head {
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.fx-card > .head > .title, .pm-card > .head > .title {
  font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
}
.fx-card .sub, .pm-card .sub { color: var(--dim); font-size: 12.5px; line-height: 1.6; }

/* ── 3. Buttons ── */
.fx-btn, .pm-btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 600; font-size: 12px; letter-spacing: 0;
  border: 1px solid var(--line);
  background: var(--panel-3); color: var(--ink);
  box-shadow: none !important; text-transform: none;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.fx-btn:hover, .pm-btn:hover { background: var(--panel-hover); border-color: var(--line-2); }
.fx-btn.primary, .pm-btn.primary, .fx-btn.pm-btn.primary {
  background: var(--accent); border-color: var(--accent-2); color: #fff;
}
.fx-btn.primary:hover, .pm-btn.primary:hover { background: var(--accent-3); }
.fx-btn.danger, .pm-btn.danger { background: var(--down-soft); border-color: rgba(246,70,93,.35); color: var(--down); }
.fx-btn.ghost, .pm-btn.ghost { background: none; border-color: transparent; color: var(--dim); }
.fx-btn.ghost:hover, .pm-btn.ghost:hover { background: var(--panel-3); border-color: var(--line); color: var(--ink); }
.fx-btn.sm, .pm-btn.sm { height: 26px; padding: 0 10px; font-size: 11px; }

/* ── 4. Pills / badges → compact status badges ── */
.fx-pill, .pm-pill {
  border-radius: var(--radius-xs) !important;
  font-size: 10px !important; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 2px 8px !important;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--dim);
  box-shadow: none !important;
}
.fx-pill.success, .pm-pill.success { background: var(--up-soft); border-color: rgba(14,203,129,.25); color: var(--up); }
.fx-pill.danger, .pm-pill.danger, .fx-pill.error, .pm-pill.error { background: var(--down-soft); border-color: rgba(246,70,93,.25); color: var(--down); }
.fx-pill.warning, .pm-pill.warning { background: var(--amber-soft); border-color: rgba(232,161,60,.25); color: var(--amber); }
.fx-pill.info, .pm-pill.info { background: var(--accent-soft); border-color: rgba(100,200,255,.26); color: var(--accent-3); }
.fx-pill.neutral, .pm-pill.neutral { background: var(--panel-2); color: var(--dim); }

/* ── 5. Tables → compact data grids ── */
.fx-table, .pm-table { font-size: 12px; }
.fx-table th, .pm-table th {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dimmer); background: var(--panel-2);
  border-bottom: 1px solid var(--line); height: 30px; padding: 0 10px;
}
.fx-table td, .pm-table td { height: 34px; padding: 0 10px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.fx-table tbody tr:hover, .pm-table tbody tr:hover { background: var(--panel-3); }
.fx-table .muted, .pm-table .muted { color: var(--dimmer); }

/* ── 6. KPI grid → Meridian tiles ── */
.fx-kpi-grid, .pm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.fx-kpi, .pm-kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 13px;
  box-shadow: none !important; backdrop-filter: none !important;
}
.fx-kpi .label, .pm-kpi .label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--dimmer);
}
.fx-kpi .value, .pm-kpi .value {
  font-family: var(--font-mono); font-size: 21px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.5px;
}
.fx-kpi .sub, .pm-kpi .sub { font-size: 10.5px; color: var(--dimmer); }

/* ── 7. Legacy page header (pages that still render their own) ── */
.fx-page-header, .pm-page-header {
  background: transparent; border-bottom: 1px solid var(--line);
  border-radius: 0; padding: 0 0 14px; margin-bottom: 16px;
  box-shadow: none !important; backdrop-filter: none !important;
}
.fx-page-header h1, .pm-page-header h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.fx-page-header .subtitle, .pm-page-header .subtitle { font-size: 12.5px; color: var(--dim); }
.fx-page-header .breadcrumb, .pm-page-header .breadcrumb { font-size: 11px; color: var(--dimmer); }

/* ── 8. Forms ── */
.field input, .field select, .field textarea,
.fx-input, .pm-input, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], select, textarea {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--ink);
  font-size: 12.5px; height: 32px; padding: 0 10px;
  transition: border-color var(--t-fast) ease;
}
.field input:focus, .fx-input:focus, .pm-input:focus,
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.field label { font-size: 11px; font-weight: 600; color: var(--dim); letter-spacing: 0.3px; }

/* ── 9. Legacy tabs ── */
.fx-tabs, .pm-tabs { border-bottom: 1px solid var(--line); }
.fx-tab, .pm-tab, .tab-btn {
  font-size: 12.5px; font-weight: 500; color: var(--dim);
  border-bottom: 2px solid transparent; padding: 9px 13px;
}
.fx-tab.active, .pm-tab.active, .tab-btn.active {
  color: var(--accent); font-weight: 600; border-bottom-color: var(--accent);
}

/* ── 10. Modals ── */
.fx-modal, .pm-modal, .modal-backdrop { backdrop-filter: none !important; }
.fx-modal .fx-card, .pm-modal .pm-card { box-shadow: var(--shadow-3) !important; }

/* ── 11. Flash messages (picked up as toasts; visual fallback kept flat) ── */
.flash { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); }

/* ── 12. Legacy sb-* collapsible groups (strategy intelligence etc.) ── */
.sb-group-toggle {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 600;
  color: var(--dim); padding: 7px 11px;
}
.sb-group-toggle:hover { color: var(--ink); border-color: var(--line-2); }
.sb-group-toggle .sb-arrow { color: var(--dimmer); }
.sb-group-body { border-left: 1px solid var(--line); }

/* ── 13. Toast container (legacy position) ── */
#pmToastContainer { position: static; display: contents; }

/* ── 14. v132 admin tabs strip → compact contextual tabs ── */
.v132-tabs, .admin-tabs { border-bottom: 1px solid var(--line); }
.v132-tab, .admin-tab {
  font-size: 12px; font-weight: 500; color: var(--dim);
  padding: 8px 12px; border-bottom: 2px solid transparent;
}
.v132-tab.active, .admin-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* ── 15. Scrollbars — thin, terminal-grade ── */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 16. Focus visibility for all interactive legacy controls (§26) ── */
.fx-btn:focus-visible, .pm-btn:focus-visible, .fx-tab:focus-visible,
.pm-tab:focus-visible, .fx-pill:focus-visible, .pm-pill:focus-visible {
  outline: none; box-shadow: var(--mdn-focus-ring);
}