/* =============================================================
   TradeRail — Universal Page Header Component
   PR-PAGE-HEADER: Every module page uses this header.
   Schedule is the ONLY exception — it does not use this header.

   Reference design: Fleet Management (fleet_management.js/.css)
   All colors, fonts, and spacing match Fleet exactly.
   ============================================================= */

/* ── Positioning: every module content area starts below nav + right of sidebar ── */
/* --nav-h is set at runtime by ResizeObserver in tr_page_header.js             */

/* Group A: VillaShell .vs-body container */
body.pui1b-mounted #vsFullOverlay {
  top: var(--nav-h, 48px);
  left: 16.5rem;
  right: 0;
  bottom: 0;
}
body.pui1b-mounted.pui1b-collapsed #vsFullOverlay {
  left: 3.5rem;
}
/* Mobile: icon-rail is 3.5rem; content starts right of it */
@media (max-width: 767px) {
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #vsFullOverlay {
    left: 3.5rem !important;
  }
  /* field_tech has no rail — full width */
  body[data-tr-role="field_tech"].pui1b-mounted #vsFullOverlay {
    left: 0 !important;
  }
}
body.pui1b-mounted #vsFullOverlay .vs-panel,
body.pui1b-mounted #vsFullOverlay .vs-body {
  height: 100%;
  overflow-y: auto;
}

/* Group B: Independent overlay modules */
body.pui1b-mounted #drcOverlay {
  top: var(--nav-h, 48px);
  left: 16.5rem;
  right: 0;
  bottom: 0;
  width: auto;
}
body.pui1b-mounted.pui1b-collapsed #drcOverlay {
  left: 3.5rem !important;
}
body.pui1b-mounted #phccOverlay {
  top: var(--nav-h, 48px);
  left: 16.5rem;
  right: 0;
  bottom: 0;
  width: auto;
}
body.pui1b-mounted.pui1b-collapsed #phccOverlay {
  left: 3.5rem;
}
/* Mobile offsets for Group B independent overlays */
@media (max-width: 767px) {
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #drcOverlay,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #phccOverlay,
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #pr157PermitsPanel {
    left: 3.5rem !important;
  }
  body[data-tr-role="field_tech"].pui1b-mounted #drcOverlay,
  body[data-tr-role="field_tech"].pui1b-mounted #phccOverlay,
  body[data-tr-role="field_tech"].pui1b-mounted #pr157PermitsPanel {
    left: 0 !important;
  }
}

/* Group B: Fleet/Crew/Equipment — these use display:block inside page flow.
   They sit inside #vsFullOverlay .vs-body so Group A rule covers them.
   But their inner content gets max-width+margin:auto which is correct. */
#vFleetManagement,
#vCrewCompliance,
#vEquipmentTools {
  padding-top: 0; /* header is now injected above content */
}

/* Group C: Permits panel — full-page fixed overlay created by sidebar handler.
   Top is set inline via JS (var(--nav-h)), left offset via sidebar CSS body class. */
body.pui1b-mounted #pr157PermitsPanel {
  left: 16.5rem;
}
body.pui1b-mounted.pui1b-collapsed #pr157PermitsPanel {
  left: 3.5rem;
}

/* ── Universal Page Header ────────────────────────────────────── */
.tr-page-header {
  background: linear-gradient(135deg, #141310, #1A1916);
  color: #fff;
  border-radius: 18px;
  padding: 22px 22px 24px;
  margin: 0 0 18px 0;
  box-shadow: 0 8px 24px rgba(20, 19, 16, 0.12);
}

/* Eyebrow — module category label */
.tr-page-header__eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(233, 196, 106, 0.18);
  color: #e9c46a;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Module title */
.tr-page-header__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.01em;
  color: #fff;
}

/* Description / subtitle */
.tr-page-header__desc {
  font-size: 14px;
  line-height: 1.55;
  color: #cfe2dd;
  margin: 0 0 4px;
  max-width: 760px;
}

/* Lily line — hidden for field roles via JS class on body */
.tr-page-header__lily {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(233, 196, 106, 0.85);
  margin: 8px 0 0;
  max-width: 760px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tr-page-header__lily::before {
  content: 'Lily · ';
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Hide Lily line for field roles */
body[data-portal-role="field_tech"] .tr-page-header__lily,
body[data-portal-role="field"] .tr-page-header__lily,
body[data-portal-role="apprentice"] .tr-page-header__lily {
  display: none;
}

/* ── Tab / Section navigation ribbon ─────────────────────────── */
.tr-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.tr-page-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FF6B00;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  flex: 1 1 220px;
  justify-content: center;
}
.tr-page-tab:hover {
  background: #FF7A1A;
}
.tr-page-tab[aria-pressed="true"],
.tr-page-tab.active {
  background: #D95A00;
  outline: 2px solid rgba(255, 107, 0, 0.45);
  outline-offset: 2px;
}

/* ── .vs-body padding so content doesn't touch container edge ── */
body.pui1b-mounted #vsFullOverlay .vs-body {
  padding: 18px 24px 80px;
  box-sizing: border-box;
  /* No max-width or margin:auto here — content fills full available width.
     Individual module content can apply their own internal max-width. */
}

/* Schedule exception — no header, no padding override, sidebar collapses */
/* Schedule content (.p226-root) fills the full overlay — no padding, no max-width */
body.pui1b-mounted #vsFullOverlay .vs-body:has(.p226-root) {
  padding: 0;
  max-width: none;
  overflow: hidden;
}

/* ── Suppress internal module hero blocks when Fleet header is present ──
   Modules that render their own title block (tr223-hero for Vendors, etc.)
   duplicate the tr-page-header when both are present.  Hide the internal
   block whenever a .tr-page-header sibling exists in the same container.   */
.tr-page-header ~ .tr223-landing .tr223-hero,
.tr-page-header ~ * .tr223-hero,
.vs-body .tr-page-header + .tr223-landing .tr223-hero {
  display: none !important;
}

/* ── Equipment & Tools: collapse .main so vEquipmentTools starts at var(--nav-h) ──
   When Equipment is the active view, .main has zero visual content but its
   padding/margin still pushes #vEquipmentTools down.  Collapse it. */
body.pui1b-mounted[data-et-active="1"] .main {
  display: none !important;
}

/* ── Dispatch Readiness: convert modal overlay → content-area page ──
   #drcOverlay was designed as a fullscreen modal (position:fixed inset:0)
   with a dimmed backdrop. Override it to behave like every other module —
   filling the content area to the right of the sidebar and below the nav. */
#drcOverlay {
  position: fixed !important;
  top: var(--nav-h) !important;
  left: 16.5rem !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 520 !important;
}
#drcOverlay .drc-shell {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--white) !important;
}