/* =========================================================================
 * Drawers
 *
 * A "rail" is one container holding two children:
 *   - .drawer-panel (the content; collapses to height 0 when closed)
 *   - .drawer-tabs / .drawer-handles (the front face / pull handle)
 *
 * Closed: panel at max-height 0 → only the tab/handle strip is visible.
 * Open:  panel grows to fit content → the tab strip is pushed away from
 *        the header (top rail) or the viewport bottom (bottom rail). The
 *        active tab visually appears as the handle of an extended drawer.
 * ========================================================================= */

.drawer-rail {
  position: sticky;
  z-index: 95;
  display: block;
}

.drawer-panel {
  background: var(--u-bg-elev);
  border: 1px solid var(--u-border-accent);
  color: var(--u-text);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.15s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
/* Hide the panel's borders while closed. With max-height: 0 + overflow
   hidden, the border itself was still drawing 1px on each edge, producing
   the hairlines the user saw just under the top-rail tabs and just above
   the bottom-rail admin handle. Fade the border in only when open. */
.drawer-rail:not(.is-open) .drawer-panel { border-color: transparent; }
.drawer-rail.is-open .drawer-panel {
  max-height: 70vh;
  overflow-y: auto;
}

/* ---------- top rail ---------- */

.drawer-rail--top {
  /* Sticks BELOW the header. --header-h is set at runtime by header.js based
     on the actual header element height (so it adapts to mobile wrapping,
     user CSS edits, etc.). Default fallback keeps the rail visible in case
     the measurement never runs. */
  top: var(--header-h, 54px);
  position: sticky;
}
.drawer-rail--top .drawer-panel {
  /* Overlay, don't push: panel floats absolutely above the tab strip
     so its top edge aligns with the bottom of the header (the rail
     itself is sticky at top:--header-h), and its bottom grows down
     into main-content territory. */
  position: absolute;
  top: 0;
  left: 0; right: 0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin: 0 12px;
  z-index: 96;
}
/* Hide the active tab while its drawer is open — the panel covers
   that region anyway and a peeking highlighted tab looks broken. */
.drawer-rail--top .drawer-tab.is-active { visibility: hidden; }
.drawer-rail--top .drawer-tabs {
  display: flex;
  gap: 6px;
  padding: 0 24px;
  /* Hangs the tab strip beneath whatever sits above (header when closed,
     panel when open). The negative top pulls the tabs up so their top edge
     visually merges with the surface above (no 1-px seam). */
  margin-top: -2px;
  pointer-events: none;
}

/* ---------- bottom rail ---------- */

.drawer-rail--bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.drawer-rail--bottom .drawer-panel {
  border-top: none;          /* removes the 1-px line that otherwise hangs
                                above the closed admin drawer; the panel's
                                background + shadow still distinguish it
                                from the content above. */
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin: 0 12px;
  /* Bottom panel grows upward — easiest: same max-height transition,
     panel stacked above handle in flex order. */
}
.drawer-rail--bottom .drawer-handles {
  display: flex;
  justify-content: center;
  pointer-events: none;
  margin-top: -1px;
}
/* When the drawer is open, the handle strip becomes a full-width click
   target — tapping anywhere on it closes the drawer. */
.drawer-rail--bottom.is-open .drawer-handles { pointer-events: auto; cursor: pointer; }

/* ---------- tabs (top rail front face) ---------- */

.drawer-tab {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 5px 12px;
  border: 1px solid var(--u-border-accent);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: var(--u-bg-elev);
  color: var(--u-text-dim);
  font-family: var(--u-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.drawer-tab:hover { color: var(--u-text); }
.drawer-tab.is-active {
  color: var(--u-accent);
  border-color: var(--u-accent);
  background: var(--u-bg);
}
/* Float the Cameras tab to the far right and scale it up ~33% so it
   reads as the primary/most-used surface. Flex `margin-left: auto`
   pushes everything after it (nothing) to the right. */
.drawer-tab[data-drawer-id="cameras"] {
  margin-left: auto;
  padding: 6px 16px 7px 16px;
  font-size: 13px;
  letter-spacing: 2px;
  gap: 8px;
}
.drawer-tab[data-drawer-id="cameras"] .drawer-tab-led  { width: 10px; height: 10px; }
.drawer-tab[data-drawer-id="cameras"] .drawer-tab-icon { font-size: 14px; }
/* Disabled state — tab visible but visibly inert. Set by drawers.js when
   the item's `enabledIf` predicate returns false (e.g. `authenticated`
   for the Cameras tab before the user signs in). */
.drawer-tab--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.drawer-tab--disabled:hover { color: inherit; }

.drawer-tab-icon { font-size: 11px; line-height: 1; opacity: 0.85; }

.drawer-tab-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.drawer-tab-led[data-status="ok"] {
  background: var(--u-ok);
  box-shadow: 0 0 5px var(--u-ok), 0 0 12px rgba(34,204,68,0.5);
}
.drawer-tab-led[data-status="warn"] {
  background: var(--u-caution);
  box-shadow: 0 0 5px var(--u-caution), 0 0 12px rgba(240,192,64,0.55);
}
.drawer-tab-led[data-status="critical"] {
  background: var(--u-warn);
  box-shadow: 0 0 6px var(--u-warn), 0 0 14px rgba(255,34,34,0.6);
  animation: drawer-led-pulse 1.1s ease-in-out infinite;
}
@keyframes drawer-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ---------- handle (bottom rail front face) ---------- */

.drawer-handle {
  pointer-events: auto;
  display: flex;               /* was inline-flex — full block so width applies */
  justify-content: center;     /* center the content inside the wider pill */
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  width: 50%;                  /* desktop: half the viewport — easier target */
  background: var(--u-bg-elev);
  border: 1px solid var(--u-border-accent);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--u-text);        /* was --u-text-dim — brighter / more obvious */
  font-family: var(--u-mono);
  font-size: 11px;             /* slightly larger too */
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.drawer-handle:hover { color: var(--u-accent); }
.drawer-handle.is-active {
  color: var(--u-accent);
  background: var(--u-bg);
  border-color: var(--u-accent);
}
.drawer-handle-bar {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--u-border-accent);
}
.drawer-handle.is-active .drawer-handle-bar { background: var(--u-accent); }

/* ---------- panel internals ---------- */

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--u-border);
  font-family: var(--u-mono);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--u-accent);
  position: sticky;
  top: 0;
  background: var(--u-bg-elev);
  z-index: 1;
}
.drawer-close {
  background: transparent;
  border: none;
  color: var(--u-text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  transition: color 0.15s;
}
.drawer-close:hover { color: var(--u-text); }

.drawer-body {
  padding: 16px 18px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer-body.section-body--grid {
  display: grid;
  grid-template-columns: repeat(var(--section-cols, 2), minmax(0, 1fr));
  gap: 12px;
}
.drawer-body.section-body--flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Item-provided code (code/style/script panes) renders as a plain block
   container so the item's own CSS (margins, auto-centering, etc.) behaves
   predictably. */
.drawer-body.drawer-body--item-code {
  display: block;
}

/* ---------- mobile ---------- */

@media (max-width: 768px) {
  .drawer-rail--top .drawer-tabs { padding: 0 12px; gap: 4px; flex-wrap: wrap; }
  .drawer-tab { padding: 3px 10px 4px 10px; font-size: 9px; letter-spacing: 1px; }
  .drawer-rail.is-open .drawer-panel { max-height: 80vh; }
  .drawer-rail--top .drawer-panel,
  .drawer-rail--bottom .drawer-panel { margin: 0; border-radius: 0; }
  .drawer-body.section-body--grid { grid-template-columns: 1fr; }

  /* Full-width admin handle on mobile with a bigger tap target
     (iOS/Android HIG: ~44px minimum). */
  .drawer-handle { width: 100%; border-radius: 0; padding: 14px 18px; }
  .drawer-handle-bar { width: 44px; height: 4px; }

  /* Camera drawer: use the full viewport width on mobile regardless of
     the S/M/L/T size preference, and hide the size picker (it doesn't
     meaningfully help on a phone-size screen). Same goes for the drawer
     panel that hosts the camera. */
  body[data-drawer-open="cameras"] #drawerTopRail .drawer-panel,
  body[data-camera-size="t"][data-drawer-open="cameras"] #drawerTopRail .drawer-panel,
  body[data-camera-size="s"][data-drawer-open="cameras"] #drawerTopRail .drawer-panel,
  body[data-camera-size="m"][data-drawer-open="cameras"] #drawerTopRail .drawer-panel,
  body[data-camera-size="l"][data-drawer-open="cameras"] #drawerTopRail .drawer-panel {
    max-width: 100vw; margin: 0;
  }
  body[data-camera-size] .cameras-root,
  body[data-camera-size] .cameras-frame { max-width: 100%; margin: 0; }
  .cameras-size-ctrl { display: none !important; }
}