/* css/timetable-topbar.css — Full-screen timetable top-bar, event-header strip, dropdown menus, and slot-list scrim (Phase 42). Imported into the components layer. */

/* ── Top-bar wrapper (CR-01) ─── */
/* flex:none keeps the wrap a fixed-height strip in the panel's flex column (the bar's
   own 62px height drives it — the absolutely-positioned menus are out of flow).
   position:relative makes THIS the containing block for the dropdown menus below, so
   their top:calc(100% + 4px) resolves against the 62px bar bottom, not the full-screen
   panel. #tt-topbar and the two .tt-menu siblings are all direct children of this wrap.
   z-index:80 lifts the WHOLE wrap (bar + nested menus) above the panel-level scrims
   (menu-scrim z:30, slot-scrim z:50) and the switcher (z:70). Because the wrap is a
   stacking context, its descendant menus (internal z:60) cannot paint above the panel
   scrims on their own — the wrap's z:80 is what carries them over. Outside-area clicks
   (not under the wrap) still fall to the menu-scrim and dismiss. */
.tt-topbar-wrap {
  flex: none;
  position: relative;
  z-index: 80;
}

/* ── Top-bar container ─── */
/* flex:none pins it as a fixed-height strip at the top of the flex column. */
.tt-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
  background: var(--bg-surface);
  position: relative;
}

/* Spacer pushes Import/Share buttons to the right */
.tt-topbar__spacer {
  flex: 1;
}

/* Slot count badge inside the switcher trigger */
.tt-topbar__slot-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ── Event-header strip ─── */
/* WR-06: minimal interim layout so the relocated form (show-title, logo, warn, settings row,
   plus the WR-05 import error/confirm banners) has a usable container until Plan 42-02 lands
   its full styling. flex column with padding + gap prevents full-bleed inputs and overlap. */
.tt-event-header {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
}

/* ── Dropdown menu panels ─── */
/* Position:absolute so they overlay the slot list without pushing content down.
   CR-01: containing block is .tt-topbar-wrap (position:relative). The wrap is the
   bar's height, so top:calc(100% + 4px) anchors just below the 62px bar bottom.
   display:none → display:flex toggle via .tt-menu--open class. */
.tt-menu {
  position: absolute;
  top: calc(100% + 4px);
  min-width: 200px;
  background: rgba(26, 29, 34, 0.99);
  border: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: var(--radius);
  display: none;
  flex-direction: column;
  z-index: 60;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tt-menu--open {
  display: flex;
}

.tt-menu--right {
  right: 0;
}

/* ── Dropdown menu item rows ─── */
/* .tt-menu-item: simpler variant for Import/Share menu (no __info/__actions split) */
.tt-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: 0.85rem;
  color: var(--text-primary);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background var(--transition);
}

.tt-menu-item:hover {
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}

/* .tt-item: list-row variant (used in switcher dropdown — matches switcher.css style) */
.tt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 5%, transparent);
  gap: var(--space-3);
  transition: background var(--transition);
}

.tt-item:hover {
  background: color-mix(in oklab, var(--fg) 3%, transparent);
}

.tt-item--active {
  /* D-V2.0-COLOR-MIX: rgba() fallback MUST precede every color-mix() */
  background: rgba(232, 168, 56, 0.06);
  background: color-mix(in oklab, var(--accent-amber) 6%, transparent);
  border-left: 3px solid var(--accent-amber);
}

/* ── Menu scrim — outside-click dismiss ─── */
/* WARNING-4 resolution: MUST be position:absolute (NOT position:fixed).
   The panel is position:fixed; inset:0; overflow:hidden — a position:fixed child
   would be clipped by the panel's stacking/overflow context and be ineffective.
   position:absolute fills the panel as a child within the panel's stacking context.
   z-index:30 is BELOW dropdown menus (z:60) so menu-item clicks pass through to the menus;
   outside-area clicks (where no z:60 element exists) fall to the scrim and trigger dismiss.
   [hidden] attribute controls visibility — consistent with codebase pattern. */
.tt-menu-scrim {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: transparent;
  cursor: default;
}

.tt-menu-scrim[hidden] {
  display: none;
}

/* Visible state — used when any dropdown is open (toggle via JS class) */
.tt-menu-scrim.tt-scrim--visible {
  /* background remains transparent — scrim is pointer-events only, no dim */
}

/* ── Slot-list scrim — blocks interaction with slot list while dropdown is open ─── */
/* Replaces setSlotListInert() — pointer-events only, no full inert on DOM subtree.
   position:absolute top:62px places it below the top-bar, above the slot list content.
   z-index:50 is above slot list rows but below the top-bar wrap (z:80) and the switcher
   (z:70, CR-02) — so when the switcher is open over the slot list, the switcher list stays
   clickable while the scrim only masks the (already covered) area. */
.tt-slot-scrim {
  position: absolute;
  top: 62px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.30);
}

.tt-slot-scrim[hidden] {
  display: none;
}

/* ── Shared-view (readonly) gating ─── */
/* Hide operator-only top-bar controls in shared view (T-42-01 — elevation of privilege mitigation) */
.timetable-panel--readonly #tt-import-btn,
.timetable-panel--readonly #tt-import-menu,
.timetable-panel--readonly #tt-share-btn,
.timetable-panel--readonly #tt-share-menu,
.timetable-panel--readonly #tt-switcher-trigger {
  display: none;
}

/* Event-header strip: re-home elements were previously hidden by timetable-panel.css readonly rules.
   In the new layout they live inside #tt-event-header and must remain VISIBLE but non-interactive.
   Override timetable-panel.css display:none for these elements when inside #tt-event-header. */
.timetable-panel--readonly #tt-event-header .timetable-panel__show-title,
.timetable-panel--readonly #tt-event-header .timetable-panel__warn-setting,
.timetable-panel--readonly #tt-event-header .logo-row,
.timetable-panel--readonly #tt-event-header .timetable-panel__settings-row {
  display: block; /* restore visibility; pointer-events rule below makes them non-interactive */
}

/* Event-header inputs become read-only in shared view — visible but not interactive */
.timetable-panel--readonly #tt-event-header input,
.timetable-panel--readonly #tt-event-header select {
  pointer-events: none;
  opacity: 0.6;
}
/* #tt-back-btn remains visible in shared view — locked decision (CONTEXT.md) */

/* ── Share & Export menu groups (EXP-01, Phase 48-02) ─── */
/* Presentational wrappers — no ids (CLAUDE.md Critical Constraint 1). */
.tt-menu__group {
  display: flex;
  flex-direction: column;
}

.tt-menu__group + .tt-menu__group {
  border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}

.tt-menu__group-label {
  display: block;
  padding: var(--space-2) var(--space-4) calc(var(--space-1) / 2);
  font-size: 0.7rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
}