/* ============================================================
   OmegaOS Design Tokens — public/css/theme.css
   Single source of truth for all color, spacing, and geometry.
   All authenticated pages link this file.
   Login page links this file but does NOT load shell.js.

   The SEMANTIC token layer lives in foundation.css (imported below) and is
   shared with crew-shell.css so the office app and the crew/tablet surfaces
   cannot drift. The legacy names in this file (--lc-*, --gold, --radius…) are
   kept and remapped onto those tokens, so the ~70 pages already built against
   them pick up the system with no page edits.
   ============================================================ */
@import url('/css/foundation.css');
/* The shared LIST-PAGE system (ListPageShell / Toolbar / DataTable / StatusBadge
   / EmptyState …). Imported here rather than <link>ed per page so all ~70 pages
   that already link theme.css pick it up with no HTML change. Companion JS
   builders: /shared/list-page.js. Contract + component list: css/list-page.css. */
@import url('/css/list-page.css');
/* THE 2026 SKIN — the one and only style layer for the office app.
   Spec: docs/DESIGN-SYSTEM-2026.md. density.css and apple-record.css were
   collapsed into it and DELETED. Never add another layer on top: a visual
   problem is fixed in omega-2026.css or in the page, never by stacking. */
@import url('/css/omega-2026.css');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --app-bg:               #242A30;   /* page background */
  --surface:              #303840;   /* card / panel surface */
  --surface-raised:       #39434C;   /* elevated cards, active panels */
  --surface-hover:        #424D57;   /* hover state on clickable surfaces */

  /* ── Sidebar ─────────────────────────────────────────────── */
  --sidebar-bg:           var(--color-nav);   /* primary sidebar — darkest layer */
  --sidebar-secondary-bg: #2B3239;   /* settings secondary sidebar */
  --sidebar-active-bg:    rgba(232, 160, 32, 0.16);
  --sidebar-active-border:#E8A020;
  --sidebar-width:        240px;
  --sidebar-collapsed:    60px;

  /* ── Cards ───────────────────────────────────────────────── */
  --card-bg:              #303840;
  --card-border:          rgba(255, 255, 255, 0.16);

  /* ── Inputs ──────────────────────────────────────────────── */
  --input-bg:             #20262C;
  --input-border:         rgba(255, 255, 255, 0.20);
  --input-focus:          #E8A020;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:         #F5F7F8;    /* 13.4:1 on --app-bg */
  --text-secondary:       rgba(245, 247, 248, 0.78); /* 8.1:1 on --app-bg */
  --text-muted:           rgba(245, 247, 248, 0.58); /* 5.3:1 on --app-bg */

  /* ── Brand ───────────────────────────────────────────────── */
  --gold:                 #E8A020;   /* 6.2:1 on --app-bg */
  --gold-hover:           #F5B942;
  --gold-soft:            rgba(232, 160, 32, 0.16);
  --gold-text:            #1A1A1A;   /* text ON gold buttons: 8.2:1 */

  /* ── Borders ─────────────────────────────────────────────── */
  --border:               rgba(255, 255, 255, 0.16);
  --border-strong:        rgba(255, 255, 255, 0.26);

  /* ── Status ──────────────────────────────────────────────── */
  --status-success:       #43A047;
  --status-warning:       #F9A825;
  --status-danger:        #E53935;
  --status-inactive:      #8A949E;

  /* ── Geometry ────────────────────────────────────────────── */
  --radius:               var(--radius-card);
  --tap-min:              56px;
  --bottomnav-height:     64px;

  /* ── Compatibility aliases ───────────────────────────────── */
  /* Existing pages use these names; they resolve to new dark values. */
  --bg:                   var(--app-bg);
  --surface-2:            var(--surface-raised);
  --shell:                var(--sidebar-bg);
  --on-shell:             var(--text-primary);
  --text:                 var(--text-primary);
  --text-dim:             var(--text-secondary);
  --gold-dim:             #C88A10;   /* dimmed gold, visible on dark surfaces */

  /* ── Light content layer tokens ─────────────────────────────────────────
     LEGACY NAMES, NEW VALUES. Every one of these now resolves to a semantic
     token from foundation.css, so the ~70 pages written against `--lc-*` adopt
     the redesign without being edited. Two values genuinely changed:
       --lc-text-muted  was #9B9890 → 2.7:1 on white, a real AA failure on
                        placeholders and sub-labels. Now 4.6:1.
       --lc-border-light was #F0EFEA → now the shared subtle divider.
     Gold splits in two: --lc-gold stays the FILL, --lc-gold-ink is gold used as
     TEXT (totals, gold links) and is the AA-passing one. */
  --lc-canvas:            var(--color-page);
  --lc-surface:           var(--color-surface);
  --lc-border:            var(--color-border);
  --lc-border-light:      var(--color-border-subtle);
  --lc-text:              var(--color-text-primary);
  --lc-text-dim:          var(--color-text-secondary);
  --lc-text-muted:        var(--color-text-tertiary);
  --lc-input-bg:          var(--color-surface-sunken);
  --lc-gold:              var(--color-brand);
  --lc-gold-hover:        var(--color-brand-hover);
  --lc-gold-ink:          var(--color-brand-ink);

  --error:                var(--status-danger);
  --green:                var(--status-success);
  --yellow:               var(--status-warning);
  --red:                  var(--status-danger);
  --gray:                 var(--status-inactive);
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  min-height: 100%;
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* ── Shell structure ─────────────────────────────────────────── */
#app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
  transition: width 0.22s ease;
}

body.sidebar-collapsed #app-sidebar {
  width: var(--sidebar-collapsed);
}

#app-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left 0.22s ease;
}

body.sidebar-collapsed #app-content {
  margin-left: var(--sidebar-collapsed);
}

#app-secondary-sidebar {
  position: fixed;
  left: var(--sidebar-width);
  top: 0;
  width: 220px;
  height: 100vh;
  background: var(--sidebar-secondary-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 99;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  transition: left 0.22s ease;
}

body.sidebar-collapsed #app-secondary-sidebar {
  left: var(--sidebar-collapsed);
}

#app-secondary-sidebar.open {
  display: flex;
}

body.secondary-sidebar-open #app-content {
  margin-left: calc(var(--sidebar-width) + 220px);
}

body.sidebar-collapsed.secondary-sidebar-open #app-content {
  margin-left: calc(var(--sidebar-collapsed) + 220px);
}

#app-bottomnav {
  display: none;
}

/* ── Sidebar skeleton (shown while auth/me loads) ─────────────── */
.sidebar-skeleton {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-line {
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line.short { height: 32px; width: 80%; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

/* ── Sidebar internals ───────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 60px;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
}

.sidebar-logo-icon {
  color: var(--gold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sidebar-logo-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.15s;
}

body.sidebar-collapsed .sidebar-logo-text {
  opacity: 0;
  pointer-events: none;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

.sidebar-collapse-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #4B5563 #111827;
}

.sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: #111827;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: #4B5563;
  border-radius: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #6B7280;
}

.sidebar-nav-main,
.sidebar-nav-bottom {
  display: flex;
  flex-direction: column;
}

.sidebar-nav-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 8px;
  margin-top: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  color: var(--color-on-nav-muted);
  text-decoration: none;
  border-radius: 0;
  font-size: var(--text-support);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  min-height: var(--control-h);
  position: relative;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--gold);
  border-left-color: var(--sidebar-active-border);
  font-weight: 600;
}

.nav-item-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
}

.nav-item-label {
  opacity: 1;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
}

body.sidebar-collapsed .nav-item-label {
  opacity: 0;
  pointer-events: none;
}

body.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 10px;
}

body.sidebar-collapsed .sidebar-nav-bottom {
  padding-top: 8px;
}

/* Section labels were 9px at 0.12em on a 28%-opacity white — below the app's
   minimum legible size and well under AA. 11px at the house tracking, on a
   readable grey. */
.nav-section-label {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #7C848C;
  padding: var(--space-2) 16px var(--space-0h);
  user-select: none;
}

body.sidebar-collapsed .nav-section-label {
  display: none;
}

/* Legacy — kept for backward compat; new code uses nav-item-placeholder */
.nav-item-soon {
  opacity: 0.55;
}

.nav-soon-badge {
  display: inline-block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(212, 160, 23, 0.18);
  color: var(--gold);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── Collapsible section toggle ─────────────────────────────── */
.nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) 16px var(--space-0h);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #7C848C;
  user-select: none;
  text-align: left;
}
.nav-section-toggle:hover {
  color: var(--color-on-nav);
}

.nav-sec-chev {
  opacity: 0.5;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.nav-sec-chev.collapsed {
  transform: rotate(-90deg);
}

body.sidebar-collapsed .nav-section-toggle {
  display: none;
}

/* Collapsible items container */
.nav-section-items {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  opacity: 1;
}
.nav-section-items.collapsed {
  max-height: 0;
  opacity: 0;
}

/* ── V1 NEXT and SOON nav badges ────────────────────────────── */
.nav-badge-v1next {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(212, 160, 23, 0.18);
  color: var(--gold);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.nav-badge-soon {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 247, 248, 0.4);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Placeholder nav items — still clickable (route to /roadmap/:key) */
.nav-item-placeholder {
  opacity: 0.65;
}
.nav-item-placeholder:hover {
  opacity: 0.9;
}

body.sidebar-collapsed .nav-badge-v1next,
body.sidebar-collapsed .nav-badge-soon {
  display: none;
}

/* ── Sidebar user section ───────────────────────────────────── */
/* ── Area switcher (Dynamics-style, bottom-left, opens upward) ── */
.sidebar-area-switcher {
  position: relative;
  flex-shrink: 0;
  padding: 8px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-area-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-area-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.sidebar-area-btn-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidebar-area-btn-chev {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

body.sidebar-collapsed .sidebar-area-btn-label { display: none; }
body.sidebar-collapsed .sidebar-area-btn { justify-content: center; padding: 9px 0; }

.sidebar-area-menu {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 10px;
  right: 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  padding: 5px;
  z-index: 60;
}

.sidebar-area-menu[hidden] { display: none; }

.sidebar-area-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sidebar-area-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.sidebar-area-menu-item.active {
  color: var(--gold);
  font-weight: 600;
}

.sidebar-area-menu-check {
  display: flex;
  align-items: center;
  width: 15px;
  flex-shrink: 0;
  color: var(--gold);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 64px;
  overflow: hidden;
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid rgba(232, 160, 32, 0.3);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.15s;
}

body.sidebar-collapsed .sidebar-user-info {
  opacity: 0;
  pointer-events: none;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  opacity: 1;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.sidebar-logout-btn:hover {
  color: var(--status-danger);
  background: rgba(229, 57, 53, 0.1);
}

body.sidebar-collapsed .sidebar-logout-btn {
  opacity: 0;
  pointer-events: none;
}

/* ── Secondary sidebar internals ─────────────────────────────── */
.secondary-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 60px;
}

.secondary-back-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.secondary-back-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.07);
}

.secondary-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.secondary-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.secondary-nav-item {
  display: flex;
  align-items: center;
  padding: 11px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.13s, color 0.13s;
  border-left: 3px solid transparent;
  min-height: 44px;
}

.secondary-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.secondary-nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--gold);
  border-left-color: var(--sidebar-active-border);
  font-weight: 600;
}

/* ── Mobile navigation — hamburger drawer ────────────────────── */
/* 820px — aligned to shell.js's _isMobileWidth() (Aug 11 2026 PWA fix). Below
   that width the office shell was still rendering desktop chrome under the
   crew/PWA breakpoint, a gap between what shell.js treats as "mobile" and what
   this drawer switches on. Scoped to THIS block only — the unrelated
   .omega-drawer 767px block below is a different UI (slide-in record panels),
   not the mobile-nav family, and stays untouched. */
@media (max-width: 820px) {
  /* Sidebar becomes a slide-out left drawer */
  #app-sidebar {
    position: fixed !important;
    top: 0; bottom: 0; left: 0;
    width: 280px !important;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 400;
    overflow-y: auto;
    display: flex !important;
  }

  body.mobile-nav-open #app-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
  }

  #app-secondary-sidebar {
    display: none !important;
  }

  #app-content {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 56px;
  }

  body.secondary-sidebar-open #app-content {
    margin-left: 0 !important;
  }

  /* Repurpose bottomnav element as mobile top bar with hamburger */
  #app-bottomnav {
    display: flex;
    position: fixed;
    top: 0; bottom: auto;
    left: 0; right: 0;
    height: 56px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    z-index: 300;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
  }
}

/* Mobile drawer overlay */
.sidebar-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 390;
}

body.mobile-nav-open .sidebar-mobile-overlay {
  display: block;
}

/* Hamburger button */
.hamburger-btn {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius);
  color: var(--text-primary);
  flex-shrink: 0;
}

.hamburger-btn:active { background: rgba(255,255,255,0.06); }

.hamburger-line {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: opacity 0.15s;
}

/* The mobile top bar carries the app wordmark — the ONE approved decorative use
   of gold in the chrome. Tracking pulled back from 0.08em; it read as a banner. */
.mobile-topbar-title {
  flex: 1;
  font-size: var(--text-body); font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  color: var(--gold);
  text-transform: uppercase;
  padding-left: var(--space-0h);
}

/* Legacy bottomnav item styles — hidden on mobile (kept for desktop compat) */
.bottomnav-item {
  display: none;
}

.bottomnav-icon, .bottomnav-label { display: none; }

/* ── Mobile "More" sheet ─────────────────────────────────────── */
.more-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}

.more-sheet.open {
  display: block;
}

.more-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.more-sheet-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-raised);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 12px 0 calc(var(--bottomnav-height) + 16px);
  max-height: 75vh;
  overflow-y: auto;
}

.more-sheet-handle {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.more-sheet-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 20px 6px;
}

.more-sheet-item {
  display: block;
  padding: 14px 20px;
  color: var(--text-primary);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: var(--tap-min);
}

.more-sheet-item:active {
  background: rgba(255, 255, 255, 0.06);
}

.more-sheet-logout {
  color: var(--status-danger);
  margin-top: 8px;
}

/* ── Placeholder page layout ─────────────────────────────────── */
.placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 24px;
  text-align: center;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.placeholder-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.placeholder-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.5;
}

.placeholder-badge {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 4px 12px;
}

/* ── Shared: list tables ─────────────────────────────────────────────────────
   Zebra striping is RETIRED (Phase 1 redesign; VITRUVIUS "Dynamics light grid
   look" already called for quiet dividers instead). A stripe is a second,
   competing horizontal rhythm on top of the row divider — hover is the only
   row-level highlight that carries information. The class names stay so no page
   markup changes; only the treatment does. */
.zebra-table tbody tr,
table.data-table tbody tr,
.ws-table tbody tr {
  background: transparent;
}

.zebra-table tbody tr:hover,
table.data-table tbody tr:hover,
.ws-table tbody tr:hover {
  background: var(--color-surface-hover) !important;
  cursor: pointer;
}

/* ── Shared: Right-side drawer (light) ───────────────────────── */
.omega-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 250;
}

.omega-drawer-overlay.open {
  display: block;
}

/* ⚠ A drawer is rendered at the BODY level, so it inherits `html, body`'s
   --text-primary (#F5F7F8 — the DARK SHELL's ink) onto its WHITE panel. Any
   descendant without its own `color` then paints white-on-white: 1.07:1,
   invisible. The bug hides well because --title and --close below DO set a
   color, so the chrome always looks right and only the CONTENT disappears —
   that is how the Duplicate Quote dialog read as "opens blank" (Aug 16 2026).
   A light surface must declare its own ink. Never rely on inheritance here. */
.omega-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 460px;
  max-width: 95vw;
  background: var(--color-surface-elevated);
  color: var(--lc-text);
  border-left: 1px solid var(--color-border-subtle);
  z-index: 260;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.27s var(--ease);
  overflow: hidden;
}

.omega-drawer.open {
  transform: translateX(0);
  box-shadow: var(--shadow-floating);
}

.omega-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.omega-drawer-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-semibold);
  color: var(--lc-text);
}

.omega-drawer-close {
  background: none; border: none;
  color: var(--lc-text-dim);
  cursor: pointer;
  font-size: 20px;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

.omega-drawer-close:hover { color: var(--lc-text); background: #F0EFEB; }

/* Ink again here, not only on .omega-drawer: pages routinely re-skin the body
   with their own light background (`#dup-quote-drawer .omega-drawer-body
   { background:#F5F5F7 }`), and a body-level panel must never inherit the dark
   shell's --text-primary. See the note on .omega-drawer above. */
.omega-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  color: var(--lc-text);
}

.omega-drawer-footer {
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--safe-bottom));
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .omega-drawer {
    width: 100%;
    max-width: 100vw;
  }
  /* ⚠ ON A PHONE THE SHELL'S TOP BAR (`#app-bottomnav`, z-index 300) SAT OVER THE
     DRAWER'S OWN HEADER — the drawer is 260. A full-width drawer starts at top:0,
     so its title and its × were BEHIND the dark strip and the close button could
     not be tapped. Raised above the top bar, and deliberately still BELOW the nav
     overlay (390) and the slide-out sidebar (400), so opening the hamburger keeps
     winning. Scoped to the phone breakpoint: on desktop the stacking was correct
     and is untouched. */
  .omega-drawer-overlay { z-index: 340; }
  .omega-drawer         { z-index: 350; }
}

/* ── Shared sticky action bar ────────────────────────────────────────────────
   The one pattern for a pinned bottom action strip (the tablet's Client Quote
   bar, a mobile form's Save). It is WHITE, not another dark layer, and it
   publishes its own height as --actionbar-h so the page can reserve exactly
   that much bottom padding — a sticky bar must never cover content. */
.omega-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--page-pad-x) calc(var(--space-2) + var(--safe-bottom));
  background: var(--color-surface-elevated);
  border-top: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-bar);
}
.omega-actionbar-inner {
  display: flex; align-items: center; gap: var(--space-1);
  width: 100%; max-width: var(--content-max); margin: 0 auto;
}
.omega-actionbar .lc-btn { min-height: 48px; }
/* Pages that mount an action bar add this class to the scrolling region. */
.has-actionbar { padding-bottom: calc(96px + var(--safe-bottom)); }

/* ── Data-loss guard strip (OmegaDirtyGuard) ─────────────────────────
   Inline "Discard? / Keep editing" strip anchored to the bottom of a
   drawer or modal panel; shown instead of dismissing a dirty form.
   Never window.confirm (Jun-29 ruling). */
.dirty-guard-strip {
  display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: #FFF8ED; border-top: 2px solid #C8961E;
  padding: 14px 18px; box-shadow: 0 -6px 18px rgba(0,0,0,0.12);
}
.dirty-guard-strip.show { display: block; }
.dg-msg { font-size: 14px; font-weight: 700; color: #1A1A1A; }
.dg-sub { font-size: 12px; color: #6B6860; margin-top: 2px; }
.dg-actions { display: flex; gap: 8px; margin-top: 10px; }
.dg-keep {
  flex: 1; background: #C8961E; border: none; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 14px; border-radius: 8px; min-height: 38px; font-family: inherit;
}
.dg-keep:hover { background: #B8860E; }
.dg-discard {
  flex: 1; background: none; border: 1px solid #C0392B; color: #C0392B;
  font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 14px; border-radius: 8px; min-height: 38px; font-family: inherit;
}
.dg-discard:hover { background: rgba(192,57,43,0.06); }

/* ── Toast (on-brand alert replacement; rendered by shell.js omToast) ────────── */
.omega-toast-host {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.omega-toast {
  pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  min-width: 240px; max-width: 440px;
  background: #FFFFFF; color: #1A1A1A;
  border: 1px solid #E0DFD8; border-left: 4px solid #C8961E; border-radius: 10px;
  padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,0.16);
  font-size: 14px; line-height: 1.4; font-family: inherit; cursor: pointer;
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease;
}
.omega-toast.show { opacity: 1; transform: translateY(0); }
.omega-toast--error   { border-left-color: #DC3545; }
.omega-toast--success { border-left-color: #1A7040; }
.omega-toast-ico { flex: 0 0 auto; font-size: 15px; }
.omega-toast-msg { flex: 1; white-space: pre-line; }
/* Toast action (Sep 8 2026 — the Undo beside a soft remove). DESIGN-SYSTEM-2026 §1:
   a row action is GOLD TEXT #946D11, 12px/600 — gold's second of three jobs. It is
   deliberately NOT a pill: a filled or outlined button inside a transient notice
   competes with the page's own controls. No fill, ever. */
.omega-toast-action {
  flex: 0 0 auto; align-self: center;
  background: none; border: none; padding: 2px 0; margin-left: 4px;
  color: #946D11; font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
/* A toast carrying an action needs room for the label beside the message, and a
   little more air around it — the action must never crowd the sentence it undoes. */
.omega-toast--has-action { min-width: 320px; gap: 12px; }
.omega-toast-action:hover { text-decoration: underline; }
.omega-toast-action:focus-visible { outline: 2px solid #D4A017; outline-offset: 2px; border-radius: 2px; }
@media (max-width: 1024px) { .omega-toast-action { min-height: 44px; padding: 0 8px; } }
@media (max-width: 600px) {
  .omega-toast-host { left: 16px; right: 16px; transform: none; bottom: 88px; }
  .omega-toast { width: 100%; max-width: 100%; }
}

/* ── PWA install hint banner (mobile) — dismissible bottom sheet ───────────── */
.omega-install-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9500; display: flex; align-items: center; gap: 12px;
  background: #1B2025; color: #EDEBE6; border: 1px solid #2C333A; border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 8px 26px rgba(0,0,0,0.32);
}
.omega-install-banner .oib-bolt { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: #D4A017; color: #1B2025; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; }
.omega-install-banner .oib-text { flex: 1; min-width: 0; }
.omega-install-banner .oib-title { font-size: 14px; font-weight: 700; color: #fff; }
.omega-install-banner .oib-sub { font-size: 12px; color: #B0ADA6; margin-top: 2px; line-height: 1.35; }
.omega-install-banner .oib-install { flex: 0 0 auto; border: 0; background: #D4A017; color: #1B2025;
  font-weight: 800; font-size: 13px; padding: 10px 16px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.omega-install-banner .oib-install:active { opacity: .85; }
.omega-install-banner .oib-x { flex: 0 0 auto; border: 0; background: transparent; color: #8C8983;
  font-size: 17px; line-height: 1; padding: 8px; cursor: pointer; min-width: 40px; min-height: 40px; border-radius: 8px; }
.omega-install-banner .oib-x:active { background: rgba(255,255,255,0.08); }

/* ================================================================
   LIGHT CONTENT LAYER — Shared utility classes
   New pages use these instead of re-declaring per-page.
   Pattern: .cmd-bar (dark top strip) + .page-canvas (light body).
   ================================================================ */

/* ── Command bar ─────────────────────────────────────────────────────────────
   The dark strip is the app's one constant. It keeps its own edge gutter in step
   with the canvas below it (--page-pad-x) so the Back button and the page title
   sit on the SAME left rule — the single most visible alignment in the app. */
.cmd-bar {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--page-pad-x); min-height: 60px;
  background: var(--color-nav);
  border-bottom: 1px solid var(--color-nav-line);
  position: sticky; top: 0; z-index: 20;
  flex-shrink: 0;
}
.cmd-back {
  background: none; border: none;
  color: var(--color-on-nav-muted);
  font-size: var(--text-support); font-weight: var(--weight-medium);
  cursor: pointer; padding: 8px 10px; margin-left: -10px;
  min-height: var(--control-h); display: flex; align-items: center; gap: 5px;
  border-radius: var(--radius-control); white-space: nowrap; font-family: inherit;
}

/* Phone: the command bar stops being one crammed row. Navigation + utilities
   share the top line; the record's title takes its own full-width line beneath,
   so a long job name wraps into a readable block instead of a 4-line sliver
   squeezed between the Back button and the bell. */
@media (max-width: 640px) {
  .cmd-bar {
    flex-wrap: wrap;
    padding-top: var(--space-1); padding-bottom: var(--space-1);
    row-gap: var(--space-1);
  }
  .cmd-title-group {
    order: 10; flex: 1 1 100%;
    padding-left: 0;
  }
  .cmd-title-group .cmd-title { white-space: normal; line-height: var(--leading-tight); }
  .cmd-spacer { flex: 1 1 auto; }
  .cmd-actions { order: 5; }
}

/* ── Environment marker (non-prod only; Prompt H2) ─────────────────
   Prod stays clean (nothing renders). STAGING = amber, LOCAL = slate
   blue: a colored pill in the dark cmd-bar + a 2px tinted bottom strip
   so the environment is unmistakable even without reading the text. */
.env-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: 4px 9px; border-radius: 6px; flex-shrink: 0;
  cursor: default; user-select: none;
}
.env-pill--staging { background: #F0872E; color: #1B2025; }
.env-pill--local   { background: #5C7CB0; color: #FFFFFF; }
.cmd-bar.env-staging { border-bottom: 2px solid #F0872E; }
.cmd-bar.env-local   { border-bottom: 2px solid #5C7CB0; }
.cmd-back:hover { color: var(--color-on-nav); background: rgba(255,255,255,0.07); }
.cmd-spacer { flex: 1; }
.cmd-title {
  font-size: var(--text-card); font-weight: var(--weight-semibold);
  color: var(--color-on-nav); letter-spacing: 0;
}
/* An invisible link: a banner naming ANOTHER party's record (e.g. an invoice's
   customer) can carry a real href to that record's detail page without looking
   like a link — same font/size/weight/color as plain .cmd-title text, no underline. */
.cmd-title-link { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; }
.cmd-title-link:hover, .cmd-title-link:focus { color: inherit; text-decoration: none; }
.cmd-subtitle { font-size: var(--text-micro); color: var(--color-on-nav-muted); }
/* The command bar's action is the record's ONE primary action — gold fill with
   near-black ink (7.3:1). White on gold was 2.7:1 and failed AA everywhere it
   appeared. */
.cmd-action {
  background: var(--color-brand); border: none; color: var(--color-on-brand);
  font-size: var(--text-support); font-weight: var(--weight-bold); cursor: pointer;
  padding: 0 var(--space-2); border-radius: var(--radius-control);
  min-height: var(--control-h-sm); white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  font-family: inherit; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}
.cmd-action:hover { background: var(--color-brand-hover); }
.cmd-action:disabled { opacity: 0.45; cursor: not-allowed; }
.cmd-title-group { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cmd-title-group .cmd-title { font-size: var(--text-card); }
.cmd-actions { display: flex; align-items: center; gap: var(--space-1); }
/* Tertiary: a quiet text control, never gold — gold in the bar belongs to
   .cmd-action alone. */
/* Now a <button> (it toggles language — it does not navigate), so it has to shed the
   UA button chrome to keep reading as the quiet text control it always looked like. */
.cmd-lang-link {
  color: var(--color-on-nav-muted);
  font-size: var(--text-micro); font-weight: var(--weight-medium);
  text-decoration: underline; text-underline-offset: 3px;
  flex-shrink: 0; white-space: nowrap; cursor: pointer;
  background: none; border: none; padding: 0; font-family: inherit; line-height: inherit;
}
.cmd-lang-link:hover { color: var(--color-on-nav); }

/* ── Record-management cmd-bar controls (promoted from contact-detail's
   page-local styles, Aug 10 2026, so any page's dark cmd-bar — job-items
   included — can render the same Archive/Delete idiom without re-deriving it.
   Secondary to .cmd-action: outlined, never filled — gold in the bar stays the
   record's ONE primary action. */
.cmd-icon-btn {
  background: none; border: 1px solid rgba(235,229,216,0.28); color: rgba(235,229,216,0.85);
  border-radius: var(--radius-pill); min-height: var(--control-h-sm); width: var(--control-h-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmd-icon-btn:hover { border-color: rgba(235,229,216,0.55); color: #fff; }
.cmd-ghost-btn {
  background: none; border: 1px solid rgba(235,229,216,0.28); color: rgba(235,229,216,0.85);
  font-size: var(--text-support); font-weight: var(--weight-semibold); cursor: pointer;
  padding: 0 var(--space-2); border-radius: var(--radius-pill); min-height: var(--control-h-sm);
  white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: inherit; flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmd-ghost-btn:hover { border-color: rgba(235,229,216,0.55); color: #fff; }
.cmd-danger-btn {
  background: none; border: 1px solid rgba(220,80,60,0.7); color: rgba(220,80,60,0.9);
  font-size: var(--text-support); font-weight: var(--weight-semibold); cursor: pointer;
  padding: 0 var(--space-2); border-radius: var(--radius-pill); min-height: var(--control-h-sm);
  white-space: nowrap; display: flex; align-items: center; gap: 6px; font-family: inherit; flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cmd-danger-btn:hover:not(:disabled) { border-color: rgba(220,80,60,1); color: rgba(220,80,60,1); background: rgba(220,80,60,0.08); }
.cmd-danger-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Notification bell (cmd-bar, left of the language link) ──── */
.cmd-bell {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 8px 9px; min-height: 44px;
  display: flex; align-items: center; color: rgba(235,229,216,0.8);
  border-radius: 7px; flex-shrink: 0;
}
.cmd-bell:hover { background: rgba(255,255,255,0.06); color: rgba(235,229,216,1); }
.cmd-bell-badge {
  position: absolute; top: 3px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  background: #D94040; color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box;
}
.notif-panel {
  position: absolute; top: 56px; right: 16px; width: 360px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #E0DFD8; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); z-index: 60; overflow: hidden; display: none;
}
.notif-panel.open { display: block; }
.notif-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #F0EFEA; background: #FAFAF9; }
.notif-head-title { font-size: 13px; font-weight: 800; color: #1A1A1A; }
.notif-head-actions { display: flex; align-items: center; gap: 12px; }
.notif-markall, .notif-clearall { background: none; border: none; color: #6B6860; font-size: 11.5px;
  font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; padding: 0; }
.notif-markall:hover, .notif-clearall:hover { color: #B8860B; }
.notif-dismiss { background: none; border: none; color: #B8B4AA; font-size: 17px; line-height: 1;
  cursor: pointer; padding: 0 2px; margin-left: 4px; align-self: flex-start; flex-shrink: 0; font-family: inherit; }
.notif-dismiss:hover { color: #A03030; }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-row { display: flex; gap: 9px; padding: 11px 14px; border-bottom: 1px solid #F4F2EC; cursor: pointer; }
.notif-row:hover { background: #FBFAF6; }
.notif-row:last-child { border-bottom: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #D94040; margin-top: 5px; flex-shrink: 0; }
.notif-dot.read { background: transparent; }
.notif-rbody { flex: 1; min-width: 0; }
.notif-rtitle { font-size: 12.5px; font-weight: 700; color: #1A1A1A; }
.notif-rmsg { font-size: 11.5px; color: #6B6860; line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-rtime { font-size: 10px; color: #9B9890; margin-top: 3px; }
.notif-empty { padding: 28px 14px; text-align: center; color: #9B9890; font-size: 12.5px; }
@media (max-width: 640px) {
  .notif-panel { right: 6px; left: 6px; width: auto; top: 54px; }
}

/* ── Master search (command bar, Sept 2026) ──────────────────────────────────
   There is no center slot in the command bar (.cmd-spacer is the ONE flexible
   item, between the title group and the utility icons). Above 900px this
   widget is ABSOLUTELY positioned and centered — the same technique
   .notif-panel already uses (.cmd-bar is position:sticky, which is enough to
   be its containing block) — so it removes itself from the flex flow
   entirely rather than fighting the title/actions for width. That is
   deliberate: contact-detail.html's own comment records "125px of overflow
   at 768" from a bar with five in-flow controls: an absolutely positioned
   widget can never be the thing that pushes the document sideways.
   Below 900px it collapses to a small in-flow icon (see the flex-item rule
   + media query below) so it participates in the bar's own flex-wrap safety
   net exactly like the bell does, instead of floating over the title. */
.cmd-search-wrap {
  display: flex; align-items: center; flex-shrink: 0;
}
@media (min-width: 901px) {
  .cmd-search-wrap {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 15;
  }
}
/* NEVER name this control *btn* — omega-2026.css forces a gold pill on any
   .cmd-bar [class*="btn"]; cmd-search* is the escape hatch (VITRUVIUS). */
/* Sized to match .cmd-bell exactly (44px, unconditional — not a media-gated
   bump) — the two sit side by side in the bar and read as one icon family. */
.cmd-search-icon {
  background: none; border: 1px solid rgba(235,229,216,0.28); color: rgba(235,229,216,0.85);
  border-radius: var(--radius-pill); min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmd-search-icon:hover { border-color: rgba(235,229,216,0.55); color: #fff; }
.cmd-search-input {
  width: 320px; max-width: 40vw; height: 32px; margin-left: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(235,229,216,0.28);
  border-radius: var(--radius-pill); color: rgba(235,229,216,1);
  font-size: var(--text-support); font-family: inherit; padding: 0 14px;
  display: none;   /* shown above 901px, or inside the mobile overlay — see below */
}
@media (min-width: 901px) { .cmd-search-input { display: block; } }
.cmd-search-input::placeholder { color: rgba(235,229,216,0.5); }
/* Focus ring: --focus-ring-dark (foundation.css) — a dark-surface token that
   already existed, unused, before this build. */
.cmd-search-input:focus { outline: none; border-color: #D4A017; box-shadow: var(--focus-ring-dark); background: rgba(255,255,255,0.1); }
.cmd-search-close {
  display: none; background: none; border: none; color: rgba(235,229,216,0.7);
  cursor: pointer; margin-left: 6px; min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
}
.cmd-search-panel {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  width: 420px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid #E0DFD8; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); z-index: 60; overflow: hidden; display: none;
  max-height: 70vh; overflow-y: auto;
}
.cmd-search-panel.open { display: block; }
.cmd-search-section-title {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: #9B9890; padding: 10px 14px 4px; background: #FAFAF9;
}
.cmd-search-row { padding: 9px 14px; cursor: pointer; }
.cmd-search-row:hover { background: #FBFAF6; }
.cmd-search-row-title { font-size: 12.5px; font-weight: 700; color: #1A1A1A; }
.cmd-search-row-meta { font-size: 11px; color: #6B6860; margin-top: 1px; }
.cmd-search-row-nested { padding-left: 28px; }
.cmd-search-row-nested .cmd-search-row-title { font-size: 11.5px; font-weight: 600; }
.cmd-search-empty { padding: 20px 14px; text-align: center; color: #9B9890; font-size: 12.5px; }

/* ≤900px: icon-only in normal flex flow (see .cmd-search-wrap above). Tapping
   it opens a fixed full-width overlay row instead of trying to fit an input
   into the same strip as Back/title/bell — the horizontal budget contact-
   detail.html already blew at 768px with far fewer controls. */
@media (max-width: 900px) {
  .cmd-search-wrap.cmd-search-mobile-open {
    position: fixed; inset: 0 auto auto 0; left: 0; right: 0; top: 0;
    height: 60px; background: var(--color-nav); z-index: 100;
    padding: 0 var(--page-pad-x); box-sizing: border-box;
  }
  .cmd-search-wrap.cmd-search-mobile-open .cmd-search-input {
    display: block; flex: 1; width: auto; max-width: none; margin-left: 10px;
  }
  .cmd-search-wrap.cmd-search-mobile-open .cmd-search-close { display: flex; }
  .cmd-search-wrap.cmd-search-mobile-open .cmd-search-panel {
    top: 60px; left: 12px; right: 12px; transform: none; width: auto; max-width: none;
  }
}

/* ── Page canvas ─────────────────────────────────────────────────────────────
   The canvas is the app's warm off-white ground. `.page-inner` is the optional
   centred measure for wide desktops — content still uses the FULL width on
   tablet and phone with one consistent edge gutter, which is what stops a
   narrow view looking like a shrunken desktop page. */
/* Same hole one level up: the canvas paints LIGHT but used to inherit the dark
   shell's --text-primary, leaving every un-colored string on an office page one
   missing declaration away from white-on-white. Declare the ink with the
   background — they are a pair. (Aug 16 2026; see .omega-drawer above.) */
.page-canvas {
  background: var(--lc-canvas);
  color: var(--lc-text);
  min-height: calc(100vh - 60px);
  padding-bottom: var(--space-5);
}
.page-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}
.page-heading {
  padding: var(--space-3) var(--page-pad-x) var(--space-2);
  max-width: var(--content-max); margin: 0 auto;
}
/* 30px semibold — not 22px extrabold. Weight below 800 reads calmer and lets
   size do the hierarchy work. */
.page-title {
  font-size: var(--text-display); font-weight: var(--weight-semibold);
  color: var(--lc-text); line-height: var(--leading-tight);
  letter-spacing: -0.015em;
}
.page-sub {
  font-size: var(--text-body); color: var(--lc-text-dim);
  margin-top: var(--space-0h); line-height: var(--leading-snug);
}
/* Eyebrow label. 12px/0.06em — the old 11px/0.1em was shouty and hard to read. */
.sec-label {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lc-text-dim);
}

/* ── Filter card ─────────────────────────────────────────────────────────────
   A filter row is chrome, not content: it loses its card border and sits
   directly on the canvas, keeping only the controls' own edges. One fewer
   boundary on every list page in the app. */
.filter-card {
  background: transparent; border: none;
  border-radius: 0; padding: 0 0 var(--space-2);
  box-shadow: none;
}
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.filter-row + .filter-row { margin-top: var(--space-1); }
.filter-search {
  flex: 1; min-width: 200px; min-height: var(--control-h);
  background: var(--lc-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); color: var(--lc-text);
  font-size: var(--text-body); padding: 0 var(--space-2);
  outline: none; box-sizing: border-box; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-search::placeholder { color: var(--lc-text-muted); }
.filter-search:focus { border-color: var(--lc-gold); box-shadow: var(--focus-ring); }
.filter-select {
  background: var(--lc-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); color: var(--lc-text);
  min-height: var(--control-h);
  font-size: var(--text-support); padding: 0 var(--space-1);
  outline: none; cursor: pointer; font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-select:focus { border-color: var(--lc-gold); box-shadow: var(--focus-ring); }
.filter-label { font-size: var(--text-support); color: var(--lc-text-dim); white-space: nowrap; }
.btn-reset {
  background: none; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); color: var(--lc-text-dim);
  font-size: var(--text-support); font-weight: var(--weight-semibold);
  min-height: var(--control-h); padding: 0 var(--space-2);
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.btn-reset:hover { border-color: var(--color-text-secondary); color: var(--lc-text); }

/* ── Light card ──────────────────────────────────────────────────────────────
   A card is a WHITE SURFACE WITH A SHADOW — not a shadow AND a full-strength
   outline. The hairline that remains is the faintest subtle border, present
   only so the card still reads as a surface for anyone with shadows suppressed
   (forced-colors, high-contrast, print). */
.lc-card {
  background: var(--lc-surface);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--shadow-card);
}
/* A card INSIDE a card drops its own surface entirely — nested boxes with
   competing borders are the single biggest source of visual noise in the app. */
.lc-card .lc-card,
.rail-card .lc-card {
  border: none; box-shadow: none; border-radius: 0;
}
.lc-card-pad { padding: var(--space-3); }
.lc-card-title {
  font-size: var(--text-card); font-weight: var(--weight-semibold);
  color: var(--lc-text); line-height: var(--leading-snug);
}

/* ── Light buttons ───────────────────────────────────────────────────────────
   FOUR levels, one geometry. Only ONE gold-filled primary should be visible on
   a screen at a time; everything else steps down to secondary or tertiary.
   Gold carries near-black ink (7.3:1), never white (2.7:1 — failed AA). */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-support); font-weight: var(--weight-semibold); cursor: pointer;
  border-radius: var(--radius-control);
  min-height: var(--control-h); padding: 0 var(--space-2);
  border: 1px solid transparent; font-family: inherit; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.lc-btn-primary {
  background: var(--color-brand); color: var(--color-on-brand);
  font-weight: var(--weight-bold);
}
.lc-btn-primary:hover { background: var(--color-brand-hover); }
.lc-btn-secondary {
  background: var(--lc-surface); border-color: var(--color-border-strong);
  color: var(--lc-text);
}
.lc-btn-secondary:hover { background: var(--color-surface-hover); border-color: var(--color-text-tertiary); }
/* Tertiary — the quiet ghost. This is what a lower-priority gold link becomes. */
.lc-btn-tertiary {
  background: transparent; border-color: transparent; color: var(--lc-text-dim);
}
.lc-btn-tertiary:hover { background: var(--color-surface-hover); color: var(--lc-text); }
.lc-btn-danger { background: var(--color-danger); color: #fff; }
.lc-btn-danger:hover { background: #A93226; }
/* Disabled reads deliberately switched-off, not broken: it keeps its shape and
   a legible label instead of dissolving to 45% of everything. */
.lc-btn:disabled, .lc-btn.disabled {
  background: var(--color-surface-sunken); border-color: var(--color-border);
  color: var(--lc-text-muted); cursor: not-allowed; opacity: 1;
}

/* ── Light form fields ───────────────────────────────────────────────────────
   An editable control KEEPS a visible border — this is the one place the
   redesign deliberately does not remove boundaries. Fields sit on white with a
   firmer edge (the old grey-well-on-white read as disabled). */
.lf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.lf-label {
  font-size: var(--text-support); font-weight: var(--weight-medium);
  color: var(--lc-text-dim); text-transform: none;
  letter-spacing: 0;
}
/* Required-field marker — the ONE standard across every create/edit form.
   Use <span class="lf-req">*</span> in the label; never bake the "*" into an
   i18n key or an ad-hoc inline red. The marker must match actual validation. */
.lf-req { color: var(--color-danger); font-weight: var(--weight-bold); }
.lf-input, .lf-select, .lf-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--lc-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control); color: var(--lc-text);
  font-size: var(--text-body); padding: 0 12px;
  min-height: var(--control-h);
  font-family: inherit; outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.lf-textarea { resize: vertical; min-height: 96px; padding: 10px 12px; line-height: var(--leading-normal); }
.lf-input:hover:not(:focus), .lf-select:hover:not(:focus), .lf-textarea:hover:not(:focus) {
  border-color: var(--color-text-tertiary);
}
.lf-input:focus, .lf-select:focus, .lf-textarea:focus {
  border-color: var(--lc-gold); box-shadow: var(--focus-ring);
}
.lf-input::placeholder, .lf-textarea::placeholder { color: var(--lc-text-muted); }

/* ── Field WIDTH budgets ─────────────────────────────────────────────────────
   VITRUVIUS Core Standard #8: "size inputs to the realistic max, not equally."
   `.lf-input` is width:100%, which was tolerable while fields were 26px tall —
   at the 44/48px touch height a full-column-width date or quantity box reads as
   enormous. A field is now budgeted by what it actually holds. Text fields are
   unaffected and still fill their column.
   Override per instance with .lf-w-full when a date genuinely needs the width. */
.lf-input[type="date"]           { max-width: 190px; }
.lf-input[type="time"]           { max-width: 150px; }
.lf-input[type="number"]         { max-width: 140px; }
.lf-input[type="tel"]            { max-width: 220px; }
.lf-input.lf-w-sm                { max-width: 120px; }
.lf-input.lf-w-md                { max-width: 260px; }
.lf-input.lf-w-full,
.lf-input[type="date"].lf-w-full { max-width: none; }
/* Inputs inside the LOCKED data grid are the CELL — never budgeted here. */
.wi-table .lf-input, .mat-table .lf-input, .comp-table .lf-input { max-width: none; }
.lf-input:disabled, .lf-select:disabled, .lf-textarea:disabled {
  background: var(--color-surface-sunken); color: var(--lc-text-muted); cursor: not-allowed;
}
/* Validation — the error state is a border + a message, never colour alone. */
.lf-input.invalid, .lf-select.invalid, .lf-textarea.invalid,
.lf-input[aria-invalid="true"], .lf-select[aria-invalid="true"], .lf-textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}
.lf-input.invalid:focus, .lf-textarea.invalid:focus, .lf-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(192,57,43,0.22);
}
.lf-error {
  font-size: var(--text-support); color: var(--color-danger);
  font-weight: var(--weight-medium); display: flex; align-items: center; gap: 5px;
}

/* ── Shared tabs ─────────────────────────────────────────────────────────────
   Typography plus a 2px INK underline on the active tab (skin §4b — selection
   is ink, never gold) — no boxed tab borders. Scrolls horizontally on a
   narrow phone rather than wrapping into a confusing two-line block. */
.omega-tabs {
  display: flex; align-items: stretch; gap: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.omega-tabs::-webkit-scrollbar { display: none; }
.omega-tab {
  flex: 0 0 auto; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--control-h); padding: 0 2px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--text-body); font-weight: var(--weight-medium);
  color: var(--lc-text-dim); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease);
}
.omega-tab:hover { color: var(--lc-text); }
.omega-tab[aria-selected="true"], .omega-tab.active {
  color: var(--lc-text); font-weight: var(--weight-semibold);
  border-bottom-color: var(--color-text-primary);
}
.omega-tab-count {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  color: var(--lc-text-muted); font-variant-numeric: tabular-nums;
}

/* ── Shared chips ────────────────────────────────────────────────────────────
   A chip means STATUS, CLASSIFICATION or SELECTION. Sentence case, not
   uppercase — a chip is a value, not a label. */
.omega-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-support); font-weight: var(--weight-medium);
  line-height: 1; padding: 6px 11px; border-radius: var(--radius-pill);
  background: var(--color-surface-sunken); border: 1px solid var(--color-border);
  color: var(--lc-text-dim); white-space: nowrap; font-family: inherit;
}
/* A SELECTABLE chip is a control and earns a touch target. */
button.omega-chip, .omega-chip[role="button"] {
  cursor: pointer; min-height: var(--control-h-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
button.omega-chip:hover { border-color: var(--color-text-tertiary); }
.omega-chip.selected, .omega-chip[aria-pressed="true"] {
  background: var(--color-brand-soft); border-color: var(--color-brand-edge);
  color: var(--color-brand-ink); font-weight: var(--weight-semibold);
}
.omega-chip--success { background: var(--color-success-soft); border-color: #C8E2D2; color: var(--color-success); }
.omega-chip--danger  { background: var(--color-danger-soft);  border-color: #F0CFCA; color: var(--color-danger); }
.omega-chip--warning { background: var(--color-warning-soft); border-color: #EBD9A8; color: var(--color-warning); }

/* ── Light data table ────────────────────────────────────────────────────────
   READ-ONLY list tables (not the LOCKED editable Data Grid — see below).
   No vertical rules, quiet horizontal dividers, a roomier row. */
.lc-table {
  width: 100%; border-collapse: collapse; font-size: var(--text-support);
}
.lc-table th {
  text-align: left; padding: 10px var(--space-2);
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lc-text-dim); background: transparent;
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
  cursor: pointer; user-select: none;
}
.lc-table th.asc::after  { content: ' ▲'; font-size: 9px; }
.lc-table th.desc::after { content: ' ▼'; font-size: 9px; }
.lc-table td {
  padding: 13px var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle; color: var(--lc-text);
}
/* Numeric columns line up: right-aligned, tabular, never wrapping. */
.lc-table th.num, .lc-table td.num,
.lc-table th.money, .lc-table td.money {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lc-table tr:last-child td { border-bottom: none; }
.lc-table tbody tr:hover td { background: var(--color-surface-hover); cursor: pointer; }

/* Phone: a read-only list table becomes stacked rows rather than a shrunken
   grid. Opt in per table with `.lc-table--stack` and a `data-label` on each
   <td>; without the opt-in the table keeps its normal shape and scrolls. */
@media (max-width: 640px) {
  .lc-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lc-table--stack tbody tr {
    display: block; padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
  }
  .lc-table--stack tbody tr:last-child { border-bottom: none; }
  .lc-table--stack td {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
    padding: 5px 0; border: none; text-align: right;
  }
  .lc-table--stack td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    font-size: var(--text-micro); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--lc-text-dim);
  }
  .lc-table--stack td:first-child {
    font-size: var(--text-card); font-weight: var(--weight-semibold);
    justify-content: flex-start; text-align: left; padding-bottom: var(--space-1);
  }
  .lc-table--stack td:first-child::before { display: none; }
  /* Any list table that has NOT opted in must at least scroll inside itself
     rather than pushing the page sideways. */
  .lc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Light badge ─────────────────────────────────────────────── */
.lc-badge {
  display: inline-block;
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-sm);
}

/* ── Empty state (light) ─────────────────────────────────────────────────────
   Anchored, not floating in a void: the state is centred within a bounded
   block, so an empty screen reads as finished rather than unfinished. */
.lc-empty {
  text-align: center; padding: var(--space-5) var(--space-3);
  color: var(--lc-text-dim);
}
.lc-empty .icon { font-size: 40px; margin-bottom: var(--space-2); opacity: 0.75; }
.lc-empty p {
  font-size: var(--text-card); font-weight: var(--weight-semibold);
  color: var(--lc-text);
}
.lc-empty-sub {
  font-size: var(--text-body); color: var(--lc-text-dim);
  margin-top: var(--space-0h); max-width: 42ch; margin-left: auto; margin-right: auto;
}

/* ── Sidebar language toggle ─────────────────────────────────── */
.sidebar-lang-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: rgba(245,247,248,0.65);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; cursor: pointer;
  flex-shrink: 0; font-family: inherit;
  transition: background 0.13s, color 0.13s;
}
.sidebar-lang-btn:hover {
  background: rgba(255,255,255,0.14);
  color: var(--text-primary);
}

/* ── Sales Tasks rail (shared: opportunity-detail + quote-detail) ──────────
   Vitruvius 2026-06-16: clean card-based task rail. "Like screens behave
   alike" — keep these here so the two pages can't drift apart. */
.rail-header {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lc-text-dim); padding: var(--space-0h) 2px var(--space-1);
}
.rail-card {
  background: var(--color-surface); border: 1px solid var(--color-border-card);
  border-radius: var(--radius-card); padding: var(--space-2);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-1);
}
/* Current-Task card carries a gold left accent so the eye lands on the
   active step. Won/lost/superseded cards stay plain (terminal, centered). */
.rail-card--current { border-left: 3px solid var(--color-brand); padding-left: 13px; }
.rail-task-label {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lc-text-dim); margin-bottom: 6px;
}
.rail-task-body {
  font-size: var(--text-body); color: var(--lc-text); line-height: var(--leading-snug);
}
/* Section title separates the gold CTA from secondary actions with a hairline
   so primary / secondary / destructive read as three distinct groups. */
.rail-section-title {
  font-size: var(--text-micro); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--lc-text-dim); padding: var(--space-2) 2px var(--space-1); margin-top: var(--space-0h);
  border-top: 1px solid var(--color-border-subtle);
}
/* Primary rail CTA — single gold full-width action per stage.
   Sized for the salesman's tablet (≥48px touch target). */
.rail-cta {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin-top: var(--space-0h); margin-bottom: var(--space-1);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  padding: 12px var(--space-2); border: none; border-radius: var(--radius-control);
  cursor: pointer; text-align: center;
  box-shadow: none; font-family: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.rail-cta:hover { background: var(--color-brand-hover); }
.rail-cta:disabled {
  background: var(--color-surface-sunken); color: var(--lc-text-muted);
  cursor: not-allowed; opacity: 1;
}