.website-builder-mode #ws-frame-wrapper[data-ws-device="mobile"] {
  width: min(375px, calc(100vw - 2rem)) !important;
  height: 92% !important;
  border-radius: 1.5rem !important;
  border: 4px solid #475569 !important;
}
.website-builder-mode #ws-preview-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel,
.website-builder-mode .ws-studio-container #ws-left-drawer-content {
  color: var(--ws-text) !important;
  text-shadow: none !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-900,
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-800,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-900,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-800 {
  color: var(--ws-text) !important;
}
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-500,
.website-builder-mode .ws-studio-container #ws-inspector-panel .text-slate-400,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-500,
.website-builder-mode .ws-studio-container #ws-left-drawer-content .text-slate-400 {
  color: var(--ws-text-muted) !important;
}
.website-builder-mode .ws-studio-container .liquid-glass-input,
.website-builder-mode .ws-studio-container .liquid-glass-card,
.website-builder-mode .ws-studio-container .liquid-glass-panel {
  color: var(--ws-text) !important;
}
@media (max-width: 768px) {
  .website-builder-mode .ws-top-action-bar {
    align-items: stretch !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    min-height: 52px !important;
  }
  .website-builder-mode .ws-top-action-bar > * { flex-shrink: 0 !important; }
  .website-builder-mode #ws-left-dock-wrapper,
  .website-builder-mode #ws-right-dock-wrapper {
    top: .5rem !important;
    max-height: calc(100% - 1rem) !important;
  }
  .website-builder-mode #ws-left-drawer-content,
  .website-builder-mode #ws-inspector-panel {
    width: min(86vw, 330px) !important;
    max-width: calc(100vw - 4rem) !important;
  }
  .website-builder-mode #ws-left-dock-wrapper { left: .5rem !important; }
  .website-builder-mode #ws-right-dock-wrapper { right: .5rem !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="desktop"] { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="tablet"] { width: calc(100vw - 1rem) !important; max-width: calc(100vw - 1rem) !important; }
  .website-builder-mode #ws-frame-wrapper[data-ws-device="mobile"] { width: min(375px, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem) !important; }
}

/* Website Builder editor chrome: keep the preview expressive, but make the
 * controls calm, opaque, and readable. The editor is a work surface, not a
 * translucent marketing card. This intentionally overrides the global glass
 * treatment only inside builder mode. */
.website-builder-mode {
  --ws-panel: #101b31;
  --ws-panel-raised: #182641;
  --ws-border: #344766;
  --ws-text: #f8fafc;
  --ws-text-secondary: #dbe7f5;
  --ws-text-muted: #a8b7cc;
  --ws-input-bg: #0b1426;
  --ws-input-border: #405577;
  --ws-input-text: #f8fafc;
}
.website-builder-mode .ws-top-action-bar,
.website-builder-mode #ws-left-dock-wrapper nav,
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-right-dock-wrapper > div,
.website-builder-mode #ws-inspector-panel {
  background: var(--ws-panel) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--ws-border) !important;
  color: var(--ws-text) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 23, .34) !important;
}
.website-builder-mode #ws-left-drawer-content,
.website-builder-mode #ws-inspector-panel {
  opacity: 1 !important;
}
.website-builder-mode .ws-top-action-bar button,
.website-builder-mode .ws-top-action-bar select,
.website-builder-mode #ws-right-collapse-btn,
.website-builder-mode #ws-left-collapse-btn,
.website-builder-mode .ws-device-btn,
.website-builder-mode .ws-nav-rail-btn {
  text-shadow: none !important;
  filter: none !important;
}
.website-builder-mode .ws-top-action-bar button:not(.bg-indigo-600),
.website-builder-mode .ws-top-action-bar select,
.website-builder-mode #ws-right-collapse-btn,
.website-builder-mode #ws-left-collapse-btn {
  background: var(--ws-panel-raised) !important;
  color: var(--ws-text-secondary) !important;
  border-color: var(--ws-border) !important;
}
.website-builder-mode .ws-top-action-bar button:not(.bg-indigo-600):hover,
.website-builder-mode #ws-right-collapse-btn:hover,
.website-builder-mode #ws-left-collapse-btn:hover {
  background: #223453 !important;
  color: #fff !important;
}
.website-builder-mode .ws-top-action-bar .bg-indigo-600,
.website-builder-mode .ws-device-btn.bg-indigo-600 {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .28) !important;
}
.website-builder-mode #ws-left-drawer-content input,
.website-builder-mode #ws-left-drawer-content select,
.website-builder-mode #ws-left-drawer-content textarea,
.website-builder-mode #ws-inspector-panel input,
.website-builder-mode #ws-inspector-panel select,
.website-builder-mode #ws-inspector-panel textarea {
  background: var(--ws-input-bg) !important;
  color: var(--ws-input-text) !important;
  border-color: var(--ws-input-border) !important;
}
.website-builder-mode #ws-left-drawer-content input::placeholder,
.website-builder-mode #ws-inspector-panel input::placeholder,
.website-builder-mode #ws-inspector-panel textarea::placeholder {
  /* Themed, not a single hardcoded value: #8fa2bd was picked for the dark builder
     and rendered at ~2.6:1 on the light one. --ws-text-muted is #8F9BB3 dark / #64748B
     light, so each theme gets a placeholder that passes on its own field. */
  color: var(--ws-text-muted) !important;
  opacity: 1 !important;
}
.website-builder-mode #ws-left-drawer-content .liquid-glass-card,
.website-builder-mode #ws-inspector-panel .liquid-glass-card,
.website-builder-mode #ws-left-drawer-content .liquid-glass-panel,
.website-builder-mode #ws-inspector-panel .liquid-glass-panel {
  background: var(--ws-panel-raised) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--ws-border) !important;
  box-shadow: none !important;
}
.website-builder-mode #ws-left-drawer-content .text-slate-500,
.website-builder-mode #ws-left-drawer-content .text-slate-400,
.website-builder-mode #ws-inspector-panel .text-slate-500,
.website-builder-mode #ws-inspector-panel .text-slate-400 {
  color: var(--ws-text-muted) !important;
}
@media (max-width: 900px) {
  .website-builder-mode #ws-left-dock-wrapper,
  .website-builder-mode #ws-right-dock-wrapper { max-width: calc(100vw - 1rem); }
  .website-builder-mode #ws-left-drawer-content { width: min(290px, calc(100vw - 4.5rem)) !important; }
  .website-builder-mode #ws-inspector-panel { width: min(320px, calc(100vw - 3rem)) !important; }
  .website-builder-mode .ws-top-action-bar { padding-left: .65rem !important; padding-right: .65rem !important; gap: .4rem !important; }
  .website-builder-mode .ws-top-action-bar > div { min-width: 0; }
  .website-builder-mode .ws-top-action-bar button,
  .website-builder-mode .ws-top-action-bar select { min-height: 34px; }
}

/* Builder contrast and glass regression guard.  The dashboard's generic
   `.dark`/`.text-slate-*` utilities can win against the builder's design
   tokens, leaving light mode with low-contrast navy panels and unreadable
   glass controls. Keep this scoped to the editor so production sites retain
   their own theme CSS. */
[data-ws-theme="light"].website-builder-mode .ws-builder-header,
[data-ws-theme="light"].website-builder-mode .ws-top-action-bar,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel,
[data-ws-theme="light"].website-builder-mode #ws-left-dock-wrapper nav {
  color: #0f172a !important;
}
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel,
[data-ws-theme="light"].website-builder-mode #ws-left-dock-wrapper nav,
[data-ws-theme="light"].website-builder-mode .liquid-glass-card,
[data-ws-theme="light"].website-builder-mode .liquid-glass-panel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14) !important;
}
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-800,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-800 { color: #0f172a !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-500,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .text-slate-400,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-500,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .text-slate-400 { color: #475569 !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .bg-slate-950,
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content .bg-slate-900,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .bg-slate-950,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel .bg-slate-900 { background: #f8fafc !important; color: #0f172a !important; }
[data-ws-theme="light"].website-builder-mode #ws-left-drawer-content button,
[data-ws-theme="light"].website-builder-mode #ws-inspector-panel button { text-shadow: none !important; }

/* Website Builder chrome sizing guard. The editor rails are overlays, so a
   generic `w-64`/text-xs utility must not be allowed to collapse them into
   unreadable strips or clip the inspector off the viewport. */
.website-builder-mode #ws-left-dock-wrapper,
.website-builder-mode #ws-right-dock-wrapper {
  top: 1rem !important;
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100% - 2rem) !important;
}
.website-builder-mode #ws-left-dock-wrapper { left: 1rem !important; }
.website-builder-mode #ws-right-dock-wrapper { right: 1rem !important; }
.website-builder-mode #ws-left-dock-wrapper > nav {
  width: 3.5rem !important;
  min-width: 3.5rem !important;
  padding: .65rem .35rem !important;
  gap: .4rem !important;
}
.website-builder-mode #ws-left-dock-wrapper > nav .ws-nav-rail-btn,
.website-builder-mode #ws-left-dock-wrapper > nav #ws-left-collapse-btn {
  width: 2.7rem !important;
  min-width: 2.7rem !important;
  height: 2.7rem !important;
  min-height: 2.7rem !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.website-builder-mode #ws-left-dock-wrapper > nav .ws-nav-rail-btn svg {
  display: block;
  flex: 0 0 auto;
}
.website-builder-mode #ws-left-drawer-content {
  width: min(20rem, calc(100vw - 7rem)) !important;
  min-width: min(20rem, calc(100vw - 7rem)) !important;
}
.website-builder-mode #ws-inspector-panel {
  width: min(22rem, calc(100vw - 3rem)) !important;
  min-width: min(22rem, calc(100vw - 3rem)) !important;
}
.website-builder-mode .ws-top-action-bar button,
.website-builder-mode .ws-top-action-bar select {
  min-height: 2rem !important;
  white-space: nowrap !important;
}
.website-builder-mode .ws-top-action-bar { min-height: 3.25rem !important; }
@media (max-width: 768px) {
  .website-builder-mode #ws-left-dock-wrapper { left: .5rem !important; }
  .website-builder-mode #ws-right-dock-wrapper { right: .5rem !important; }
  .website-builder-mode #ws-left-drawer-content,
  .website-builder-mode #ws-inspector-panel { min-width: 0 !important; }
  .website-builder-mode #ws-left-drawer-content { width: min(86vw, 21rem) !important; }
  .website-builder-mode #ws-inspector-panel { width: min(86vw, 22rem) !important; }
}

/* Shared Liquid Glass dashboard chrome and bold Apple-style workspace headers.
   Re-declared (identically) in the "Liquid Glass workspace layer" block below —
   that duplication predates this merge; harmless in CSS (last write wins, same
   values), left as-is rather than risk trimming something still relied upon. */
:root {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(255, 255, 255, 0.85);
  --ms-surface-solid: #f3f5f8;
  --ms-text: #17191f;
  --ms-text-muted: #687386;
  --ms-border: rgba(23, 25, 31, 0.12);
  --ms-primary: #2563eb;
  --ms-primary-hover: #1f4ed8;
  --ms-accent: #2563EB;
  --ms-glass-blur: 24px;
  --ms-radius-card: 20px;
  --ms-radius-control: 12px;
  --ms-shadow-glass: 0 16px 40px rgba(23, 25, 31, 0.08);
}
.dark { --ms-bg:#0f1117; --ms-surface:rgba(26,29,36,.76); --ms-surface-solid:#1a1d24; --ms-text:#f7f8fa; --ms-text-muted:#a5acb8; --ms-border:rgba(255,255,255,.12); --ms-shadow-glass:0 16px 40px rgba(0,0,0,.22); }
.ms-glass, .ms-card { background:var(--ms-surface); border:1px solid var(--ms-border); border-radius:var(--ms-radius-card); box-shadow:var(--ms-shadow-glass); backdrop-filter:blur(var(--ms-glass-blur)); -webkit-backdrop-filter:blur(var(--ms-glass-blur)); }
.ms-button-primary { background:var(--ms-primary); color:#fff; border-radius:var(--ms-radius-control); }
.ms-button-primary:hover { background:var(--ms-primary-hover); }
body.ms-app-booting, body.ms-app-booting main { background:var(--ms-bg) !important; }
body.ms-app-booting > header { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 8px 24px rgba(23,25,31,.06); }
#dept-sidebar, #nav-desktop, #nav-mobile, #report-rail { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; }
.ms-suite-nav-header,
.ms-product-nav-item,
.ms-suite-nav-item { border-color:var(--ms-border); }
.ms-suite-nav-header { background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); border:1px solid var(--ms-border); border-radius:var(--ms-radius-control); box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }
.ms-suite-nav-item:hover,
.ms-product-nav-item:hover { background:rgba(255,255,255,.24) !important; }
.ms-engine-header { padding:clamp(1rem,2vw,1.5rem); border:1px solid var(--ms-border); border-radius:var(--ms-radius-card); background:var(--ms-surface); box-shadow:var(--ms-shadow-glass); backdrop-filter:blur(var(--ms-glass-blur)); -webkit-backdrop-filter:blur(var(--ms-glass-blur)); }
.ms-engine-title { font-size:clamp(2rem,4vw,3.5rem) !important; line-height:.98 !important; letter-spacing:-.055em !important; font-weight:900 !important; font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#service-overview-root .rounded-2xl, #parts-overview-root .rounded-2xl { border-radius:var(--ms-radius-card); }
#service-overview-root .bg-white, #parts-overview-root .bg-white { background:var(--ms-surface) !important; border-color:var(--ms-border) !important; }
#service-overview-root button, #parts-overview-root button { border-radius:var(--ms-radius-control); }
@media (max-width:767px) { .ms-engine-header { padding:1rem; } .ms-engine-title { font-size:2.25rem !important; } }
@media (prefers-reduced-motion:reduce) { .ms-glass *, .ms-card *, #service-overview-root *, #parts-overview-root * { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ──────────────────────────────────────────────────────────────────────────
   Liquid Glass workspace layer
   Shared presentation for operational Pulse dashboards. These classes are
   intentionally additive: existing engine markup, data loading, click
   handlers, role gates, and API contracts remain unchanged.
────────────────────────────────────────────────────────────────────────── */
:root {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(255, 255, 255, 0.85);
  --ms-surface-solid: #f3f5f8;
  --ms-text: #17191f;
  --ms-text-muted: #687386;
  --ms-border: rgba(23, 25, 31, 0.12);
  --ms-primary: #2563eb;
  --ms-primary-hover: #1f4ed8;
  --ms-accent: #2563EB;
  --ms-glass-blur: 24px;
  --ms-radius-card: 20px;
  --ms-radius-control: 12px;
  --ms-shadow-glass: 0 16px 40px rgba(23, 25, 31, 0.08);
  --ms-s-glass: rgba(255, 255, 255, 0.78);
  --ms-g-border: rgba(15, 23, 42, 0.10);
  --ms-g-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.dark {
  --ms-bg: #0f1117;
  --ms-surface: rgba(26, 29, 36, 0.76);
  --ms-surface-solid: #1a1d24;
  --ms-text: #f7f8fa;
  --ms-text-muted: #a5acb8;
  --ms-border: rgba(255, 255, 255, 0.12);
  --ms-shadow-glass: 0 16px 40px rgba(0, 0, 0, 0.22);
  --ms-s-glass: rgba(15, 23, 42, 0.55);
  --ms-g-border: rgba(255, 255, 255, 0.10);
  --ms-g-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.ms-glass {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  backdrop-filter: blur(var(--ms-glass-blur));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
  box-shadow: var(--ms-shadow-glass);
  border-radius: var(--ms-radius-card);
}

.ms-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  box-shadow: var(--ms-shadow-glass);
}

.ms-button-primary {
  background: var(--ms-primary);
  color: #fff;
  border-radius: var(--ms-radius-control);
}

.ms-button-primary:hover { background: var(--ms-primary-hover); }

/* Pulse shells: preserve existing utility behavior while giving every
   Service/Parts information surface one coherent visual treatment. */
#service-overview-root > .engine-shell,
#parts-overview-root > .engine-shell,
#service-overview-root .pulse-panel,
#parts-overview-root .pulse-panel {
  background: var(--ms-surface) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-glass) !important;
  backdrop-filter: blur(var(--ms-glass-blur));
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
}

#service-overview-root > div > .bg-white,
#parts-overview-root > div > .bg-white,
#service-overview-root .bg-white,
#parts-overview-root .bg-white {
  background-color: var(--ms-surface) !important;
  border-color: var(--ms-border) !important;
}

#service-overview-root .rounded-2xl,
#parts-overview-root .rounded-2xl { border-radius: var(--ms-radius-card); }

#service-overview-root button,
#parts-overview-root button { border-radius: var(--ms-radius-control); }

#service-overview-root input,
#service-overview-root select,
#service-overview-root textarea,
#parts-overview-root input,
#parts-overview-root select,
#parts-overview-root textarea {
  border-radius: var(--ms-radius-control);
  border-color: var(--ms-border);
}

@media (prefers-reduced-motion: reduce) {
  .ms-glass *,
  #service-overview-root *,
  #parts-overview-root * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Final dashboard glass cascade. Keep this last so legacy Tailwind repaint
   compatibility selectors cannot turn the authenticated shell opaque again.
   Un-scoped from [data-page-content] so body-level overlays (modals, context
   menus, and Design Studio's own full-screen chrome — all appended straight
   to <body>, outside any [data-page-content] wrapper) get the same glass
   treatment as everything rendered into a page — not just page content.
   Design Studio's artboard/canvas surface is the one deliberate exception:
   it has to render the actual design at true, unblurred color, so it's
   excluded and stays solid. */
body {
  background:
    radial-gradient(circle at 12% 8%, rgba(37,99,235,.14), transparent 32rem),
    radial-gradient(circle at 88% 18%, rgba(124,58,237,.12), transparent 30rem),
    var(--ms-bg) !important;
}

#nav-desktop,
#nav-mobile,
#report-rail,
.ms-engine-header,
.ms-glass {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.58)) !important;
  border-color: rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.11) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

.dark body,
.dark body main { background-color:#0b1020 !important; }

.dark #nav-desktop,
.dark #nav-mobile,
.dark #report-rail,
.dark .ms-engine-header,
.dark .ms-glass,
.dark .ms-card {
  background: linear-gradient(135deg, rgba(30,41,72,.58), rgba(15,23,42,.40)) !important;
  border-color: rgba(148,163,184,.20) !important;
}

/* ── Liquid Glass is OPT-IN ──────────────────────────────────────────────────
   Glass used to be applied by `.bg-white:not(#studio-artboard-container)`, a
   blanket selector that caught all 1,297 bg-white call sites: every KPI tile,
   every record card, every dense table, on every page. That is why light mode
   read as milky, why cards looked equally important regardless of what they
   held, and why a repair-order table sat behind blur(20px).

   Glass now belongs only to surfaces that genuinely FLOAT above content — the
   header, the sidebar, nav, the report rail, .ms-engine-header and anything
   explicitly marked .ms-glass / .ms-c--glass. Cards keep their own solid
   Tailwind background, which is what a content surface should be. Depth comes
   from the tinted page background behind them, not from blurring the page
   through them.

   If a card needs to read as elevated, give it .ms-c--elevated. Do not bring
   back a selector that decides material by colour class.
   ─────────────────────────────────────────────────────────────────────────── */

/* Notebook Pulse composition shared by Executive, Sales, F&I, Service and Parts. */
.ms-pulse-board {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(.85rem, 1.4vw, 1.25rem);
  row-gap: clamp(1.35rem, 2.2vw, 2rem);
  align-items: start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: clip;
  padding: clamp(.875rem, 1.35vw, 1.25rem);
  /* The board is layout, not a card. Painting a second full-height glass
     surface here created the vertical seam visible between Pulse sections. */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.page-content.hidden.ms-pulse-board { display: none; }

.ms-pulse-board > * {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ms-pulse-board > .grid {
  min-width: 0;
  gap: clamp(.75rem, 1.1vw, 1rem) !important;
}

.ms-pulse-board .grid > * { min-width: 0; }

.pulse-summary-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(.875rem, 1.35vw, 1.25rem);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-card);
  background: color-mix(in srgb, var(--ms-surface-solid) 92%, transparent);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(var(--ms-glass-blur));
  backdrop-filter: blur(var(--ms-glass-blur));
}

/* The Pulse tile row is laid out by the design system, which sizes each tile
   from its own data (see "PULSE KPI HIERARCHY" in ms-design-system.css). The
   equal-width auto-fit grid that used to live here is what made five tiles of
   wildly different urgency read as five of the same thing. */

@media (max-width: 639px) {
  .ms-pulse-board,
  .pulse-summary-panel {
    padding: .75rem;
    border-radius: 18px;
  }

  .ms-pulse-board {
    row-gap: 1.125rem;
  }
}
/* Glass belongs to things that are already CARDS. A blanket `details` selector also
   caught the bare, padding-less wrappers the Pulse composes with — engSection()'s
   `<details class="group mt-7">` (a heading + content, no chrome of its own) and the
   layout wrappers enableExecutivePulseDisclosures() promotes — so each one grew a
   glass panel with zero padding: the section title sat flush in the box's top-left
   corner and its content bled to the edges ("the titles are not inside nicely"). It
   also painted over the dark AI panel's own gradient. Real cards (engCard, the rail,
   the department sections) all carry bg-white/dark:bg-slate-900 and are matched by
   the selectors above them, so they keep the glass. */
.ms-pulse-board .bg-white:not(.ms-kpi),
.ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
[data-engine-rail] details {
  border-radius: var(--ms-radius-card) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.58)) !important;
  border-color: rgba(255,255,255,.19) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.dark .ms-pulse-board .bg-white:not(.ms-kpi),
.dark .ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
.dark [data-engine-rail] details {
  background: linear-gradient(145deg, rgba(30,41,72,.56), rgba(15,23,42,.38)) !important;
  border-color: rgba(148,163,184,.18) !important;
}

.ms-pulse-board h2,
.ms-pulse-board h3,
[data-engine-rail] summary {
  letter-spacing: -.018em;
  font-weight: 900 !important;
}

.ms-pulse-board > .grid:first-of-type > * {
  /* Let content determine card height. A fixed minimum made empty states
     look like oversized blank tiles and pushed lower dashboard rows down. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ms-pulse-board button,
[data-engine-rail] button { border-radius: var(--ms-radius-control) !important; }

/* Pulse keeps the engine's native two-column shell at desktop widths: a wide
   operating canvas plus the compact Reports / Next Actions / Quick Actions rail. */
[data-engine-body] + [data-engine-rail] {
  align-self: start;
  min-width: 0;
}

.ms-engine-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* Compact laptops and 11-inch Chromebooks cannot fit a 240px department rail,
   the operating canvas, and a 300px actions rail side by side. Keep the canvas
   full-width and place the three action cards below it until a wide desktop. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .ms-engine-layout--rail > [data-engine-rail] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem !important;
  }
}
@media (min-width: 1440px) {
  .ms-engine-layout--rail {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }
}

/* Pulse keeps the operations rail as a right-hand COLUMN, like every other tab.
   It was briefly collapsed into a full-width strip above the board to buy the
   board more width; Reports, Next Actions and Quick Actions belong beside the
   board, not stacked above it, so the rail stays where it is. The board still
   fills its own column — the "boxed" look it used to have came from padding-less
   wrappers picking up a glass box, which is fixed separately. */

@media (min-width: 1024px) {
  .ms-pulse-board[data-pulse-kind="sales"] > .grid:last-child,
  .ms-pulse-board[data-pulse-kind="service-overview"] > .grid:last-child,
  .ms-pulse-board[data-pulse-kind="parts-overview"] > .grid:last-child {
    gap: 1.25rem !important;
  }
}

@media (max-width: 767px) {
  .ms-pulse-board { grid-template-columns: 1fr; gap: .8rem; }
  .ms-pulse-board > * { grid-column: 1; }
  .ms-pulse-board > .grid:first-of-type > * { min-height: 5.75rem; }
}

/* Larger editorial headers and icon-led glass tabs. */
.ms-engine-header {
  padding: clamp(1.4rem, 2.8vw, 2.4rem) !important;
  min-height: 8.75rem;
  align-items: center !important;
}

.ms-engine-header > div:first-child { gap: clamp(1rem, 1.8vw, 1.5rem) !important; }

.ms-engine-mark {
  width: clamp(3.75rem, 6vw, 5rem) !important;
  height: clamp(3.75rem, 6vw, 5rem) !important;
  border-radius: 1.35rem !important;
  border: 1px solid currentColor;
  box-shadow: 0 14px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.ms-engine-mark svg { width: clamp(1.7rem, 3vw, 2.35rem) !important; height: clamp(1.7rem, 3vw, 2.35rem) !important; stroke-width: 2; }

.ms-engine-title {
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
}

.ms-engine-title + p { font-size: clamp(.88rem, 1.2vw, 1.05rem) !important; margin-top: .65rem !important; }

.ms-engine-tabs {
  padding: .45rem;
  border: 1px solid var(--ms-border);
  border-radius: 1.15rem;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.ms-engine-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .7rem 1rem !important;
  border: 1px solid transparent !important;
  border-radius: .85rem !important;
  font-size: .78rem !important;
}

.ms-engine-tab[aria-selected="true"] {
  color: #4f46e5 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,.10)) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.dark .ms-engine-tab[aria-selected="true"] {
  color: #a5b4fc !important;
  background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(124,58,237,.16)) !important;
  border-color: rgba(96,165,250,.35) !important;
}

@media (max-width: 767px) {
  .ms-engine-header { min-height: 7rem; padding: 1.15rem !important; }
  .ms-engine-title { font-size: clamp(2.15rem, 9vw, 2.8rem) !important; }
  .ms-engine-mark { width: 3.5rem !important; height: 3.5rem !important; border-radius: 1rem !important; }
  .ms-engine-tab { min-height: 2.65rem; padding: .6rem .8rem !important; }
}

/* Restrained Liquid Glass finish: one blue accent, neutral chrome, softer
   depth, and larger continuous radii across every department workspace. */
:root {
  --ms-primary: #3b82f6;
  --ms-primary-hover: #2563eb;
  --ms-accent: #3b82f6;
  --ms-radius-card: 28px;
  --ms-radius-control: 15px;
  --ms-glass-blur: 32px;
  --ms-shadow-glass: 0 24px 70px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255,255,255,.34);
}

.dark {
  --ms-bg: #070b14;
  --ms-surface: rgba(16, 25, 43, .85);
  --ms-border: rgba(190, 205, 230, .16);
  --ms-shadow-glass: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.10);
}

body {
  background:
    radial-gradient(ellipse 54rem 38rem at 14% 4%, rgba(59,130,246,.15), transparent 62%),
    radial-gradient(ellipse 48rem 34rem at 88% 24%, rgba(148,163,184,.16), transparent 68%),
    linear-gradient(155deg, #f8fafc 0%, #eef3f9 55%, #f7f9fc 100%) !important;
  background-attachment: fixed !important;
}

.dark body {
  background:
    radial-gradient(ellipse 54rem 38rem at 14% 4%, rgba(59,130,246,.22), transparent 62%),
    radial-gradient(ellipse 48rem 34rem at 88% 24%, rgba(148,163,184,.12), transparent 68%),
    linear-gradient(155deg, #101827 0%, #070b14 55%, #0b1220 100%) !important;
  background-attachment: fixed !important;
}

.dark #nav-desktop,
.dark #nav-mobile,
.dark #report-rail,
.dark .ms-engine-header,
.dark .ms-glass,
.dark .ms-card,
.dark .ms-pulse-board .bg-white:not(.ms-kpi),
.dark .ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
.dark [data-engine-rail] details {
  background: linear-gradient(145deg, rgba(24, 36, 60, .68), rgba(10, 17, 31, .50)) !important;
  border-color: rgba(190, 205, 230, .15) !important;
  box-shadow: var(--ms-shadow-glass) !important;
  backdrop-filter: blur(24px) saturate(128%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
}

.ms-engine-header,
.ms-card,
.ms-glass,
.ms-pulse-board .bg-white:not(.ms-kpi),
.ms-pulse-board .dark\:bg-slate-900:not(.ms-kpi),
[data-engine-rail] details { border-radius: var(--ms-radius-card) !important; }

/* .ms-kpi is exempt from the board glass above. Those rules set border-color and
   box-shadow with !important, which silently killed the amber border the tile
   renderer has always put on an urgent count — the "hot" state was dead inside
   the board long before the KPI hierarchy needed an accent of its own. KPI tiles
   are content surfaces: solid background, their own border, and the lead tile's
   accent edge from ms-design-system.css. */

/* KPI tiles use explicit light and dark surfaces. This rule used to paint the
   dark palette unconditionally as a first-shell fallback, leaving #f8fafc
   numbers almost invisible on the white cards shown by light-mode devices. */
.ms-pulse-board .ms-kpi {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 28px rgba(15,23,42,.10) !important;
  color: #0f172a !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__value {
  color: #0f172a !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__label {
  color: #475569 !important;
}

.ms-pulse-board .ms-kpi .ms-kpi__hint {
  color: #2563eb !important;
}

.ms-pulse-board .ms-kpi[data-emphasis="lead"],
.ms-pulse-board .ms-kpi[data-emphasis="alert"] {
  border-color: rgba(180, 83, 9, .68);
}

.ms-pulse-board .ms-kpi[data-emphasis="lead"] .ms-kpi__value,
.ms-pulse-board .ms-kpi[data-emphasis="alert"] .ms-kpi__value {
  color: #b45309;
}

.dark .ms-pulse-board .ms-kpi {
  background: linear-gradient(145deg, rgba(28, 42, 69, .86), rgba(10, 18, 34, .78)) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.18) !important;
  color: #f8fafc !important;
}

.dark .ms-pulse-board .ms-kpi .ms-kpi__value {
  color: #f8fafc !important;
}

.dark .ms-pulse-board .ms-kpi .ms-kpi__label {
  color: #a9b8ce !important;
}

.dark .ms-pulse-board .ms-kpi .ms-kpi__hint {
  color: #60a5fa !important;
}

.dark .ms-pulse-board .ms-kpi[data-emphasis="lead"] .ms-kpi__value,
.dark .ms-pulse-board .ms-kpi[data-emphasis="alert"] .ms-kpi__value {
  color: #fbbf24;
}

/* Academy uses the current DealerOS theme. The old rule applied its dark
   palette unconditionally, which made the light theme render white text on
   white course cards. Keep light mode on the normal utility colours and scope
   the Liquid Glass treatment to the real dark theme. */
#academy-root {
  background: transparent !important;
  color: #0f172a;
}

.dark #academy-root {
  color: #f8fafc;
}

.dark #academy-root .bg-white,
.dark #academy-root .dark\:bg-slate-900,
.dark #academy-root .bg-slate-50,
.dark #academy-root .dark\:bg-slate-950\/50 {
  background: linear-gradient(145deg, rgba(28, 42, 69, .78), rgba(10, 18, 34, .68)) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.16) !important;
}

.dark #academy-root .text-slate-900,
.dark #academy-root .dark\:text-white {
  color: #f8fafc !important;
}

.dark #academy-root .text-slate-700,
.dark #academy-root .dark\:text-slate-300,
.dark #academy-root .text-slate-600,
.dark #academy-root .dark\:text-slate-400,
.dark #academy-root .text-slate-500,
.dark #academy-root .dark\:text-slate-500 {
  color: #a9b8ce !important;
}

.dark #academy-root .border-slate-200,
.dark #academy-root .dark\:border-slate-800,
.dark #academy-root .dark\:border-slate-700 {
  border-color: rgba(148, 163, 184, .22) !important;
}

.dark #academy-root button:not(.bg-indigo-600):not([class*="bg-rose-"]):not([class*="bg-amber-"]) {
  color: #dbe7f5;
}

#academy-root .academy-page-header.ms-engine-header {
  min-height: 0;
  padding: 1rem 1.25rem !important;
  margin-bottom: 0;
}

#academy-root .academy-page-header .ms-engine-title {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

#academy-root .academy-page-header .ms-engine-title + p {
  margin-top: .35rem !important;
  font-size: .875rem !important;
  line-height: 1.4;
}

#academy-root .academy-course-search {
  height: 2.5rem;
  min-height: 2.5rem;
  resize: none;
}

.dark #academy-root .academy-mandatory-header {
  background: rgba(76, 5, 25, .42) !important;
  border-color: rgba(244, 63, 94, .42) !important;
}

.dark #academy-root .academy-mandatory-header h2 {
  color: #ffe4e6 !important;
}

.dark #academy-root .academy-mandatory-header p {
  color: #fda4af !important;
}

.dark #academy-root .academy-mandatory-badge {
  background: rgba(159, 18, 57, .55) !important;
  border-color: rgba(251, 113, 133, .42) !important;
  color: #ffe4e6 !important;
}

@media (max-width: 700px) {
  #academy-root .academy-overview-shell {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  #academy-root .academy-page-header.ms-engine-header {
    align-items: flex-start;
    padding: .875rem !important;
  }

  #academy-root .academy-page-header > div:first-child {
    align-items: flex-start;
  }

  #academy-root .academy-page-header .ms-engine-title {
    font-size: 1.65rem !important;
  }

  #academy-root .academy-page-header .ms-engine-title + p {
    font-size: .78rem !important;
  }

  #academy-root .academy-page-header > div:last-child {
    width: 100%;
    justify-content: flex-start;
  }

  #academy-root .academy-department-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .35rem;
    scrollbar-width: thin;
  }

  #academy-root .academy-department-filters > button {
    flex: 0 0 auto;
  }

  #academy-root .academy-mandatory-header {
    align-items: stretch;
    flex-direction: column;
    gap: .75rem;
  }

  #academy-root .academy-mandatory-copy {
    align-items: flex-start;
  }

  #academy-root .academy-mandatory-badge {
    align-self: stretch;
    text-align: center;
  }
}

/* A department header is a title plus an action group. On a phone the group is two
   or three buttons that cannot fit beside the title, and the row did not wrap — so
   "Open Accounting Workspace" ran off the right edge of the card. The header itself
   now wraps (markup), and the action group wraps within it. Scoped to the Pulse
   department sections: this is their layout, not a global flex override. */
.pulse-dept-section > .flex.justify-between > .flex {
  flex-wrap: wrap;
  row-gap: .5rem;
}

/* Keep empty Pulse cards compact instead of stretching them into blank tiles. */
.ms-pulse-board .text-center.text-slate-400 {
  padding-top: .8rem !important;
  padding-bottom: .8rem !important;
}

.ms-engine-header { min-height: 8rem; }

.ms-engine-mark {
  color: #7db2ff !important;
  background: linear-gradient(145deg, rgba(96,165,250,.18), rgba(255,255,255,.05)) !important;
  border-color: rgba(125,178,255,.30) !important;
  border-radius: 1.6rem !important;
}

.ms-engine-title { font-size: clamp(2.35rem, 3.6vw, 3.65rem) !important; }

.dark .ms-engine-tabs {
  border-radius: 1.45rem;
  background: rgba(15,23,42,.68);
  border-color: rgba(190,205,230,.14);
}

.ms-engine-tabs { border-radius: 1.45rem; }

.ms-engine-tab { border-radius: 1.05rem !important; }
.dark .ms-engine-tab { color: #f1f5f9 !important; }
.ms-engine-tab:hover { color: #4f46e5 !important; }
.dark .ms-engine-tab:hover { color: #a5b4fc !important; }

.dark .ms-engine-tab[aria-selected="true"] {
  color: #a5b4fc !important;
  background: linear-gradient(145deg, rgba(59,130,246,.24), rgba(255,255,255,.07)) !important;
  border-color: rgba(125,178,255,.30) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* Department navigation uses a single mature accent. Semantic status colors
   remain available inside the actual data views. */
#nav-desktop a svg,
#nav-desktop button svg,
#nav-mobile a svg,
#nav-mobile button svg,
[data-engine-rail] button svg { color: #8291a8 !important; }

#nav-desktop [aria-current="page"] svg,
#nav-desktop .active svg,
#nav-mobile [aria-current="page"] svg,
[data-engine-rail] button:hover svg { color: #6ea8ff !important; }

/* CRM dialogs are appended directly to body, so they need their own glass
   surface instead of relying on the page-content cascade. */
.ms-modal-scrim {
  background: rgba(2, 6, 16, .52) !important;
  backdrop-filter: blur(10px) saturate(90%);
  -webkit-backdrop-filter: blur(10px) saturate(90%);
}

/* A modal is the surface you READ and TYPE on, so it is opaque. It used to be a
   translucent gradient (.94 -> .82 alpha) sitting on a dark .52 scrim, which meant
   the scrim bled through progressively down the card: the header rendered ~#F7F7F8
   and the bottom ~#DCDFE5. On a tall record modal that reads as the lower half
   being disabled — the Email/Call/Text row looked greyed out when it was perfectly
   active. The gradient stops below are the ORIGINAL design intent, now at full
   alpha, so the card looks as it was drawn instead of as the scrim repaints it.
   backdrop-filter is dropped with them: it composites a layer to blur something
   that is no longer visible through the card. Depth here comes from the scrim
   behind the card and the shadow, which is what a scrim is for. */
.ms-crm-glass {
  color: var(--ms-t-primary, #0f172a);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 28px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 80px rgba(15,23,42,.18) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ms-crm-glass .ms-glass,
.ms-crm-glass .ms-c--glass {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-color: rgba(15,23,42,.08) !important;
}
.ms-crm-glass > .sticky {
  background: #FFFFFF !important;
  border-color: rgba(23,25,31,.10) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.dark .ms-crm-glass {
  border-color: rgba(190,205,230,.18);
  /* Same stops as before, at full alpha. */
  background: #121318 !important;
  box-shadow: 0 34px 110px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.dark .ms-crm-glass > .sticky {
  background: #1A1D24 !important;
  border-color: rgba(190,205,230,.12) !important;
}

.ms-crm-glass input,
.ms-crm-glass select,
.ms-crm-glass textarea,
.ms-crm-glass .bg-slate-950,
.ms-crm-glass .dark\:bg-slate-950 {
  border-radius: 17px !important;
  border-color: rgba(100,116,139,.24) !important;
  background: rgba(255,255,255,.78) !important;
  color: #0f172a !important;
  caret-color: #2563EB !important;
}

.dark .ms-crm-glass input,
.dark .ms-crm-glass select,
.dark .ms-crm-glass textarea,
.dark .ms-crm-glass .bg-slate-950,
.dark .ms-crm-glass .dark\:bg-slate-950 {
  border-color: rgba(190,205,230,.18) !important;
  background: rgba(3,9,20,.72) !important;
  color: #f8fafc !important;
  caret-color: #818cf8 !important;
}

/* #94a3b8 is 2.56:1 on a white field — legible on the dark card it was picked for,
   not on the light one. Scoped per theme; slate-500 gives 4.76:1 in light. */
.ms-crm-glass input::placeholder,
.ms-crm-glass textarea::placeholder { color: #64748b !important; opacity: 1; }

.dark .ms-crm-glass input::placeholder,
.dark .ms-crm-glass textarea::placeholder { color: #94a3b8 !important; opacity: 1; }

.ms-staff-editor { padding: 1.25rem; }
.ms-staff-editor .ms-staff-actions { align-items: center; }
@media (max-width: 639px) {
  .ms-staff-editor { padding: 1rem; }
  .ms-staff-editor .ms-staff-grid { grid-template-columns: minmax(0,1fr) !important; }
  .ms-staff-editor .ms-staff-actions > * { width: 100%; justify-content: center; }
  .ms-staff-editor .ms-staff-actions .flex-1 { display: none; }
}

.ms-crm-glass .rounded-lg,
.ms-crm-glass .rounded-xl,
.ms-crm-glass .rounded-2xl { border-radius: 18px !important; }

.ms-crm-actions { gap: .55rem !important; }

/* These buttons were styled for a dark modal — #d7e0ed text on a 10%-alpha fill —
   and there was no .dark variant, so that styling also landed on the LIGHT card.
   #d7e0ed on white is about 1.3:1; WCAG asks 4.5:1. Email / Call / Text / Log
   activity were not "greyed out" in the screenshot, they were very nearly
   invisible, and they are the primary actions on a customer record.
   Shared geometry first, then a palette per theme. */
.ms-crm-actions button {
  min-height: 2.35rem;
  padding: .55rem .8rem !important;
  border-radius: 13px !important;
}

/* Light: slate-700 on a faint slate fill — about 10:1. */
.ms-crm-actions button {
  color: #334155 !important;
  background: rgba(15,23,42,.05) !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}

.ms-crm-actions button:hover {
  color: #0f172a !important;
  background: rgba(15,23,42,.09) !important;
  border-color: rgba(15,23,42,.20) !important;
}

/* Dark: the original treatment, now only where it was designed to be. */
.dark .ms-crm-actions button {
  color: #d7e0ed !important;
  background: rgba(148,163,184,.10) !important;
  border: 1px solid rgba(190,205,230,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.dark .ms-crm-actions button:hover {
  color: #fff !important;
  background: rgba(148,163,184,.17) !important;
  border-color: rgba(190,205,230,.24) !important;
}

.ms-crm-actions .ms-action-primary {
  color: #fff !important;
  background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
  border-color: rgba(147,197,253,.46) !important;
}

/* Quiet glass notifications replace solid red/green utility blocks. */
.ms-toast {
  max-width: min(34rem, calc(100vw - 2rem));
  border: 1px solid rgba(190,205,230,.20);
  border-radius: 16px !important;
  background: rgba(13,22,38,.82) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
}

.ms-toast-error { border-left: 3px solid #fb7185; }
.ms-toast-success { border-left: 3px solid #34d399; }
.ms-toast-info,
.ms-toast-warning { border-left: 3px solid #60a5fa; }

@media (max-width: 767px) {
  .ms-engine-header { min-height: 6.75rem; border-radius: 23px !important; }
  .ms-crm-glass { border-radius: 24px !important; }
  .ms-crm-actions { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .35rem; }
  .ms-crm-actions button { flex: 0 0 auto; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Reduced-transparency fallback. The Liquid Glass chrome stacks many
   backdrop-filter blur layers; on iOS with Reduce Transparency enabled (or
   under Safari's own compositing pressure), backdrop-filter can silently fail
   and flatten to a near-opaque, washed-out surface instead of the intended
   dark/saturated gradient — every glass panel loses contrast at once,
   including cards whose own colors were never translucent. Drop the blur and
   force a solid, high-contrast surface so nothing depends on the browser
   actually compositing the effect.
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .ms-engine-header, .ms-glass, .ms-card, .ms-crm-glass, .ms-toast,
  [data-engine-rail] details, [data-engine-rail] details[open] > summary,
  body > header, #dept-sidebar, #nav-desktop, #nav-mobile, #report-rail {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--ms-surface-solid) !important;
  }
  .dark .ms-engine-header, .dark .ms-glass, .dark .ms-card, .dark .ms-crm-glass, .dark .ms-toast,
  .dark [data-engine-rail] details, .dark body > header, .dark #dept-sidebar, .dark #nav-desktop, .dark #nav-mobile, .dark #report-rail {
    background: var(--ms-surface-solid) !important;
  }
}

/* Assistant summaries use the same system surface as the rest of Pulse.
   Their old forced navy gradient split the light dashboard into a dark band. */
.ms-ai-panel {
  isolation: isolate;
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .88) !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(24px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
}

.ms-ai-panel :is(.text-white, .text-slate-950, .text-slate-300) { color: var(--ms-text) !important; }
.ms-ai-panel :is(.text-sky-300, .text-sky-400) { color: #2563eb !important; }
.ms-ai-panel .text-amber-300 { color: #a16207 !important; }
.ms-ai-panel .text-rose-400 { color: #be123c !important; }
.ms-ai-panel .text-emerald-400 { color: #047857 !important; }
.ms-ai-panel .text-indigo-300 { color: #4338ca !important; }
.ms-ai-panel [class*="border-slate-800"] { border-color: var(--ms-border) !important; }
.ms-ai-panel button {
  color: var(--ms-text) !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--ms-border) !important;
  box-shadow: none !important;
}
.ms-ai-panel button.bg-sky-500 {
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, .10) !important;
  border-color: rgba(37, 99, 235, .22) !important;
}

.dark .ms-ai-panel {
  color: var(--ms-text) !important;
  background: rgba(26, 29, 36, .84) !important;
  border-color: var(--ms-border) !important;
  box-shadow: var(--ms-shadow-glass) !important;
}
.dark .ms-ai-panel :is(.text-white, .text-slate-950, .text-slate-300) { color: var(--ms-text) !important; }
.dark .ms-ai-panel button { background: rgba(255, 255, 255, .08) !important; }

/* The department column is layout only. Painting this full-height wrapper as
   glass creates a long vertical edge that reads like a broken canvas seam. */
#nav-desktop {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* #dept-sidebar is the sidebar COLUMN, not a panel. The one glass surface in
   that column is #dashboard-nav, which paints itself at >=768px. While the
   wrapper was also in the glass lists above, `.dark #dept-sidebar` (a class
   plus an id) out-specified this bare-id reset, so dark mode painted a second
   panel a few pixels outside the nav's — two stacked boxes with a hard seam.
   Specificity, not source order, decided it; the fix is to not claim the
   wrapper is glass in the first place. */
#dept-sidebar {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the fixed glass header visually continuous with the canvas. The broad
   glass cascade gives surfaces a deep card shadow; on a full-width header that
   becomes a hard horizontal band. A border creates the same seam, so the shell
   header deliberately uses neither. */
html body > header,
html.dark body > header {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* The top header, a bit more transparent than the cards/nav share by default. */
body > header {
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.46)) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.dark body > header {
  background: linear-gradient(135deg, rgba(24,36,60,.56), rgba(10,17,31,.40)) !important;
}

/* Pulse department cards use status color sparingly; the lower page should read
   as one calm operating surface rather than a row of competing accent panels. */
#command-root .pulse-dept-section {
  filter: saturate(.72);
}
#command-root .pulse-dept-section > div:first-child {
  border-bottom-color: rgba(148,163,184,.22) !important;
}

/* Desktop dashboard scroll ownership: the page content and the sidebar each
   get one scroll region. The nested legacy nav must not paint a second glass
   panel or become a third scroll container. */
@media (min-width: 768px) {
  html:has(body.ms-app-booting), body.ms-app-booting { overflow: hidden !important; }
  .ms-dashboard-shell {
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 1rem !important;
  }
  #dept-sidebar {
    display: flex !important;
    align-self: start !important;
    width: 210px !important;
    min-width: 210px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 136px) !important;
    overflow: visible !important;
  }
  #dashboard-nav {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: .65rem !important;
    background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.50)) !important;
    border: 1px solid rgba(255,255,255,.50) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.76) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 136px) !important;
  }
  .dark #dashboard-nav {
    background: linear-gradient(145deg, rgba(24,36,60,.68), rgba(10,17,31,.50)) !important;
    border-color: rgba(190,205,230,.16) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  #nav-desktop, #dept-nav { overflow: visible !important; }

  /* Restricted product rails keep a bit more breathing room from the
     content column than the full department nav does. */
  main:has(#dept-sidebar .ms-product-nav-item),
  main:has(#dept-sidebar .ms-suite-nav-item) {
    column-gap: 1.5rem !important;
  }
}

/* The authenticated desktop shell has three distinct navigation zones: the
   fixed top header, a compact department rail, and each engine's right
   operations rail. Explicit semantic columns avoid purge-sensitive arbitrary
   Tailwind utilities and keep the left rail from stretching over the canvas. */
@media (min-width: 1024px) {
  .ms-dashboard-shell {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: start;
    column-gap: 1.5rem !important;
  }
  #dept-sidebar {
    display: flex !important;
    align-self: start !important;
    width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 136px) !important;
    overflow: visible !important;
  }
  #dashboard-nav {
    width: 100% !important;
    height: auto !important;
  }
}

/* Sidebar nav items on every dashboard — department list, marketing-suite
   areas and single-product restricted rails alike — at every viewport
   width. Provides generous breathing room so multi-word product titles fit. */
#dept-nav .dept-nav-item,
.ms-product-nav-item,
.ms-suite-nav-item {
  padding: .5rem .75rem !important;
  font-size: .875rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: normal !important;
  text-align: left !important;
  border-radius: .85rem !important;
}

.ms-suite-nav-item span,
.dept-nav-item span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 767px) {
  #dashboard-nav { overflow: visible !important; max-height: none !important; }
}

/* MarketSync Digital & Settings — Liquid Glass material across workspaces.
   Applies glassmorphism, satin specular borders, and blur depth to settings cards,
   roster tables, and digital suite cards alike. */
html[data-ms-suite="digital"] #dept-tabbar,
/* Brand modes restyle every rounded, bordered card inside .page-content. A Pulse
   KPI tile is exactly that shape, so both modes re-glassed it and repainted its
   border — which erased the amber that marks an urgent count. Measured: in
   `marketsync` and `digital` the lead tile and a normal tile ended up with the
   SAME border colour, so urgency was invisible in two of the four dashboard
   modes while looking perfectly fine in the other two. .ms-kpi is a content
   surface and owns its own edge. */
html[data-ms-suite="digital"] .page-content :is(.rounded-xl.border, .rounded-2xl.border, .rounded-3xl.border):not(.ms-kpi),
[data-page-content="settings"] :is(.rounded-lg, .rounded-xl, .rounded-2xl):is(.bg-white, .dark\:bg-slate-900),
#lead-routing-card > div,
#settings-team,
#crm-dms-card,
#settings-texting-card,
#settings-lang-card,
#prof-branding-section,
#settings-my-record > div {
  background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.52)) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 40px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

.dark[data-ms-suite="digital"] #dept-tabbar,
.dark[data-ms-suite="digital"] .page-content :is(.rounded-xl.border, .rounded-2xl.border, .rounded-3xl.border):not(.ms-kpi),
.dark [data-page-content="settings"] :is(.rounded-lg, .rounded-xl, .rounded-2xl):is(.bg-white, .dark\:bg-slate-900),
.dark #lead-routing-card > div,
.dark #settings-team,
.dark #crm-dms-card,
.dark #settings-texting-card,
.dark #settings-lang-card,
.dark #prof-branding-section,
.dark #settings-my-record > div {
  background: linear-gradient(145deg, rgba(26,38,64,.72), rgba(9,16,30,.52)) !important;
  border: 1px solid rgba(190,205,230,.18) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Settings Staff & Data Tables — Liquid Glass Table Elevation */
[data-page-content="settings"] table,
#settings-team table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

[data-page-content="settings"] table th,
#settings-team table th {
  padding: .75rem 1rem !important;
  font-size: .6875rem !important;
  font-weight: 850 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ms-text-muted) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

.dark [data-page-content="settings"] table th,
.dark #settings-team table th {
  border-bottom-color: rgba(255,255,255,.08) !important;
}

[data-page-content="settings"] table td,
#settings-team table td {
  padding: .85rem 1rem !important;
  font-size: .8125rem !important;
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
  vertical-align: middle !important;
}

.dark [data-page-content="settings"] table td,
.dark #settings-team table td {
  border-bottom-color: rgba(255,255,255,.05) !important;
}

[data-page-content="settings"] table tr:last-child td,
#settings-team table tr:last-child td {
  border-bottom: 0 !important;
}

/* Tab strips (engine tab bars, department/suite tab bars — every role="tablist" in
   the dashboard) keep real horizontal scroll on a narrow viewport, but never show the
   browser's own scrollbar chrome for it. A short row of tabs that already fits was
   still getting a persistent scrollbar/arrow pair from some browsers' default
   scrollbar rendering, reading as "there's more" when there isn't. */
[role="tablist"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[role="tablist"]::-webkit-scrollbar {
  display: none;
}
.no-scrollbar, .scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar, .scrollbar-none::-webkit-scrollbar { display: none; }
html:not(.dark) {
  --ms-bg: #e8ecf2;
  --ms-surface: rgba(247, 249, 252, 0.78);
  --ms-surface-solid: #f3f5f8;
}
html:not(.dark) .ms-c--glass,
html:not(.dark) .ms-glass,
html:not(.dark) .ms-c {
  background: rgba(247, 249, 252, 0.82);
  border-color: rgba(15, 23, 42, 0.08);
}
html:not(.dark) #seo-workspace-root .rounded-2xl,
html:not(.dark) #seo-workspace-root table {
  background: #f6f7fa;
}
/* MarketSync Internal — one restrained liquid-glass company operating system. */
html[data-dash-mode="marketsync"] body {
  background: var(--ms-bg) !important;
}
html:not(.website-builder-mode) #website-root,
html:not(.website-builder-mode) [data-page-content="website"],
html:not(.website-builder-mode) [data-ws-theme] #website-root,
html:not(.website-builder-mode) [data-ws-theme] div[data-page-content="website"] {
  background: transparent !important;
}
.website-studio-shell {
  display: grid;
  gap: 1rem;
  width: 100%;
}
.website-studio-hero {
  background-image: linear-gradient(145deg, rgba(255,255,255,.94), rgba(244,247,252,.86));
}
.dark .website-studio-hero {
  background-image: linear-gradient(145deg, rgba(24,35,58,.96), rgba(10,18,33,.92));
}
.website-studio-body {
  min-width: 0;
  padding: .25rem 0 1rem;
}
.website-studio-view {
  min-width: 0;
}
.website-studio-tabs {
  scrollbar-width: thin;
}
@media (max-width: 640px) {
  .website-studio-hero { padding: 1rem !important; }
  .website-studio-tabs button { padding-left: .75rem !important; padding-right: .75rem !important; }
  /* Hard containment on phones: user reported the studio shell bleeding
     past the viewport (long domains, extra buttons injected by other
     modules, wide tab strips). Force every layer to fit and let anything
     wider scroll internally rather than push the page body sideways. */
  .website-studio-shell,
  .website-studio-shell > *,
  .website-studio-view,
  .website-studio-view > * {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  /* Tab rail is the one legitimate horizontal scroller. */
  .website-studio-tabs { overflow-x: auto !important; }
  /* Any long text inside a card (custom domain, published URL) wraps
     instead of clipping. */
  .website-studio-shell .rounded-xl,
  .website-studio-shell .rounded-2xl { overflow-wrap: anywhere; }
  /* Hide the injected "Desktop" viewport-switcher pill on mobile — it
     belongs to the desktop-only preview strip and clips as "Desk a"
     because there's no room for the full label. */
  .website-studio-shell [data-view="desktop"],
  .website-studio-shell [data-view="tablet"],
  .website-studio-shell [data-view="mobile"],
  .website-studio-shell .ws-device-btn { display: none !important; }
}
/* HQ glass belongs to chrome, not every bordered card. The old selector claimed
   every .rounded-xl/.rounded-2xl content surface and overrode the hierarchy pass,
   turning tables, forms and operating cards into one undifferentiated glass layer. */
html[data-dash-mode="marketsync"] :is(#dept-tabbar, .page-content .eng-shell-header) {
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(245,248,255,.52)) !important;
  border-color: rgba(255,255,255,.62) !important;
  border-radius: 1.4rem !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
}
.dark[data-dash-mode="marketsync"] :is(#dept-tabbar, .page-content .eng-shell-header) {
  background: linear-gradient(145deg, rgba(25,36,60,.72), rgba(8,15,29,.56)) !important;
  border-color: rgba(203,213,225,.16) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html[data-dash-mode="marketsync"] #dept-nav .dept-nav-item {
  border-radius: 1rem !important;
  padding: .65rem .8rem !important;
  color: var(--ms-text-muted) !important;
}
html[data-dash-mode="marketsync"] #dept-nav .dept-nav-item[aria-current="page"] {
  color: var(--ms-text) !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.10), inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

/* MarketSync HQ navigation uses the same quiet liquid-glass treatment on phones
   as the desktop rail. Solid blue menu tiles made the internal OS look like a
   separate, generic customer app. */
html[data-dash-mode="marketsync"] #nav-more-menu .ms-more-sheet {
  background: rgba(248, 250, 255, .78) !important;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 0 0 1.75rem 1.75rem !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(30px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(155%) !important;
}
/* Phone HQ menu is the desktop rail, not a second tile grid. Same row, same
   type, same current-page mark. The sheet itself is a left drawer. */
@media (max-width: 767px) {
  html[data-dash-mode="marketsync"] #nav-more-menu .ms-more-sheet {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: min(20.5rem, 88vw);
    max-height: 100dvh;
    height: 100%;
    border-radius: 0 1.5rem 1.5rem 0 !important;
  }
  main.ms-dashboard-shell > section.overflow-y-auto {
    overflow-x: clip !important;
  }
  html[data-dash-mode="marketsync"] #dept-tabbar [role="tablist"] > button {
    touch-action: pan-x !important;
  }
  html[data-dash-mode="marketsync"] :is(#dept-tabbar, .eng-shell-header):has([role="tablist"]) {
    position: static !important;
    overflow: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Blur on the parent is what makes iOS swallow the sideways swipe. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-dash-mode="marketsync"] :is(#dept-tabbar, .eng-shell-header, .page-content) [role="tablist"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: none !important;
    overscroll-behavior-x: contain;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html[data-dash-mode="marketsync"] #mobile-quickrow-dyn .nav-item,
  html[data-dash-mode="marketsync"] #nav-more {
    min-height: 44px;
  }
  html[data-dash-mode="marketsync"] #mobile-quickrow-dyn .nav-item span:last-child,
  html[data-dash-mode="marketsync"] #nav-more > span {
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
  }
}
html[data-dash-mode="marketsync"] #nav-more-list .dept-nav-item {
  min-height: 44px;
  padding: .65rem .8rem !important;
  border-radius: 1rem !important;
  font-size: .875rem !important;
  line-height: 1.25 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-dash-mode="marketsync"] #nav-more-list .dept-nav-item[aria-current="page"] {
  color: var(--ms-text) !important;
  background: rgba(255,255,255,.66) !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.10), inset 0 0 0 1px rgba(255,255,255,.65) !important;
}
.dark[data-dash-mode="marketsync"] #nav-more-list .dept-nav-item[aria-current="page"] {
  background: rgba(71,85,105,.34) !important;
}