/* The portal shell's own styling: the shared danger bar, the cycle-receipt
   alert both hosts draw, and the Material 3 navigation rail overrides.
   Linked from anvil.yaml head_html; the --ch-* tokens live in
   theme/assets/ch_tokens.css. */


/* Shared danger bar for non-dismissible red banners. The COMMON look lives
   here; each consumer keeps only what genuinely differs. The cycle-receipt
   alert adds padding, margin-bottom and a border-radius; the complaint
   identity error's spacing and radius live in
   theme/assets/request_services/ch_complaint_card_html.css.

   NO var() FALLBACKS, deliberately. Every --ch-danger-* token is defined in
   both :root and [data-theme="dark"], so a fallback can never be reached in
   a correctly-loaded app — but if a token were ever dropped, a fallback
   would silently paint the LIGHT value on the dark theme (that is exactly
   how var(--ch-danger-text, #7f1d1d) rendered #7f1d1d on #7f1d1d and shipped
   an invisible banner). Failing visibly is the point.

   `html` lifts this rule above the shared toolkit's own .ch-danger-banner,
   which ensure_theme_injected appends to the head after this sheet loads:
   the portal's banner keeps the portal's font. */
html .ch-danger-banner {
  background: var(--ch-danger-bg);
  color: var(--ch-danger-text);
  border-left: 3px solid var(--ch-danger-border);
  font-size: 14px;
  font-family: var(--ch-font-primary);
}

/* Live cycle-receipt alert (feature plan §7.5). Danger bar,
   non-dismissible. Background, colour, border-left, font-size and
   font-family come from the shared .ch-danger-banner above; only what
   differs lives here, plus a stacked multi-home layout. Drawn once by
   main's cycle_alert_banner_html above every screen. */
.ch-cycle-alerts { margin-bottom: var(--ch-space-md); }

.ch-cycle-alert {
  padding: 12px 16px;
  margin-bottom: var(--ch-space-sm);
  border-radius: 0 var(--ch-radius-md) var(--ch-radius-md) 0;
}
.ch-cycle-alert:last-child { margin-bottom: 0; }

.ch-cycle-alert-home   { font-weight: 650; font-size: 15px; margin-bottom: 4px; }
.ch-cycle-alert-body   { margin: 0 0 8px; line-height: 1.55; }
.ch-cycle-alert-figs   { font-weight: 650; }
.ch-cycle-alert-meta   { font-size: 12.5px; opacity: .85; }

@media (max-width: 640px) {
  /* Two classes on purpose: the font-size here overrides
     `html .ch-danger-banner`'s, and a media query adds no specificity, so
     the specificity, not the order, is what the override rests on. */
  .ch-cycle-alert.ch-danger-banner { font-size: 13.5px; padding: 11px 13px; }
}

/* Navigation Rail Theme Overrides */
.anvil-m3-navigationRailLayout,
.anvil-m3-navigation-rail {
  background: var(--ch-bg-card) !important;
  border-right: 1px solid var(--ch-border) !important;
}

.anvil-m3-navigation-rail {
  overflow-x: hidden !important;
}

/* MAR jobs bubble parked in the rail (main/__init__.py) off the MAR Charts
   page. The shared .px-mjb margins tuck it onto the Generate button's corner;
   in the rail they push it off the left edge, so centre it instead. */
.anvil-m3-navigation-rail .px-mjb {
  align-self: center;
  margin: 0;
}

/* Its job list is 380px wide and the rail clips at 80px. Only while the list
   is open, the rail lets it overflow over the page. A one-axis `visible`
   would compute to auto and still clip, so this sets both axes.
   The M3 theme fixes the rail at z-index 8, which traps the list's own
   z-index inside the rail, so a sticky table header (z-index 10) drew over
   it. While the list is open the rail rises to the dropdown layer: above
   page content and sticky headers, below the portal's modals. */
.anvil-m3-navigation-rail:has(.px-mjb-pop) {
  overflow: visible !important;
  z-index: var(--ch-z-dropdown);
}

/* Center all nav rail items (wrappers are display:block, buttons are inline-flex) */
.anvil-m3-navigation-rail-content > * {
  text-align: center !important;
}

/* Center avatar menu container (display:flex with justify-content:left by default) */
.anvil-m3-navigation-rail .anvil-m3-avatarMenu-container {
  justify-content: center !important;
}

.anvil-m3-navigation-rail .anvil-m3-iconButton,
.anvil-m3-navigation-rail .anvil-m3-iconbutton-container,
.anvil-m3-navigation-rail .anvil-m3-avatarMenu-button,
.anvil-m3-navigation-rail .ch-reset-btn {
  color: var(--ch-text-primary) !important;
}

.anvil-m3-navigation-rail .anvil-m3-iconButton *,
.anvil-m3-navigation-rail .anvil-m3-iconbutton-container *,
.anvil-m3-navigation-rail .anvil-m3-avatarMenu-button *,
.anvil-m3-navigation-rail .ch-reset-btn * {
  color: inherit !important;
}

.anvil-m3-navigation-rail .anvil-m3-iconButton:hover,
.anvil-m3-navigation-rail .anvil-m3-iconbutton-container:hover,
.anvil-m3-navigation-rail .anvil-m3-avatarMenu-button:hover,
.anvil-m3-navigation-rail .ch-reset-btn:hover {
  background: var(--ch-bg-secondary) !important;
}

/* Bottom app bar: distribute the visible navigation buttons evenly on mobile. */
@media (max-width: 768px) {
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar {
    --bottom-nav-control-size: clamp(36px, calc((100vw - 16px) / 8), 48px);
    padding-left: var(--ch-space-xs) !important;
    padding-right: var(--ch-space-xs) !important;
    box-sizing: border-box !important;
  }

  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: clamp(0px, 1vw, 6px) !important;
  }

  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > .anvil-force-hidden,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > .anvil-visible-false,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > .px-nav-logo-container,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > #px-nav-logo,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-navigation-rail-content > *:has(.anvil-m3-divider) {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
  }

  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-divider {
    display: none !important;
  }

  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-avatarMenu-container,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-iconButton,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-iconbutton-container,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .anvil-m3-avatarMenu-button,
  .anvil-m3-navigation-rail.anvil-m3-bottom-app-bar .ch-reset-btn {
    width: var(--bottom-nav-control-size) !important;
    min-width: 0 !important;
    max-width: var(--bottom-nav-control-size) !important;
  }
}

/* Style avatar menu to look like a regular icon button */
.anvil-m3-avatarMenu,
.anvil-m3-avatarMenu-content {
  background: var(--ch-bg-card) !important;
  color: var(--ch-text-primary) !important;
}

.anvil-m3-avatarMenu-slot {
  color: var(--ch-text-primary) !important;
}

/* Remove avatar circle highlight so it matches plain icon buttons */
.anvil-m3-navigation-rail .anvil-m3-avatar.anvil-m3-avatar-filled {
  background: transparent !important;
  border-radius: 0 !important;
}

.anvil-m3-divider {
  background: var(--ch-border) !important;
}

/* Main content area */
.anvil-m3-navigationRailLayout-content,
.anvil-m3-content {
  background: var(--ch-bg-primary) !important;
}

/* PX Logo in navigation rail */
.px-nav-logo-container {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px 0;
}

.px-nav-logo-container img {
  width: 40px;
  height: 40px;
}

/* Hide logo when nav rail collapses to bottom app bar (mobile) */
@media (max-width: 900px) {
  .px-nav-logo-container {
    display: none !important;
  }
}