/* ============================================================================
 * mgmt-sections.css — MGMT-SECTIONS-20261026 (Donny, 2026-10-26)
 * The five Shop Management sections (Appointments/calendar, Parts Inventory,
 * Canned Jobs, Inspections, Reports) render as full pages inside the Shop
 * Management content column instead of pop-up overlays. The elements keep
 * their ids (#opsHubOverlay / #reportsHubOverlay); these rules only change
 * how they present while adopted (.mgmt-embedded) inside #serviceOverlay.
 * Also carries the Shop Management LIGHT pin backup (see bottom).
 * ========================================================================== */

#serviceOverlay .mgmt-sections { width: 100%; min-width: 0; }

/* --- Embedded hubs: static page surfaces, not fixed overlays ------------- */
#serviceOverlay #opsHubOverlay.mgmt-embedded,
#serviceOverlay #reportsHubOverlay.mgmt-embedded {
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  padding: 0;
  background: transparent;
  z-index: auto;
  overflow: visible;
  display: none;
}
#serviceOverlay #opsHubOverlay.mgmt-embedded.mgmt-current {
  display: flex;
  flex-direction: column;
}
#serviceOverlay #reportsHubOverlay.mgmt-embedded.mgmt-current {
  display: block;
}

/* Ops hub: its own header/tab strip is replaced by the shell's nav +
 * section breadcrumb, so drop them inside the section; the page scrolls
 * with the Shop Management column instead of an inner scroll box. */
#serviceOverlay #opsHubOverlay.mgmt-embedded .ops-header,
#serviceOverlay #opsHubOverlay.mgmt-embedded .ops-tabs { display: none; }
#serviceOverlay #opsHubOverlay.mgmt-embedded .ops-body {
  overflow: visible;
  padding: 2px 0 0;
  min-height: 0;
}
#serviceOverlay #opsHubOverlay.mgmt-embedded .ops-panel {
  background: var(--mgmt-card, #fff);
  border: 1px solid var(--mgmt-border, #dfe3e8);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
@media (max-width: 820px) {
  #serviceOverlay #opsHubOverlay.mgmt-embedded .ops-panel { padding: 12px; border-radius: 12px; }
}

/* Reports hub: the modal box becomes a plain page card; its own Done /
 * close controls go away (navigation leaves the section). */
#serviceOverlay #reportsHubOverlay.mgmt-embedded .modal-box.parts-dash {
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  border: 1px solid var(--mgmt-border, #dfe3e8);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: visible;
  background: var(--mgmt-card, #fff);
}
#serviceOverlay #reportsHubOverlay.mgmt-embedded #reportsHubClose,
#serviceOverlay #reportsHubOverlay.mgmt-embedded #reportsPageCloseBtn { display: none !important; }
#mgmtReportsExtra { padding: 0 18px 18px; }
#serviceOverlay #reportsHubOverlay #ops-panel-reports { display: block; }

/* ============================================================================
 * SHOP MANAGEMENT LIGHT PIN (backup layer) — Donny, 2026-10-26 12:13:
 * "For Shop Management I do not like the black theme in the Shop Management
 * tab section — too hard to read. It is easier to read in white and black
 * in Shop Management."
 * Primary mechanism: mgmt-sections.js forces <html data-theme="light">
 * while Shop Management is open (restored on close). If the attribute flip
 * is ever bypassed, these rules still pin every Shop Management surface to
 * the approved light palette (white/ivory surfaces, black text, gold
 * accent, contrast ≥ 4.5:1). This stylesheet is linked AFTER dark-mode.css.
 * ========================================================================== */
[data-theme="dark"] #serviceOverlay {
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --border: #dfe3e8;
  --text: #1d2733;
  --muted: #5d6b78;
  --faint: #626d76;
  --gold: #c9a53f;
  --blue: #1f6fd6;
  --mgmt-topbar: #14161a;
  --mgmt-topbar-text: #ffffff;
  --mgmt-primary: #1f6fd6;
  --mgmt-active-bg: #e9f2fd;
  --mgmt-active-text: #1563c4;
  --mgmt-bg: #eef0f3;
  --mgmt-card: #ffffff;
  --mgmt-border: #dfe3e8;
  --mgmt-text: #1d2733;
  --mgmt-muted: #5d6b78;
  --mgmt-faint: #626d76;
  --mgmt-section: #5d6b78;
  --mgmt-hover: #f2f5f8;
  --mgmt-green: #1f8a4c;
  --mgmt-green-bg: #e9f6ec;
  --mgmt-red: #d64545;
  --mgmt-red-bg: #fdeeee;
  --mgmt-amber: #b97a12;
  --mgmt-amber-bg: #fdf3e3;
  --mgmt-purple: #7a5af8;
  --mgmt-teal: #148f80;
  --mgmt-blue-bg: #e9f2fd;
  --rep-navy: #16324f;
  --rep-blue: #1e7fc4;
  --rep-sky: #eaf3fa;
  --rep-orange: #f26622;
  --rep-ink: #1c2b3a;
  --rep-muted: #5b6b7c;
  --rep-line: #d9e2ec;
  --rep-bg: #eef0f3;
  --rep-card: #ffffff;
  --rep-green: #2e9e5b;
  --rep-amber: #b97a0c;
  --rep-red: #c0392b;
  --ops-bg: #eef1f6;
  --ops-card: #ffffff;
  --ops-line: #d7dee8;
  --ops-text: #16233a;
  --ops-muted: #5b6b80;
  --ops-accent: #1e7fc4;
  color-scheme: light;
}