/* ==========================================================================
   MDGRUPPE OS — Shell CSS
   Source: DESIGN-SPEC-2026-04-24-OSUX01 v1.1 §§ 2–6.
   All values must resolve via tokens.css. Zero hardcoded colours or sizes
   here; if a new size is required raise it to CLAUDE.T6.0-JARVIS for a
   governed token addition (tokens.css is MD-locked at commit 0fb15a6).
   Breakpoint: 768px — single hard mobile/desktop split per SOP-015.
   ========================================================================== */

/* ── Body + layout grid ───────────────────────────────────────── */

.os-body {
  font-family: var(--font-primary);
  color: var(--color-text);
  background: var(--color-surface-alt);
  margin: 0;
  min-height: 100vh;
}

.os-layout {
  display: none;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .os-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    align-items: stretch;
  }
}

/* ── Sidebar ──────────────────────────────────────────────────── */

.os-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .os-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    width: 280px;                     /* variant-c: 240 → 280 */
    background: var(--warm-50);       /* variant-c: figure-ground vs white content */
    border-right: 1px solid var(--warm-200);
    box-shadow: var(--shadow-sm);
    padding: 8px 0 var(--space-3);    /* spacing-medium: top 16 → 8 */
    overflow-y: auto;
  }
}

.os-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;                             /* spacing-medium: 4 → 2 (logo→AI OS) */
  padding: 0 var(--space-4) 8px;        /* spacing-medium: bottom 16 → 8 */
  text-decoration: none;
  color: var(--color-text);
}

.os-brand-mark {
  display: block;
  width: 100%;
  max-width: 148px;       /* golden ratio: 240 / φ ≈ 148 */
  height: auto;            /* preserve natural aspect — banner renders ~40px tall */
  object-fit: contain;
  flex-shrink: 0;
}

.os-brand-sub {
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--color-gold-700);
  line-height: 1;
}

.os-brand-underline {
  align-self: stretch;
  margin-top: 4px;                      /* spacing-medium: 8 → 4 (AI OS→underline) */
  height: 2px;
  background: var(--color-warning);
  border-radius: var(--r-full);
  opacity: 0.85;
}

.os-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                       /* polish 3F: was space-4, breathe more */
  padding: 4px var(--space-2) var(--space-4); /* spacing-medium: top 8 → 4 */
}

.os-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;                                  /* spacing-medium: 4 → 2 (heading→nav, nav→nav) */
}

.os-nav-heading {
  padding: 0 var(--space-3);
  margin-top: 4px;                           /* spacing-medium: 8 → 4 (D component) */
  margin-bottom: 4px;                        /* spacing-medium: 8 → 4 (E component) */
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  color: var(--warm-500);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
}

.os-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);                       /* polish 3F: 12px icon-label gap */
  height: 44px;
  padding: 0 var(--space-4);                 /* polish 3F: 16px horizontal */
  border-radius: var(--radius-md);
  color: var(--warm-600);
  text-decoration: none;
  font-size: var(--type-base);               /* 14px — same value, snapped name */
  font-weight: var(--weight-regular);
}

.os-nav-item:hover {
  background: var(--warm-100);
  color: var(--warm-900);
}

.os-nav-item.is-active {
  color: var(--warm-900);
  font-weight: var(--weight-medium);
  background: var(--warm-100);
}

.os-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--color-warning);
  border-radius: var(--r-full);
}

.os-nav-item:focus-visible,
.os-icon-btn:focus-visible,
.os-search-pill:focus-visible,
.os-user-trigger:focus-visible,
.os-bottomnav-item:focus-visible,
.os-command-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.os-sidebar-footer {
  margin-top: auto;                          /* polish 3F: push to bottom */
  padding: var(--space-4);                   /* polish 3F: 16px all-around */
  border-top: 1px solid var(--warm-200);
  font-size: var(--type-xs);
  color: var(--warm-500);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.os-cutover {
  color: var(--color-warning);
  font-weight: var(--weight-medium);
}

/* ── Main column + top bar ───────────────────────────────────── */

.os-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-surface-alt);
}

.os-topbar {
  display: none;
}

@media (min-width: 768px) {
  .os-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;          /* variant-c: 2-zone */
    height: 48px;                            /* variant-c: 56 → 48 */
    padding: 0 24px;                         /* variant-c: was --space-6 */
    background: var(--color-surface);
    border-bottom: 1px solid var(--warm-200);
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

/* variant-c: two-zone topbar children */
.os-topbar-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  font-family: 'Gotham Book', sans-serif;
  font-size: 13px;
  color: var(--warm-500);
}

.os-topbar-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* variant-c: breadcrumb-nav (replaces old .os-breadcrumb in home.html) */
.os-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.os-breadcrumb-nav .crumb {
  color: var(--warm-500);
}

.os-breadcrumb-nav .crumb-current {
  color: var(--warm-800);
  font-weight: 500;
}

/* variant-c: search icon-button (replaces .os-search-pill in topbar) */
.os-topbar-search-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--warm-700);
  background: transparent;
  border: none;
  padding: 0;
  transition: background 150ms ease-out, color 150ms ease-out;
}

.os-topbar-search-icon:hover {
  background: var(--warm-100);
  color: var(--warm-900);
}

.os-topbar-search-icon:focus-visible {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 2px;
}

.os-topbar-search-icon svg {
  width: 18px;
  height: 18px;
}

/* legacy .os-breadcrumb rules retained — class no longer rendered by topbar */
.os-breadcrumb {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-prose);
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.os-breadcrumb a:hover { color: var(--color-text); }
.os-breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }

.os-search-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  min-width: 280px;
  padding: 0 var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  color: var(--color-text-subtle);
  font-size: var(--type-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}

.os-search-pill:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

.os-search-pill-placeholder { flex: 1 1 auto; text-align: left; }

.os-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: var(--type-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.os-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  color: var(--color-text-muted);
  cursor: pointer;
}

.os-icon-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.os-badge-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--color-danger);
  border: 2px solid var(--color-surface);
}

/* ── User menu ────────────────────────────────────────────────── */

.os-user-menu { position: relative; }

.os-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  color: var(--color-text);
}

.os-user-trigger:hover { background: var(--color-surface-alt); }

.os-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--type-xs);
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}

.os-user-avatar-sm { width: 24px; height: 24px; font-size: var(--type-xs); }

.os-user-meta {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--leading-tight);    /* 1.2 — snapped */
}

@media (min-width: 1024px) {
  .os-user-meta { display: flex; }
}

.os-user-name { font-size: var(--type-sm); font-weight: var(--weight-medium); }
.os-user-tier { font-size: var(--type-xs); color: var(--color-text-subtle); }

.os-user-drop {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1);
  z-index: 30;
}

.os-user-drop-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--r-sm);
  font-size: var(--type-prose);
}

.os-user-drop-item:hover { background: var(--color-surface-alt); }

/* ── Content region ──────────────────────────────────────────── */

.os-content {
  flex: 1 1 auto;
  max-width: none;                  /* variant-c: full-width canvas */
  padding: 48px 64px;               /* variant-c: 48 vert, 64 horiz */
  background: var(--color-surface); /* variant-c: explicit white vs warm-50 sidebar */
  min-width: 0;
}

@media (max-width: 767px) {
  .os-content {
    padding: var(--space-4);
    padding-top: calc(48px + var(--space-4));     /* mobile topbar clearance */
    padding-bottom: calc(56px + var(--space-4));   /* bottom nav clearance */
  }
}

/* .os-placeholder removed in Session 2.5 polish pass — persona stubs now
   use .persona-welcome (defined further down) for the welcome card pattern. */

/* ── Mobile top bar ──────────────────────────────────────────── */

.os-topbar-mobile {
  display: none;
}

@media (max-width: 767px) {
  .os-topbar-mobile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 48px;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }

  /* On mobile, the desktop layout grid is hidden but its children still need
     to render stacked. Force the main column to flow as a single column. */
  .os-layout {
    display: block;
  }

  .os-main {
    display: block;
  }
}

.os-topbar-mobile-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.os-topbar-mobile-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--type-prose);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-topbar-mobile-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Mobile bottom nav ───────────────────────────────────────── */

.os-bottomnav {
  display: none;
}

@media (max-width: 767px) {
  .os-bottomnav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 56px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
  }
}

.os-bottomnav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--type-xs);
  cursor: pointer;
  padding: 4px 2px;
}

.os-bottomnav-item.is-active { color: var(--color-text); }
.os-bottomnav-item.is-active span { font-weight: var(--weight-medium); }
.os-bottomnav-item.is-active .icon { color: var(--color-warning); }

/* ── Command palette ─────────────────────────────────────────── */

.os-command-palette {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.os-command-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(4px);
}

.os-command-modal {
  position: relative;
  width: min(560px, calc(100vw - var(--space-6)));
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

@media (max-width: 767px) {
  .os-command-palette { padding-top: 0; }
  .os-command-modal {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
}

.os-command-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.os-command-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: var(--type-lg);
  color: var(--color-text);
  line-height: var(--leading-snug);     /* 1.35 — snapped */
}

.os-command-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-2);
  min-height: 120px;
}

.os-command-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-subtle);
  font-size: var(--type-prose);
}

.os-command-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-xs);
  color: var(--color-text-subtle);
}

/* ── Screen-reader utility ──────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Page chrome — shared title/section helpers (Session 2) ─── */

.page-head {
  margin-bottom: var(--space-6);
}

.page-title {
  font-family: var(--font-primary);
  font-size: var(--type-3xl);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.3px;
}

.page-subtitle {
  font-family: var(--font-primary);
  font-size: var(--type-prose);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.section-heading {
  font-family: var(--font-primary);
  font-size: var(--type-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

/* ── Commercial landing page (§ 3.1 OPERATIONS) ─────────────── */

.page-commercial {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.commercial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .commercial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.commercial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--color-text);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.commercial-card:hover {
  border-color: var(--color-warning);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.commercial-card-icon {
  color: var(--color-warning);
  margin-bottom: var(--space-1);
}

.commercial-card h2 {
  font-family: var(--font-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-medium);
  margin: 0;
  color: var(--color-text);
}

.commercial-card-count {
  font-family: var(--font-primary);
  font-size: var(--type-prose);
  color: var(--color-text-muted);
  margin: 0;
}

.commercial-card-cta {
  font-family: var(--font-primary);
  font-size: var(--type-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-warning);
  margin-top: var(--space-2);
}

.commercial-recent .activity-stream {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.commercial-recent .activity-stream li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r);
}

.commercial-recent .activity-stream a {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--type-prose);
}

.commercial-recent .activity-stream a:hover {
  color: var(--color-warning);
}

.activity-meta {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  color: var(--color-text-subtle);
}

/* Inline empty-state — small text-centered surface used by list/section
   "no rows" messages (CRM follow-ups, scorecard, delivery items, etc.).
   Polish pass dropped the dashed border in favour of a solid hairline. */
.empty-state {
  font-family: var(--font-primary);
  font-size: var(--type-base);
  color: var(--warm-500);
  margin: 0;
  padding: var(--space-6);
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Persona welcome card — used by the 5 home/_*.html stubs until Session 3
   ships real persona content. Centered, generous, no dashed border. */
.persona-welcome {
  padding: var(--space-12) var(--space-8);
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  border-radius: var(--radius-lg);
  max-width: 640px;
  margin: var(--space-12) auto;
  box-shadow: var(--shadow-sm);
}

.persona-welcome-title {
  font-family: var(--font-primary);
  font-size: var(--type-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--warm-900);
  margin: 0 0 var(--space-3) 0;
}

.persona-welcome-body {
  font-family: var(--font-primary);
  font-size: var(--type-base);
  line-height: var(--leading-relaxed);
  color: var(--warm-600);
  margin: 0;
}

.commercial-quick-create .quick-create-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Button hierarchy — primary / default / ghost.
   Polish 3J — distinct visual treatments + consistent geometry.
   Brand primary = MDGRUPPE gold (--color-warning, #C9920E, Pantone 1245).
   ========================================================================== */

.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: var(--type-base);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

/* Default — secondary action */
.btn {
  background: var(--color-surface);
  border: 1px solid var(--warm-300);
  color: var(--warm-800);
}
.btn:hover {
  background: var(--warm-50);
  border-color: var(--warm-400);
  box-shadow: var(--shadow-xs);
}

/* Primary — single most-important action per surface */
.btn-primary {
  background: var(--color-warning);
  border: 1px solid var(--color-warning);
  color: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-warning) 92%, black);
  border-color: color-mix(in srgb, var(--color-warning) 92%, black);
  box-shadow: var(--shadow-sm);
}

/* Ghost — tertiary action; reads as text until hovered */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--warm-700);
}
.btn-ghost:hover {
  background: var(--warm-100);
  color: var(--warm-900);
}

/* ==========================================================================
   Session 2.5 Polish — universal microinteraction transitions
   Apply consistent fade/lift to every interactive element. Uses
   polish.css duration + ease tokens.
   ========================================================================== */

.os-nav-item,
.os-bottomnav-item,
.os-search-pill,
.os-icon-btn,
.os-user-trigger,
.os-user-drop-item,
.os-command-result,
.btn,
.btn-primary,
.btn-ghost,
button,
a {
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color     var(--duration-base) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    transform        var(--duration-base) var(--ease-out),
    filter           var(--duration-base) var(--ease-out);
}

/* Active-state press feedback for buttons only — anchors do not scale to
   avoid disrupting reading flow on link clicks. */
button:active,
.btn:active,
.btn-primary:active,
.btn-ghost:active {
  transform: scale(0.98);
  transition-duration: var(--duration-fast);
}

/* Respect reduced-motion preferences — kill all transitions for users who
   ask us to. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}