/* CUBE: block. The left navigation rail (design 1b, "side rail split by job").

   Admins get a 216px rail with every destination visible under a group
   heading: no dropdown, no second tier. Cashiers get a 64px icon rail, which
   hands the till the full viewport height on a 7" tablet.

   The role is unknown until site-nav.js reads the stored user, so the rail
   ships hidden and the role variant is selected by [data-role] on the root
   rather than by markup the server picked. */

.side-rail {
  position: sticky;
  inset-block-start: 0;
  flex: 0 0 auto;
  inline-size: var(--rail-w);
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  z-index: var(--z-sticky);
}

/* Role gating. Server-side authorization is unchanged (rolemw.RequireAdmin);
   this only stops the rail offering pages the user cannot open. */
.side-rail[data-role="admin"] .side-rail__cashier-only,
.side-rail[data-role="cashier"] .side-rail__admin-only { display: none; }

/* Brand ------------------------------------------------------------- */

.side-rail__brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  block-size: var(--rail-head-h);
  padding-inline: var(--space-s);
  border-block-end: 1px solid var(--color-border-subtle);
  color: var(--color-fg);
  text-decoration: none;
}

.side-rail__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--brand-mark);
  block-size: var(--brand-mark);
  border-radius: var(--radius-s);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.side-rail__name { font-size: var(--fs-md); font-weight: 600; }

/* Destinations ------------------------------------------------------- */

.side-rail__nav {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

.side-rail__group { display: flex; flex-direction: column; gap: 1px; }

.side-rail__heading {
  padding: 0 var(--space-xs) var(--space-2xs);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.side-rail__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  block-size: var(--control-h);
  min-block-size: var(--control-h);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-s);
  color: var(--color-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.side-rail__item > .icon { color: var(--color-muted); }
.side-rail__item:hover { background: var(--color-surface-muted); }
.side-rail__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.side-rail__item[aria-current] {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-weight: 600;
}
.side-rail__item[aria-current] > .icon { color: currentColor; }

/* Foot: till shortcut, device chip, account menu ---------------------- */

.side-rail__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-block-start: 1px solid var(--color-border-subtle);
}

.side-rail__till {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  block-size: var(--control-h);
  min-block-size: var(--control-h);
  padding-inline: var(--space-xs);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s);
  color: var(--color-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.side-rail__till > .icon { color: var(--color-muted); }
.side-rail__till:hover { background: var(--color-bg); }

/* Device chip and account menu share one row: the rail must fit all thirteen
   admin destinations without scrolling on an 800px-tall screen. */
.side-rail__utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.side-rail__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-inline-size: 0;
  block-size: var(--icon-btn-sm);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-border-subtle);
  color: var(--color-fg);
  font-size: var(--fs-xs);
  font-weight: 500;
}
.side-rail__dot {
  flex: 0 0 auto;
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}
.side-rail__chip[data-online="false"] .side-rail__dot { background: var(--color-warn); }
/* The separator only earns its space once site-nav.js has a device id. */
.side-rail__chip-device:not(:empty)::after { content: " · "; }

.side-rail__user { position: relative; }
.side-rail__user > summary { list-style: none; cursor: pointer; }
.side-rail__user > summary::-webkit-details-marker { display: none; }
.side-rail__user > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.side-rail__avatar-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  block-size: var(--icon-btn);
  min-block-size: var(--icon-btn);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  color: var(--color-fg);
}
.side-rail__avatar-btn:hover { background: var(--color-border-subtle); }

.side-rail__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--avatar);
  block-size: var(--avatar);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
}
.side-rail__caret { font-size: var(--fs-2xs); opacity: 0.5; }

/* The menu hangs off the bottom of the rail, so it opens upward. */
.side-rail__user-menu {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2xs));
  inset-inline-start: 0;
  inline-size: 14.5rem;
  padding: var(--space-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-md);
  z-index: var(--z-menu);
}
.side-rail__user-head {
  padding: var(--space-xs);
  border-block-end: 1px solid var(--color-border-subtle);
  margin-block-end: var(--space-3xs);
}
.side-rail__user-email { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.side-rail__user-meta { font-size: var(--fs-xs); color: var(--color-muted); }
.side-rail__user-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  inline-size: 100%;
  block-size: var(--control-h);
  min-block-size: var(--control-h);
  padding-inline: var(--space-xs);
  background: transparent;
  color: var(--color-fg);
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: none;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: start;
  justify-content: flex-start;
  text-decoration: none;
}
.side-rail__user-item:hover:not(:disabled) { background: var(--color-surface-muted); }
.side-rail__user-item--danger { color: var(--color-danger); }
.side-rail__user-item--danger:hover:not(:disabled) { background: var(--color-danger-soft); }

/* Cashier variant: 64px icon rail ------------------------------------ */

.side-rail[data-role="cashier"] {
  inline-size: var(--rail-w-compact);
  align-items: center;
}

.side-rail[data-role="cashier"] .side-rail__name,
.side-rail[data-role="cashier"] .side-rail__heading,
.side-rail[data-role="cashier"] .side-rail__chip-label,
.side-rail[data-role="cashier"] .side-rail__caret { display: none; }

.side-rail[data-role="cashier"] .side-rail__chip-device::after { content: none; }

.side-rail[data-role="cashier"] .side-rail__brand {
  justify-content: center;
  block-size: auto;
  padding: var(--space-s) 0 var(--space-m);
  border-block-end: 0;
}
.side-rail[data-role="cashier"] .side-rail__logo {
  inline-size: var(--brand-mark-lg);
  block-size: var(--brand-mark-lg);
  border-radius: var(--radius-m);
  font-size: var(--fs-md);
}

.side-rail[data-role="cashier"] .side-rail__nav {
  align-items: center;
  padding: 0;
  gap: var(--space-2xs);
}
.side-rail[data-role="cashier"] .side-rail__group { gap: var(--space-2xs); }

.side-rail[data-role="cashier"] .side-rail__item {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3xs);
  inline-size: var(--rail-tab-w);
  block-size: var(--rail-tab-h);
  padding-inline: 0;
  border-radius: var(--radius-m);
  color: var(--color-muted);
  font-size: var(--fs-3xs);
}
.side-rail[data-role="cashier"] .side-rail__item > .icon {
  inline-size: var(--rail-tab-icon);
  block-size: var(--rail-tab-icon);
  color: currentColor;
}

.side-rail[data-role="cashier"] .side-rail__foot {
  align-items: center;
  padding-block-end: var(--space-s);
  border-block-start: 0;
}
.side-rail[data-role="cashier"] .side-rail__utility {
  flex-direction: column;
  gap: var(--space-xs);
}
.side-rail[data-role="cashier"] .side-rail__avatar-btn { padding-inline: 0; }
.side-rail[data-role="cashier"] .side-rail__avatar {
  inline-size: var(--brand-mark-lg);
  block-size: var(--brand-mark-lg);
}

/* 64px is too narrow for a 14.5rem popover: open it beside the rail. */
.side-rail[data-role="cashier"] .side-rail__user-menu {
  inset-block-end: 0;
  inset-inline-start: calc(100% + var(--space-2xs));
}