/* ===========================================================================
 * admin_sidebar.css — the ONE collapsible super-admin sidebar.
 * ---------------------------------------------------------------------------
 * Shared by the admin layout (app/views/layouts/admin.html.erb) AND the
 * standalone Dashboard board (app/views/admin/dashboard/dashboard.html.erb)
 * via the app/views/admin/shared/_sidebar.html.erb partial — so the nav lives
 * in exactly one place (DRY).
 *
 * Sidebar-* / accent tokens are PINNED on .admin-sidebar to keep the rail
 * visually identical on admin + dashboard pages. Values match the shared
 * OKLCH design tokens from tokens.css. Expanded = 240px; collapsed
 * (html.admin-nav-collapsed) = a 68px icon rail (labels hidden, title
 * tooltips carry the names). Buttons set their own font (the board has no
 * global button rule to inherit from).
 * =========================================================================== */
.admin-shell { display: flex; align-items: flex-start; min-height: 100vh; }

.admin-sidebar {
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-accent: var(--muted);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --accent: var(--accent);
  --accent-foreground: var(--accent-foreground);
  flex: none;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0.9rem 0.7rem;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  transition: width 0.18s ease;
  overflow: hidden;
}
html.admin-nav-collapsed .admin-sidebar { width: 68px; }

/* Head: brand wordmark + the open/collapse toggle button. */
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0.3rem 0.7rem; }
.sidebar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; text-decoration: none; color: var(--sidebar-foreground); }
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand-logo {
  flex: none; display: block;
  height: 34px; width: auto;
}
.sidebar-brand-collapsed {
  flex: none; display: none;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.05rem;
  color: var(--sidebar-foreground); line-height: 1;
}
.sidebar-brand .brand-text { display: none; }
.sidebar-brand .brand-text .name { font-family: var(--font-display, inherit); font-weight: 700; font-size: 1.05rem; }
.sidebar-brand .brand-text .name .accent { color: var(--accent); }
.sidebar-brand .brand-text small { color: var(--sidebar-foreground); opacity: 0.6; font-weight: 400; font-size: 0.7rem; }

.sidebar-toggle {
  flex: none; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  color: var(--sidebar-foreground);
  background: transparent;
  border: 1px solid var(--sidebar-border);
  border-radius: 8px; cursor: pointer;
  transition: background 0.15s ease;
}
.sidebar-toggle:hover { background: var(--sidebar-accent); filter: none; }
.sidebar-toggle svg { width: 16px; height: 16px; transition: transform 0.18s ease; }
html.admin-nav-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Vertical nav links (icon + label). */
.admin-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.admin-nav a {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  color: var(--sidebar-foreground);
  font-family: var(--font-ui, inherit);
  text-decoration: none;
  font-size: 0.92rem; font-weight: 500;
  white-space: nowrap;
}
.admin-nav a:hover { background: var(--sidebar-accent); text-decoration: none; }
.admin-nav a svg { flex: none; width: 20px; height: 20px; }
.admin-nav a.is-active {
  color: var(--sidebar-foreground);
  background: color-mix(in oklab, var(--accent) 18%, transparent);
}
.admin-nav a.is-active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: var(--accent);
}

/* Footer: Sign out pinned to the bottom of the rail. */
.sidebar-footer { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--sidebar-border); }
.sidebar-footer form, .sidebar-footer form.button_to { display: block; max-width: none; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.sidebar-footer button {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  margin: 0; padding: 0.55rem 0.65rem;
  font-family: var(--font-ui, inherit); font-size: 0.92rem; font-weight: 500; text-align: left;
  color: var(--sidebar-foreground); background: transparent;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.sidebar-footer button:hover { background: var(--sidebar-accent); filter: none; }
.sidebar-footer button svg { flex: none; width: 20px; height: 20px; }

/* Collapsed icon-rail tweaks. */
html.admin-nav-collapsed .sidebar-head { flex-direction: column; gap: 0.6rem; padding-inline: 0; }
html.admin-nav-collapsed .brand-text,
html.admin-nav-collapsed .nav-label { display: none; }
html.admin-nav-collapsed .sidebar-brand-logo { display: none; }
html.admin-nav-collapsed .sidebar-brand-collapsed { display: block; }
html.admin-nav-collapsed .admin-nav a,
html.admin-nav-collapsed .sidebar-footer button { justify-content: center; gap: 0; padding-inline: 0; }
html.admin-nav-collapsed .admin-nav a.is-active::before { display: none; }
html.admin-nav-collapsed .admin-nav a.is-active { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }

/* Narrow screens: force the compact icon rail so the content column keeps its
   room. Mirrors the html.admin-nav-collapsed visuals but driven by viewport
   width, independent of the JS toggle (the toggle is hidden here). */
@media (max-width: 760px) {
  .admin-sidebar { width: 64px; padding-inline: 0.5rem; }
  .admin-sidebar .sidebar-head { flex-direction: column; gap: 0.6rem; padding-inline: 0; }
  .admin-sidebar .brand-text,
  .admin-sidebar .nav-label,
  .admin-sidebar .sidebar-brand-logo,
  .admin-sidebar .sidebar-toggle { display: none; }
  .admin-sidebar .sidebar-brand-collapsed { display: block; }
  .admin-sidebar .admin-nav a,
  .admin-sidebar .sidebar-footer button { justify-content: center; gap: 0; padding-inline: 0; }
  .admin-sidebar .admin-nav a.is-active::before { display: none; }
  .admin-sidebar .admin-nav a.is-active { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent); }
}