/* ============================================================================
 * Almasa shared app chrome — left rail + topbar.
 *
 * Load AFTER tokens.css and palette.css. Plain CSS, no framework, no build —
 * same contract as tokens.css, so it works in Next.js, Vite and the no-build
 * vanilla app alike.
 *
 * MEASUREMENTS COME FROM THE HR DASHBOARD, which the owner picked as the
 * reference. Rail 84px collapsed / 236px expanded, topbar 70px. The other
 * three apps were 88/292 (AMC, Control Center) and 78/264 (Media Gallery),
 * with topbars at 81px, 67px and 73px. Those all move to these numbers.
 *
 * ── WHAT THIS FILE OWNS ─────────────────────────────────────────────────
 *   The rail's internals, and the topbar's internals + height + padding +
 *   border + background.
 *
 * ── WHAT IT DELIBERATELY DOES NOT OWN ───────────────────────────────────
 *   Outer positioning. HR offsets content with `margin-left: var(--almasa-rail-w)`;
 *   AMC, Control Center and Media Gallery use CSS grid
 *   (`grid-template-columns: var(--almasa-rail-w) minmax(0, 1fr)`).
 *   Both read the same variable, so the widths stay in lockstep without
 *   rewriting three different layout systems. Each app keeps its own
 *   `position:` and its own topbar full-bleed negative margin.
 *
 * ── STATE CONTRACT ──────────────────────────────────────────────────────
 *   :root[data-sidebar="collapsed" | "expanded"]   drives --almasa-rail-w
 *   :root[data-theme="light" | "dark"]             drives the palette
 *
 *   This file keys off the [data-theme] ATTRIBUTE only. AMC and Control
 *   Center also carry .theme-light / .theme-dark classes for their own
 *   rules; those keep working, they just don't style the chrome. Do not add
 *   class-based variants here — one selector family is the whole point.
 *
 * ── NO IDENTITY UI ──────────────────────────────────────────────────────
 *   By owner decision there is no avatar, no user name and no role anywhere
 *   in the chrome. The only session control is `.a-rail-logout`, an
 *   icon-only button pinned to the bottom of the rail. It must stay visible
 *   and reachable in the COLLAPSED state — Media Gallery previously hid its
 *   logout when collapsed while also booting collapsed, which made signing
 *   out impossible. Do not reintroduce that.
 * ========================================================================= */

:root {
  --almasa-rail-w: 84px;
  --almasa-topbar-h: 70px;

  /* Sticky offset for the topbar. Control Center raises this to 44px when its
   * staging banner is showing; everything else leaves it at 0. */
  --almasa-topbar-top: 0px;

  /* The wordmark SVG is monochrome and recoloured by filter rather than
   * shipping two assets. Apps may override. */
  --almasa-logo-filter: brightness(0) saturate(0) opacity(0.82);
}

:root[data-sidebar="expanded"] {
  --almasa-rail-w: 236px;
}

:root[data-theme="dark"] {
  --almasa-logo-filter: brightness(0) invert(1);
}

/* ============================================================================
 * RAIL
 * ========================================================================= */

.a-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--almasa-sp-11);
  width: var(--almasa-rail-w);
  padding: var(--almasa-sp-8) 0;
  border-right: 1px solid var(--almasa-c-border);
  background: var(--almasa-c-bg-deep);
  transition: width 0.22s ease;
}

/* --- head: brand tile + collapse toggle --- */

.a-rail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--almasa-sp-5);
}

:root[data-sidebar="expanded"] .a-rail-head {
  flex-direction: row;
  align-self: stretch;
  justify-content: space-between;
  padding: 0 var(--almasa-sp-7);
}

.a-rail-brand {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-5);
  background: var(--almasa-c-surface);
}

.a-rail-logo {
  width: 34px;
  height: auto;
  filter: var(--almasa-logo-filter);
}

.a-rail-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-4);
  background: var(--almasa-c-surface);
  color: var(--almasa-c-text-muted);
  cursor: pointer;
}

.a-rail-toggle:hover {
  border-color: var(--almasa-c-border-strong);
  color: var(--almasa-c-text);
}

.a-rail-toggle svg {
  transition: transform 0.22s ease;
}

:root[data-sidebar="expanded"] .a-rail-toggle svg {
  transform: rotate(180deg);
}

/* --- nav --- */

.a-rail-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--almasa-sp-4);
  /* Long nav lists must scroll rather than clip. AMC has 9 items, and the
   * rail is 100vh with a fixed head — at short viewport heights the tail
   * would otherwise be unreachable. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

:root[data-sidebar="expanded"] .a-rail-nav {
  align-items: stretch;
  align-self: stretch;
  padding: 0 var(--almasa-sp-7);
}

.a-rail-item {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: var(--almasa-r-4);
  background: transparent;
  /* -soft, not -muted: muted measures 3.84–4.39 against the rail in HR, AMC
   * light, Control Center light and Media Gallery — under the 4.5 floor for
   * 13px labels. -soft clears it everywhere (5.98 worst case). */
  color: var(--almasa-c-text-soft);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--almasa-dur-fast) ease,
    color var(--almasa-dur-fast) ease;
}

.a-rail-item:hover {
  color: var(--almasa-c-text);
  transform: scale(1.12);
}

.a-rail-item:active {
  transform: scale(0.92);
}

/* HR's treatment: a solid accent pill with a contrasting glyph and an
 * accent-tinted shadow. Each palette supplies --almasa-accent-shadow in its own
 * hue so the blue and indigo apps don't inherit a green glow.
 *
 * --almasa-accent-ink defaults to white, which is right for the darker accents
 * (HR/Control Center green #15895e 4.40, AMC blue #0072f9 4.40, Media Gallery
 * indigo #2e3192 10.66). Palettes whose accent is LIGHT must override it with a
 * dark ink, or the label is unreadable — Control Center's dark mint #4fd1a5
 * measures 1.91 against white but 9.39 against dark. */
.a-rail-item.is-active {
  background: var(--almasa-accent);
  border-color: transparent;
  color: var(--almasa-accent-ink, #ffffff);
  box-shadow: 0 8px 18px var(--almasa-accent-shadow, rgba(0, 0, 0, 0.24));
}

:root[data-sidebar="expanded"] .a-rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--almasa-sp-6);
  width: auto;
  padding: 0 var(--almasa-sp-7);
}

/* Springy scaling reads as a glitch on a full-width row, and scaling the
 * active row washes out its background. Hover paints instead. */
:root[data-sidebar="expanded"] .a-rail-item {
  transform: none;
}

:root[data-sidebar="expanded"] .a-rail-item:hover:not(.is-active) {
  background: var(--almasa-c-surface-3);
  transform: none;
}

.a-rail-item-label {
  display: none;
  font-size: var(--almasa-fs-8);
  font-weight: var(--almasa-fw-bold);
  white-space: nowrap;
}

:root[data-sidebar="expanded"] .a-rail-item-label {
  display: block;
}

/* --- foot: the only session control --- */

.a-rail-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--almasa-sp-4);
}

:root[data-sidebar="expanded"] .a-rail-foot {
  align-self: stretch;
  padding: var(--almasa-sp-4) var(--almasa-sp-7) 0;
}

.a-rail-logout {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-4);
  background: var(--almasa-c-surface);
  color: var(--almasa-c-text-muted);
  cursor: pointer;
}

.a-rail-logout:hover {
  border-color: var(--almasa-c-danger);
  color: var(--almasa-c-danger);
}

/* ============================================================================
 * TOPBAR
 * ========================================================================= */

.a-topbar {
  position: sticky;
  top: var(--almasa-topbar-top);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-6);
  height: var(--almasa-topbar-h);
  padding: 0 var(--almasa-sp-11);
  border-bottom: 1px solid var(--almasa-c-border);
  background: var(--almasa-c-topbar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- home / back --- */

.a-topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-4);
}

.a-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--almasa-sp-3);
  height: 36px;
  padding: 0 var(--almasa-sp-6);
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-3);
  background: var(--almasa-c-surface);
  color: var(--almasa-c-text-muted);
  font-size: var(--almasa-fs-6);
  font-weight: var(--almasa-fw-extrabold);
  cursor: pointer;
  text-decoration: none;
}

.a-topbar-btn:hover,
.a-topbar-btn.is-active {
  border-color: var(--almasa-accent);
  color: var(--almasa-accent);
}

/* icon-only variant */
.a-topbar-btn.is-square {
  width: 36px;
  padding: 0;
  justify-content: center;
}

/* --- brand --- */

.a-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-5);
  min-width: 0;
  margin-left: var(--almasa-sp-3);
}

.a-topbar-logo-wrap {
  display: block;
  flex: none;
  width: 82px;
  height: 20px;
}

.a-topbar-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--almasa-logo-filter);
}

.a-topbar-title {
  margin: 0;
  color: var(--almasa-c-text);
  font-size: var(--almasa-fs-9);
  font-weight: var(--almasa-fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- segmented toggles (language + theme use the same component) ---
 * Pure CSS on purpose. Media Gallery previously positioned a sliding pill
 * with getBoundingClientRect() maths in JS, re-fired from four call sites
 * plus a resize listener. None of that is needed for this. */

.a-seg {
  display: inline-flex;
  align-items: center;
  gap: var(--almasa-sp-2);
  flex: none;
  padding: var(--almasa-sp-2);
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-3);
  background: var(--almasa-c-surface-2);
}

.a-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  padding: 0 var(--almasa-sp-5);
  border: 0;
  border-radius: var(--almasa-r-2);
  background: transparent;
  color: var(--almasa-c-text-soft);
  font-size: var(--almasa-fs-6);
  font-weight: var(--almasa-fw-black);
  cursor: pointer;
}

.a-seg-btn:active {
  transform: scale(0.93);
}

.a-seg-btn.is-active {
  background: var(--almasa-c-surface);
  color: var(--almasa-accent);
}

/* --- right-hand actions --- */

.a-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-7);
  min-width: 0;
  margin-left: auto;
}

.a-topbar-search {
  display: flex;
  align-items: center;
  gap: var(--almasa-sp-4);
  width: 250px;
  height: 36px;
  padding: 0 var(--almasa-sp-6);
  border: 1px solid var(--almasa-c-border);
  border-radius: var(--almasa-r-3);
  background: var(--almasa-c-surface);
  color: var(--almasa-c-text-muted);
}

.a-topbar-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--almasa-c-text);
  font: inherit;
  font-size: var(--almasa-fs-7);
  font-weight: var(--almasa-fw-medium);
  outline: none;
}

.a-topbar-search input::placeholder {
  color: var(--almasa-c-text-muted);
}

.a-topbar-version {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--almasa-c-text-muted);
  font-size: var(--almasa-fs-4);
  font-weight: var(--almasa-fw-heavy);
  letter-spacing: var(--almasa-ls-wider);
  text-transform: uppercase;
  cursor: pointer;
}

.a-topbar-version:hover,
.a-topbar-version:focus-visible {
  color: var(--almasa-accent);
}

/* ============================================================================
 * FOCUS + MOTION
 * None of the four apps had visible focus rings on their chrome. Adding one
 * here fixes it in all of them at once.
 * ========================================================================= */

.a-rail-item:focus-visible,
.a-rail-toggle:focus-visible,
.a-rail-logout:focus-visible,
.a-topbar-btn:focus-visible,
.a-seg-btn:focus-visible,
.a-topbar-version:focus-visible {
  outline: 2px solid var(--almasa-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .a-rail,
  .a-rail-item,
  .a-rail-toggle svg {
    transition: none;
  }
  .a-rail-item:hover,
  .a-rail-item:active,
  .a-seg-btn:active {
    transform: none;
  }
}

/* ============================================================================
 * RESPONSIVE
 * Below 900px the app title and logo drop out before the search box does.
 * Below 700px the rail hides entirely — matching HR's existing behaviour.
 * NOTE: there is still no mobile drawer or hamburger in any of the four apps;
 * that is pre-existing and out of scope here.
 * ========================================================================= */

@media (max-width: 900px) {
  .a-topbar-search {
    width: 160px;
  }
  .a-topbar-title,
  .a-topbar-logo-wrap {
    display: none;
  }
}

@media (max-width: 700px) {
  /* Collapsing the WIDTH VARIABLE — not just hiding the element — is what makes
   * this work for both layout models. `display:none` alone drops the rail out
   * of a CSS grid, so the content column auto-places into the leftover rail
   * track and the whole app renders 236px wide (hit in Media Gallery, and AMC
   * and Control Center use the same grid). Zeroing the variable collapses the
   * grid track AND zeroes HR's margin-left offset in one move. */
  :root,
  :root[data-sidebar="expanded"] {
    --almasa-rail-w: 0px;
  }

  /* Deliberately NOT `display: none`. That removes the rail from grid flow, so
   * the content column auto-places into the now-0px rail track and the whole
   * app renders at zero width. Keeping the rail in flow at zero width clips it
   * invisibly while leaving the grid tracks correct, and works identically for
   * HR's fixed + margin-left model. */
  .a-rail {
    overflow: hidden;
    padding: 0;
    border-right: 0;
    pointer-events: none;
  }
}