/* fsq-shell.css: FSQ 3-column shell (left sidebar / main / right panel) - Adapted from the mERP shell; provenance in the FSQ Brain (brain/ui/fsq_shell_guide.md). */

/* Early sidebar state: applied via data attribute on <html> BEFORE paint
   (set by fsq-theme-boot.js from localStorage).
   Prevents the sidebar flash (open -> collapse animation) on page load. */
[data-merp-sidebar="collapsed"] .merp-sidebar {
  transform: translateX(-100%); opacity: 0; pointer-events: none; transition: none;
}
[data-merp-sidebar="collapsed"] .merp-main {
  margin-left: 36px; transition: none;
}
[data-merp-sidebar="collapsed"] .merp-sidebar-reopen {
  display: flex; opacity: 1; pointer-events: auto;
}

/* Early AI panel state: applied via data attribute on <html> BEFORE paint
   (set by fsq-theme-boot.js from localStorage).
   Prevents the right-side content shift (margin-right animation) on page load.
   Only applies on desktop (>= 1024px); mobile never auto-opens the panel. */
@media (min-width: 1024px) {
  [data-merp-ai="open"] .merp-main {
    margin-right: var(--merp-ai-w); transition: none;
  }
  [data-merp-ai="open"] .merp-ai-panel {
    transform: translateX(0); transition: none;
  }
  [data-merp-ai="open"] .merp-right-reopen,
  html.merp-ai-active .merp-right-reopen {
    display: none !important;
  }
}

/* ===== CSS Variables ===== */
:root {
  --merp-sidebar-w: 240px;
  --merp-ai-w: 380px;
  --merp-topnav-h: calc(70px + var(--merp-env-h, 0px) + var(--sop-notice-h, 0px)); /* SOP D-NAV-1: + the preview notice row */
  /* --merp-clr-brand / --merp-clr-inv: defined in fsq-brand.css (the single brand source, #181) */
  --merp-clr-sidebar-bg: #f8f9fb;
  --merp-clr-sidebar-border: #e9ecef;

  /* --- AI Drawer tokens (Light mode defaults) --- */
  --ai-bg: #F9FAFB;
  --ai-surface: #FFFFFF;
  --ai-border: rgba(0,0,0,.06);
  --ai-text-primary: #1F2937;
  --ai-text-secondary: #6B7280;
  --ai-accent: #7C3AED;
  --ai-accent-hover: #6D28D9;
  --ai-chip-bg: #FFFFFF;
  --ai-chip-border: rgba(0,0,0,.1);
  --ai-chip-text: #4B5563;
  --ai-button-bg: #7C3AED;
  --ai-button-text: #FFFFFF;
  --ai-shadow-soft: 0 1px 3px rgba(0,0,0,.06);
  --ai-shadow-msg: 0 1px 2px rgba(0,0,0,.04);
  --ai-input-bg: #FFFFFF;
  --ai-input-border: rgba(0,0,0,.1);
  --ai-user-bg: #7C3AED;
  --ai-user-text: #FFFFFF;
  --ai-assistant-bg: #FFFFFF;
  --ai-assistant-border: rgba(0,0,0,.06);
  --ai-code-bg: rgba(124,58,237,.06);
  --ai-code-border: rgba(124,58,237,.1);
  --ai-error-text: #DC2626;
  --ai-error-bg: rgba(220,38,38,.06);
  --ai-success: #059669;
  --ai-divider: rgba(0,0,0,.06);
  --ai-header-bg: #FFFFFF;
  --ai-header-border: rgba(0,0,0,.08);
  --ai-context-bg: #F3F4F6;
  --ai-placeholder: #9CA3AF;
  --ai-data-bg: #F3F4F6;
  --ai-data-border: rgba(0,0,0,.06);
  --ai-data-text: #6B7280;

  /* Legacy aliases (backward compat for non-AI elements) */
  --merp-clr-ai-bg: var(--ai-bg);
  --merp-clr-ai-text: var(--ai-text-primary);
  --merp-clr-ai-input-bg: var(--ai-input-bg);
  --merp-clr-ai-accent: var(--ai-accent);
}

/* ===== DARK MODE OVERRIDES ===== */
[data-merp-theme="dark"] {
  /* --merp-clr-brand / --merp-clr-inv: dark values come from fsq-brand.css (#181) */
  --merp-clr-sidebar-bg: #1e2128;
  --merp-clr-sidebar-border: #2d3039;
  --merp-clr-body-bg: #15171c;
  --merp-clr-body-text: #d1d5db;
  --merp-clr-card-bg: #1e2128;
  --merp-clr-card-border: #2d3039;
  --merp-clr-muted: #8b919a;
  --merp-clr-table-hover: rgba(255,255,255,.03);
  --merp-clr-input-bg: #2a2d35;
  --merp-clr-input-border: #3d414b;

  /* --- AI Drawer tokens (Dark mode) --- */
  --ai-bg: #111827;
  --ai-surface: #1F2937;
  --ai-border: rgba(255,255,255,.06);
  --ai-text-primary: #E5E7EB;
  --ai-text-secondary: #9CA3AF;
  --ai-accent: #8B5CF6;
  --ai-accent-hover: #7C3AED;
  --ai-chip-bg: #1F2937;
  --ai-chip-border: rgba(255,255,255,.08);
  --ai-chip-text: #9CA3AF;
  --ai-button-bg: #8B5CF6;
  --ai-button-text: #FFFFFF;
  --ai-shadow-soft: none;
  --ai-shadow-msg: none;
  --ai-input-bg: #1F2937;
  --ai-input-border: rgba(255,255,255,.08);
  --ai-user-bg: #8B5CF6;
  --ai-user-text: #FFFFFF;
  --ai-assistant-bg: #1F2937;
  --ai-assistant-border: rgba(255,255,255,.06);
  --ai-code-bg: rgba(139,92,246,.1);
  --ai-code-border: rgba(139,92,246,.15);
  --ai-error-text: #F87171;
  --ai-error-bg: rgba(248,113,113,.08);
  --ai-success: #34D399;
  --ai-divider: rgba(255,255,255,.06);
  --ai-header-bg: #1F2937;
  --ai-header-border: rgba(255,255,255,.06);
  --ai-context-bg: rgba(255,255,255,.03);
  --ai-placeholder: rgba(255,255,255,.3);
  --ai-data-bg: rgba(0,0,0,.2);
  --ai-data-border: rgba(255,255,255,.05);
  --ai-data-text: rgba(255,255,255,.35);
}
[data-merp-theme="dark"] body,
[data-merp-theme="dark"] .merp-main {
  background: var(--merp-clr-body-bg) !important;
  color: var(--merp-clr-body-text);
}
[data-merp-theme="dark"] .merp-sidebar {
  background: var(--merp-clr-sidebar-bg);
  border-right-color: var(--merp-clr-sidebar-border);
}
[data-merp-theme="dark"] .merp-sidebar-header {
  border-bottom-color: var(--merp-clr-sidebar-border);
}
[data-merp-theme="dark"] .merp-sidebar-title { color: #e4e6ea; }
[data-merp-theme="dark"] .merp-sidebar-sub { color: #9ca3af; }
[data-merp-theme="dark"] .merp-sidebar-label { color: #9ca3af; }
[data-merp-theme="dark"] .merp-sidebar-link { color: #9ca3af; }
[data-merp-theme="dark"] .merp-sidebar-link:hover {
  background: rgba(255,255,255,.06); color: #e4e6ea;
}
[data-merp-theme="dark"] .merp-sidebar-link.active {
  background: var(--merp-clr-inv); color: #fff;
}
[data-merp-theme="dark"] .merp-sidebar-collapse {
  background: #2a2d35; border-color: #3d414b; color: #8b919a;
}
[data-merp-theme="dark"] .merp-sidebar-collapse:hover {
  background: #3d414b; color: #e4e6ea;
}
[data-merp-theme="dark"] .merp-sidebar-divider { background: var(--merp-clr-sidebar-border); }
[data-merp-theme="dark"] .merp-sidebar-reopen {
  background: #2a2d35; border-color: #3d414b; color: #8b919a;
}
[data-merp-theme="dark"] .merp-sidebar-reopen:hover {
  background: #3d414b; color: #e4e6ea;
}
/* Dark mode: page header */
[data-merp-theme="dark"] .merp-page-header h1 { color: #e4e6ea; }
[data-merp-theme="dark"] .merp-page-header p { color: #9ca3af; }
/* Dark mode: filter pills */
[data-merp-theme="dark"] .merp-filter-pill {
  background: #2a2d35; border-color: #3d414b; color: #9ca3af;
}
[data-merp-theme="dark"] .merp-filter-pill:hover { border-color: var(--merp-clr-brand); color: #d1d5db; }
[data-merp-theme="dark"] .merp-filter-pill.active {
  background: rgba(var(--fsq-brand-rgb), .15); color: var(--merp-clr-brand); border-color: var(--merp-clr-brand);
}
/* Dark mode: tabs */
[data-merp-theme="dark"] .merp-tabs { border-bottom-color: #2d3039; }
[data-merp-theme="dark"] .merp-tab { color: #9ca3af; }
[data-merp-theme="dark"] .merp-tab:hover { color: #d1d5db; }
[data-merp-theme="dark"] .merp-tab.active { color: var(--merp-clr-brand); border-bottom-color: var(--merp-clr-brand); }
/* Dark mode: Bootstrap card overrides (for detail/CRUD pages) */
[data-merp-theme="dark"] .card {
  background: var(--merp-clr-card-bg) !important; border-color: var(--merp-clr-card-border) !important;
}
[data-merp-theme="dark"] .card-header {
  background: #252830 !important; border-bottom-color: var(--merp-clr-card-border) !important;
  color: #e4e6ea !important;
}
[data-merp-theme="dark"] .card-body { color: #d1d5db; }
[data-merp-theme="dark"] .form-label { color: #8b919a !important; }
[data-merp-theme="dark"] .fw-semibold,
[data-merp-theme="dark"] .fw-bold { color: #e4e6ea; }
[data-merp-theme="dark"] .text-muted { color: #9ca3af !important; }
[data-merp-theme="dark"] .badge.text-bg-light { background: #2a2d35 !important; color: #9ca3af !important; }
[data-merp-theme="dark"] .table { color: #d1d5db; --bs-table-bg: transparent; --bs-table-color: #d1d5db; }
[data-merp-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--merp-clr-card-bg) !important;
  color: #d1d5db;
  border-bottom-color: #2d3039 !important;
}
[data-merp-theme="dark"] .table-light,
[data-merp-theme="dark"] .table-light > * { background: #252830 !important; }
[data-merp-theme="dark"] .table-light th { color: #9ca3af !important; background: #252830 !important; }
[data-merp-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #252830 !important; }
[data-merp-theme="dark"] .table-responsive { background: var(--merp-clr-card-bg); }
/* dark .btn-outline-primary: set by fsq-brand.css (#181 review F1) */
[data-merp-theme="dark"] .btn-outline-secondary { color: #9ca3af; border-color: #3d414b; }
[data-merp-theme="dark"] .badge.text-bg-info { background: #1e3a5f !important; color: #7dd3fc !important; }
[data-merp-theme="dark"] .badge.text-bg-danger { background: #5f1e1e !important; color: #fca5a5 !important; }
[data-merp-theme="dark"] .badge.text-bg-success { background: #1e4d2b !important; color: #86efac !important; }
[data-merp-theme="dark"] .badge.text-bg-warning { background: #4d3b1e !important; color: #fde68a !important; }
/* The theme toggle lives in the settings menu - hide the floating button */
.merp-theme-toggle {
  display: none !important;
}
.merp-theme-toggle:hover { background: rgba(0,0,0,.05); transform: scale(1.08); }
[data-merp-theme="dark"] .merp-theme-toggle {
  background: #2a2d35; border-color: #3d414b; color: #7c6ef0;
}
[data-merp-theme="dark"] .merp-theme-toggle:hover {
  background: #3d414b;
}

/* Override body padding for shell pages — includes chip row on mobile */
body { padding-top: calc(var(--merp-topnav-h) + var(--merp-chiprow-h, 0px)) !important; }


/* ===== LEFT SIDEBAR ===== */
.merp-sidebar {
  position: fixed;
  top: var(--merp-topnav-h); left: 0; bottom: 0;
  width: var(--merp-sidebar-w);
  background: var(--merp-clr-sidebar-bg);
  border-right: 1px solid var(--merp-clr-sidebar-border);
  z-index: 1030;
  overflow-y: auto; overflow-x: hidden;
  padding: 16px 12px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.merp-sidebar.collapsed {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.merp-sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--merp-clr-sidebar-border);
  margin-bottom: 12px;
}
.merp-sidebar-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff; flex-shrink: 0;
  background: var(--merp-clr-inv);
}
.merp-sidebar-title { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.merp-sidebar-sub { font-size: .75rem; color: #636b78; font-weight: 400; } /* FSQ: was rgba(0,0,0,.45) (3.32:1) */
.merp-sidebar-collapse {
  margin-left: auto; width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid rgba(0,0,0,.1); background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem; color: rgba(0,0,0,.4);
  transition: all .15s;
}
.merp-sidebar-collapse:hover { background: rgba(0,0,0,.05); color: rgba(0,0,0,.7); }

.merp-sidebar-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: #636b78; /* FSQ: was rgba(0,0,0,.35) (2.43:1) */
  padding: 12px 8px 6px; margin: 0;
}
.merp-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: 8px;
  color: rgba(0,0,0,.7); text-decoration: none;
  font-size: .875rem; font-weight: 500;
  transition: all .12s; margin-bottom: 1px;
}
.merp-sidebar-link:hover { background: rgba(0,0,0,.05); color: rgba(0,0,0,.9); text-decoration: none; }
.merp-sidebar-link.active {
  background: var(--merp-clr-inv); color: #fff;
}
.merp-sidebar-link.active i { color: #fff; }
.merp-sidebar-link i { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; }
.merp-sidebar-divider { height: 1px; background: var(--merp-clr-sidebar-border); margin: 8px 0; }

/* De-emphasized sidebar group (still fully functional, visually deprioritized) */
.merp-sidebar-label--muted, .merp-sidebar-link--muted { opacity: .5; }
.merp-sidebar-link--muted:hover { opacity: .8; }
.merp-sidebar-link--muted.active { opacity: 1; }

/* ===== Collapsible nav group (opt-in protocol) =====
   Wrap a group in .merp-navgroup with a .merp-navgroup-toggle header (button)
   + a .merp-navgroup-body holding the links. JS (merpInitNavGroups) wires the
   toggle, persists state per sidebar+group in localStorage, and auto-expands
   the group containing the active link. Plain .merp-sidebar-label groups are
   unaffected. */
.merp-navgroup-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: #636b78; /* FSQ: was rgba(0,0,0,.35) (2.43:1) */
  padding: 12px 8px 6px; margin: 0;
}
.merp-navgroup-toggle:hover { color: rgba(0,0,0,.6); }
.merp-navgroup-caret { font-size: .7rem; transition: transform .15s; flex-shrink: 0; }
.merp-navgroup.collapsed .merp-navgroup-caret { transform: rotate(-90deg); }
.merp-navgroup.collapsed .merp-navgroup-body { display: none; }
[data-merp-theme="dark"] .merp-navgroup-toggle { color: #9ca3af; }
[data-merp-theme="dark"] .merp-navgroup-toggle:hover { color: #9ca3af; }

.merp-sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 1029;
  background: rgba(0,0,0,.35); opacity: 0;
  transition: opacity .3s;
}
.merp-sidebar-overlay.active { display: block; opacity: 1; }

/* ===== MAIN CONTENT ===== */
.merp-main {
  margin-top: 0;
  margin-left: var(--merp-sidebar-w);
  padding: 24px;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1), margin-right .35s cubic-bezier(.4,0,.2,1);
  min-height: calc(100vh - var(--merp-topnav-h));
}
.merp-main.sidebar-hidden { margin-left: 36px; }
.merp-main.ai-open { margin-right: var(--merp-ai-w); }

/* ===== RIGHT PANEL (theme-token based) ===== */
.merp-ai-panel {
  position: fixed;
  top: var(--merp-topnav-h); right: 0; bottom: 0;
  width: var(--merp-ai-w);
  background: var(--ai-bg);
  z-index: 1035;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,.08);
  border-left: 1px solid var(--ai-border);
}
.merp-ai-panel.open { transform: translateX(0); }

/* Expanded drawer (CSS-ready, toggled by JS later) */
.merp-ai-panel.ai-drawer--expanded { width: 520px; }

/* Navbar must sit above AI panel (z-index 1035) so dropdowns aren't clipped.
   min-height ensures navbar fills the --merp-topnav-h gap so no body
   background bleeds between the navbar bottom and sidebar/panel top. */
.navbar.fixed-top { z-index: 1040 !important; min-height: var(--merp-topnav-h); }

/* --- AI Header --- */
.merp-ai-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; flex-shrink: 0;
  background: var(--ai-header-bg);
  border-bottom: 1px solid var(--ai-header-border);
}
.merp-ai-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--ai-accent), #a78bfa);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .9rem; flex-shrink: 0;
}
.merp-ai-header-text { flex: 1; min-width: 0; }
.merp-ai-title { color: var(--ai-text-primary); font-weight: 700; font-size: .95rem; }
.merp-ai-subtitle { color: var(--ai-text-secondary); font-size: .75rem; margin-top: 1px; }
.merp-ai-close {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid var(--ai-border);
  color: var(--ai-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; font-size: .8rem; flex-shrink: 0;
}
.merp-ai-close:hover { background: var(--ai-surface); color: var(--ai-text-primary); }

/* --- Context Strip (below header) --- */
.merp-ai-context-strip {
  padding: 8px 20px; font-size: .72rem; color: var(--ai-text-secondary);
  background: var(--ai-context-bg); border-bottom: 1px solid var(--ai-border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  letter-spacing: .2px;
}
.merp-ai-context-strip i { font-size: .6rem; opacity: .5; }
.merp-ai-context-divider { width: 1px; height: 10px; background: var(--ai-border); }

/* --- Messages area (generic scroll body; used by the quick overlay) --- */
/* (chat bubble / markdown / chips / input / send / confidence CSS removed: AI-only) */

/* --- Messages Area --- */
.merp-ai-messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}

/* --- Mobile FAB --- */
.merp-ai-fab {
  display: none; position: fixed; z-index: 1050;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--ai-accent); color: #fff; border: none;
  box-shadow: 0 4px 20px rgba(124,58,237,.3);
  align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem; transition: all .2s;
  bottom: 24px; right: 24px;
}
.merp-ai-fab:hover { transform: scale(1.06); box-shadow: 0 6px 24px rgba(124,58,237,.4); }
.merp-ai-fab-sparkle { color: #fff; }

/* --- Quick Overlay (mobile) --- */
.merp-ai-quick-overlay {
  display: none; position: fixed; z-index: 1060;
  background: var(--ai-bg); color: var(--ai-text-primary);
  border: 1px solid var(--ai-border);
  border-radius: 18px; box-shadow: 0 12px 48px rgba(0,0,0,.15);
  overflow: hidden; flex-direction: column;
  max-height: 70vh; bottom: 88px; right: 16px;
  width: min(360px, calc(100vw - 32px));
  animation: merpQuickSlide .3s cubic-bezier(.4,0,.2,1);
}
.merp-ai-quick-overlay.active { display: flex; }
@keyframes merpQuickSlide {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.merp-ai-quick-overlay .merp-ai-header { padding: 14px 16px; }
.merp-ai-quick-overlay .merp-ai-messages { padding: 14px 16px; min-height: 120px; }
.merp-ai-quick-overlay .merp-ai-input-area { padding: 10px 14px; }
.merp-ai-quick-overlay .merp-ai-suggestions { padding: 0 14px 10px; }

/* ===== SIDEBAR RE-OPEN TAB (left edge, visible when collapsed) ===== */
.merp-sidebar-reopen {
  position: fixed;
  top: 96px; left: 0;
  width: 28px; height: 40px;
  border-radius: 0 8px 8px 0;
  border: 1px solid #c5cad0; border-left: none;
  background: #e2e6ea;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem;
  color: rgba(0,0,0,.6); z-index: 1031;
  transition: all .2s;
  box-shadow: 2px 0 8px rgba(0,0,0,.1);
}
.merp-sidebar-reopen:hover { background: #d0d4d9; color: rgba(0,0,0,.85); width: 32px; }
.merp-sidebar-reopen.visible { display: flex; }

/* ===== RIGHT PANEL RE-OPEN TAB (right edge, visible when collapsed) ===== */
.merp-right-reopen {
  position: fixed;
  top: 116px; right: 0;
  width: 28px; height: 40px;
  border-radius: 8px 0 0 8px;
  border: 1px solid #c5cad0; border-right: none;
  background: #e2e6ea;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; font-size: .8rem;
  color: rgba(0,0,0,.6); z-index: 1031;
  transition: all .2s;
  box-shadow: -2px 0 8px rgba(0,0,0,.1);
}
.merp-right-reopen:hover { background: #d0d4d9; color: rgba(0,0,0,.85); width: 32px; }
.merp-right-reopen.visible { display: flex; }
[data-merp-theme="dark"] .merp-right-reopen {
  background: #2a2d35; border-color: #3d414b; color: #8b919a;
}
[data-merp-theme="dark"] .merp-right-reopen:hover {
  background: #3d414b; color: #e4e6ea;
}

/* ===== PAGE HEADER ===== */
.merp-page-header { margin-bottom: 20px; }
.merp-page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.merp-page-header p { color: rgba(0,0,0,.6); margin: 4px 0 0; font-size: .9rem; } /* FSQ: was .5 (3.95:1) */

/* ===== FILTER PILLS ===== */
.merp-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.merp-filter-pill {
  padding: 6px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 500;
  color: rgba(0,0,0,.6); background: #fff;
  border: 2px solid #e9ecef; cursor: pointer;
  transition: all .15s; text-decoration: none;
}
.merp-filter-pill:hover { border-color: var(--merp-clr-brand); color: rgba(0,0,0,.8); }
.merp-filter-pill.active {
  background: var(--fsq-selected-bg); color: var(--merp-clr-brand);
  font-weight: 700; border-color: var(--merp-clr-brand);
}

/* ===== TABS ===== */
.merp-tabs {
  display: flex; gap: 4px; border-bottom: 2px solid #e9ecef;
  margin-bottom: 20px;
}
.merp-tab {
  padding: 10px 20px; font-size: .9rem; font-weight: 500;
  color: rgba(0,0,0,.6); background: none; border: none; /* FSQ: was .5 (3.95:1) */
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: all .15s;
}
.merp-tab:hover { color: rgba(0,0,0,.8); }
.merp-tab.active {
  color: var(--merp-clr-brand); font-weight: 700;
  border-bottom-color: var(--merp-clr-brand);
}

/* ===== RESPONSIVE ===== */

/* iPad portrait and below (< 1024px) */
@media (max-width: 1023px) {
  .merp-sidebar {
    transform: translateX(-100%); opacity: 0; pointer-events: none;
    z-index: 1040;
  }
  .merp-sidebar.mobile-open {
    transform: translateX(0); opacity: 1; pointer-events: auto;
  }
  .merp-main { margin-left: 0 !important; }
  .merp-main.ai-open { margin-right: 0 !important; }
  /* Mobile/tablet navbar wraps to a second row (chip row),
     so push the sidebar-reopen tab below it so it's not hidden behind the header. */
  .merp-sidebar-reopen {
    display: flex !important;
    top: calc(115px + var(--merp-env-h, 0px) + var(--sop-notice-h, 0px)); /* SOP D-NAV-1 */
  }

  /* AI panel becomes overlay */
  .merp-ai-panel {
    width: min(380px, 85vw);
    box-shadow: -8px 0 40px rgba(0,0,0,.25);
  }
  .merp-btn-ai-trigger { display: none; }
  .merp-ai-fab { display: flex; }
  .merp-right-reopen { display: none !important; }
}

/* Phone (< 576px) */
@media (max-width: 575px) {
  .merp-main { padding: 12px 6px; }
  /* Tighten Bootstrap container gutters on phone so pages can use full width. */
  .merp-main .container-xl,
  .merp-main .container-fluid,
  .merp-main .container { padding-left: 8px; padding-right: 8px; }
  .merp-ai-fab { bottom: 20px; right: 16px; width: 48px; height: 48px; border-radius: 14px; }
  .merp-ai-quick-overlay { bottom: 80px; right: 8px; width: calc(100vw - 16px); max-height: 65vh; }
}

/* =====================================================================
   CMP-224 right nav-only panel
   ===================================================================== */
/* ===== Right Nav Panel (light-bg variant) ===== */
.merp-right-nav {
position: fixed;
top: var(--merp-topnav-h); right: 0; bottom: 0;
width: var(--merp-ai-w);
background: #f8f9fb;
z-index: 1035;
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
box-shadow: -2px 0 12px rgba(0,0,0,.08);
border-left: 1px solid #e9ecef;
overflow-y: auto; overflow-x: hidden;
}
.merp-right-nav.open { transform: translateX(0); }

/* Header */
.merp-right-nav-header {
display: flex; align-items: center; gap: 10px;
padding: 16px 18px; border-bottom: 1px solid #e9ecef;
flex-shrink: 0; background: #fff;
}
.merp-right-nav-icon {
width: 32px; height: 32px; border-radius: 8px;
background: linear-gradient(135deg, var(--fsq-brand-fill), var(--fsq-e-hover));
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: .9rem; flex-shrink: 0;
}
.merp-right-nav-title { font-weight: 700; font-size: .95rem; color: #212529; }
.merp-right-nav-subtitle { color: #6c757d; font-size: .75rem; }
.merp-right-nav-close {
margin-left: auto; width: 30px; height: 30px; border-radius: 6px;
background: #f0f0f0; border: 1px solid #e0e0e0; color: #6c757d;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all .15s; font-size: .9rem;
}
.merp-right-nav-close:hover { background: #e2e2e2; color: #333; }

/* Content area */
.merp-right-nav-body {
flex: 1; overflow-y: auto; padding: 14px 16px;
}

/* Section labels */
.merp-right-nav-label {
font-size: .7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .8px; color: #636b78; /* FSQ: was #999 (2.7:1) */
padding: 10px 4px 6px; margin: 0;
}

/* Nav link items */
.merp-right-nav-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 8px;
color: #495057; text-decoration: none;
font-size: .875rem; font-weight: 500;
transition: all .12s; margin-bottom: 2px;
min-height: 44px;
}
.merp-right-nav-link:hover { background: rgba(0,0,0,.04); color: #212529; text-decoration: none; }
.merp-right-nav-link i { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; color: #6c757d; }
.merp-right-nav-link:hover i { color: var(--fsq-brand); }
.merp-right-nav-link-desc {
font-size: .75rem; color: #636b78; margin-top: 1px; /* FSQ: was #999 */
}

/* Divider */
.merp-right-nav-divider { height: 1px; background: #e9ecef; margin: 8px 0; }

/* Action buttons */
.merp-right-nav-action {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 8px;
color: var(--fsq-brand); text-decoration: none;
font-size: .875rem; font-weight: 600;
transition: all .12s; margin-bottom: 2px;
border: 1px solid transparent; min-height: 44px;
background: none; width: 100%; cursor: pointer;
text-align: left;
}
.merp-right-nav-action:hover {
background: rgba(var(--fsq-brand-rgb), .06); border-color: rgba(var(--fsq-brand-rgb), .15);
text-decoration: none; color: var(--fsq-brand);
}
.merp-right-nav-action i { width: 18px; text-align: center; font-size: .9rem; flex-shrink: 0; }


/* Empty state */
.merp-right-nav-empty {
color: #636b78; font-size: .85rem; padding: 16px 4px; /* FSQ: was #999 */
font-style: italic;
}

/* ===== DARK MODE for right nav panel ===== */
[data-merp-theme="dark"] .merp-right-nav {
background: #1e2128; border-left-color: #2d3039;
box-shadow: -2px 0 12px rgba(0,0,0,.3);
}
[data-merp-theme="dark"] .merp-right-nav-header {
background: #252830; border-bottom-color: #2d3039;
}
[data-merp-theme="dark"] .merp-right-nav-title { color: #e4e6ea; }
[data-merp-theme="dark"] .merp-right-nav-subtitle { color: #9ca3af; }
[data-merp-theme="dark"] .merp-right-nav-close {
background: #2a2d35; border-color: #3d414b; color: #8b919a;
}
[data-merp-theme="dark"] .merp-right-nav-close:hover {
background: #3d414b; color: #e4e6ea;
}
[data-merp-theme="dark"] .merp-right-nav-label { color: #9ca3af; }
[data-merp-theme="dark"] .merp-right-nav-link { color: #9ca3af; }
[data-merp-theme="dark"] .merp-right-nav-link:hover {
background: rgba(255,255,255,.06); color: #e4e6ea;
}
[data-merp-theme="dark"] .merp-right-nav-link i { color: #9ca3af; }
[data-merp-theme="dark"] .merp-right-nav-link:hover i { color: var(--fsq-brand); }
[data-merp-theme="dark"] .merp-right-nav-link-desc { color: #9ca3af; }
[data-merp-theme="dark"] .merp-right-nav-divider { background: #2d3039; }
[data-merp-theme="dark"] .merp-right-nav-action { color: var(--fsq-brand); }
[data-merp-theme="dark"] .merp-right-nav-action:hover {
background: rgba(var(--fsq-brand-rgb), .1); border-color: rgba(var(--fsq-brand-rgb), .2);
}
[data-merp-theme="dark"] .merp-right-nav-empty { color: #9ca3af; }

/* ===== Responsive ===== */
@media (max-width: 1023px) {
.merp-right-nav {
    width: min(360px, 85vw);
    box-shadow: -8px 0 40px rgba(0,0,0,.2);
}
}

/* =====================================================================
   FSQ additions
   ===================================================================== */
/* Environment offset: 0 (the FSQ environment badge sits inside the bar). */
:root { --merp-env-h: 0px; }

/* Visible keyboard focus on shell controls */
.merp-sidebar-link:focus-visible,
.merp-sidebar-collapse:focus-visible,
.merp-sidebar-reopen:focus-visible,
.merp-right-reopen:focus-visible,
.merp-right-nav-link:focus-visible,
.merp-right-nav-action:focus-visible,
.merp-right-nav-close:focus-visible,
.merp-ai-fab:focus-visible,
.merp-ai-close:focus-visible {
  outline: 2px solid var(--merp-clr-brand); outline-offset: 2px;
}
#merpMain:focus { outline: none; }

/* Coming-soon rows: never links, quiet but readable (contrast >= 4.5:1) */
.merp-sidebar-link.fsq-is-soon { color: #6b7280; cursor: default; }
.merp-sidebar-link.fsq-is-soon:hover { background: transparent; color: #6b7280; }
.merp-sidebar-link.fsq-is-soon .fsq-soon-text { flex: 1 1 auto; min-width: 0; }
[data-merp-theme="dark"] .merp-sidebar-link.fsq-is-soon,
[data-merp-theme="dark"] .merp-sidebar-link.fsq-is-soon:hover { color: #8b919a; background: transparent; }
.merp-right-nav-link.fsq-is-soon { cursor: default; }
.merp-right-nav-link.fsq-is-soon:hover { background: transparent; }

/* "Coming soon" pill = muted status chip (interior style guide s7 / s14) */
.fsq-soon-pill {
  display: inline-flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  font-size: .68rem; font-weight: 600; line-height: 1; letter-spacing: .2px;
  padding: .28rem .5rem; border-radius: 999px;
  background: #eef1f6; color: #5d6878;
}
[data-merp-theme="dark"] .fsq-soon-pill { background: rgba(255,255,255,.08); color: #aeb6c2; }

/* CMP-224 FAB + quick overlay in the nav-only (blue) look; rows reuse .merp-right-nav-link */
.fsq-rn-quick { gap: 4px; padding: 14px; }
.merp-ai-fab.fsq-rn-fab { background: var(--fsq-brand-fill); box-shadow: 0 4px 20px rgba(var(--fsq-brand-fill-rgb), .3); }
.merp-ai-fab.fsq-rn-fab i { color: #fff; }
.merp-ai-icon.fsq-rn-icon { background: linear-gradient(135deg, var(--fsq-brand-fill), var(--fsq-e-deep)); }

/* Page hero (interior style guide s9) */
.fsq-hero {
  background: var(--fsq-subtle-bg); border: 1px solid var(--fsq-subtle-border); border-radius: 16px;
  padding: 18px 26px; margin-bottom: 20px;
}
.fsq-hero-kicker {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fsq-brand); margin-bottom: 8px;
}
.fsq-hero h1 { font-size: 1.45rem; font-weight: 800; line-height: 1.25; margin: 0 0 4px; color: #17223b; }
.fsq-hero p { margin: 0; font-size: .92rem; line-height: 1.5; color: #54627e; max-width: 760px; }
[data-merp-theme="dark"] .fsq-hero { background: var(--fsq-subtle-bg); border-color: var(--fsq-subtle-border); }
[data-merp-theme="dark"] .fsq-hero-kicker { color: var(--fsq-brand); }
[data-merp-theme="dark"] .fsq-hero h1 { color: #e4e6ea; }
[data-merp-theme="dark"] .fsq-hero p { color: #a3adbd; }

/* Info banner (style guide s7 "Info banner"): verdict first, then one sentence */
.fsq-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: #eef4ff; color: #33507e; border: 1px solid #d6e2fb;
  border-radius: 14px; padding: 14px 18px; margin-bottom: 20px;
  font-size: .92rem; line-height: 1.5;
}
.fsq-banner > i { margin-top: 4px; flex-shrink: 0; }
[data-merp-theme="dark"] .fsq-banner { background: #1e2a3d; color: #bcd0f2; border-color: #2b3b57; }

/* Interior panel (style guide s8) */
.fsq-panel {
  background: #fff; border: 1px solid #e8ecf3; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.03); padding: 20px 22px;
}
.fsq-panel h2 { font-size: 1.05rem; font-weight: 800; color: #17223b; margin: 0 0 2px; }
.fsq-panel-sub { font-size: .88rem; color: #54627e; margin: 0 0 8px; }
[data-merp-theme="dark"] .fsq-panel { background: #1e2128; border-color: #2d3039; box-shadow: none; }
[data-merp-theme="dark"] .fsq-panel h2 { color: #e4e6ea; }
[data-merp-theme="dark"] .fsq-panel-sub { color: #9ca3af; }

/* Coming-soon list (touch-row shape) */
.fsq-soon-list { list-style: none; margin: 0; padding: 0; }
.fsq-soon-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid #edf0f5; min-height: 56px;
}
.fsq-soon-list li:first-child { border-top: 0; }
.fsq-soon-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--fsq-brand-bg); color: var(--fsq-brand-fg);
}
.fsq-soon-body { flex: 1 1 auto; min-width: 0; }
.fsq-soon-name { font-weight: 700; font-size: .95rem; color: #17223b; }
.fsq-soon-desc { font-size: .86rem; line-height: 1.45; color: #54627e; }
[data-merp-theme="dark"] .fsq-soon-list li { border-top-color: #2d3039; }
[data-merp-theme="dark"] .fsq-soon-ico { background: var(--fsq-brand-bg); color: var(--fsq-brand-fg); }
[data-merp-theme="dark"] .fsq-soon-name { color: #e4e6ea; }
[data-merp-theme="dark"] .fsq-soon-desc { color: #a3adbd; }

/* Footer stamp */
.fsq-footer-stamp { font-size: 11px; margin-top: 6px; letter-spacing: .2px; }

/* Sidebar coming-soon row: label with the pill on its own line (fits EN and ES in 240px) */
.merp-sidebar-link.fsq-is-soon { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.merp-sidebar-link.fsq-is-soon > i { margin-top: 3px; }
.merp-sidebar-link.fsq-is-soon .fsq-soon-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }

/* Touch sizes while the sidebar is a drawer (< 1024px) */
@media (max-width: 1023px) {
  /* Drawer starts under the real two-row mobile bar; --merp-chiprow-h is 0 from 992px up. */
  .merp-sidebar { top: calc(var(--merp-topnav-h) + var(--merp-chiprow-h, 0px)); }
  .merp-sidebar-link { min-height: 44px; }
}
/* Touch targets >= 44x44 below 1024px and on any coarse pointer (desktop fine pointer unchanged) */
@media (max-width: 1023.98px), (pointer: coarse) {
  .merp-sidebar-collapse { width: 44px; height: 44px; flex-shrink: 0; font-size: .95rem; }
  .merp-sidebar-reopen, .merp-sidebar-reopen:hover { width: 44px; height: 44px; font-size: .95rem; }
  .merp-right-reopen, .merp-right-reopen:hover { width: 44px; height: 44px; font-size: .95rem; }
}

@media (max-width: 575px) {
  .fsq-hero { padding: 14px 16px; }
  .fsq-panel { padding: 16px; }
  .fsq-soon-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: start; }
  .fsq-soon-list li .fsq-soon-pill { grid-column: 2; justify-self: start; }
}

/* =====================================================================
   SOP D-NAV-1 (mERP SOP shell delta; brain/_reports/SOPUI/family-deltas.md)
   Preview notice row under the top bar, context-strip Example mark, section tabs.
   --sop-notice-h is the notice height; it is part of --merp-topnav-h so the page, sidebar and drawers stay below the notice.
   ===================================================================== */
:root { --sop-notice-h: 0px; }
:root:has(#sopPreviewNotice) { --sop-notice-h: 28px; }
@media (max-width: 575px) { :root:has(#sopPreviewNotice) { --sop-notice-h: 42px; } }
#merpTopNav:has(.sop-preview-notice) { padding-bottom: var(--sop-notice-h); }
#merpTopNav .sop-preview-notice {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--sop-notice-h);
  display: flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 12px; overflow: hidden;
  font-size: .78rem; line-height: 1.25; text-align: center;
  background: var(--fsq-selected-bg, #F3EDF7); color: var(--fsq-selected-fg, #532F6F);
  border-top: 1px solid var(--fsq-subtle-border, rgba(107,63,140,.25));
}
#merpTopNav .sop-preview-notice i { flex: 0 0 auto; }
.sop-ctx-example {
  display: inline-block; flex: 0 0 auto; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; line-height: 1.5; text-transform: none;
  background: var(--fsq-selected-bg, #F3EDF7); color: var(--fsq-selected-fg, #532F6F); border: 1px solid var(--fsq-selected-border, #6B3F8C);
}
#merpTopNav .sop-ctx-item { min-width: 0; flex: 0 1 auto; }
#merpTopNav .sop-ctx-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; cursor: default; }
@media (max-width: 991px) { #merpTopNav .sop-ctx-item { flex: 1 1 0; } }
#merpTopNav .app-nav .nav-link { white-space: nowrap; }

/* SOP D-SHELL-1 (family-deltas.md): dark-mode parity for Bootstrap list groups, card footers, breadcrumbs inside the page
   (the family dark overrides stop at .card/.card-header/.card-body, and Bootstrap's dark tokens are not switched on). Page content only;
   the light-island top bar and user menu keep their own colours. */
[data-merp-theme="dark"] .merp-main .list-group-item { background: transparent; color: #d1d5db; border-color: var(--merp-clr-card-border, #2d3039); }
[data-merp-theme="dark"] .merp-main .card-footer { background: #252830; border-top-color: var(--merp-clr-card-border, #2d3039); color: #d1d5db; }
[data-merp-theme="dark"] .merp-main .breadcrumb-item.active { color: #d1d5db; }
[data-merp-theme="dark"] .merp-main .breadcrumb-item + .breadcrumb-item::before { color: #9ca3af; }
/* SOP D-SHELL-1: the side-by-side panes (EX-903 CMP-918, fsq-templates.css) use --bs-body-bg, which the family dark theme does not switch. */
[data-merp-theme="dark"] .merp-main .fsq-sbs-pane { background: var(--merp-clr-card-bg); border-color: var(--merp-clr-card-border, #2d3039); color: #d1d5db; }

/* SOP D-SHELL-1b (#230 repair V-04): primary in-page controls are at least 44px tall on phones and tablets (below 992px). Desktop unchanged. */
@media (max-width: 991px) {
  .merp-main .btn, .merp-main .form-control, .merp-main .form-select { min-height: 44px; }
  .merp-main .btn { display: inline-flex; align-items: center; justify-content: center; }
  .merp-main .merp-admin-table .fsq-sort-btn { min-height: 44px; }
  .merp-main .merp-admin-table thead th { padding-top: 0; padding-bottom: 0; }
  .merp-main .merp-admin-table thead th, .merp-main .merp-admin-table tbody td { padding-left: 8px; padding-right: 8px; }
  .merp-main .merp-admin-table .merp-admin-chevron { padding-right: 8px; width: 24px; }
}

/* SOP D-SHELL-1c (#230 repair V-21): the left-edge sidebar re-open tab duplicates the hamburger below 992px (the offcanvas lists the same pages)
   and overlapped the page heading, so it is hidden there; from 992px to 1023px (no hamburger, sidebar still hidden) the main column gets a
   gutter as wide as the tab. */
@media (max-width: 991px) { .merp-sidebar-reopen { display: none !important; } }
@media (min-width: 992px) and (max-width: 1023px) { .merp-main { padding-left: 34px; } }

/* SOP D-SHELL-1d (#230 repair V-14): printing an ordinary page prints the content only, on paper colours, even from the dark theme. */
@media print {
  #merpTopNav, .sop-preview-notice, #merpSidebar, #merpSidebarOverlay, #merpSidebarReopen, #merpRightReopen, #merpMobileNav,
  .offcanvas, .offcanvas-backdrop, .merp-mobile-hamburger, .merp-ai-panel, #sopuiPreviewBar, .fsq-skip-link { display: none !important; }
  html, body, html[data-merp-theme="dark"], html[data-merp-theme="dark"] body { background: #fff !important; color: #111 !important; padding-top: 0 !important; }
  .merp-main { margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: none !important; }
  .merp-main > .container-xl { max-width: none !important; padding: 0 !important; }
  html[data-merp-theme="dark"] .merp-main, html[data-merp-theme="dark"] .merp-main *, html[data-merp-theme="dark"] .fsq-footer, html[data-merp-theme="dark"] .fsq-footer * {
    background: transparent !important; color: #111 !important; border-color: #999 !important; box-shadow: none !important; }
  .merp-main .card, .merp-main .merp-admin-table-card { box-shadow: none !important; break-inside: avoid; }
}