/* =========================================================================
   VIIALA Professional Portal (Dealer Portal) — portal theme & specifics

   Rules (see viiala-design-system/STYLE-GUIDE.md · Portal-Theming):
   - Dealer Portal is LIGHT (Off White Sand) + WARM (Desert Veil surfaces).
   - Only override semantic tokens or add portal-specific classes here.
   - Never edit the design system foundation.
   ========================================================================= */

/* Light + warm — matches the design system defaults, pinned explicitly so the
   portal identity survives future token changes. */
html:not([data-theme]) {
  --color-bg: var(--viiala-off-white-sand);
  --color-surface-alt: var(--viiala-desert-veil-40);
}

/* --- Portal shell refinements ------------------------------------------ */

.sidebar__brand {
  display: block;
  padding: 0 var(--space-3) var(--space-7);
  text-decoration: none;
  color: var(--color-text);
}
.sidebar__brand-wordmark {
  display: block;
  width: 128px;   /* wordmark aspect ratio ~4.5:1 -> ~28px tall */
  height: auto;
}
.sidebar__brand-sub {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Nav items that exist in the IA but are not built yet */
.sidebar__item--disabled {
  color: var(--color-text-muted);
  cursor: default;
  pointer-events: none;
}
.sidebar__item--disabled .badge { margin-left: auto; }

/* --- Page header inside portal-main ------------------------------------ */

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  margin: 0;
}
.page-header .page-header__meta {
  color: var(--color-text-muted);
  font-size: var(--fs-body-s);
}
.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- Messages ----------------------------------------------------------- */

.messages {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* --- Login -------------------------------------------------------------- */

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background: var(--color-bg);
  padding: var(--space-6);
}
.login-footer {
  padding-bottom: var(--space-4);
}
.login-footer__icon {
  width: 28px;
  height: auto;
  opacity: 0.4;
}
.login-panel {
  width: 100%;
  max-width: 380px;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  text-align: center;
}
.login-wordmark {
  width: 180px;
  height: auto;
}
.login-sub {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
}
.login-form {
  width: 100%;
  display: grid;
  gap: var(--space-4);
  text-align: left;
}

/* --- Sidebar footer (user / logout) -------------------------------------- */

.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4) var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2);
}
.sidebar__user {
  font-size: var(--fs-body-s);
}
.sidebar__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.sidebar__user-shop {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.sidebar { display: flex; flex-direction: column; }
.sidebar nav { flex: 1; }

/* --- Bike list ------------------------------------------------------------ */

.bike-search {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: 480px;
}
.bike-search .input { flex: 1; }

/* --- Bike detail: status card accents ------------------------------------ */

.status-card--warning { border-left: 4px solid var(--color-warning); }
.status-card--action  { border-left: 4px solid var(--color-danger); }

/* --- Registration success («The Arrival») --------------------------------- */

.arrival {
  max-width: 560px;
  margin: 10vh auto 0;
  text-align: center;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}
.arrival__icon { width: 48px; height: auto; opacity: 0.8; }
.arrival__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  margin: 0;
}
.arrival__lead { color: var(--color-text-muted); max-width: 44ch; }

/* --- Insurance coverage options ------------------------------------------ */

.coverage-option { display: block; }
.coverage-option .card__body {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.coverage-option input[type="radio"] { margin-top: 6px; }
.coverage-option .card__title { font-size: var(--fs-h4, 1.1rem); }
.coverage-option:has(input:checked) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Simple stat card (dashboard) --------------------------------------- */

.stat { display: grid; gap: var(--space-1); }
.stat__value {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: 1;
}
.stat__label {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

a.stat-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease;
}
a.stat-card:hover {
  box-shadow: 0 2px 12px rgba(12, 10, 43, 0.08);
}

/* --- Sortable table headers --------------------------------------------- */

.table__sortable a {
  color: inherit;
  text-decoration: none;
}
.table__sortable a:hover {
  text-decoration: underline;
}
.table__sortable--asc a::after {
  content: " ↑";
  font-size: 0.85em;
}
.table__sortable--desc a::after {
  content: " ↓";
  font-size: 0.85em;
}

.bike-id-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}