/*
 * Admin Page Patterns — reusable layout classes for page content
 */

@layer components {

/* Page header: title left, actions right */
.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-page-header h1 {
  margin: 0;
  color: var(--color-text);
}

/* Badge row inside the page header (e.g. Archived + subscription-status
   badges on companies/show) -- keeps a controlled gap between badges now
   that they no longer sit inside a single <h1> (review finding WR-01) */
.admin-page-header-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* Card grid — auto-fill responsive grid for card collections */
.admin-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Stat / KPI grid — smaller cards */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Stat card content */
.admin-stat-card {
  text-align: center;
}

.admin-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.admin-stat-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
}

/* Detail grid — 2-column layout for show pages */
.admin-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .admin-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Detail field — label + value pairs inside cards */
.admin-detail-field {
  margin-bottom: 0.75rem;
}

.admin-detail-field:last-child {
  margin-bottom: 0;
}

.admin-detail-label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}

/* Data table — full-width styled tables */
.admin-data-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-data-table th {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--color-border);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-bg-subtle);
}

.admin-data-table th:last-child {
  text-align: right;
}

.admin-data-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.admin-data-table td:last-child {
  text-align: right;
}

.admin-data-table tbody tr:hover {
  background: var(--color-bg);
}

/* Form container — constrained width for forms */
.admin-form-container {
  max-width: 700px;
}

/* Form grid — 2-column form layout */
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Inline form field — overrides .form-field's block stacking so a label +
   input pair sits side-by-side (e.g. analytics custom date-range From/To) */
.form-field--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.form-field--inline .form-label {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .admin-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Filter bar — search + filter controls */
.admin-filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Empty state — centered icon + message */
.admin-empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
}

.admin-empty-state i {
  font-size: 1.25rem;
  margin-right: 0.35rem;
}

.admin-empty-state__heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0.5rem 0 0.25rem;
}

.admin-empty-state__body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin: 0;
}

/* Actions row — flex row for action buttons */
.admin-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Actions cell — table-cell variant of .admin-actions */
.admin-actions-cell {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Billing actions row — spaced below billing overview content */
.admin-billing-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-lg);
}

/* Status actions — inline with other header buttons */
.admin-status-actions {
  display: contents;
}

/* Dialog footer — right-aligned buttons */
.admin-dialog-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Description list — key/value pairs in grid */
.admin-description-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.9rem;
}

.admin-description-list dd {
  margin: 0;
}

/* Section spacing */
.admin-section {
  margin-bottom: 1.5rem;
}

/* Date navigation — prev/next controls */
.admin-date-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.admin-date-nav h2 {
  margin: 0;
}

/* Hub header (03-07, HUB-11) — two-row header: day-nav + inline date-picker
   (row 1, .admin-date-nav above) and glanceable summary + persistent search
   (row 2, .hub-summary-row below). Both rows reuse flex-wrap rather than
   overflow-x so every control stays reachable at narrow tablet widths --
   no new breakpoint token; the 768px used here mirrors design-tokens.css's
   existing --breakpoint-md (var() isn't supported in @media conditions). */
.hub-header {
  margin-bottom: var(--space-lg);
}

.hub-date-form {
  display: flex;
  align-items: center;
}

.hub-date-input {
  width: auto;
  min-width: 9.5rem;
}

.hub-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.hub-summary-sentence {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  flex: 0 1 auto;
}

.hub-search-form {
  flex: 1 1 260px;
  min-width: 200px;
}

.hub-search-input {
  width: 100%;
}

@media (max-width: 768px) {
  .hub-summary-sentence {
    flex-basis: 100%;
  }

  .hub-search-form {
    flex-basis: 100%;
  }
}

/* Icon color utilities */
.admin-icon-success {
  color: var(--color-success);
}

/* Booking card metadata row */
.admin-booking-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.admin-booking-meta i {
  margin-right: 0.2rem;
}

/* Breadcrumb navigation */
.admin-breadcrumbs {
  margin-bottom: 0.75rem;
}

.admin-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
}

.admin-breadcrumbs li {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.admin-breadcrumbs li + li::before {
  content: ">";
  margin-right: 0.25rem;
  color: var(--color-border);
}

.admin-breadcrumbs a {
  color: var(--color-brand);
  text-decoration: none;
}

.admin-breadcrumbs a:hover {
  text-decoration: underline;
}

.admin-breadcrumbs [aria-current="page"] {
  color: var(--color-text);
  font-weight: 500;
}

/* Back link */
.admin-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 1rem;
}

.admin-back-link:hover {
  color: var(--color-brand);
}

/* Restaurant Switcher Page */
.restaurant-switcher-header {
  text-align: center;
  margin-bottom: 2rem;
}

.restaurant-switcher-logo {
  height: 48px;
  margin-bottom: 1rem;
}

.restaurant-switcher-header h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.restaurant-switcher-search {
  margin-bottom: 1.5rem;
}

.restaurant-switcher-group {
  margin-bottom: 1.5rem;
}

.restaurant-switcher-company {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-border);
}

.restaurant-switcher-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.restaurant-switcher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface-raised);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.restaurant-switcher-card:hover {
  border-color: var(--color-brand);
  background: var(--color-bg);
}

.restaurant-switcher-card--current {
  border-color: var(--color-brand);
  background: var(--color-brand-bg);
  cursor: default;
}

.restaurant-switcher-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: left;
}

.restaurant-switcher-name {
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.restaurant-switcher-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.restaurant-switcher-footer {
  margin-top: 2rem;
  text-align: center;
}

/* Dashboard view toggle */
.dashboard-view-toggle {
  display: flex;
  gap: 0.25rem;
}

/* Week view grid */
.dashboard-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.dashboard-week-column {
  min-height: 200px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.dashboard-week-column--today {
  border-color: var(--color-brand);
  background: var(--color-brand-bg);
}

.dashboard-week-day-header {
  padding: 0.5rem;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-bottom: 1px solid var(--color-border-light);
}

.dashboard-week-bookings {
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-week-booking {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  text-decoration: none;
  color: var(--color-text);
}

.dashboard-week-booking:hover {
  border-color: var(--color-brand);
}

.dashboard-week-empty {
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .dashboard-week-grid {
    grid-template-columns: 1fr;
  }
}

/* Floor view (HUB-05) — section-grouped grid of table tiles */
.floor-section-group + .floor-section-group {
  margin-top: var(--space-xl);
}

.floor-section-group__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* auto-fill/minmax so tiles wrap to fewer columns rather than shrinking
   below the touch-target floor or ever triggering horizontal scroll (HUB-11) */
.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--touch-target-min), 1fr));
  gap: var(--space-sm);
}

.floor-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: var(--touch-target-min);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border-light);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.floor-tile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.floor-tile__table-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.floor-tile__status-icon {
  font-size: var(--font-size-sm);
}

.floor-tile__guest {
  font-size: var(--font-size-sm);
}

.floor-tile__flags {
  display: flex;
  gap: var(--space-2xs);
  margin-top: auto;
}

/* Flags are always neutral — color meaning belongs to the status tint alone,
   never to the flag icons (UI-SPEC). */
.floor-tile__flags i {
  color: var(--color-text-muted);
}

.floor-tile--empty {
  color: var(--color-text-muted);
}

.floor-tile__free-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Status tints reuse the exact badge background/text tokens (lighter than
   the solid status color) so tile text stays readable — never a
   reimplemented status->color mapping. */
.floor-tile--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.floor-tile--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.floor-tile--brand {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}

.floor-tile--neutral {
  background: var(--color-neutral-badge-bg);
  color: var(--color-neutral-badge-text);
}

.floor-tile--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* Section header: heading left, actions right — card-level variant of
   .admin-page-header for section-scoped action buttons (e.g. Add User) */
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-section-header h2 {
  margin: 0;
}
}