/*
 * Admin Layout — CSS Grid sidebar layout
 */

@layer components {

/* Grid layout */
.admin-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* Sidebar */
.admin-sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-sidebar-close {
  display: none;
  margin-right: 0.5rem;
}

/* Content area */
.admin-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
}

/* Header bar */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1.5rem;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.admin-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Still used by layouts/couvra_admin.html.erb's internal header title (out of
   this phase's scope) — kept and fixed to the canonical size per the Legacy
   Exceptions table rather than deleted, so that layout doesn't regress. The
   main app shell's header title span was replaced entirely by
   .restaurant-switcher-pill above. */
.admin-header-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.admin-header-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.admin-header-username {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.admin-header-signout {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

@media (max-width: 600px) {
  .admin-header-user .admin-header-username,
  .admin-header-user .badge,
  .admin-header-user > i:first-child {
    display: none;
  }

  .admin-header-signout span {
    display: none;
  }
}

/* Main content area */
.admin-main {
  padding: 1.5rem 2rem;
  max-width: var(--main-max-width);
}

/* Page title (NAV-04) — the single on-page heading sourced from the same
   content_for(:title) value as <title>, so tab and heading never disagree.
   Belongs to the page content area, not the chrome — no accent color. */
.admin-page-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

@media (max-width: 900px) {
  .admin-main {
    padding: 1rem;
  }
}

/* Mobile responsive */
@media (max-width: 900px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--color-surface-raised);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }

  .admin-sidebar--open {
    transform: translateX(0);
  }

  .admin-sidebar-close {
    display: inline-flex;
  }
}

.admin-body--menu-open {
  overflow: hidden;
}

/* Restaurant-switcher pill in header (NAV-03) — always visible, neutral
   surface (not accent), meets --touch-target-min. Non-interactive variant
   (single-restaurant users) renders as a <span>, so button-only states
   below apply naturally only to the interactive <button> variant. */
.restaurant-switcher-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--touch-target-min);
  padding: 0 var(--space-md);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: default;
  transition: background var(--transition-fast);
}

button.restaurant-switcher-pill {
  cursor: pointer;
}

button.restaurant-switcher-pill:hover {
  background: var(--color-border-light);
}

button.restaurant-switcher-pill:focus-visible {
  outline: 2px solid var(--color-focus-ring-solid);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .restaurant-switcher-pill-name {
    display: inline-block;
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
}

/* Minimal layout (no sidebar) */
.minimal-layout {
  max-width: 640px;
  margin: 3rem auto;
  padding: 0 1.5rem;
}
}