/* ═══════════════════════════════════════════════════════════════════════════
   GROUNDWORK — Unified Design System v2.0
   2026-07-04 · Phase 1b: Full token rewrite + component elevation
   
   Load order: LAST — this file wins all specificity battles intentionally.
   Strategy: Single --gw-* namespace. Primitive scale → semantic tokens.
             --gds-* aliases keep legacy code working without modification.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. PRIMITIVE PALETTE ───────────────────────────────────────────────── */
:root {

  /* Pine — primary brand green */
  --gw-pine-900: #0D2B22;
  --gw-pine-800: #1A4740;
  --gw-pine-700: #1E5448;
  --gw-pine-600: #2D7A55;
  --gw-pine-500: #3D9B6E;
  --gw-pine-400: #5BB585;
  --gw-pine-300: #8FD1AE;
  --gw-pine-200: #C4E8D6;
  --gw-pine-100: #EAF4EE;
  --gw-pine-50:  #F3FAF6;

  /* Bark — warm neutral scale */
  --gw-bark-900: #1C1712;
  --gw-bark-800: #2E2620;
  --gw-bark-700: #4A3F38;
  --gw-bark-600: #5E5249;
  --gw-bark-500: #6E6059;
  --gw-bark-400: #8C7F78;
  --gw-bark-300: #B5ABA4;
  --gw-bark-200: #D8D2CC;
  --gw-bark-100: #EDEAE6;
  --gw-bark-50:  #F7F5F2;
  --gw-bark-25:  #FAFAF8;

  /* Sand — warm mid-tone accents */
  --gw-sand-700: #7A5C10;
  --gw-sand-600: #8B6914;
  --gw-sand-400: #C49A40;
  --gw-sand-200: #E8D49C;
  --gw-sand-100: #FAF3DC;
  --gw-sand-50:  #FDFAEF;

  /* Clay — warm accent */
  --gw-clay-700: #7A2E20;
  --gw-clay-600: #8B3826;
  --gw-clay-400: #C4614A;
  --gw-clay-200: #EDCCC5;
  --gw-clay-100: #FAE8E4;
  --gw-clay-50:  #FDF4F2;

  /* Teal — interactive accent */
  --gw-teal-700: #215E5A;
  --gw-teal-600: #2D7874;
  --gw-teal-500: #4D8A86;
  --gw-teal-200: #B4D4D2;
  --gw-teal-100: #EAF3F2;
  --gw-teal-50:  #F2FAF9;

  /* ─── SEMANTIC TOKENS ─────────────────────────────────────────────────── */

  /* Page & surface backgrounds */
  --gw-bg-page:        var(--gw-bark-50);      /* #F7F5F2 warm off-white page  */
  --gw-bg-surface:     var(--gw-bark-25);      /* #FAFAF8 card / panel         */
  --gw-bg-surface-2:   #FFFFFF;                /* clean white                  */
  --gw-bg-subtle:      var(--gw-pine-100);     /* #EAF4EE tint surface         */
  --gw-bg-raised:      var(--gw-bark-100);     /* #EDEAE6 slightly raised      */

  /* Borders */
  --gw-border:         var(--gw-bark-100);     /* #EDEAE6 default border       */
  --gw-border-strong:  var(--gw-bark-200);     /* #D8D2CC stronger divider     */
  --gw-border-subtle:  var(--gw-bark-50);      /* very subtle                  */
  --gw-border-focus:   var(--gw-pine-600);     /* #2D7A55 focus ring           */
  --gw-border-active:  var(--gw-teal-500);     /* interactive active border    */

  /* Text */
  --gw-text-primary:   var(--gw-bark-900);     /* #1C1712 body text            */
  --gw-text-secondary: var(--gw-bark-700);     /* #4A3F38 secondary text       */
  --gw-text-muted:     var(--gw-bark-500);     /* #6E6059 metadata             */
  --gw-text-subtle:    var(--gw-bark-400);     /* #8C7F78 placeholder          */
  --gw-text-disabled:  var(--gw-bark-300);     /* #B5ABA4 disabled             */
  --gw-text-inverse:   #FFFFFF;

  /* Action / brand */
  --gw-action:         var(--gw-pine-600);     /* #2D7A55 primary CTA          */
  --gw-action-hover:   var(--gw-pine-700);     /* #1E5448 CTA hover            */
  --gw-action-deep:    var(--gw-pine-800);     /* #1A4740 CTA pressed          */
  --gw-action-light:   var(--gw-pine-100);     /* tint surface for CTAs        */
  --gw-action-tint:    var(--gw-pine-50);      /* very light tint              */

  /* Semantic status */
  --gw-success:        var(--gw-pine-600);     /* #2D7A55                      */
  --gw-success-bg:     var(--gw-pine-100);
  --gw-success-border: var(--gw-pine-200);
  --gw-warning:        var(--gw-sand-700);     /* #7A5C10                      */
  --gw-warning-bg:     var(--gw-sand-100);
  --gw-warning-border: var(--gw-sand-200);
  --gw-danger:         var(--gw-clay-700);     /* #7A2E20                      */
  --gw-danger-bg:      var(--gw-clay-100);
  --gw-danger-border:  var(--gw-clay-200);
  --gw-info:           var(--gw-teal-500);     /* #4D8A86                      */
  --gw-info-bg:        var(--gw-teal-100);
  --gw-info-border:    var(--gw-teal-200);

  /* Shadows — 5-level elevation */
  --gw-shadow-xs:   0 1px 2px rgba(28,23,18,.04), 0 1px 4px rgba(28,23,18,.04);
  --gw-shadow-sm:   0 1px 4px rgba(28,23,18,.05), 0 4px 12px rgba(28,23,18,.06);
  --gw-shadow-md:   0 4px 16px rgba(28,23,18,.08), 0 8px 28px rgba(28,23,18,.06);
  --gw-shadow-lg:   0 12px 40px rgba(28,23,18,.12), 0 24px 64px rgba(28,23,18,.08);
  --gw-shadow-xl:   0 24px 72px rgba(28,23,18,.16);
  --gw-shadow-card: 0 1px 3px rgba(28,23,18,.05), 0 4px 12px rgba(28,23,18,.05);

  /* Radius — consistent 8px grid */
  --gw-r-xs: 4px;
  --gw-r-sm: 8px;
  --gw-r-md: 12px;
  --gw-r-lg: 16px;
  --gw-r-xl: 20px;
  --gw-r-2xl: 28px;

  /* Spacing grid (8px base) */
  --gw-sp-1: 4px;
  --gw-sp-2: 8px;
  --gw-sp-3: 12px;
  --gw-sp-4: 16px;
  --gw-sp-5: 20px;
  --gw-sp-6: 24px;
  --gw-sp-8: 32px;

  /* Typography */
  --gw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --gw-sidebar-w:   264px;
  --gw-topbar-h:    56px;
  --gw-sidebar-bg:  var(--gw-pine-800);        /* #1A4740 rich deep green      */

  /* ─── LEGACY ALIASES — keep all --gds-* references working ──────────── */
  /* Primary palette */
  --gds-pine:        var(--gw-pine-800);
  --gds-pine-deep:   var(--gw-pine-900);
  --gds-pine-mid:    var(--gw-pine-700);
  --gds-pine-light:  var(--gw-pine-600);
  --gds-teal:        var(--gw-teal-500);
  --gds-teal-soft:   var(--gw-teal-100);
  --gds-clay:        var(--gw-clay-400);
  --gds-emerald:     var(--gw-pine-600);

  /* Neutrals */
  --gds-ink:         var(--gw-text-primary);
  --gds-ink-2:       var(--gw-text-secondary);
  --gds-muted:       var(--gw-text-muted);
  --gds-subtle:      var(--gw-text-subtle);
  --gds-amber:       var(--gw-warning);
  --gds-rose:        var(--gw-danger);

  /* Surfaces */
  --gds-bg:          var(--gw-bg-page);
  --gds-bg-2:        var(--gw-bark-100);
  --gds-surface:     var(--gw-bg-surface-2);
  --gds-surface-2:   var(--gw-bg-surface);
  --gds-surface-3:   var(--gw-bark-50);

  /* Borders */
  --gds-line:        var(--gw-border);
  --gds-line-2:      var(--gw-border-strong);
  --gds-line-3:      var(--gw-bark-200);

  /* Shadows */
  --gds-shadow-xs:   var(--gw-shadow-xs);
  --gds-shadow-sm:   var(--gw-shadow-sm);
  --gds-shadow-md:   var(--gw-shadow-md);
  --gds-shadow-lg:   var(--gw-shadow-lg);
  --gds-shadow-card: var(--gw-shadow-card);

  /* Radius */
  --gds-r-xs: var(--gw-r-xs);
  --gds-r-sm: var(--gw-r-sm);
  --gds-r-md: var(--gw-r-md);
  --gds-r-lg: var(--gw-r-lg);
  --gds-r-xl: var(--gw-r-xl);

  /* Typography / Layout */
  --gds-font:       var(--gw-font);
  --gds-sidebar-w:  var(--gw-sidebar-w);
  --gds-sidebar-bg: var(--gw-sidebar-bg);
  --gds-topbar-h:   var(--gw-topbar-h);

  /* premium.css --gw-* bridge aliases (old pine/ink/muted tokens) */
  --gw-pine:       var(--gw-pine-800);
  --gw-pine-deep:  var(--gw-pine-900);
  --gw-pine-light: var(--gw-pine-600);
  --gw-pine-muted: var(--gw-pine-600);
  --gw-emerald:    var(--gw-pine-600);
  --gw-sky:        var(--gw-teal-500);
  --gw-ink:        var(--gw-text-primary);
  --gw-muted:      var(--gw-text-muted);
  --gw-subtle:     var(--gw-text-subtle);
  --gw-line:       var(--gw-border);
  --gw-bg:         var(--gw-bg-page);
  --gw-surface:    var(--gw-bg-surface-2);
  --gw-surface-2:  var(--gw-bg-surface);
  --gw-surface-3:  var(--gw-bark-50);

  /* time_tracker.js used --gw-text — define it */
  --gw-text: var(--gw-text-primary);
}

/* ─── 2. GLOBAL RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--gw-font) !important;
  background: var(--gw-bg-page) !important;
  color: var(--gw-text-primary) !important;
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
}

/* Remove emoji-font fallbacks */
h1, h2, h3, h4, h5, h6, p, span, div, button, label {
  font-family: var(--gw-font);
}

/* Typography scale */
h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 8px; color: var(--gw-text-primary); }
h2 { font-size: 20px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; margin: 0 0 10px; color: var(--gw-text-primary); }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 8px; color: var(--gw-text-primary); }
h4 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; color: var(--gw-text-primary); }
p  { line-height: 1.6; margin: 0 0 10px; }

/* ─── 3. APP SHELL ───────────────────────────────────────────────────────── */
.app-shell {
  display: grid !important;
  grid-template-columns: var(--gw-sidebar-w) 1fr !important;
  min-height: 100vh;
}

.main {
  background: var(--gw-bg-page) !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

/* ─── 4. SIDEBAR ─────────────────────────────────────────────────────────── */
.sidebar {
  background: var(--gw-sidebar-bg) !important;
  width: var(--gw-sidebar-w) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-right: none !important;
  flex-shrink: 0;
  transition: width .22s ease !important;
}

/* ── Sidebar collapse toggle button — DEPRECATED, hidden (sidebarCloseBtn handles this now) ── */
.nav-sidebar-toggle {
  display: none !important;
}

/* ── Collapsed rail (icon-only, desktop) ── */
.sidebar--collapsed {
  width: 52px !important;
  overflow: hidden !important;
}
/* Recalc the grid column — sidebar width var drives grid-template-columns */
:root:has(.sidebar--collapsed) {
  --gw-sidebar-w: 52px;
}

/* Collapsed: hide every text/label/panel — HEIGHT must go to zero too */
.sidebar--collapsed .brand-name,
.sidebar--collapsed .brand-subtitle {
  display: none !important;
}
.sidebar--collapsed .nav-chevron-icon {
  display: none !important;
}
.sidebar--collapsed .nav-workspace-label {
  display: none !important;
}
/* KEY FIX: collapse the subtab panels so they take no height */
.sidebar--collapsed .nav-subtabs {
  max-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Collapsed: brand — hide logo & text, show only the expand chevron centered */
.sidebar--collapsed .brand {
  padding: 10px 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.sidebar--collapsed .brand-mark {
  display: none !important;
}
.sidebar--collapsed .brand > div {
  display: none !important;
}
.sidebar--collapsed .sidebar-close-btn {
  margin-left: 0 !important;
  color: rgba(255,255,255,.45) !important;
  padding: 8px !important;
}

/* Collapsed: workspace nav buttons — centered icon, full width */
.sidebar--collapsed .nav-workspace {
  padding: 10px 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  position: relative;
}
.sidebar--collapsed .nav-workspace svg:first-child {
  width: 17px !important;
  height: 17px !important;
  opacity: .65;
}
.sidebar--collapsed .nav-workspace.active svg:first-child {
  opacity: 1;
}

/* Collapsed: sidebar footer — center avatar only */
.sidebar--collapsed .sidebar-footer {
  padding: 8px 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}
.sidebar--collapsed .sidebar-footer > *:not(#sidebarAvatarWrap) {
  display: none !important;
}

/* Tooltip: label floats right on hover when collapsed */
.sidebar--collapsed .nav-workspace::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #111c1a;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.sidebar--collapsed .nav-workspace:hover::after {
  opacity: 1;
}

/* Slim scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }

/* Brand block */
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 16px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

.brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent !important;
  border: none !important;
}
.brand-mark img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  filter: none !important;
}

.brand-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: #FFFFFF !important;
  line-height: 1.15 !important;
}
.brand-subtitle {
  font-size: 10px !important;
  color: rgba(255,255,255,.38) !important;
  font-weight: 500 !important;
  margin-top: 1px !important;
  letter-spacing: .01em !important;
}
.brand-kicker { display: none !important; }

/* Nav container */
.nav {
  padding: 10px 10px 8px !important;
  flex: 1;
  gap: 0 !important;
}

/* Nav section headers */
.nav-summary {
  padding: 10px 8px 4px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  border-radius: var(--gw-r-xs) !important;
  user-select: none;
  cursor: default !important;
}
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::after { display: none !important; }
.nav-summary:hover { color: rgba(255,255,255,.42) !important; background: transparent !important; }
.nav-group[open] > .nav-summary { color: rgba(255,255,255,.3) !important; }

/* Nav items */
.nav-items { padding: 0 0 6px !important; width: 100%; }

.nav-item {
  background: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 12px 7px 12px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer;
  transition: color .14s, background .14s, border-color .14s !important;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -.01em;
  position: relative !important;
}
.nav-item svg {
  flex-shrink: 0;
  opacity: .6;
  transition: opacity .14s;
}
.nav-item:hover {
  color: rgba(255,255,255,.88) !important;
  background: rgba(255,255,255,.07) !important;
  border-left-color: rgba(255,255,255,.15) !important;
}
.nav-item:hover svg { opacity: .85; }
.nav-item.active {
  color: #FFFFFF !important;
  background: rgba(255,255,255,.12) !important;
  border-left: 2px solid var(--gw-pine-300) !important;
  font-weight: 650 !important;
}
.nav-item.active svg { opacity: 1; }
.nav-item.active::before { display: none !important; }

/* AI Assistant tint */
.nav-item[data-view="ai"] { color: rgba(147,131,220,.75) !important; }
.nav-item[data-view="ai"]:hover { color: rgba(167,151,240,.95) !important; }

/* Nav group spacing */
.nav-group { margin-bottom: 4px !important; }

/* ─── 5. SIDEBAR FOOTER / USER CARD ──────────────────────────────────────── */
.sidebar-footer {
  margin-top: auto !important;
  padding: 12px 12px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(0,0,0,.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0;
  color: rgba(255,255,255,.45) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
}
#sidebarAvatarInitials {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--gw-r-sm) !important;
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#sidebarUserName {
  font-size: 12.5px !important;
  font-weight: 650 !important;
  color: rgba(255,255,255,.78) !important;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sidebarUserRole {
  font-size: 11px !important;
  color: rgba(255,255,255,.38) !important;
  display: block;
}

/* ─── 6. TOPBAR ──────────────────────────────────────────────────────────── */
.topbar {
  height: var(--gw-topbar-h) !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 15 !important;
  box-shadow: 0 1px 0 rgba(28,23,18,.05) !important;
}

/* Search bar */
.search-wrap {
  flex: 0 1 380px !important;
  max-width: 380px !important;
  min-width: 180px !important;
  position: relative !important;
  margin-right: auto;
}
.search-wrap input,
#searchInput {
  width: 100% !important;
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 7px 12px 7px 34px !important;
  font-size: 13px !important;
  color: var(--gw-text-primary) !important;
  transition: border-color .15s, box-shadow .15s !important;
  outline: none !important;
  height: 34px !important;
  box-shadow: none !important;
}
.search-wrap input:focus,
#searchInput:focus {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(45,122,85,.12) !important;
}
.search-wrap input::placeholder { color: var(--gw-text-subtle) !important; }
.search-wrap::before {
  left: 11px !important;
  width: 13px !important;
  height: 13px !important;
}
.topbar > .search-wrap { flex: 0 1 380px !important; }

/* New button */
.topbar-new-btn {
  background: var(--gw-action) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 7px 13px !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: background .14s, box-shadow .14s !important;
  box-shadow: 0 1px 4px rgba(45,122,85,.22) !important;
  white-space: nowrap;
  height: 32px;
}
.topbar-new-btn:hover {
  background: var(--gw-action-hover) !important;
  box-shadow: 0 3px 10px rgba(45,122,85,.3) !important;
}

/* Settings button */
.topbar-settings {
  background: transparent !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--gw-text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap;
  height: 32px;
  transition: background .12s, color .12s !important;
}
.topbar-settings:hover {
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-primary) !important;
  border-color: var(--gw-border-strong) !important;
}

/* Dropdown */
.topbar-new-dropdown {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  box-shadow: var(--gw-shadow-md) !important;
  padding: 6px !important;
}
.tnd-item {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gw-text-primary) !important;
  border-radius: var(--gw-r-xs) !important;
  padding: 8px 10px !important;
  gap: 8px !important;
}
.tnd-item:hover {
  background: var(--gw-bg-raised) !important;
  color: var(--gw-action) !important;
}
.tnd-section-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  color: var(--gw-text-subtle) !important;
  padding: 4px 10px 6px !important;
}

/* ─── 7. VIEW / PAGE CONTAINER ───────────────────────────────────────────── */
.view {
  padding: 28px 32px !important;
  max-width: none !important; /* fluid: pages stretch to window width; side padding = content border */
  width: 100%;
  flex: 1;
}

/* ─── 8. PAGE HEADER PATTERN ─────────────────────────────────────────────── */
.view h1 {
  font-size: clamp(22px, 2.8vw, 32px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 6px !important;
}
.view .eyebrow {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
.pl-title,
h1.pl-title,
[class*="page-title"] {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--gw-text-primary) !important;
  line-height: 1.2 !important;
}
.pl-subtitle {
  font-size: 13px !important;
  color: var(--gw-text-muted) !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
}
.eyebrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--gw-teal-500) !important;
  margin-bottom: 6px !important;
}

/* ─── 9. CARD SYSTEM ─────────────────────────────────────────────────────── */
.card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
  padding: 20px !important;
  overflow: hidden;
}
.card.clickable:hover {
  box-shadow: var(--gw-shadow-md) !important;
  border-color: var(--gw-border-strong) !important;
  transform: translateY(-1px) !important;
}
.app-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
  overflow: hidden;
}
.app-card::before {
  content: '' !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--gw-pine-800), var(--gw-teal-500)) !important;
  opacity: .65 !important;
}
.app-card h2, .card h2.today-h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: var(--gw-text-primary) !important;
  margin: 0 0 14px !important;
}

/* ─── 10. BUTTONS ────────────────────────────────────────────────────────── */
/* Primary */
.primary-btn, .gw-btn-primary {
  background: var(--gw-action) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: background .14s, box-shadow .14s, transform .1s !important;
  box-shadow: 0 1px 4px rgba(45,122,85,.22) !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  min-height: 34px !important;
  background-image: none !important;
}
.primary-btn:hover, .gw-btn-primary:hover {
  background: var(--gw-action-hover) !important;
  box-shadow: 0 4px 14px rgba(45,122,85,.3) !important;
  transform: translateY(-1px) !important;
  filter: none !important;
}
.primary-btn:active, .gw-btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: none !important;
  background: var(--gw-action-deep) !important;
}
.primary-btn:focus-visible, .gw-btn-primary:focus-visible {
  outline: 3px solid rgba(45,122,85,.4) !important;
  outline-offset: 2px !important;
}
.primary-btn:disabled, .primary-btn[disabled],
.gw-btn-primary:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Secondary */
.secondary-btn, .gw-btn-secondary {
  background: var(--gw-bg-surface-2) !important;
  color: var(--gw-text-primary) !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 8px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .1s !important;
  min-height: 34px !important;
  letter-spacing: -.01em !important;
  box-shadow: var(--gw-shadow-xs) !important;
}
.secondary-btn:hover, .gw-btn-secondary:hover {
  background: var(--gw-bg-raised) !important;
  border-color: var(--gw-bark-300) !important;
}
.secondary-btn:active { transform: translateY(0) !important; }
.secondary-btn:disabled, .secondary-btn[disabled] {
  opacity: .4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Danger */
.danger-btn, .gw-btn-danger, .gw-btn-danger-ghost {
  background: transparent !important;
  color: var(--gw-danger) !important;
  border: 1px solid rgba(122,46,32,.25) !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 8px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s !important;
  min-height: 34px !important;
}
.danger-btn:hover, .gw-btn-danger:hover, .gw-btn-danger-ghost:hover {
  background: var(--gw-danger-bg) !important;
  border-color: rgba(122,46,32,.4) !important;
}
.danger-btn:focus-visible {
  outline: 3px solid rgba(122,46,32,.3) !important;
  outline-offset: 2px !important;
}

/* Ghost (no border) */
.gw-btn-ghost {
  background: transparent !important;
  color: var(--gw-text-muted) !important;
  border: none !important;
  border-radius: var(--gw-r-sm) !important;
  padding: 7px 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
  min-height: 32px !important;
}
.gw-btn-ghost:hover {
  background: var(--gw-bg-raised) !important;
  color: var(--gw-text-primary) !important;
}

/* Small modifier */
.small.primary-btn, .small.secondary-btn, .small.danger-btn,
.primary-btn.small, .secondary-btn.small, .danger-btn.small {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-height: 30px !important;
}

/* Kill gradient buttons from legacy system */
.primary-btn,
.tab.active,
.lead-tab-active {
  background-image: none !important;
}

/* ─── 11. FORM CONTROLS ──────────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=number],
input[type=date],
input[type=search],
input[type=tel],
input[type=url],
input[type=password],
select,
textarea {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-r-sm) !important;
  color: var(--gw-text-primary) !important;
  font-size: 13px !important;
  font-family: var(--gw-font) !important;
  padding: 8px 12px !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  width: 100%;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gw-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(45,122,85,.12) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--gw-text-subtle) !important;
}
label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gw-text-secondary) !important;
  display: block;
  margin-bottom: 5px;
}
.form label span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--gw-text-secondary) !important;
}

/* ─── 12. STATUS CHIPS / BADGES ─────────────────────────────────────────── */
.status-chip,
.badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  border: 1px solid transparent !important;
  white-space: nowrap;
  letter-spacing: -.005em !important;
}
.status-chip.sold    { background: var(--gw-pine-100)  !important; color: var(--gw-pine-800)  !important; border-color: var(--gw-pine-200)  !important; }
.status-chip.active  { background: var(--gw-teal-100)  !important; color: var(--gw-teal-700)  !important; border-color: var(--gw-teal-200)  !important; }
.status-chip.overdue { background: var(--gw-clay-100)  !important; color: var(--gw-clay-700)  !important; border-color: var(--gw-clay-200)  !important; }
.status-chip.pending { background: var(--gw-sand-100)  !important; color: var(--gw-sand-700)  !important; border-color: var(--gw-sand-200)  !important; }
.status-chip.lost    { background: var(--gw-bark-50)   !important; color: var(--gw-text-muted) !important; border-color: var(--gw-border-strong) !important; }
.badge {
  background: var(--gw-teal-100) !important;
  color: var(--gw-pine-800) !important;
  border-color: rgba(77,138,134,.2) !important;
  border-radius: 5px !important;
}

/* ─── 13. TOAST NOTIFICATIONS ────────────────────────────────────────────── */
.toast {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  background: var(--gw-bark-900) !important;
  color: var(--gw-bark-50) !important;
  border-radius: var(--gw-r-md) !important;
  padding: 11px 18px !important;
  box-shadow: var(--gw-shadow-lg) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  z-index: 9999 !important;
  max-width: 360px !important;
  letter-spacing: -.01em !important;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.07) !important;
  transition: opacity .2s, transform .2s;
}
/* Success variant */
.toast.toast-success {
  background: var(--gw-pine-900) !important;
  border-left: 3px solid var(--gw-pine-400) !important;
}
/* Error variant */
.toast.toast-error {
  background: var(--gw-clay-700) !important;
  border-left: 3px solid var(--gw-clay-400) !important;
}
/* Warning variant */
.toast.toast-warning {
  background: var(--gw-sand-700) !important;
  border-left: 3px solid var(--gw-sand-400) !important;
}
/* Info variant */
.toast.toast-info {
  background: var(--gw-teal-700, #1A5C6A) !important;
  border-left: 3px solid var(--gw-teal-400, #4DB8C8) !important;
}
/* Toast icon container */
.toast-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* hidden attribute wins over display:flex */
.toast[hidden] { display: none !important; }

/* Phone: span the width instead of a fixed 360px box.
   The base rule is `right:20px; max-width:360px`, which on a 360px-wide handset
   makes the toast wider than the space left of the offset and pushes it off the
   left edge. Anchoring both sides and clearing the bottom nav + home indicator
   keeps it fully on screen. */
@media (max-width: 768px) {
  .toast {
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    bottom: calc(80px + var(--gw-safe-b, 0px)) !important;
  }
}

/* ─── 14. STAT TILES ─────────────────────────────────────────────────────── */
.stat, .kpi-card, .gw-kpi-card, .dash-tile {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--gw-shadow-card) !important;
  position: relative !important;
  overflow: hidden;
}
.stat::before, .stat::after { display: none !important; }
.stat span { font-size: 11px !important; font-weight: 700 !important; color: var(--gw-text-muted) !important; text-transform: uppercase !important; letter-spacing: .08em !important; display: block !important; margin-bottom: 6px !important; }
.stat strong { font-size: 28px !important; font-weight: 900 !important; letter-spacing: -.04em !important; color: var(--gw-text-primary) !important; line-height: 1 !important; display: block !important; }
.stat.bad strong { color: var(--gw-danger) !important; }
.dash-tile strong { font-size: 24px !important; font-weight: 800 !important; color: var(--gw-text-primary) !important; }
.dash-tile span { font-size: 11px !important; color: var(--gw-text-muted) !important; text-transform: uppercase !important; letter-spacing: .07em !important; }

/* Dashboard KPI cards */
.kpi-card, .gw-kpi-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
}
.kpi-card .kpi-label { color: var(--gw-text-muted) !important; }
.kpi-card .kpi-value { color: var(--gw-text-primary) !important; font-size: 26px !important; }
.kpi-card .kpi-value.green  { color: var(--gw-success) !important; }
.kpi-card .kpi-value.red    { color: var(--gw-danger) !important; }
.kpi-card .kpi-value.cyan   { color: var(--gw-info) !important; }
.kpi-card .kpi-value.amber  { color: var(--gw-warning) !important; }
.kpi-card .kpi-sub { color: var(--gw-text-muted) !important; }
.kpi-card:hover { border-color: var(--gw-border-strong) !important; box-shadow: var(--gw-shadow-sm) !important; }

/* ─── 15. EMPTY STATE COMPONENTS ─────────────────────────────────────────── */
.empty-state {
  background: var(--gw-bg-surface-2) !important;
  border: 1.5px dashed var(--gw-border-strong) !important;
  border-radius: var(--gw-r-xl) !important;
  padding: 48px 28px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}
.empty-state .empty-icon {
  font-size: 0 !important;
  width: 48px !important;
  height: 48px !important;
  background: var(--gw-bg-raised) !important;
  border-radius: var(--gw-r-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px !important;
  color: var(--gw-text-muted) !important;
}
.empty-state .empty-icon svg { width: 22px !important; height: 22px !important; }
.empty-state .empty-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--gw-text-primary) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.02em !important;
}
.empty-state .empty-body {
  color: var(--gw-text-muted) !important;
  font-size: 13.5px !important;
  max-width: 300px !important;
  line-height: 1.6 !important;
  margin: 0 auto !important;
}
.empty-state .empty-cta { margin-top: 20px !important; }

/* ─── 16. TABLES ─────────────────────────────────────────────────────────── */
.gw-data-table, table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 13px !important;
}
.gw-data-table th, table th {
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-muted) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--gw-border) !important;
  white-space: nowrap;
}
.gw-data-table td, table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
  vertical-align: middle !important;
}
.gw-table-row:hover td, .gw-data-table tr:hover td, table tbody tr:hover td {
  background: var(--gw-bg-surface) !important;
}

/* ─── 17. SECTION HEADS ──────────────────────────────────────────────────── */
.section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.section-head h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: var(--gw-text-primary) !important;
  margin: 0 !important;
}

/* ─── 18. PIPELINE / KANBAN ──────────────────────────────────────────────── */
.kanban {
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;
  align-items: flex-start !important;
  overflow-x: auto !important;
  padding-bottom: 12px !important;
}
.kanban-col {
  flex: 0 0 300px !important;
  min-width: 0;
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  padding: 14px !important;
  box-shadow: var(--gw-shadow-xs) !important;
}
.kanban-col h3 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--gw-text-muted) !important;
  margin: 0 0 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  gap: 6px !important;
}

/* Opp cards inside kanban */
.opp-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  padding: 12px 14px 12px 15px !important;
  box-shadow: var(--gw-shadow-xs) !important;
  margin-bottom: 8px !important;
  cursor: pointer;
  transition: box-shadow .14s, border-color .14s, transform .12s !important;
  position: relative !important;
  overflow: hidden !important;
}
.opp-card:hover {
  box-shadow: var(--gw-shadow-md) !important;
  border-color: var(--gw-border-strong) !important;
  transform: translateY(-1px) !important;
}
.opp-card h3 {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: var(--gw-text-primary) !important;
  margin: 0 0 4px !important;
  letter-spacing: -.01em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.opp-card p, .opp-card .muted {
  color: var(--gw-text-muted) !important;
  font-size: 12px !important;
}

/* ─── 19. PIPELINE LIST VIEW ─────────────────────────────────────────────── */
.pl-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.pl-toolbar {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-xs) !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}

/* ─── 20. MINI ROWS (Today page) ─────────────────────────────────────────── */
.mini-row {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  margin-bottom: 6px !important;
  padding: 11px 14px !important;
}
.mini-row:hover {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border-strong) !important;
}
.mini-row strong { color: var(--gw-text-primary) !important; font-size: 13px !important; font-weight: 650 !important; }
.mini-row em     { color: var(--gw-text-muted) !important; font-size: 12px !important; }

/* ─── 21. CHECK ITEMS ────────────────────────────────────────────────────── */
.check-item {
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 10px 4px !important;
  transition: background .1s !important;
}
.check-item:hover { background: var(--gw-bg-surface) !important; }
.check-item input { accent-color: var(--gw-action) !important; }

/* ─── 22. MODALS ─────────────────────────────────────────────────────────── */
.sold-modal, .gw-modal-card {
  background: var(--gw-bg-surface-2) !important;
  border-radius: var(--gw-r-xl) !important;
  box-shadow: var(--gw-shadow-lg) !important;
  border: 1px solid var(--gw-border) !important;
}
.sold-modal h2 { color: var(--gw-text-primary) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }
.sold-modal-backdrop {
  background: rgba(28,23,18,.55) !important;
  backdrop-filter: blur(2px) !important;
}

/* ─── 23. HERO SECTION ───────────────────────────────────────────────────── */
.hero {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-xl) !important;
  box-shadow: var(--gw-shadow-sm) !important;
  overflow: hidden;
}
.hero::before, .hero::after { display: none !important; }

.hero-panel {
  background: var(--gw-pine-800) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-md) !important;
}
.hero-panel::after { opacity: .1 !important; }
.hero-panel h3 { color: #fff !important; }
.hero-panel .muted { color: rgba(255,255,255,.55) !important; }

/* ─── 24. SCRIPT BOX ─────────────────────────────────────────────────────── */
.script-box {
  background: var(--gw-bg-surface) !important;
  border-left: 4px solid var(--gw-teal-500) !important;
  border-radius: var(--gw-r-md) !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* ─── 25. TABS ───────────────────────────────────────────────────────────── */
.tabs {
  display: flex !important;
  gap: 4px !important;
  border-bottom: 2px solid var(--gw-border) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}
.tab {
  border: none !important;
  background: transparent !important;
  color: var(--gw-text-muted) !important;
  border-radius: 0 !important;
  padding: 9px 14px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: color .14s !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
}
.tab:hover { color: var(--gw-text-primary) !important; }
.tab.active {
  background: transparent !important;
  color: var(--gw-action) !important;
  border-bottom-color: var(--gw-action) !important;
  font-weight: 700 !important;
  background-image: none !important;
}

/* Lead tab bar */
.lead-tab-bar {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  padding: 4px !important;
}
.lead-tab {
  color: var(--gw-text-muted) !important;
  border-radius: var(--gw-r-sm) !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  padding: 7px 14px !important;
  gap: 6px !important;
}
.lead-tab:hover { color: var(--gw-text-primary) !important; background: var(--gw-bg-surface) !important; }
.lead-tab-active {
  background: var(--gw-action) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(45,122,85,.25) !important;
  background-image: none !important;
}
.lead-tab-active:hover { color: #fff !important; background: var(--gw-action) !important; }

/* ─── 26. INTEGRATIONS PANELS ────────────────────────────────────────────── */
.gw-int-panel {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
}
.gw-info-strip {
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
}
.int-list-row {
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-sm) !important;
}
.int-list-row:hover { background: var(--gw-bg-raised) !important; }
.int-list-row-title { color: var(--gw-text-primary) !important; }
.int-list-row-meta  { color: var(--gw-text-muted) !important; }
.int-list-row-link  { color: var(--gw-teal-500) !important; border-color: var(--gw-border) !important; }
.int-list-row-link:hover { background: var(--gw-teal-100) !important; }

/* ─── 27. REVENUE / FINANCIAL PANELS ─────────────────────────────────────── */
.rev-editor-table, .div-entry-table {
  font-size: 13px !important;
}
.rev-editor-table thead tr,
.div-entry-table th {
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-muted) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.rev-editor-table tbody tr:hover,
.div-entry-table tbody tr:hover {
  background: var(--gw-bg-surface) !important;
}
.rev-editor-table td,
.div-entry-table td {
  color: var(--gw-text-primary) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.rev-editor-input {
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
.rev-editor-input:focus { border-color: var(--gw-border-focus) !important; }
.rev-variance-pos { color: var(--gw-success) !important; }
.rev-variance-neg { color: var(--gw-danger) !important; }
.fin-tab-btn { border-radius: var(--gw-r-sm) !important; }
.fin-tab-btn.active {
  background: var(--gw-action) !important;
  border-color: var(--gw-action) !important;
  color: #fff !important;
}
.fin-tab-btn:not(.active) {
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  color: var(--gw-text-muted) !important;
}
.fin-tab-btn:hover:not(.active) {
  background: var(--gw-bg-raised) !important;
  color: var(--gw-text-primary) !important;
  border-color: var(--gw-border-strong) !important;
}
.pnl-drop-zone {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border-strong) !important;
}
.pnl-drop-zone:hover { border-color: var(--gw-teal-500) !important; }

/* ─── 28. COMMISSION PANELS ──────────────────────────────────────────────── */
.gw-comm-panel, .gw-sim-panel {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
}
.gw-sim-header {
  border-bottom: 1px solid var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  padding: 14px 18px !important;
}
.gw-comm-panel [style*="color:#E8E4D9"],
.gw-comm-panel [style*="color: #E8E4D9"],
.gw-sim-panel  [style*="color:#E8E4D9"],
.gw-sim-panel  [style*="color: #E8E4D9"] {
  color: var(--gw-text-primary) !important;
}
.gw-comm-panel [style*="color:#6F7E6A"],
.gw-sim-panel  [style*="color:#6F7E6A"] {
  color: var(--gw-text-muted) !important;
}
.gw-comm-panel [style*="color:#5C6B58"],
.gw-sim-panel  [style*="color:#5C6B58"] {
  color: var(--gw-text-muted) !important;
}
.gw-comm-panel [style*="background:#113931"],
.gw-sim-panel  [style*="background:#113931"] {
  background: var(--gw-bg-surface) !important;
}
.gw-comm-panel [style*="background:var(--gw-surface-3)"],
.gw-sim-panel  [style*="background:var(--gw-surface-3)"] {
  background: var(--gw-bark-50) !important;
}

/* ─── 29. USER MANAGEMENT ────────────────────────────────────────────────── */
.gw-um-user-row {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  margin-bottom: 8px !important;
  overflow: hidden !important;
}
.gw-um-role-card {
  background: var(--gw-bg-surface-2) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-xs) !important;
}
.gw-um-tab-nav {
  background: var(--gw-bg-surface) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.gw-um-form-card {
  background: var(--gw-bg-surface-2) !important;
  border-radius: var(--gw-r-xl) !important;
  border: 1px solid var(--gw-border) !important;
  box-shadow: var(--gw-shadow-md) !important;
}

/* ─── 30. PILL / TAG PATTERNS ────────────────────────────────────────────── */
.pill {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-r-sm) !important;
  color: var(--gw-text-secondary) !important;
  font-weight: 600 !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
}

/* ─── 31. TIMELINE ───────────────────────────────────────────────────────── */
.timeline::before { background: var(--gw-border-strong) !important; }

/* ─── 32. SPINNER ────────────────────────────────────────────────────────── */
.spinner {
  border-color: var(--gw-border-strong) !important;
  border-top-color: var(--gw-teal-500) !important;
}

/* ─── 33. TOOL LIST ──────────────────────────────────────────────────────── */
.tool-list button {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  color: var(--gw-action) !important;
  font-weight: 600 !important;
  box-shadow: var(--gw-shadow-xs) !important;
}
.tool-list button:hover {
  background: var(--gw-bg-raised) !important;
  border-color: var(--gw-border-strong) !important;
}

/* ─── 34. COMMS BOARD (intentional dark surface) ─────────────────────────── */
.comms-board { /* keep dark */ }

/* ─── 35. SEARCH RESULTS ─────────────────────────────────────────────────── */
.search-results {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-md) !important;
}
.result {
  border-radius: var(--gw-r-sm) !important;
  background: transparent !important;
}
.result:hover { background: var(--gw-bg-raised) !important; }
.result-type  { color: var(--gw-teal-500) !important; }
.result-title { color: var(--gw-text-primary) !important; font-weight: 700 !important; }
.result-text  { color: var(--gw-text-muted) !important; }

/* ─── 36. PAGE PADDING CONSISTENCY ──────────────────────────────────────── */
.view > * + * { margin-top: 20px; }

/* ─── 37. RESTRICTED / ACCESS STATES ────────────────────────────────────── */
.access-restricted-state,
[class*="restricted"] > div:first-child,
.rep-locked-view {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-xl) !important;
  box-shadow: var(--gw-shadow-sm) !important;
  padding: 48px 36px !important;
  text-align: center !important;
  max-width: 520px !important;
  margin: 40px auto !important;
}

/* ─── 38. ACADEMY / TRAINING ─────────────────────────────────────────────── */
.academy-card, [class*="academy"] .card {
  background: var(--gw-bg-surface-2) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
  border: 1px solid var(--gw-border) !important;
}

/* ─── 39. TEXT HELPERS ───────────────────────────────────────────────────── */
.muted, .meta, .small-text, .lede { color: var(--gw-text-muted) !important; }
.lede { font-size: 15px !important; line-height: 1.65 !important; max-width: 620px !important; }
.meta { font-size: 12px !important; }

/* ─── 40. GRID HELPERS ───────────────────────────────────────────────────── */
.grid-2, .grid-3, .grid-4 { display: grid !important; gap: 16px !important; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* ─── 41. DASHBOARD STRIP ────────────────────────────────────────────────── */
.dashboard-strip { gap: 14px !important; }

/* ─── 42. RESULT BOX ─────────────────────────────────────────────────────── */
.result-box {
  background: var(--gw-teal-100) !important;
  border: 1px solid rgba(77,138,134,.2) !important;
  border-radius: var(--gw-r-md) !important;
}

/* ─── 43. GW-FLAG PANEL ──────────────────────────────────────────────────── */
.gw-flag-panel {
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
}
.gw-flag-panel [style*="color:#E8E4D9"] { color: var(--gw-text-primary) !important; }
.gw-flag-panel [style*="color:#6F7E6A"] { color: var(--gw-text-muted) !important; }

/* ─── 44. FOCUS RINGS ────────────────────────────────────────────────────── */
button:focus-visible {
  outline: 2px solid rgba(45,122,85,.45) !important;
  outline-offset: 2px !important;
}
a:focus-visible {
  outline: 2px solid rgba(45,122,85,.4) !important;
  outline-offset: 2px !important;
}

/* ─── 45. SCROLLBAR ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gw-border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gw-bark-300); }

/* ─── 46. LINKS ──────────────────────────────────────────────────────────── */
a { color: var(--gw-teal-500); text-decoration: none; }
a:hover { color: var(--gw-pine-800); text-decoration: underline; }

/* ─── 47. LOADING STATES ─────────────────────────────────────────────────── */
.btn-loading {
  position: relative !important;
  pointer-events: none !important;
  opacity: .75 !important;
}
.btn-loading::after {
  content: '' !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid rgba(255,255,255,.3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: gw-spin .7s linear infinite !important;
}
@keyframes gw-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* ─── 48. FORM GRID ──────────────────────────────────────────────────────── */
.form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 16px !important;
}

/* ─── 49. STAGE NUMBER BADGE ─────────────────────────────────────────────── */
.stage-number {
  background: var(--gw-action) !important;
  border-radius: var(--gw-r-sm) !important;
  box-shadow: 0 2px 8px rgba(45,122,85,.2) !important;
}

/* ─── 50. CATEGORY TILE (Add Lead) ───────────────────────────────────────── */
.cat-tile {
  background: var(--gw-bg-surface-2) !important;
  border: 1.5px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  transition: border-color .14s, background .14s !important;
}
.cat-tile:hover {
  border-color: var(--gw-border-strong) !important;
  background: var(--gw-bg-surface) !important;
}
.cat-tile.active,
.cat-tile[style*="background:#204A43"],
.cat-tile[style*="border-color:#204A43"] {
  background: var(--gw-action) !important;
  border-color: var(--gw-action) !important;
  color: #fff !important;
}

/* ─── 51. SUPER ADMIN BUTTON ─────────────────────────────────────────────── */
#superAdminNavBtn {
  color: var(--gw-pine-300) !important;
  font-weight: 650 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  margin-top: 6px !important;
  padding-top: 10px !important;
}
#superAdminNavBtn:hover {
  background: rgba(143,209,174,.08) !important;
  color: var(--gw-pine-200) !important;
}

/* ─── 52. NOTE CARDS ─────────────────────────────────────────────────────── */
.note {
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 12px 0 !important;
}
.note time { color: var(--gw-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; }
.note p { color: var(--gw-text-primary) !important; }

/* ─── 53. DYNAMIC TAG / LOCKED BADGE ────────────────────────────────────── */
.dynamic-tag {
  background: var(--gw-teal-100) !important;
  color: var(--gw-teal-500) !important;
  border-radius: 4px !important;
}
.rev-locked-badge {
  background: var(--gw-bark-50) !important;
  color: var(--gw-text-muted) !important;
}

/* ─── 54. GW-SELECT ──────────────────────────────────────────────────────── */
.gw-select {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border-strong) !important;
  border-radius: var(--gw-r-sm) !important;
  color: var(--gw-text-primary) !important;
  font-size: 13px !important;
  padding: 7px 10px !important;
}
.gw-select:focus { border-color: var(--gw-border-focus) !important; box-shadow: 0 0 0 3px rgba(45,122,85,.12) !important; }

/* ─── 55. PERM TABLE ─────────────────────────────────────────────────────── */
.perm-table thead th { background: var(--gw-bg-surface) !important; color: var(--gw-text-muted) !important; }
.perm-table .perm-group-row td { background: var(--gw-bg-surface) !important; color: var(--gw-text-muted) !important; }
.perm-table tbody tr.perm-row:nth-child(even) { background: var(--gw-bg-surface) !important; }
.perm-table tbody tr.perm-row:hover { background: var(--gw-teal-100) !important; }
.perm-check input[type=checkbox] { accent-color: var(--gw-action) !important; }

/* ─── 56. SPECIFIC PANELS ────────────────────────────────────────────────── */
.gw-sky-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
}
.gw-sky-card-header {
  background: var(--gw-bg-surface) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 12px 16px !important;
}
.gw-admin-panel {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-xl) !important;
  box-shadow: var(--gw-shadow-card) !important;
}
.gw-admin-panel-header {
  background: var(--gw-bg-surface) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.gw-div-section {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-xl) !important;
  box-shadow: var(--gw-shadow-card) !important;
  margin-bottom: 20px !important;
}
.gw-div-section-header {
  background: var(--gw-bg-surface) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 14px 18px !important;
}

/* ─── 57. TABLE HEADERS (payout / data) ──────────────────────────────────── */
.gw-payout-card thead tr,
.gw-data-table thead tr {
  background: var(--gw-bg-surface) !important;
}
.gw-payout-card th,
.gw-data-table th {
  color: var(--gw-text-muted) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.gw-payout-card td,
.gw-data-table td {
  color: var(--gw-text-primary) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.gw-admin-panel table thead tr { background: var(--gw-bg-surface) !important; }
.gw-admin-panel table th {
  color: var(--gw-text-muted) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.gw-admin-panel table td {
  color: var(--gw-text-primary) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.gw-admin-panel table tr:hover { background: var(--gw-bg-surface) !important; }

/* ─── 58. MODAL DARK TEXT RESCUES ────────────────────────────────────────── */
.modal-box h2[style*="color:#E8E4D9"],
.modal-box h3[style*="color:#E8E4D9"],
.modal-box h2[style*="color:#EDEAE0"],
.modal-box h3[style*="color:#EDEAE0"] {
  color: var(--gw-text-primary) !important;
}
.gw-settings-panel [style*="color:#E8E4D9"],
.gw-settings-panel [style*="color:#EDEAE0"] {
  color: var(--gw-text-primary) !important;
}
.gw-audit-trail [style*="color:#E8E4D9"],
.gw-audit-trail [style*="color:#4A5947"] {
  color: var(--gw-text-primary) !important;
}
.gw-cal-row [style*="color:#E8E4D9"] { color: var(--gw-text-primary) !important; }

/* ─── 59. EMOJI SUPPRESSION ───────────────────────────────────────────────── */
.empty-state .empty-icon:not(:has(svg)) {
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* ─── 60. PIPELINE VIEW WRAPPER ──────────────────────────────────────────── */
.kanban-view-outer { overflow-x: auto !important; }

/* ─── 61. GLOBAL DARK-TEXT RESCUES ──────────────────────────────────────── */
/* Off-white text → ink */
[style*="color:#E8E4D9"]   { color: var(--gw-text-primary) !important; }
[style*="color: #E8E4D9"]  { color: var(--gw-text-primary) !important; }
[style*="color:#EDEAE0"]   { color: var(--gw-text-primary) !important; }
[style*="color: #EDEAE0"]  { color: var(--gw-text-primary) !important; }
[style*="color:#D6D1C4"]   { color: var(--gw-text-primary) !important; }
[style*="color: #D6D1C4"]  { color: var(--gw-text-primary) !important; }

/* Dark-muted text → text-muted */
[style*="color:#6F7E6A"]   { color: var(--gw-text-muted) !important; }
[style*="color: #6F7E6A"]  { color: var(--gw-text-muted) !important; }
[style*="color:#5C6B58"]   { color: var(--gw-text-muted) !important; }
[style*="color: #5C6B58"]  { color: var(--gw-text-muted) !important; }
[style*="color:#4A5947"]   { color: var(--gw-text-muted) !important; }
[style*="color: #4A5947"]  { color: var(--gw-text-muted) !important; }

/* Forest-green text → action */
[style*="color:#113931"]   { color: var(--gw-action) !important; }
[style*="color: #113931"]  { color: var(--gw-action) !important; }
[style*="color:#1A4740"]   { color: var(--gw-action) !important; }
[style*="color: #1A4740"]  { color: var(--gw-action) !important; }

/* Dark panel backgrounds → light surface */
[style*="background:#113931"]  { background: var(--gw-bg-surface) !important; }
[style*="background: #113931"] { background: var(--gw-bg-surface) !important; }
[style*="background:#1A4740"]  { background: var(--gw-bg-surface) !important; }
[style*="background: #1A4740"] { background: var(--gw-bg-surface) !important; }

/* ── Exceptions: keep intentional dark surfaces ─────────────────────────── */
.comms-board [style*="background:#113931"] { background: #113931 !important; }
.comms-board [style*="color:#E8E4D9"]      { color: #E8E4D9 !important; }
.sidebar [style*="background:#113931"]     { background: unset !important; }
/* White text on colored backgrounds — keep legible */
[style*="background:#2D7A55"] [style*="color:#fff"],
[style*="background:#2C5F57"] [style*="color:#fff"],
[style*="background:#8B6914"] [style*="color:#fff"],
[style*="background:#7A2E20"] [style*="color:#fff"] {
  color: #fff !important;
}

/* ─── 62. GLOBAL DARK-FALLBACK INTERCEPT ────────────────────────────────── */
[style*="color:#E8E4D9"]   { color: var(--gw-text-primary) !important; }
[style*="color:#EDEAE0"]   { color: var(--gw-text-primary) !important; }
[style*="color:#9a9a8a"]   { color: var(--gw-text-muted)  !important; }
[style*="color:#7a9080"]   { color: var(--gw-text-muted)  !important; }

[style*="background:#1a2820"]  { background: var(--gw-bg-surface) !important; }
[style*="background:#141f1a"]  { background: var(--gw-bg-surface-2) !important; }
[style*="background:#0f1a15"]  { background: var(--gw-bg-surface-2) !important; }
[style*="background:#1e2a22"]  { background: var(--gw-bg-surface) !important; }
[style*="background:#0f2419"]  { background: var(--gw-action) !important; }
[style*="background:#1A3A2A"]  { background: var(--gw-action) !important; }

[style*="border:1px solid #2a3a30"]      { border-color: var(--gw-border) !important; }
[style*="border-left:1px solid #2a3a30"] { border-color: var(--gw-border) !important; }

/* ─── 63. TIME TRACKER LIGHT-THEME RESCUE ───────────────────────────────── */
#tt-root {
  background: var(--gw-bg-page) !important;
  color: var(--gw-text-primary) !important;
}
#tt-main {
  background: transparent !important;
  color: var(--gw-text-primary) !important;
}
#tt-ring-panel {
  background: var(--gw-bg-surface-2) !important;
  border-left: 1px solid var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
}
#tt-ring-panel [style*="color:var(--gw-muted"] { color: var(--gw-text-muted) !important; }
#tt-main h1[style*="color:var(--gw-text"]      { color: var(--gw-text-primary) !important; }
#tt-main [style*="color:var(--gw-muted"]       { color: var(--gw-text-muted) !important; }
#tt-root [style*="background:var(--gw-surface-2"] {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border) !important;
}
#tt-root [style*="background:var(--gw-surface,#141f1a)"] {
  background: var(--gw-bg-surface-2) !important;
  color: var(--gw-text-primary) !important;
  box-shadow: 0 1px 4px rgba(28,23,18,.1) !important;
}
#tt-modal-overlay [style*="background:var(--gw-surface,"] {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
}
#tt-modal-overlay [style*="background:var(--gw-surface-2,"] {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
}
#tt-modal-overlay input,
#tt-modal-overlay select,
#tt-modal-overlay textarea {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
#tt-modal-overlay label,
#tt-modal-overlay [style*="color:var(--gw-muted"] {
  color: var(--gw-text-muted) !important;
}
#tt-modal-overlay [style*="color:var(--gw-text"]   { color: var(--gw-text-primary) !important; }
#tt-modal-overlay [style*="color:#E8E4D9"]          { color: var(--gw-text-primary) !important; }
#tt-modal-overlay [style*="background:var(--gw-surface-2,#1a2820)"][style*="color:var(--gw-muted"] {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
#tt-root [style*="background:var(--gw-surface-2,#1a2820)"] {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
}
#tt-root [style*="color:var(--gw-muted,#9a9a8a)"]  { color: var(--gw-text-muted) !important; }
#tt-root [style*="color:var(--gw-text,#E8E4D9)"]   { color: var(--gw-text-primary) !important; }
#tt-week-bar-track { background: var(--gw-bark-50) !important; }
#tt-root a[style*="background:var(--gw-surface-2,#1a2820)"],
#tt-root button[style*="background:var(--gw-surface-2,#1a2820)"] {
  background: var(--gw-bg-surface) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-primary) !important;
}

/* ─── 64. TOKEN BRIDGE — --gw-text alias ────────────────────────────────── */
/* Already defined in :root above; duplicated here as documentation anchor */

/* ─── 65. MOBILE RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 920px) {
  .view { padding: 16px !important; }
  .grid-2, .grid-3, .grid-4, .form-grid { grid-template-columns: 1fr !important; }
  .primary-btn, .secondary-btn, .danger-btn { min-height: 44px !important; }
  select, input[type=text], input[type=number], input[type=date], input[type=email], textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
  .search-wrap { flex: 1 !important; max-width: none !important; }
}

/* Off-canvas drawer — phone only (<=768px).
   This MUST stay at 768px to match the JS in app_premium.js (_gwMobileNav and the
   #menuBtn handler both branch on innerWidth <= 768). When this lived at 920px the
   sidebar was translated off-canvas and the hamburger was shown between 769-920px,
   but the click handler took the desktop branch (_toggleSidebarCollapse) — so the
   drawer could not be opened at all in that range. Above 768px the sidebar is docked
   and the brand-row chevron (#sidebarCloseBtn, shown at min-width:769px) toggles the
   collapsed icon rail instead. */
@media (max-width: 768px) {
  :root { --gw-sidebar-w: 264px; }
  .app-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
    z-index: 20 !important;
    box-shadow: var(--gw-shadow-lg) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .menu-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
}

@media print {
  .sidebar, .topbar, .toast { display: none !important; }
  .app-shell { display: block !important; }
  .view { max-width: none !important; padding: 0 !important; }
  .card { box-shadow: none !important; break-inside: avoid !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GROUNDWORK COLOR CONTRAST RULESET — v2.0
   Updated: 2026-07-04

   Single token namespace: --gw-*
   All --gds-* aliases resolve to --gw-* tokens above.

   RULE 1  Never hardcode dark-mode surface hex as fallback:
           #1a2820 #141f1a #0f1a15 #0f2419 #1A3A2A

   RULE 2  Never use --gw-text directly in new code. Prefer:
           Primary text   → var(--gw-text-primary)
           Muted text     → var(--gw-text-muted)
           Subtle text    → var(--gw-text-subtle)

   RULE 3  Never use #E8E4D9 as text color — it is off-white, invisible on
           light backgrounds. Use var(--gw-text-primary) instead.

   RULE 4  Status chips MUST use .status-chip.sold / .active / .overdue /
           .pending / .lost — never hardcode status colors.

   RULE 5  Dark-background text (sidebar, CTAs, dark modals):
           Primary → #FFFFFF
           Muted   → rgba(255,255,255,.65)
           Subtle  → rgba(255,255,255,.38)

   RULE 6  Semantic palette:
           Success   → var(--gw-success)   #2D7A55
           Warning   → var(--gw-warning)   #7A5C10
           Danger    → var(--gw-danger)    #7A2E20
           Info/link → var(--gw-info)      #4D8A86
           Brand CTA → var(--gw-action)    #2D7A55
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   RECORD PAGE SYSTEM  (rp-*)
   Three-column shell powering: Lead Detail · Opportunity Detail · Client Detail
   Future: Jobs · Employees · Assets

   Column anatomy:
     [LEFT 260px] RecordLeftPanel   — identity, contact meta, key facts, status
     [CENTER 1fr] RecordCenterWorkspace — tabbed content, forms, comms, notes
     [RIGHT 300px] RecordRightRail  — follow-up, quick actions, activity feed

   Breakpoints:
     ≥1280px  — 3-column
     900–1279 — 2-column (left panel drops into center as first card)
     <900px   — 1-column stack
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. SHELL & LAYOUT ──────────────────────────────────────────────────── */

.rp-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--gw-bg-page) !important;
}

/* Sticky command bar — always on top */
.rp-command {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 0 20px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 1px 0 var(--gw-border), var(--gw-shadow-xs) !important;
  transform: translateZ(0);
}
.rp-command-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  background: transparent;
  color: var(--gw-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.rp-command-back:hover {
  background: var(--gw-bg-subtle);
  color: var(--gw-text-primary);
  border-color: var(--gw-border-strong);
}
.rp-command-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.rp-command-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-pine-700), var(--gw-pine-500));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.rp-command-name {
  font-size: 13.5px;
  font-weight: 750;
  color: var(--gw-text-primary);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-command-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rp-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Command bar hidden until hero scrolls off */
.rp-command { opacity: 0; pointer-events: none; transition: opacity .18s; }
.rp-command.rp-command--visible { opacity: 1; pointer-events: auto; }

/* Stage tracker strip below command bar */
.rp-stage-strip {
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 0 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.rp-stage-strip::-webkit-scrollbar { display: none; }

/* 3-column body */
.rp-body {
  display: grid !important;
  grid-template-columns: 240px 1fr 280px !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
@media (max-width: 1199px) {
  .rp-body {
    grid-template-columns: 1fr 260px !important;
    grid-template-areas: "center rail" !important;
  }
  .rp-left { display: none !important; }
}
@media (max-width: 899px) {
  .rp-body {
    grid-template-columns: 1fr !important;
    grid-template-areas: "center" "rail" !important;
  }
  .rp-rail { order: 3; }
}

/* ── 2. LEFT PANEL ──────────────────────────────────────────────────────── */

.rp-left {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  scrollbar-width: auto !important;
  border-right: 1px solid var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Record identity hero in left panel */
.rp-left-hero {
  padding: 18px 16px 14px !important;
  border-bottom: 1px solid var(--gw-border) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.rp-left-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gw-pine-800), var(--gw-pine-600));
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  letter-spacing: .02em;
  box-shadow: 0 2px 10px rgba(30,84,72,.2);
}
.rp-left-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--gw-text-primary);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: 3px;
  word-break: break-word;
}
.rp-left-sub {
  font-size: 11.5px;
  color: var(--gw-text-muted);
  line-height: 1.4;
  word-break: break-word;
}
.rp-left-status {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Info sections in left panel */
.rp-left-section {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.rp-left-section:last-child { border-bottom: none !important; }
.rp-left-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gw-text-subtle);
  margin-bottom: 10px;
}
.rp-left-section-head svg { color: var(--gw-action); flex-shrink: 0; }

/* Key-value field rows in left panel */
.rp-left-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 8px;
}
.rp-left-field:last-child { margin-bottom: 0; }
.rp-left-field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-text-subtle);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rp-left-field-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-primary);
  line-height: 1.35;
  word-break: break-word;
}
.rp-left-field-value a {
  color: var(--gw-action);
  text-decoration: none;
}
.rp-left-field-value a:hover { text-decoration: underline; }
.rp-left-field-empty { color: var(--gw-text-subtle); font-style: italic; font-size: 12px; }

/* Stat micro-grid in left panel */
.rp-micro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.rp-micro-stat {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rp-micro-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--gw-text-primary);
  letter-spacing: -.03em;
  line-height: 1;
}
.rp-micro-stat-val.accent-green { color: var(--gw-action); }
.rp-micro-stat-val.accent-red   { color: var(--gw-danger); }
.rp-micro-stat-val.accent-amber { color: var(--gw-warning); }
.rp-micro-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gw-text-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── 3. CENTER WORKSPACE ────────────────────────────────────────────────── */

.rp-center {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Hero block — visible until scrolled; triggers command bar */
.rp-hero {
  padding: 28px 28px 0 !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.rp-hero-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gw-action);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.rp-hero-name {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 900;
  color: var(--gw-text-primary);
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: 0 0 4px;
}
.rp-hero-sub {
  font-size: 13px;
  color: var(--gw-text-muted);
  line-height: 1.4;
}
.rp-hero-sub-sep {
  display: inline-block;
  margin: 0 5px;
  color: var(--gw-border-strong);
}
.rp-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── 3a. STAGE TRACKER ──────────────────────────────────────────────────── */

.rp-stage-tracker {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 12px 28px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
}
.rp-stage-tracker::-webkit-scrollbar { display: none; }

.rp-stage-node {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex: 1 1 0;
  min-width: 0;
  /* last node gets no flex growth since it has no connector */
}
.rp-stage-node:last-child {
  flex: 0 0 auto;
}
.rp-stage-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 3px 4px;
  border-radius: var(--gw-r-sm);
  transition: background .12s;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
}
.rp-stage-btn:hover { background: var(--gw-bg-subtle); }
.rp-stage-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--gw-border-strong);
  background: var(--gw-bg-surface-2);
  display: grid;
  place-items: center;
  transition: all .18s;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.rp-stage-dot svg { color: var(--gw-text-subtle); }
.rp-stage-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--gw-text-subtle);
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  max-width: 100%;
  width: 100%;
}
.rp-stage-connector {
  flex: 1 1 0;
  min-width: 6px;
  height: 2px;
  background: var(--gw-border-strong);
  margin-top: 12px; /* align to dot center (24px dot / 2 = 12px) */
  align-self: flex-start;
}

/* State variants */
.rp-stage-node.is-done .rp-stage-dot {
  background: var(--gw-pine-800);
  border-color: var(--gw-pine-800);
}
.rp-stage-node.is-done .rp-stage-dot svg { color: #fff; }
.rp-stage-node.is-done .rp-stage-label { color: var(--gw-text-secondary); }
.rp-stage-node.is-done .rp-stage-connector { background: var(--gw-pine-800); }

.rp-stage-node.is-current .rp-stage-dot {
  background: var(--gw-action);
  border-color: var(--gw-action);
  box-shadow: 0 0 0 4px rgba(45,122,85,.18);
}
.rp-stage-node.is-current .rp-stage-dot svg { color: #fff; }
.rp-stage-node.is-current .rp-stage-label {
  color: var(--gw-action);
  font-weight: 800;
}

.rp-stage-node.is-sold .rp-stage-dot {
  background: linear-gradient(135deg, var(--gw-pine-700), var(--gw-pine-500));
  border-color: var(--gw-pine-700);
  box-shadow: 0 0 0 4px rgba(45,122,85,.2);
}
.rp-stage-node.is-lost .rp-stage-dot {
  background: var(--gw-clay-700, #7A2E20);
  border-color: var(--gw-clay-700, #7A2E20);
}
.rp-stage-node.is-lost .rp-stage-dot svg { color: #fff; }
.rp-stage-node.is-lost .rp-stage-label { color: var(--gw-danger); }

/* ── 3b. QUICK ACTION BAR ────────────────────────────────────────────────── */

.rp-qa-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 8px 16px !important;
  background: var(--gw-bg-surface) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  overflow-x: hidden !important;
  flex-shrink: 0 !important;
}

.rp-qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  font-size: 12px;
  font-weight: 650;
  color: var(--gw-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .13s;
  font-family: inherit;
}
.rp-qa-btn svg { color: var(--gw-action); flex-shrink: 0; }
.rp-qa-btn:hover {
  background: var(--gw-bg-subtle);
  border-color: var(--gw-action);
  color: var(--gw-text-primary);
}
.rp-qa-btn:hover svg { color: var(--gw-action); }
.rp-qa-btn:active { transform: scale(.98); }
.rp-qa-btn.is-loading { pointer-events: none; opacity: .6; }
.rp-qa-btn.is-success {
  background: var(--gw-success-bg);
  border-color: var(--gw-action);
  color: var(--gw-action);
}
/* Primary call-to-action QA button (Mark Sold, etc.) */
.rp-qa-btn--primary {
  background: var(--gw-action);
  border-color: var(--gw-action);
  color: #fff;
  font-weight: 700;
}
.rp-qa-btn--primary svg { color: #fff; }
.rp-qa-btn--primary:hover {
  background: var(--gw-action-hover);
  border-color: var(--gw-action-hover);
  color: #fff;
}
/* Danger button */
.rp-qa-btn--danger {
  background: var(--gw-danger-bg);
  border-color: var(--gw-danger);
  color: var(--gw-danger);
}
.rp-qa-btn--danger svg { color: var(--gw-danger); }

/* ── 3c. TAB BAR ─────────────────────────────────────────────────────────── */

.rp-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 24px !important;
  border-bottom: 1px solid var(--gw-border) !important;
  background: var(--gw-bg-surface-2) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
}
.rp-tabs::-webkit-scrollbar { display: none; }

.rp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .13s, border-color .13s;
  font-family: inherit;
  margin-bottom: -1px;
}
.rp-tab svg { flex-shrink: 0; }
.rp-tab:hover { color: var(--gw-text-primary); }
.rp-tab.is-active {
  color: var(--gw-action);
  border-bottom-color: var(--gw-action);
  font-weight: 750;
}
.rp-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--gw-bg-raised);
  color: var(--gw-text-muted);
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  letter-spacing: 0;
}
.rp-tab.is-active .rp-tab-badge {
  background: var(--gw-action);
  color: #fff;
}

/* ── 3d. TAB CONTENT PANELS ─────────────────────────────────────────────── */

.rp-tab-panels {
  flex: 1 !important;
  min-height: 0 !important;
}
.rp-tab-panel {
  display: none;
  padding: 24px 28px;
  flex-direction: column;
  gap: 20px;
}
.rp-tab-panel.is-active {
  display: flex;
}

/* ── 4. INFO SECTION CARD ────────────────────────────────────────────────── */

.rp-section-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
  overflow: hidden !important;
}
.rp-section-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
}
.rp-section-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-text-secondary);
}
.rp-section-card-title svg { color: var(--gw-action); flex-shrink: 0; }
.rp-section-card-actions { display: flex; align-items: center; gap: 6px; }
.rp-section-card-body { padding: 16px; }
.rp-section-card-body.no-pad { padding: 0; }

/* Form grid inside section cards */
.rp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.rp-form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.rp-form-grid.cols-1 { grid-template-columns: 1fr; }
.rp-form-grid .full  { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .rp-form-grid, .rp-form-grid.cols-3 { grid-template-columns: 1fr; }
}

.rp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-field-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gw-text-muted);
  letter-spacing: .025em;
}
.rp-field-label .req { color: var(--gw-danger); margin-left: 2px; }
.rp-field input,
.rp-field select,
.rp-field textarea {
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xs);
  background: var(--gw-bg-surface);
  color: var(--gw-text-primary);
  font-size: 13px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
  width: 100%;
  font-family: inherit;
}
.rp-field input:focus,
.rp-field select:focus,
.rp-field textarea:focus {
  border-color: var(--gw-border-focus);
  box-shadow: 0 0 0 3px rgba(45,122,85,.12);
}

/* 3-up card row (Stage / Follow-up / Guide) */
.rp-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .rp-card-row { grid-template-columns: 1fr; } }
.rp-card-row .rp-section-card .rp-section-card-body { padding: 14px 16px; }

/* ── 4a. QUALIFICATION NOTES ────────────────────────────────────────────── */

.rp-qual-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--gw-border);
}
.rp-qual-item:last-child { border-bottom: none; }
.rp-qual-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.rp-qual-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gw-text-primary);
}
.rp-qual-label svg { color: var(--gw-action); flex-shrink: 0; }
.rp-qual-content {
  font-size: 13px;
  color: var(--gw-text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.rp-qual-placeholder {
  font-size: 12.5px;
  color: var(--gw-text-subtle);
  font-style: italic;
  line-height: 1.5;
}
.rp-qual-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 650;
  color: var(--gw-text-muted);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xs);
  background: none;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
  flex-shrink: 0;
}
.rp-qual-edit-btn:hover {
  border-color: var(--gw-border-focus);
  color: var(--gw-action);
  background: var(--gw-bg-subtle);
}
.rp-qual-textarea {
  width: 100%;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--gw-text-primary);
  background: var(--gw-bg-surface);
  outline: none;
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
  transition: border-color .14s, box-shadow .14s;
  font-family: inherit;
  box-sizing: border-box;
  margin-top: 8px;
}
.rp-qual-textarea:focus {
  border-color: var(--gw-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(45,122,85,.12) !important;
}
.rp-qual-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ── 5. ACTIVITY TIMELINE ────────────────────────────────────────────────── */

.rp-timeline {
  display: flex;
  flex-direction: column;
}
.rp-timeline-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gw-border);
  position: relative;
  transition: background .12s;
}
.rp-timeline-item:last-child { border-bottom: none; }
.rp-timeline-item:hover { background: var(--gw-bg-subtle); }

/* Vertical connector line */
.rp-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 31px;
  top: 46px;
  bottom: 0;
  width: 2px;
  background: var(--gw-border);
}

.rp-timeline-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  border: 2px solid var(--gw-border);
  background: var(--gw-bg-surface-2);
}
.rp-timeline-dot.type-email   { background: rgba(26,71,64,.08); border-color: rgba(26,71,64,.2); }
.rp-timeline-dot.type-email svg { color: var(--gw-pine-800); }
.rp-timeline-dot.type-call    { background: rgba(45,122,85,.08); border-color: rgba(45,122,85,.2); }
.rp-timeline-dot.type-call svg { color: var(--gw-action); }
.rp-timeline-dot.type-sms     { background: rgba(77,138,134,.08); border-color: rgba(77,138,134,.2); }
.rp-timeline-dot.type-sms svg { color: var(--gw-teal-500, #4D8A86); }
.rp-timeline-dot.type-note    { background: rgba(139,105,20,.08); border-color: rgba(139,105,20,.2); }
.rp-timeline-dot.type-note svg { color: var(--gw-warning); }
.rp-timeline-dot.type-proposal { background: rgba(77,138,134,.08); border-color: rgba(77,138,134,.2); }
.rp-timeline-dot.type-proposal svg { color: var(--gw-teal-500, #4D8A86); }

.rp-timeline-content { flex: 1; min-width: 0; }
.rp-timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.rp-timeline-type {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.rp-timeline-dir {
  font-size: 11px;
  color: var(--gw-text-subtle);
  background: var(--gw-bg-raised);
  padding: 1px 6px;
  border-radius: 999px;
}
.rp-timeline-time {
  font-size: 11px;
  color: var(--gw-text-subtle);
  margin-left: auto;
  white-space: nowrap;
}
.rp-timeline-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-text-primary);
  margin-bottom: 3px;
}
.rp-timeline-body {
  font-size: 12.5px;
  color: var(--gw-text-muted);
  line-height: 1.5;
  word-break: break-word;
}
.rp-timeline-actor {
  font-size: 11px;
  color: var(--gw-text-subtle);
  margin-top: 5px;
}
.rp-timeline-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--gw-text-muted);
}
.rp-timeline-empty p { margin: 0 0 4px; font-weight: 600; color: var(--gw-text-secondary); }
.rp-timeline-empty small { font-size: 12.5px; color: var(--gw-text-subtle); }

/* ── 6. RIGHT RAIL ────────────────────────────────────────────────────────── */

.rp-rail {
  position: relative !important;
  top: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  border-left: 1px solid var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Rail card */
.rp-rail-card {
  border-bottom: 1px solid var(--gw-border) !important;
  background: transparent !important;
}
.rp-rail-card:last-child { border-bottom: none !important; }
.rp-rail-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-text-subtle);
  border-bottom: 1px solid var(--gw-border);
}
.rp-rail-card-head svg { color: var(--gw-action); flex-shrink: 0; }
.rp-rail-card-head-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.rp-rail-card-body { padding: 12px 14px; }
.rp-rail-card-body.no-pad { padding: 0; }
.rp-rail-card--alert {
  background: var(--gw-clay-100, #F9ECE8) !important;
  border-color: var(--gw-clay-300, #E8C0B0) !important;
}
.rp-rail-card--alert .rp-rail-card-head { border-color: var(--gw-clay-300, #E8C0B0); }

/* Follow-up date display */
.rp-rail-date {
  font-size: 20px;
  font-weight: 900;
  color: var(--gw-text-primary);
  letter-spacing: -.04em;
  margin-bottom: 4px;
  line-height: 1;
}
.rp-rail-date.is-overdue { color: var(--gw-danger); }
.rp-rail-overdue-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gw-clay-100, #F9ECE8);
  color: var(--gw-danger);
  border: 1px solid var(--gw-clay-300, #E8C0B0);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Rail form fields */
.rp-rail-field { margin-bottom: 10px; }
.rp-rail-field:last-child { margin-bottom: 0; }
.rp-rail-field label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-text-subtle);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.rp-rail-field input,
.rp-rail-field select,
.rp-rail-field textarea {
  width: 100%;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-xs);
  padding: 7px 10px;
  font-size: 12.5px;
  background: var(--gw-bg-surface-2);
  color: var(--gw-text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color .13s, box-shadow .13s;
  box-sizing: border-box;
}
.rp-rail-field input:focus,
.rp-rail-field select:focus,
.rp-rail-field textarea:focus {
  border-color: var(--gw-border-focus);
  box-shadow: 0 0 0 3px rgba(45,122,85,.1);
}
.rp-rail-field textarea { resize: vertical; min-height: 70px; }

/* Rail action button */
.rp-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--gw-text-secondary);
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
  margin-top: 8px;
}
.rp-rail-btn:hover {
  background: var(--gw-bg-subtle);
  border-color: var(--gw-border-strong);
  color: var(--gw-text-primary);
}
.rp-rail-btn--primary {
  background: var(--gw-action);
  border-color: var(--gw-action);
  color: #fff;
  font-weight: 700;
}
.rp-rail-btn--primary:hover {
  background: var(--gw-action-hover);
  border-color: var(--gw-action-hover);
  color: #fff;
}
.rp-rail-btn--link {
  background: none;
  border-color: transparent;
  color: var(--gw-action);
  font-weight: 650;
  padding-left: 0;
  padding-right: 0;
  justify-content: flex-start;
  width: auto;
}
.rp-rail-btn--link:hover { background: none; text-decoration: underline; }

/* Mini activity feed in rail */
.rp-rail-feed { display: flex; flex-direction: column; }
.rp-rail-feed-item {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
}
.rp-rail-feed-item:last-child { border-bottom: none; }
.rp-rail-feed-item:hover { background: var(--gw-bg-subtle); }
.rp-rail-feed-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--gw-bg-raised);
  border: 1px solid var(--gw-border);
}
.rp-rail-feed-body { flex: 1; min-width: 0; }
.rp-rail-feed-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gw-text-muted);
  margin-bottom: 1px;
}
.rp-rail-feed-preview {
  font-size: 12px;
  color: var(--gw-text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-rail-feed-time {
  font-size: 10.5px;
  color: var(--gw-text-subtle);
  margin-top: 2px;
}
.rp-rail-feed-empty {
  padding: 16px;
  font-size: 12.5px;
  color: var(--gw-text-subtle);
  font-style: italic;
}

/* Stat 2×2 grid in rail */
.rp-rail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
}
.rp-rail-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rp-rail-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-text-primary);
  letter-spacing: -.04em;
  line-height: 1;
}
.rp-rail-stat-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gw-text-subtle);
}

/* Last contact summary in rail */
.rp-rail-last-type  { font-size: 12px; font-weight: 700; color: var(--gw-text-primary); margin-bottom: 2px; }
.rp-rail-last-time  { font-size: 11px; color: var(--gw-text-muted); margin-bottom: 6px; }
.rp-rail-last-preview {
  font-size: 12px;
  color: var(--gw-text-muted);
  line-height: 1.5;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.rp-rail-empty {
  font-size: 12px;
  color: var(--gw-text-subtle);
  font-style: italic;
  padding: 4px 0 8px;
}

/* ── 7. SHARED BUTTON SYSTEM FOR RECORD PAGES ─────────────────────────────── */

.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--gw-r-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .13s;
  font-family: inherit;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rp-btn--primary {
  background: var(--gw-action);
  color: #fff;
  border-color: var(--gw-action);
}
.rp-btn--primary:hover {
  background: var(--gw-action-hover);
  border-color: var(--gw-action-hover);
  box-shadow: 0 4px 14px rgba(45,122,85,.28);
}
.rp-btn--secondary {
  background: var(--gw-bg-surface-2);
  color: var(--gw-text-secondary);
  border-color: var(--gw-border);
}
.rp-btn--secondary:hover {
  background: var(--gw-bg-subtle);
  border-color: var(--gw-border-strong);
  color: var(--gw-text-primary);
}
.rp-btn--sold {
  background: linear-gradient(135deg, var(--gw-pine-700), var(--gw-pine-500));
  color: #fff;
  border-color: var(--gw-pine-700);
  font-weight: 750;
}
.rp-btn--sold:hover {
  background: linear-gradient(135deg, var(--gw-pine-800), var(--gw-pine-600));
  box-shadow: 0 4px 14px rgba(30,84,72,.3);
}
.rp-btn--ghost {
  background: none;
  border-color: var(--gw-border);
  color: var(--gw-text-muted);
}
.rp-btn--ghost:hover {
  background: var(--gw-bg-subtle);
  color: var(--gw-text-primary);
}
.rp-btn svg { flex-shrink: 0; }

/* Overflow more-menu */
.rp-overflow-wrap { position: relative; }
.rp-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-shadow-lg);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
}
.rp-overflow-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
  text-align: left;
}
.rp-overflow-menu button:hover { background: var(--gw-bg-subtle); }
.rp-overflow-menu button.danger { color: var(--gw-danger); }
.rp-overflow-menu button.danger:hover { background: var(--gw-danger-bg); }
.rp-overflow-menu svg { color: var(--gw-text-muted); flex-shrink: 0; }

/* Sold badge */
.rp-sold-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--gw-pine-900), var(--gw-pine-700));
  color: #fff;
  border-radius: var(--gw-r-sm);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .03em;
}

/* Inline action button in cards */
.rp-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(45,122,85,.07);
  border: 1px solid rgba(45,122,85,.18);
  border-radius: var(--gw-r-xs);
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-action);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  font-family: inherit;
}
.rp-inline-btn:hover {
  background: rgba(45,122,85,.13);
  border-color: rgba(45,122,85,.28);
}

/* Toggle row (checkbox fields in admin panel) */
.rp-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gw-text-primary);
  padding: 10px 0;
  border-bottom: 1px solid var(--gw-border);
  cursor: pointer;
}
.rp-toggle-row:last-child { border-bottom: none; }
.rp-toggle-row input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--gw-action);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── 8. LEGACY ld-* TOKEN BRIDGES ────────────────────────────────────────── */
/* All ld-* rules in premium.css reference old tokens (--gw-line, --gw-pine,
   --gw-surface, etc.). These !important overrides correct them to the new
   --gw-* semantic system so we don't have to touch premium.css. */

.ld-body {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 0 !important;
  align-items: start !important;
  background: var(--gw-bg-page) !important;
}
@media (max-width: 1100px) { .ld-body { grid-template-columns: 1fr 270px !important; } }
@media (max-width: 900px)  { .ld-body { grid-template-columns: 1fr !important; } }

.ld-main { min-width: 0; display: flex; flex-direction: column; gap: 0; padding: 18px 22px; }
.ld-main > * { margin-bottom: 16px; }
.ld-main > *:last-child { margin-bottom: 0; }

/* Hero */
.ld-hero {
  padding: 16px 20px 14px !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.ld-hero-left {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ld-hero-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.ld-hero-actions {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  padding-top: 0 !important;
}
.ld-hero-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(135deg, var(--gw-pine-800), var(--gw-pine-600)) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
/* Override global h1 collision from premium.css */
.ld-hero .ld-name,
h1.ld-name {
  font-size: clamp(16px, 2vw, 22px) !important;
  letter-spacing: -.02em !important;
  line-height: 1.25 !important;
  margin: 0 0 3px !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  max-width: 100% !important;
}
.ld-name { color: var(--gw-text-primary) !important; }
.ld-eyebrow {
  color: var(--gw-text-subtle) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  display: block !important;
}
.ld-source-pill {
  background: var(--gw-bg-raised) !important;
  border: 1px solid var(--gw-border) !important;
  color: var(--gw-text-muted) !important;
}
.ld-subtitle {
  color: var(--gw-text-muted) !important;
  font-size: 12px !important;
  margin: 0 0 2px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}
.ld-subtitle-sep { color: var(--gw-border-strong) !important; }

/* Stat chips */
.ld-stat-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 7px !important;
  max-width: 100% !important;
}
.ld-stat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px 3px 6px !important;
  border-radius: var(--gw-r-sm, 6px) !important;
  font-size: 11.5px !important;
  cursor: default !important;
  white-space: nowrap !important;
  background: var(--gw-bg-surface) !important;
  border: 1px solid var(--gw-border) !important;
  line-height: 1 !important;
}
.ld-stat-chip:hover { border-color: var(--gw-border-strong) !important; }
.ld-stat-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.ld-stat-icon {
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: var(--gw-text-subtle) !important;
}
.ld-stat-label {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: var(--gw-text-subtle) !important;
  line-height: 1 !important;
}
.ld-stat-val {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--gw-text-primary) !important;
}
.ld-stat-chip--green .ld-stat-val { color: var(--gw-action) !important; }
.ld-stat-chip--green { border-color: var(--gw-pine-200) !important; }
.ld-stat-chip--red .ld-stat-val { color: var(--gw-danger) !important; }
.ld-stat-chip--red { border-color: var(--gw-clay-200, #E8C0B0) !important; background: var(--gw-clay-100, #F9ECE8) !important; }
.ld-stat-chip--amber .ld-stat-val { color: var(--gw-warning) !important; }
.ld-stat-chip--amber { border-color: var(--gw-sand-200, #E8D9AC) !important; }
.ld-stat-chip--blue .ld-stat-val { color: var(--gw-info) !important; }
.ld-stat-chip--blue { border-color: rgba(77,138,134,.25) !important; }

/* Tab bar */
.ld-tab-bar {
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  padding: 0 20px !important;
  margin-bottom: 0 !important;
}
.ld-tab { color: var(--gw-text-muted) !important; }
.ld-tab:hover { color: var(--gw-text-primary) !important; background: var(--gw-bg-subtle) !important; }
.ld-tab-active { color: var(--gw-action) !important; border-bottom-color: var(--gw-action) !important; }
.ld-tab-count { background: var(--gw-bg-raised) !important; color: var(--gw-text-muted) !important; }
.ld-tab-active .ld-tab-count { background: var(--gw-action) !important; color: #fff !important; }

/* Cards */
.ld-card {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-lg) !important;
  box-shadow: var(--gw-shadow-card) !important;
}
.ld-card-label { color: var(--gw-text-muted) !important; }

/* Form grid layout */
.ld-form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 20px !important;
}
.ld-form-grid-3 {
  grid-template-columns: 1fr 1fr 1fr !important;
}
.ld-form-grid .ld-full,
.ld-form-grid--full {
  grid-column: 1 / -1 !important;
}
@media (max-width: 640px) {
  .ld-form-grid,
  .ld-form-grid-3 { grid-template-columns: 1fr !important; }
}

/* Form */
.ld-form label span { color: var(--gw-text-muted) !important; }
.ld-form input, .ld-form select, .ld-form textarea {
  border-color: var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-primary) !important;
}
.ld-form input:focus, .ld-form select:focus, .ld-form textarea:focus {
  border-color: var(--gw-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(45,122,85,.12) !important;
}

/* Section head */
.ld-section-head {
  color: var(--gw-text-muted) !important;
  border-bottom-color: var(--gw-border) !important;
}
.ld-section-head svg { color: var(--gw-action) !important; }
.ld-section-sub { color: var(--gw-text-subtle) !important; }

/* Inline btn */
.ld-inline-btn {
  background: rgba(45,122,85,.07) !important;
  border-color: rgba(45,122,85,.18) !important;
  color: var(--gw-action) !important;
}
.ld-inline-btn:hover {
  background: rgba(45,122,85,.13) !important;
  border-color: rgba(45,122,85,.28) !important;
}

/* Qual notes */
.ld-qual-label { color: var(--gw-text-primary) !important; }
.ld-qual-label svg { color: var(--gw-action) !important; }
.ld-qual-content { color: var(--gw-text-secondary) !important; }
.ld-qual-empty { color: var(--gw-text-subtle) !important; }
.ld-qual-edit-btn {
  border-color: var(--gw-border) !important;
  color: var(--gw-text-muted) !important;
}
.ld-qual-edit-btn:hover {
  border-color: var(--gw-border-focus) !important;
  color: var(--gw-action) !important;
  background: var(--gw-bg-subtle) !important;
}
.ld-qual-save-btn { background: var(--gw-action) !important; }
.ld-qual-save-btn:hover { background: var(--gw-action-hover) !important; }
.ld-qual-cancel-btn {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-muted) !important;
}
.ld-qual-cancel-btn:hover { background: var(--gw-bg-subtle) !important; color: var(--gw-text-primary) !important; }
.ld-qual-textarea {
  border-color: var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-primary) !important;
}

/* Quick actions */
.ld-qa-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
@media (min-width: 1024px) { .ld-qa-grid { grid-template-columns: repeat(6, 1fr) !important; } }
@media (max-width: 700px) { .ld-qa-grid { grid-template-columns: 1fr 1fr !important; } }

.ld-qa-btn {
  background: var(--gw-bg-surface-2) !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
}
.ld-qa-btn:hover {
  border-color: var(--gw-action) !important;
  background: var(--gw-bg-subtle) !important;
  box-shadow: 0 4px 14px rgba(45,122,85,.1) !important;
}
.ld-qa-btn svg { color: var(--gw-action) !important; }
.ld-qa-title { color: var(--gw-text-primary) !important; }
.ld-qa-sub   { color: var(--gw-text-muted) !important; }
.ld-qa-btn.ld-qa-success { border-color: var(--gw-action) !important; background: var(--gw-success-bg) !important; }
.ld-qa-btn.ld-qa-success svg { color: var(--gw-action) !important; }

/* Toggle rows in admin panel */
.ld-toggle-row { color: var(--gw-text-primary) !important; border-bottom-color: var(--gw-border) !important; }
.ld-toggle-row input[type=checkbox] { accent-color: var(--gw-action) !important; }
.ld-locked-field { color: var(--gw-text-subtle) !important; }

/* Rail */
.ld-rail { padding: 0 !important; gap: 0 !important; }
.ld-rail-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--gw-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ld-rail-card--alert {
  background: var(--gw-clay-100, #F9ECE8) !important;
  border-color: var(--gw-clay-300, #E8C0B0) !important;
}
.ld-rail-card-head {
  border-bottom-color: var(--gw-border) !important;
  color: var(--gw-text-subtle) !important;
}
.ld-rail-follow-date { color: var(--gw-text-primary) !important; }
.ld-rail-follow-date.overdue { color: var(--gw-danger) !important; }
.ld-rail-overdue-badge { background: var(--gw-clay-100, #F9ECE8) !important; color: var(--gw-danger) !important; border-color: var(--gw-clay-300, #E8C0B0) !important; }
.ld-rail-btn {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-secondary) !important;
}
.ld-rail-btn:hover {
  background: var(--gw-bg-subtle) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
.ld-rail-empty { color: var(--gw-text-subtle) !important; }
.ld-rail-last-type    { color: var(--gw-text-primary) !important; }
.ld-rail-last-time    { color: var(--gw-text-muted) !important; }
.ld-rail-last-preview { color: var(--gw-text-muted) !important; }
.ld-rail-stat span  { color: var(--gw-text-primary) !important; }
.ld-rail-stat label { color: var(--gw-text-subtle) !important; }

/* Rail activity */
.rail-activity-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
}
.rail-activity-item:last-child { border-bottom: none; }
.rail-activity-item:hover { background: var(--gw-bg-subtle); }
.rail-act-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--gw-bg-raised);
  border: 1px solid var(--gw-border);
}
.rail-act-body { flex: 1; min-width: 0; }
.rail-act-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gw-text-muted);
  margin-bottom: 1px;
}
.rail-act-dir  { font-size: 10px; color: var(--gw-text-subtle); }
.rail-act-preview {
  font-size: 11.5px;
  color: var(--gw-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-act-time { font-size: 10.5px; color: var(--gw-text-subtle); margin-top: 2px; }
.rail-empty { padding: 14px; font-size: 12px; color: var(--gw-text-subtle); font-style: italic; }

/* Activity items in main feed */
.ld-activity-item { border-bottom-color: var(--gw-border) !important; }
.ld-act-dot {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
}
.ld-act-type { /* color set inline per type */ }
.ld-act-dir  { color: var(--gw-text-subtle) !important; }
.ld-act-time { color: var(--gw-text-subtle) !important; }
.ld-act-subject { color: var(--gw-text-primary) !important; }
.ld-act-body { color: var(--gw-text-muted) !important; }
.ld-act-actor { color: var(--gw-text-subtle) !important; }

/* Notes textarea */
#newNote {
  border: 1px solid var(--gw-border) !important;
  border-radius: var(--gw-r-md) !important;
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-primary) !important;
  font-size: 13px !important;
}
#newNote:focus {
  border-color: var(--gw-border-focus) !important;
  box-shadow: 0 0 0 3px rgba(45,122,85,.1) !important;
  outline: none !important;
}

/* Sticky header */
.ld-sticky-header {
  background: var(--gw-bg-surface-2) !important;
  border-bottom-color: var(--gw-border) !important;
  box-shadow: var(--gw-shadow-sm) !important;
}
.ld-hero-avatar, .ld-sticky-avatar {
  background: linear-gradient(135deg, var(--gw-pine-800), var(--gw-pine-600)) !important;
  color: #fff !important;
}
.ld-sticky-name { color: var(--gw-text-primary) !important; }

/* Back button */
.ld-back-btn {
  border-color: var(--gw-border) !important;
  color: var(--gw-text-muted) !important;
}
.ld-back-btn:hover { background: var(--gw-bg-subtle) !important; color: var(--gw-text-primary) !important; }

/* Save/action buttons in hero */
.ld-btn-primary,
.ld-btn-sold,
.ld-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border-radius: var(--gw-r-md, 8px) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .12s, border-color .12s !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}
.ld-btn-primary {
  background: var(--gw-action) !important;
  border-color: var(--gw-action) !important;
  color: #fff !important;
}
.ld-btn-primary:hover {
  background: var(--gw-action-hover) !important;
  border-color: var(--gw-action-hover) !important;
}
.ld-btn-sold {
  background: linear-gradient(135deg, var(--gw-pine-700), var(--gw-pine-500)) !important;
  color: #fff !important;
  border-color: var(--gw-pine-700) !important;
}
.ld-btn-sold:hover {
  background: linear-gradient(135deg, var(--gw-pine-800), var(--gw-pine-600)) !important;
  border-color: var(--gw-pine-800) !important;
}
.ld-btn-secondary {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
  color: var(--gw-text-secondary) !important;
}
.ld-btn-secondary:hover {
  background: var(--gw-bg-subtle) !important;
  border-color: var(--gw-border-strong) !important;
  color: var(--gw-text-primary) !important;
}
.ld-action-save {
  background: var(--gw-action) !important;
  border-color: var(--gw-action) !important;
  color: #fff !important;
}
.ld-sold-badge,
.ld-sold-badge-large {
  background: linear-gradient(135deg, var(--gw-pine-900), var(--gw-pine-700)) !important;
  color: #fff !important;
}

/* Overflow menu */
.ld-overflow-menu {
  background: var(--gw-bg-surface-2) !important;
  border-color: var(--gw-border) !important;
  box-shadow: var(--gw-shadow-lg) !important;
}
.ld-overflow-menu button { color: var(--gw-text-primary) !important; }
.ld-overflow-menu button:hover { background: var(--gw-bg-subtle) !important; color: var(--gw-action) !important; }
.ld-overflow-menu button.danger { color: var(--gw-danger) !important; }
.ld-overflow-menu button.danger:hover { background: var(--gw-danger-bg) !important; color: var(--gw-danger) !important; }

/* Checklist progress bar */
.ld-cl-bar-track { background: var(--gw-border-strong) !important; }
.ld-cl-bar-fill  { background: linear-gradient(90deg, var(--gw-pine-700), var(--gw-pine-400)) !important; }
.ld-cl-count     { color: var(--gw-text-muted) !important; }
.ld-cl-progress  { background: var(--gw-bg-surface) !important; border-bottom-color: var(--gw-border) !important; }

/* Card row */
.ld-card-sm { padding: 16px !important; }
.ld-card-sm select, .ld-card-sm input {
  border-color: var(--gw-border) !important;
  background: var(--gw-bg-surface) !important;
  color: var(--gw-text-primary) !important;
}

/* ── 9. STAGE TRACKER (standalone reusable) ───────────────────────────────── */
/* Used in both the new rp-* shell and legacy ld-* detail page */

.rp-stage-track-wrap {
  padding: 10px 16px !important;
  background: var(--gw-bg-surface-2) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  overflow-x: hidden !important;
}

.rp-stage-track {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}

/* ── 9b. HERO RESPONSIVE ADJUSTMENTS ─────────────────────────────────────── */
/* When the rp-center column is narrow (hide left → center gets full - rail) */
/* or when the hero has limited horizontal room, stack actions below info */
@media (max-width: 900px) {
  .ld-hero {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ld-hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
}

/* When viewport is between 1000–1279px:
   rp-left is hidden, center gets ~(viewport - nav - rail) space
   hero still needs to show buttons inline, but smaller */
@media (min-width: 901px) and (max-width: 1279px) {
  .ld-hero {
    padding: 14px 16px 12px !important;
    gap: 10px !important;
  }
  .ld-btn-primary,
  .ld-btn-sold {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  .ld-hero-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 13px !important;
  }
  .ld-hero .ld-name,
  h1.ld-name {
    font-size: 15px !important;
  }
}

/* ── 10. PRINT OVERRIDES ─────────────────────────────────────────────────── */
@media print {
  .rp-command, .rp-qa-bar, .rp-rail,
  .ld-hero-actions, .ld-tab-bar, .ld-rail,
  .ld-sticky-header, .ld-overflow-wrap { display: none !important; }
  .rp-body, .ld-body { grid-template-columns: 1fr !important; }
  .rp-left { position: static !important; max-height: none !important; display: block !important; }
}

/* ─── END RECORD PAGE SYSTEM ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 5 — CUSTOMER + MONEY LOOP
   Namespaces: fin-sum-* · pay-tl-* · comm-tl-* · est-* · inv-* · stmt-* · comms-* · auto-*
   All colors via --gw-* semantic tokens. No hardcoded values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FINANCIAL SUMMARY WIDGET (fin-sum-*) ─────────────────────────────────── */
.fin-sum-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.fin-sum-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.fin-sum-title-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--gw-action);
  text-decoration: none;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.fin-sum-title-link:hover { text-decoration: underline; }
.fin-sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.fin-sum-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fin-sum-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--gw-text);
  line-height: 1.1;
}
.fin-sum-stat-val--positive { color: var(--gw-pine-600); }
.fin-sum-stat-val--warning  { color: var(--gw-sand-600); }
.fin-sum-stat-val--danger   { color: var(--gw-clay-600); }
.fin-sum-stat-label {
  font-size: 10px;
  color: var(--gw-text-muted);
  line-height: 1.3;
}
.fin-sum-progress-wrap {
  margin-top: 12px;
}
.fin-sum-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-bottom: 4px;
}
.fin-sum-progress-track {
  height: 5px;
  background: var(--gw-surface-alt, var(--gw-bark-100));
  border-radius: 99px;
  overflow: hidden;
}
.fin-sum-progress-fill {
  height: 100%;
  background: var(--gw-pine-500);
  border-radius: 99px;
  transition: width .3s ease;
}
.fin-sum-progress-fill--warn { background: var(--gw-sand-400); }
.fin-sum-progress-fill--danger { background: var(--gw-clay-400); }
.fin-sum-divider {
  border: none;
  border-top: 1px solid var(--gw-border);
  margin: 10px 0;
}
.fin-sum-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.fin-sum-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.fin-sum-badge--pending  { background: var(--gw-sand-100);  color: var(--gw-sand-700); }
.fin-sum-badge--approved { background: var(--gw-pine-100);  color: var(--gw-pine-700); }
.fin-sum-badge--draft    { background: var(--gw-bark-100);  color: var(--gw-bark-600); }
.fin-sum-badge--invoiced { background: var(--gw-teal-100);  color: var(--gw-teal-700); }
.fin-sum-badge--paid     { background: var(--gw-pine-100);  color: var(--gw-pine-600); }
.fin-sum-badge--overdue  { background: var(--gw-clay-100);  color: var(--gw-clay-700); }

/* ── PAYMENT TIMELINE (pay-tl-*) ─────────────────────────────────────────── */
.pay-tl-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pay-tl-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  padding-bottom: 14px;
}
.pay-tl-row:last-child { padding-bottom: 0; }
.pay-tl-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 20px;
}
.pay-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gw-border);
  background: var(--gw-surface);
  flex-shrink: 0;
  margin-top: 2px;
  z-index: 1;
}
.pay-tl-dot--done    { background: var(--gw-pine-500);  border-color: var(--gw-pine-500); }
.pay-tl-dot--active  { background: var(--gw-action);    border-color: var(--gw-action); box-shadow: 0 0 0 3px rgba(45,120,85,.15); }
.pay-tl-dot--pending { background: var(--gw-surface);   border-color: var(--gw-bark-300); }
.pay-tl-dot--overdue { background: var(--gw-clay-400);  border-color: var(--gw-clay-400); }
.pay-tl-line {
  width: 1px;
  flex: 1;
  min-height: 14px;
  background: var(--gw-border);
  margin-top: 2px;
}
.pay-tl-content {
  flex: 1;
  min-width: 0;
}
.pay-tl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.pay-tl-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-text);
  line-height: 1.2;
}
.pay-tl-amount {
  font-size: 12px;
  font-weight: 800;
  color: var(--gw-action);
  white-space: nowrap;
}
.pay-tl-meta {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-top: 1px;
}
.pay-tl-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  margin-top: 3px;
}
.pay-tl-badge--paid    { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.pay-tl-badge--pending { background: var(--gw-sand-100); color: var(--gw-sand-700); }
.pay-tl-badge--overdue { background: var(--gw-clay-100); color: var(--gw-clay-700); }
.pay-tl-badge--draft   { background: var(--gw-bark-100); color: var(--gw-bark-600); }

/* ── COMMUNICATIONS TIMELINE (comm-tl-*) ─────────────────────────────────── */
.comm-tl-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.comm-tl-day-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gw-text-muted);
  padding: 14px 0 6px;
  border-top: 1px solid var(--gw-border);
}
.comm-tl-day-label:first-child { border-top: none; padding-top: 0; }
.comm-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gw-border-subtle, rgba(0,0,0,.05));
  cursor: pointer;
  transition: background .12s;
}
.comm-tl-item:hover { background: var(--gw-surface-hover, var(--gw-bark-25)); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.comm-tl-item:last-child { border-bottom: none; }
.comm-tl-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--gw-bark-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comm-tl-icon--sms      { background: var(--gw-teal-100); }
.comm-tl-icon--email    { background: var(--gw-pine-100); }
.comm-tl-icon--call     { background: var(--gw-sand-100); }
.comm-tl-icon--note     { background: var(--gw-bark-100); }
.comm-tl-icon--proposal { background: var(--gw-clay-100); }
.comm-tl-body { flex: 1; min-width: 0; }
.comm-tl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-bottom: 2px;
}
.comm-tl-type {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: .06em;
  color: var(--gw-text-subtle);
}
.comm-tl-dir {
  font-size: 9px;
  color: var(--gw-text-subtle);
}
.comm-tl-preview {
  font-size: 12px;
  color: var(--gw-text);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comm-tl-time {
  font-size: 10px;
  color: var(--gw-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── ESTIMATE DETAIL SCREEN (est-*) ──────────────────────────────────────── */
.est-header-band {
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-border);
  padding: 20px 24px 16px;
}
.est-number {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
  margin-bottom: 4px;
}
.est-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gw-text);
  margin: 0 0 6px;
}
.est-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 12px;
  color: var(--gw-text-muted);
}
.est-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.est-badge--draft    { background: var(--gw-bark-100); color: var(--gw-bark-700); }
.est-badge--sent     { background: var(--gw-sand-100); color: var(--gw-sand-700); }
.est-badge--approved { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.est-badge--declined { background: var(--gw-clay-100); color: var(--gw-clay-700); }
.est-badge--expired  { background: var(--gw-bark-100); color: var(--gw-bark-600); }
.est-body {
  padding: 20px 24px;
  max-width: 860px;
}
.est-section-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gw-border);
}
.est-section-head:first-child { margin-top: 0; }
.est-line-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.est-line-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--gw-border);
}
.est-line-table th:last-child,
.est-line-table td:last-child { text-align: right; }
.est-line-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
  vertical-align: top;
}
.est-line-table tbody tr:hover td { background: var(--gw-bark-25); }
.est-line-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--gw-border);
  border-bottom: none;
}
.est-line-table tfoot tr:last-child td {
  font-size: 15px;
  font-weight: 800;
  color: var(--gw-action);
}
.est-line-desc { font-size: 11px; color: var(--gw-text-muted); margin-top: 2px; }
.est-totals-col {
  margin-left: auto;
  max-width: 280px;
  margin-top: 16px;
}
.est-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
}
.est-total-row:last-child {
  border-bottom: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--gw-action);
  padding-top: 10px;
}
.est-notes-area {
  background: var(--gw-bark-25);
  border: 1px solid var(--gw-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--gw-text);
  line-height: 1.6;
  white-space: pre-wrap;
  min-height: 80px;
}
.est-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gw-border);
}
.est-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.est-btn:hover { opacity: .88; }
.est-btn--primary   { background: var(--gw-action); color: #fff; }
.est-btn--secondary { background: var(--gw-surface); color: var(--gw-text); border: 1px solid var(--gw-border); }
.est-btn--approve   { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.est-btn--decline   { background: var(--gw-clay-100); color: var(--gw-clay-700); }
.est-btn--send      { background: var(--gw-teal-100); color: var(--gw-teal-700); }

/* ── INVOICE DETAIL SCREEN (inv-*) ───────────────────────────────────────── */
.inv-header-band {
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-border);
  padding: 20px 24px 16px;
}
.inv-number {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
  margin-bottom: 4px;
}
.inv-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gw-text);
  margin: 0 0 6px;
}
.inv-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 12px;
  color: var(--gw-text-muted);
}
.inv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.inv-badge--draft   { background: var(--gw-bark-100); color: var(--gw-bark-700); }
.inv-badge--sent    { background: var(--gw-sand-100); color: var(--gw-sand-700); }
.inv-badge--partial { background: var(--gw-teal-100); color: var(--gw-teal-700); }
.inv-badge--paid    { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.inv-badge--overdue { background: var(--gw-clay-100); color: var(--gw-clay-700); }
.inv-body { padding: 20px 24px; max-width: 860px; }
.inv-section-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gw-border);
}
.inv-section-head:first-child { margin-top: 0; }
.inv-parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.inv-party-block {
  background: var(--gw-bark-25);
  border: 1px solid var(--gw-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.inv-party-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  margin-bottom: 6px;
}
.inv-party-name { font-size: 14px; font-weight: 700; color: var(--gw-text); }
.inv-party-detail { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; }
.inv-line-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.inv-line-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--gw-border);
}
.inv-line-table th:last-child,
.inv-line-table td:last-child { text-align: right; }
.inv-line-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
  vertical-align: top;
}
.inv-line-table tbody tr:hover td { background: var(--gw-bark-25); }
.inv-totals-col { margin-left: auto; max-width: 280px; margin-top: 16px; }
.inv-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
}
.inv-total-row--grand {
  font-size: 16px;
  font-weight: 800;
  color: var(--gw-action);
  border-bottom: none;
  padding-top: 10px;
}
.inv-total-row--balance {
  font-size: 15px;
  font-weight: 800;
  border-bottom: none;
  padding-top: 8px;
}
.inv-total-row--balance.is-paid { color: var(--gw-pine-600); }
.inv-total-row--balance.is-due  { color: var(--gw-clay-600); }
.inv-payment-history {
  margin-top: 16px;
}
.inv-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--gw-pine-50);
  border: 1px solid var(--gw-pine-200);
  border-radius: 7px;
  margin-bottom: 6px;
  font-size: 12px;
}
.inv-payment-row-left { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--gw-text); }
.inv-payment-row-amount { font-weight: 800; color: var(--gw-pine-600); }
.inv-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--gw-border);
}
.inv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.inv-btn:hover { opacity: .88; }
.inv-btn--primary   { background: var(--gw-action); color: #fff; }
.inv-btn--secondary { background: var(--gw-surface); color: var(--gw-text); border: 1px solid var(--gw-border); }
.inv-btn--record    { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.inv-btn--send      { background: var(--gw-teal-100); color: var(--gw-teal-700); }

/* ── Invoice mobile overrides ≤768px ─────────────────────────────────────── */
@media (max-width: 768px) {
  .inv-parties-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .inv-body { padding: 14px 12px !important; }
  .inv-header-band { padding: 12px 12px 10px !important; }
  .inv-title { font-size: 17px !important; margin-bottom: 4px !important; }
  .inv-meta-row { gap: 4px 10px !important; font-size: 11px !important; }
  .inv-line-table { font-size: 12px !important; }
  .inv-line-table th, .inv-line-table td { padding: 7px 6px !important; }
  .inv-totals-col { max-width: 100% !important; margin-left: 0 !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--gw-border) !important; }
  .inv-action-bar { gap: 6px !important; margin-top: 14px !important; padding-top: 12px !important; }
  .inv-btn { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ── ACCOUNT STATEMENT (stmt-*) ──────────────────────────────────────────── */
.stmt-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}
.stmt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.stmt-client-info {}
.stmt-client-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-text);
  margin-bottom: 4px;
}
.stmt-client-meta {
  font-size: 12px;
  color: var(--gw-text-muted);
}
.stmt-summary-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.stmt-sum-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 120px;
  text-align: center;
}
.stmt-sum-card-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--gw-action);
  line-height: 1;
}
.stmt-sum-card-val--paid   { color: var(--gw-pine-600); }
.stmt-sum-card-val--due    { color: var(--gw-clay-600); }
.stmt-sum-card-label {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.stmt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.stmt-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-border);
  background: var(--gw-surface);
  color: var(--gw-text-muted);
  transition: all .15s;
}
.stmt-filter-btn:hover,
.stmt-filter-btn.active {
  background: var(--gw-action);
  border-color: var(--gw-action);
  color: #fff;
}
.stmt-table-wrap {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  overflow: hidden;
}
.stmt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.stmt-table thead th {
  background: var(--gw-bark-25);
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  border-bottom: 1px solid var(--gw-border);
  white-space: nowrap;
}
.stmt-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
  vertical-align: middle;
}
.stmt-table tbody tr:last-child td { border-bottom: none; }
.stmt-table tbody tr:hover td { background: var(--gw-bark-25); }
.stmt-table .stmt-doc-link {
  font-weight: 700;
  color: var(--gw-action);
  cursor: pointer;
  text-decoration: none;
}
.stmt-table .stmt-doc-link:hover { text-decoration: underline; }
.stmt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.stmt-badge--draft    { background: var(--gw-bark-100); color: var(--gw-bark-700); }
.stmt-badge--sent     { background: var(--gw-sand-100); color: var(--gw-sand-700); }
.stmt-badge--approved { background: var(--gw-pine-100); color: var(--gw-pine-700); }
.stmt-badge--partial  { background: var(--gw-teal-100); color: var(--gw-teal-700); }
.stmt-badge--paid     { background: var(--gw-pine-100); color: var(--gw-pine-600); }
.stmt-badge--overdue  { background: var(--gw-clay-100); color: var(--gw-clay-700); }
.stmt-badge--invoiced { background: var(--gw-teal-100); color: var(--gw-teal-700); }
.stmt-tfoot-row td {
  font-weight: 700;
  background: var(--gw-bark-25);
  border-top: 2px solid var(--gw-border);
}

/* ── COMMUNICATIONS BOARD (comms-*) ──────────────────────────────────────── */
.comms-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}
.comms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.comms-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gw-text);
}
.comms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.comms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.comms-btn:hover { opacity: .88; }
.comms-btn--primary   { background: var(--gw-action); color: #fff; }
.comms-btn--secondary { background: var(--gw-surface); color: var(--gw-text); border: 1px solid var(--gw-border); }
.comms-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.comms-search {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  padding: 7px 12px;
  border: 1px solid var(--gw-border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--gw-surface);
  color: var(--gw-text);
  outline: none;
}
.comms-search:focus { border-color: var(--gw-action); box-shadow: 0 0 0 2px rgba(45,120,85,.1); }
.comms-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-border);
  background: var(--gw-surface);
  color: var(--gw-text-muted);
  transition: all .15s;
}
.comms-type-tab:hover,
.comms-type-tab.active {
  background: var(--gw-action);
  border-color: var(--gw-action);
  color: #fff;
}
.comms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .comms-grid { grid-template-columns: 1fr; } }
.comms-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.comms-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  border-color: var(--gw-action);
}
.comms-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.comms-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--gw-bark-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comms-card-icon--sms      { background: var(--gw-teal-100); }
.comms-card-icon--email    { background: var(--gw-pine-100); }
.comms-card-icon--call     { background: var(--gw-sand-100); }
.comms-card-icon--proposal { background: var(--gw-clay-100); }
.comms-card-meta { flex: 1; min-width: 0; }
.comms-card-client {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comms-card-sub {
  font-size: 11px;
  color: var(--gw-text-muted);
  margin-top: 1px;
}
.comms-card-time {
  font-size: 10px;
  color: var(--gw-text-subtle);
  white-space: nowrap;
}
.comms-card-preview {
  font-size: 12px;
  color: var(--gw-text-muted);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comms-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--gw-border);
}
.comms-card-type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  background: var(--gw-bark-100);
  padding: 2px 7px;
  border-radius: 99px;
}
.comms-card-dir {
  font-size: 10px;
  color: var(--gw-text-subtle);
}
.comms-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 48px 24px;
  color: var(--gw-text-subtle);
  font-size: 13px;
}
.comms-empty-icon {
  width: 40px;
  height: 40px;
  background: var(--gw-bark-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

/* ── AUTOMATION MANAGER (auto-*) ─────────────────────────────────────────── */
.auto-shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
}
.auto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.auto-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gw-text);
}
.auto-title-sub {
  font-size: 13px;
  color: var(--gw-text-muted);
  margin-top: 2px;
}
.auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.auto-btn:hover { opacity: .88; }
.auto-btn--primary   { background: var(--gw-action); color: #fff; }
.auto-btn--secondary { background: var(--gw-surface); color: var(--gw-text); border: 1px solid var(--gw-border); }
.auto-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gw-border);
  padding-bottom: 0;
}
.auto-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-text-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.auto-tab:hover { color: var(--gw-text); }
.auto-tab.active { color: var(--gw-action); border-bottom-color: var(--gw-action); font-weight: 700; }
.auto-rule-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow .15s;
}
.auto-rule-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.auto-rule-card--active { border-left: 3px solid var(--gw-pine-500); }
.auto-rule-card--inactive { border-left: 3px solid var(--gw-bark-300); opacity: .72; }
.auto-rule-toggle {
  flex-shrink: 0;
  margin-top: 2px;
}
.auto-toggle-wrap {
  position: relative;
  width: 32px;
  height: 18px;
  cursor: pointer;
}
.auto-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--gw-bark-200);
  transition: background .2s;
}
.auto-toggle-track.on { background: var(--gw-pine-500); }
.auto-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: left .2s;
}
.auto-toggle-track.on .auto-toggle-knob { left: 16px; }
.auto-rule-body { flex: 1; min-width: 0; }
.auto-rule-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gw-text);
  margin-bottom: 2px;
}
.auto-rule-desc {
  font-size: 12px;
  color: var(--gw-text-muted);
  line-height: 1.45;
  margin-bottom: 8px;
}
.auto-rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.auto-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: var(--gw-bark-100);
  color: var(--gw-text-muted);
}
.auto-rule-chip--trigger { background: var(--gw-sand-100); color: var(--gw-sand-700); }
.auto-rule-chip--action  { background: var(--gw-teal-100); color: var(--gw-teal-700); }
.auto-rule-chip--delay   { background: var(--gw-bark-100); color: var(--gw-bark-600); }
.auto-rule-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.auto-rule-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-border);
  background: var(--gw-surface);
  color: var(--gw-text-muted);
  transition: all .15s;
}
.auto-rule-btn:hover { background: var(--gw-bark-50); color: var(--gw-text); }
.auto-empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--gw-text-subtle);
}
.auto-empty-icon {
  width: 48px;
  height: 48px;
  background: var(--gw-bark-100);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.auto-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gw-text);
  margin-bottom: 6px;
}
.auto-empty-desc {
  font-size: 13px;
  color: var(--gw-text-muted);
  max-width: 360px;
  margin: 0 auto 18px;
  line-height: 1.6;
}

/* ── FINANCIAL HUB LANDING PAGE ──────────────────────────────────────────── */
.fhub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}
.fhub-header {
  margin-bottom: 24px;
}
.fhub-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-text);
  margin-bottom: 4px;
}
.fhub-subtitle {
  font-size: 13px;
  color: var(--gw-text-muted);
}
.fhub-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 860px) { .fhub-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fhub-kpi-row { grid-template-columns: 1fr; } }
.fhub-kpi-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 16px 18px;
}
.fhub-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
  margin-bottom: 8px;
}
.fhub-kpi-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--gw-action);
  line-height: 1;
  margin-bottom: 4px;
}
.fhub-kpi-val--positive { color: var(--gw-pine-600); }
.fhub-kpi-val--warning  { color: var(--gw-sand-600); }
.fhub-kpi-val--danger   { color: var(--gw-clay-600); }
.fhub-kpi-delta {
  font-size: 11px;
  color: var(--gw-text-muted);
}
.fhub-kpi-delta--up   { color: var(--gw-pine-600); }
.fhub-kpi-delta--down { color: var(--gw-clay-600); }
.fhub-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 720px) { .fhub-section-grid { grid-template-columns: 1fr; } }
.fhub-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  overflow: hidden;
}
.fhub-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bark-25);
}
.fhub-panel-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
}
.fhub-panel-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-action);
  cursor: pointer;
  text-decoration: none;
}
.fhub-panel-link:hover { text-decoration: underline; }
.fhub-panel-body { padding: 12px 16px; }
.fhub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.fhub-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gw-text-muted);
  padding: 6px 8px;
  border-bottom: 1px solid var(--gw-border);
}
.fhub-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text);
  vertical-align: middle;
}
.fhub-table tbody tr:last-child td { border-bottom: none; }
.fhub-table tbody tr:hover td { background: var(--gw-bark-25); cursor: pointer; }
.fhub-table .fhub-link {
  font-weight: 700;
  color: var(--gw-action);
  cursor: pointer;
}
.fhub-table .fhub-link:hover { text-decoration: underline; }
.fhub-quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 620px) { .fhub-quick-nav { grid-template-columns: repeat(2, 1fr); } }
.fhub-nav-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  text-align: center;
  transition: box-shadow .15s, border-color .15s;
}
.fhub-nav-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,.08);
  border-color: var(--gw-action);
}
.fhub-nav-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gw-pine-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}
.fhub-nav-card-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-text);
}
.fhub-nav-card-sub {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-top: 2px;
}

/* ─── END PHASE 5 CSS ────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 6 — OPERATIONS HUB
   Shared patterns: ops-sum-* · ops-assign-* · ops-ready-* · ops-asset-status-*
                    ops-inv-status-* · ops-tl-*
   Screen namespaces: ops-hub-* · sched-* · disp-* · recur-* · wo-*
                      asset-* · maint-* · invt-* · alloc-*
   All colors via --gw-* semantic tokens. No hardcoded values.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. OPERATIONAL STATUS SUMMARY BAR (ops-sum-*) ──────────────────────── */
.ops-sum-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.ops-sum-stat {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  box-shadow: var(--gw-shadow-xs);
}
.ops-sum-stat:hover {
  box-shadow: var(--gw-shadow-sm);
  border-color: var(--gw-border-strong);
}
.ops-sum-stat.is-active {
  border-color: var(--gw-action);
  background: var(--gw-action-tint);
}
.ops-sum-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-text-primary);
  line-height: 1;
  margin-bottom: 4px;
}
.ops-sum-val--warning { color: var(--gw-warning); }
.ops-sum-val--danger  { color: var(--gw-danger); }
.ops-sum-val--positive{ color: var(--gw-success); }
.ops-sum-val--info    { color: var(--gw-info); }
.ops-sum-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  line-height: 1.3;
}
.ops-sum-delta {
  font-size: 10px;
  color: var(--gw-text-subtle);
  margin-top: 3px;
}

/* ── 2. ASSIGNMENT / OWNERSHIP BLOCK (ops-assign-*) ─────────────────────── */
.ops-assign-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ops-assign-avatars {
  display: flex;
  align-items: center;
}
.ops-assign-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gw-pine-200);
  color: var(--gw-pine-800);
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gw-bg-surface-2);
  margin-left: -6px;
  flex-shrink: 0;
}
.ops-assign-avatars .ops-assign-avatar:first-child { margin-left: 0; }
.ops-assign-overflow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gw-bark-200);
  color: var(--gw-text-muted);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--gw-bg-surface-2);
  margin-left: -6px;
}
.ops-assign-window {
  font-size: 11px;
  color: var(--gw-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.ops-assign-area {
  font-size: 10px;
  color: var(--gw-text-muted);
  background: var(--gw-bark-100);
  padding: 1px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.ops-assign-empty {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--gw-r-sm);
  border: 1px dashed var(--gw-warning-border);
  background: var(--gw-warning-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-warning);
  cursor: pointer;
}
.ops-assign-empty:hover { opacity: .85; }
.ops-assign-coordinator {
  font-size: 11px;
  color: var(--gw-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 3. WORK-READINESS BADGE (ops-ready-*) ───────────────────────────────── */
.ops-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ops-ready-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Readiness states */
.ops-ready--unscheduled   { background: var(--gw-bark-100);       color: var(--gw-bark-600);  }
.ops-ready--unscheduled .ops-ready-dot { background: var(--gw-bark-400); }
.ops-ready--scheduled     { background: var(--gw-info-bg);         color: var(--gw-info);      }
.ops-ready--scheduled .ops-ready-dot { background: var(--gw-info); }
.ops-ready--crew-ready    { background: var(--gw-action-light);    color: var(--gw-action);    }
.ops-ready--crew-ready .ops-ready-dot { background: var(--gw-action); }
.ops-ready--pending-approval { background: var(--gw-warning-bg);  color: var(--gw-warning);   }
.ops-ready--pending-approval .ops-ready-dot { background: var(--gw-warning); }
.ops-ready--waiting-materials { background: var(--gw-sand-100);   color: var(--gw-sand-700);  }
.ops-ready--waiting-materials .ops-ready-dot { background: var(--gw-sand-400); }
.ops-ready--waiting-deposit { background: var(--gw-clay-100);     color: var(--gw-clay-600);  }
.ops-ready--waiting-deposit .ops-ready-dot { background: var(--gw-clay-400); }
.ops-ready--blocked       { background: var(--gw-danger-bg);      color: var(--gw-danger);    }
.ops-ready--blocked .ops-ready-dot { background: var(--gw-danger); }
.ops-ready--in-progress   { background: var(--gw-pine-100);       color: var(--gw-pine-600);  }
.ops-ready--in-progress .ops-ready-dot { background: var(--gw-pine-500); box-shadow: 0 0 0 3px rgba(45,120,85,.18); }
.ops-ready--complete      { background: var(--gw-pine-50);        color: var(--gw-text-muted);}
.ops-ready--complete .ops-ready-dot { background: var(--gw-pine-300); }
.ops-ready--cancelled     { background: var(--gw-bark-100);       color: var(--gw-text-disabled); }
.ops-ready--cancelled .ops-ready-dot { background: var(--gw-bark-300); }
.ops-ready-reason {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-top: 3px;
  font-style: italic;
}

/* ── 4. ASSET STATUS PATTERN (ops-asset-status-*) ───────────────────────── */
.ops-asset-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ops-asset--available       { background: var(--gw-pine-100);   color: var(--gw-pine-600);  }
.ops-asset--assigned        { background: var(--gw-info-bg);    color: var(--gw-info);      }
.ops-asset--in-maintenance  { background: var(--gw-sand-100);   color: var(--gw-sand-700);  }
.ops-asset--out-of-service  { background: var(--gw-danger-bg);  color: var(--gw-danger);    }
.ops-asset--inspection-due  { background: var(--gw-warning-bg); color: var(--gw-warning);   }
.ops-asset--overdue-maint   { background: var(--gw-clay-100);   color: var(--gw-clay-700);  }
.ops-asset--retired         { background: var(--gw-bark-100);   color: var(--gw-text-disabled); }

/* ── 5. INVENTORY STATUS PATTERN (ops-inv-status-*) ─────────────────────── */
.ops-inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ops-inv--in-stock    { background: var(--gw-pine-100);   color: var(--gw-pine-600);  }
.ops-inv--low-stock   { background: var(--gw-warning-bg); color: var(--gw-warning);   }
.ops-inv--reserved    { background: var(--gw-teal-100);   color: var(--gw-teal-700);  }
.ops-inv--on-order    { background: var(--gw-sand-100);   color: var(--gw-sand-700);  }
.ops-inv--delivered   { background: var(--gw-pine-100);   color: var(--gw-pine-600);  }
.ops-inv--consumed    { background: var(--gw-bark-100);   color: var(--gw-bark-500);  }
.ops-inv--unavailable { background: var(--gw-danger-bg);  color: var(--gw-danger);    }

/* ── 6. OPERATIONAL TIMELINE (ops-tl-*) ─────────────────────────────────── */
.ops-tl-wrap { display: flex; flex-direction: column; gap: 0; }
.ops-tl-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 16px;
  position: relative;
}
.ops-tl-entry:last-child { padding-bottom: 0; }
.ops-tl-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22px;
  flex-shrink: 0;
}
.ops-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gw-action);
  border: 2px solid var(--gw-bg-surface-2);
  box-shadow: 0 0 0 2px var(--gw-action);
  flex-shrink: 0;
  margin-top: 3px;
  z-index: 1;
}
.ops-tl-dot--muted  { background: var(--gw-bark-300); box-shadow: 0 0 0 2px var(--gw-bark-300); }
.ops-tl-dot--warn   { background: var(--gw-warning);  box-shadow: 0 0 0 2px var(--gw-warning);  }
.ops-tl-dot--danger { background: var(--gw-danger);   box-shadow: 0 0 0 2px var(--gw-danger);   }
.ops-tl-line {
  width: 1px;
  flex: 1;
  min-height: 16px;
  background: var(--gw-border);
  margin-top: 4px;
}
.ops-tl-body { flex: 1; min-width: 0; }
.ops-tl-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-text-primary);
  line-height: 1.3;
}
.ops-tl-desc {
  font-size: 11px;
  color: var(--gw-text-muted);
  margin-top: 2px;
  line-height: 1.45;
}
.ops-tl-time {
  font-size: 10px;
  color: var(--gw-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── 7. OPERATIONS HUB SHELL (ops-hub-*) ────────────────────────────────── */
.ops-hub-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.ops-hub-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ops-hub-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-text-primary);
  margin-bottom: 3px;
}
.ops-hub-subtitle {
  font-size: 13px;
  color: var(--gw-text-muted);
}
.ops-hub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--gw-r-sm);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .15s, box-shadow .15s;
}
.ops-btn:hover { opacity: .88; }
.ops-btn--primary   { background: var(--gw-action); color: #fff; box-shadow: var(--gw-shadow-xs); }
.ops-btn--secondary { background: var(--gw-bg-surface-2); color: var(--gw-text-primary); border: 1px solid var(--gw-border); }
.ops-btn--ghost     { background: transparent; color: var(--gw-text-muted); border: 1px solid var(--gw-border); }
.ops-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
}
.ops-toolbar-group { display: flex; gap: 6px; align-items: center; }
.ops-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--gw-border-strong);
  margin: 0 4px;
}
.ops-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-border);
  background: var(--gw-bg-surface-2);
  color: var(--gw-text-muted);
  transition: all .15s;
  white-space: nowrap;
}
.ops-filter-chip:hover,
.ops-filter-chip.active {
  background: var(--gw-action);
  border-color: var(--gw-action);
  color: #fff;
}
.ops-search-input {
  flex: 1;
  min-width: 160px;
  max-width: 280px;
  padding: 6px 11px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  font-size: 13px;
  background: var(--gw-bg-page);
  color: var(--gw-text-primary);
  outline: none;
}
.ops-search-input:focus { border-color: var(--gw-border-focus); box-shadow: 0 0 0 2px rgba(45,122,85,.12); }
.ops-section-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
  margin: 20px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ops-section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gw-border);
}
.ops-section-head:first-child { margin-top: 0; }
/* Quick-nav cards for ops hub */
.ops-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 780px) { .ops-nav-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .ops-nav-grid { grid-template-columns: 1fr; } }
.ops-nav-card {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.ops-nav-card:hover { box-shadow: var(--gw-shadow-sm); border-color: var(--gw-action); }
.ops-nav-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--gw-r-sm);
  background: var(--gw-action-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ops-nav-card-label { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); }
.ops-nav-card-sub   { font-size: 10px; color: var(--gw-text-muted); margin-top: -6px; }
.ops-nav-card-count {
  font-size: 18px;
  font-weight: 800;
  color: var(--gw-action);
  margin-top: auto;
  line-height: 1;
}
.ops-nav-card-count--warn   { color: var(--gw-warning); }
.ops-nav-card-count--danger { color: var(--gw-danger); }
/* Two-column ops panels */
.ops-panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 780px) { .ops-panels-grid { grid-template-columns: 1fr; } }
.ops-panel {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  overflow: hidden;
}
.ops-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
}
.ops-panel-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
}
.ops-panel-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-action);
  cursor: pointer;
  text-decoration: none;
}
.ops-panel-link:hover { text-decoration: underline; }
.ops-panel-body { padding: 0; }
/* Standard ops table */
.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ops-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
  white-space: nowrap;
}
.ops-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text-primary);
  vertical-align: middle;
}
.ops-table tbody tr:last-child td { border-bottom: none; }
.ops-table tbody tr:hover td { background: var(--gw-bg-surface); cursor: pointer; }
.ops-table-link {
  font-weight: 700;
  color: var(--gw-action);
  cursor: pointer;
  text-decoration: none;
}
.ops-table-link:hover { text-decoration: underline; }
.ops-table-empty {
  text-align: center;
  padding: 28px;
  color: var(--gw-text-subtle);
  font-style: italic;
  font-size: 12px;
}
/* Inline action button */
.ops-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--gw-r-xs);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-border);
  background: var(--gw-bg-surface-2);
  color: var(--gw-text-muted);
  transition: all .15s;
  white-space: nowrap;
}
.ops-inline-btn:hover { background: var(--gw-bg-raised); color: var(--gw-text-primary); }
.ops-inline-btn--primary { background: var(--gw-action); border-color: var(--gw-action); color: #fff; }
.ops-inline-btn--warn    { background: var(--gw-warning-bg); border-color: var(--gw-warning-border); color: var(--gw-warning); }
.ops-empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--gw-text-subtle);
}
.ops-empty-icon {
  width: 44px; height: 44px;
  background: var(--gw-bg-raised);
  border-radius: var(--gw-r-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.ops-empty-title { font-size: 15px; font-weight: 700; color: var(--gw-text-primary); margin-bottom: 6px; }
.ops-empty-desc  { font-size: 13px; color: var(--gw-text-muted); max-width: 340px; margin: 0 auto 18px; line-height: 1.6; }

/* ── 8. SCHEDULING WORKSPACE (sched-*) ───────────────────────────────────── */
.sched-shell { width: 100%; max-width: none; margin: 0; padding: 20px 24px; box-sizing: border-box; }
.sched-week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .sched-week-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px) { .sched-week-grid { grid-template-columns: 1fr; } }
.sched-day-col {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  overflow: hidden;
  min-height: 180px;
}
.sched-day-col--today { border-color: var(--gw-action); background: var(--gw-action-tint); }
.sched-day-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
}
.sched-day-col--today .sched-day-head { background: var(--gw-action-light); }
.sched-day-name {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
}
.sched-day-col--today .sched-day-name { color: var(--gw-action); }
.sched-day-date {
  font-size: 18px;
  font-weight: 800;
  color: var(--gw-text-primary);
  line-height: 1.1;
}
.sched-day-col--today .sched-day-date { color: var(--gw-action); }
.sched-day-count {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-top: 2px;
}
.sched-day-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.sched-day-empty {
  padding: 20px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--gw-text-subtle);
  font-style: italic;
}
.sched-job-card {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 9px 11px;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.sched-job-card:hover { box-shadow: var(--gw-shadow-sm); border-color: var(--gw-border-strong); }
.sched-job-card--today { border-left: 3px solid var(--gw-action); }
.sched-job-card--overdue { border-left: 3px solid var(--gw-danger); }
.sched-job-card--blocked  { border-left: 3px solid var(--gw-warning); }
.sched-job-client {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.sched-job-type {
  font-size: 10px;
  color: var(--gw-text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-job-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 5px;
}
.sched-unscheduled-shelf {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-warning-border);
  border-radius: var(--gw-r-md);
  padding: 14px 16px;
  margin-top: 4px;
}
.sched-shelf-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-warning);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sched-shelf-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sched-shelf-card {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 10px 12px;
  min-width: 160px;
  max-width: 220px;
  flex: 1;
}
.sched-shelf-card-client { font-size: 12px; font-weight: 700; color: var(--gw-text-primary); }
.sched-shelf-card-type   { font-size: 10px; color: var(--gw-text-muted); margin: 2px 0 6px; }

/* ── 9. DISPATCH WORKSPACE (disp-*) ─────────────────────────────────────── */
.disp-shell { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
.disp-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}
@media (max-width: 860px) { .disp-layout { grid-template-columns: 1fr; } }
.disp-crew-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disp-crew-panel {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  padding: 12px 14px;
  cursor: pointer;
  transition: box-shadow .12s, border-color .12s;
}
.disp-crew-panel:hover { border-color: var(--gw-action); box-shadow: var(--gw-shadow-xs); }
.disp-crew-panel.active { border-color: var(--gw-action); background: var(--gw-action-tint); }
.disp-crew-name { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); margin-bottom: 4px; }
.disp-crew-meta { font-size: 10px; color: var(--gw-text-muted); margin-bottom: 6px; }
.disp-crew-status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.disp-crew-status-dot--available   { background: var(--gw-success); }
.disp-crew-status-dot--dispatched  { background: var(--gw-info); }
.disp-crew-status-dot--on-site     { background: var(--gw-action); }
.disp-crew-status-dot--off         { background: var(--gw-bark-300); }
.disp-job-feed { display: flex; flex-direction: column; gap: 8px; }
.disp-job-row {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  transition: box-shadow .12s;
}
.disp-job-row:hover { box-shadow: var(--gw-shadow-sm); }
.disp-job-row--unassigned { border-color: var(--gw-warning-border); background: var(--gw-warning-bg); }
.disp-job-info { flex: 1; min-width: 0; }
.disp-job-client { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disp-job-type   { font-size: 11px; color: var(--gw-text-muted); margin-top: 1px; }
.disp-job-window { font-size: 11px; font-weight: 600; color: var(--gw-text-secondary); white-space: nowrap; }
.disp-job-actions { display: flex; gap: 6px; flex-shrink: 0; }
.disp-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--gw-text-muted);
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--gw-border);
  margin-bottom: 4px;
}

/* ── 10. RECURRING SERVICES (recur-*) ────────────────────────────────────── */
.recur-shell { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.recur-freq-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  background: var(--gw-bark-100);
  color: var(--gw-bark-600);
  white-space: nowrap;
}
.recur-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
  flex-wrap: wrap;
}
.recur-row:hover { background: var(--gw-bg-surface); cursor: pointer; }
.recur-row:last-child { border-bottom: none; }
.recur-client { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); flex: 1 1 140px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recur-service-type { font-size: 11px; color: var(--gw-text-muted); flex: 1 1 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recur-next { font-size: 11px; font-weight: 700; color: var(--gw-text-primary); white-space: nowrap; }
.recur-next--overdue { color: var(--gw-danger); }
.recur-next--due-soon { color: var(--gw-warning); }
.recur-visit-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
}
.recur-visit--on-track   { background: var(--gw-pine-50);    color: var(--gw-text-muted); }
.recur-visit--due-soon   { background: var(--gw-warning-bg); color: var(--gw-warning);   }
.recur-visit--overdue    { background: var(--gw-danger-bg);  color: var(--gw-danger);    }
.recur-visit--skipped    { background: var(--gw-bark-100);   color: var(--gw-bark-600);  }
.recur-visit--paused     { background: var(--gw-bark-100);   color: var(--gw-text-muted);}
.recur-visit--cancelled  { background: var(--gw-bark-100);   color: var(--gw-text-disabled); }
.recur-due-shelf {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.recur-due-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.recur-due-card {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 10px 12px;
  min-width: 150px;
  flex: 1;
}
.recur-due-card--urgent { border-color: var(--gw-warning-border); background: var(--gw-warning-bg); }
.recur-due-card-client { font-size: 12px; font-weight: 700; color: var(--gw-text-primary); margin-bottom: 2px; }
.recur-due-card-type   { font-size: 10px; color: var(--gw-text-muted); margin-bottom: 6px; }
.recur-detail-wrap {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-md);
  margin-top: 12px;
  overflow: hidden;
}
.recur-detail-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
}
.recur-detail-name { font-size: 16px; font-weight: 800; color: var(--gw-text-primary); margin-bottom: 4px; }
.recur-detail-meta { font-size: 12px; color: var(--gw-text-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.recur-detail-body { padding: 16px 18px; }

/* ── 11. WORK ORDERS (wo-*) ──────────────────────────────────────────────── */
.wo-list-shell { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.wo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
  flex-wrap: wrap;
  cursor: pointer;
}
.wo-row:hover { background: var(--gw-bg-surface); }
.wo-row:last-child { border-bottom: none; }
.wo-number { font-size: 10px; font-weight: 700; color: var(--gw-text-muted); letter-spacing: .04em; white-space: nowrap; }
.wo-client { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-type   { font-size: 11px; color: var(--gw-text-muted); flex: 1 1 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-date   { font-size: 11px; font-weight: 600; color: var(--gw-text-secondary); white-space: nowrap; }
.wo-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Work order detail — uses rp-* shell, wo-* scopes content */
.wo-scope-block {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.wo-scope-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gw-text-muted); margin-bottom: 6px; }
.wo-scope-text  { font-size: 13px; color: var(--gw-text-primary); line-height: 1.6; white-space: pre-wrap; }
.wo-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gw-border);
}
.wo-checklist-item:last-child { border-bottom: none; }
.wo-check-box {
  width: 16px; height: 16px;
  border-radius: var(--gw-r-xs);
  border: 1.5px solid var(--gw-border-strong);
  background: var(--gw-bg-surface-2);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.wo-check-box.checked { background: var(--gw-action); border-color: var(--gw-action); }
.wo-check-label { font-size: 13px; color: var(--gw-text-primary); line-height: 1.4; }
.wo-check-label.checked { color: var(--gw-text-muted); text-decoration: line-through; }
.wo-material-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gw-border);
  flex-wrap: wrap;
}
.wo-material-item:last-child { border-bottom: none; }
.wo-material-name  { font-size: 13px; font-weight: 600; color: var(--gw-text-primary); flex: 1 1 140px; }
.wo-material-qty   { font-size: 12px; color: var(--gw-text-secondary); white-space: nowrap; }
.wo-material-ready { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wo-material-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--gw-bg-surface);
  border-radius: var(--gw-r-sm);
  border: 1px solid var(--gw-border);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.wo-material-summary-text { font-size: 12px; color: var(--gw-text-muted); }

/* ── 12. ASSET MANAGEMENT (asset-*) ─────────────────────────────────────── */
.asset-shell { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.asset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
  flex-wrap: wrap;
  cursor: pointer;
}
.asset-row:hover { background: var(--gw-bg-surface); }
.asset-row:last-child { border-bottom: none; }
.asset-icon {
  width: 32px; height: 32px;
  border-radius: var(--gw-r-sm);
  background: var(--gw-action-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.asset-name  { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); flex: 1 1 140px; }
.asset-cat   { font-size: 11px; color: var(--gw-text-muted); white-space: nowrap; }
.asset-maint { font-size: 11px; color: var(--gw-text-secondary); white-space: nowrap; }
.asset-maint--overdue { color: var(--gw-danger); font-weight: 700; }
.asset-maint--due-soon { color: var(--gw-warning); font-weight: 700; }
.asset-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
}
.asset-detail-icon {
  width: 48px; height: 48px;
  border-radius: var(--gw-r-md);
  background: var(--gw-action-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.asset-detail-name { font-size: 20px; font-weight: 800; color: var(--gw-text-primary); margin-bottom: 4px; }
.asset-detail-meta { font-size: 12px; color: var(--gw-text-muted); display: flex; gap: 14px; flex-wrap: wrap; }

/* ── 13. MAINTENANCE QUEUE (maint-*) ─────────────────────────────────────── */
.maint-shell { max-width: 1000px; margin: 0 auto; padding: 20px 24px; }
.maint-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
  flex-wrap: wrap;
}
.maint-row:hover { background: var(--gw-bg-surface); }
.maint-row:last-child { border-bottom: none; }
.maint-asset  { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); flex: 1 1 140px; }
.maint-type   { font-size: 11px; color: var(--gw-text-muted); flex: 1 1 120px; white-space: nowrap; }
.maint-due    { font-size: 11px; font-weight: 700; white-space: nowrap; }
.maint-due--overdue  { color: var(--gw-danger); }
.maint-due--due-soon { color: var(--gw-warning); }
.maint-due--ok       { color: var(--gw-text-muted); }
.maint-last   { font-size: 10px; color: var(--gw-text-subtle); white-space: nowrap; }
.maint-log-panel {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 14px 16px;
  margin-top: 8px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 12px;
}
.maint-log-title { font-size: 11px; font-weight: 700; color: var(--gw-text-primary); margin-bottom: 10px; }
.maint-log-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.maint-log-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-text-muted); }
.maint-log-input {
  padding: 7px 10px;
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  font-size: 13px;
  background: var(--gw-bg-page);
  color: var(--gw-text-primary);
  outline: none;
}
.maint-log-input:focus { border-color: var(--gw-border-focus); box-shadow: 0 0 0 2px rgba(45,122,85,.1); }

/* ── 14. INVENTORY (invt-*) ──────────────────────────────────────────────── */
.invt-shell { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.invt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--gw-border);
  transition: background .12s;
  flex-wrap: wrap;
}
.invt-row:hover { background: var(--gw-bg-surface); cursor: pointer; }
.invt-row:last-child { border-bottom: none; }
.invt-name { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); flex: 1 1 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-cat  { font-size: 11px; color: var(--gw-text-muted); white-space: nowrap; }
.invt-qty-group { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.invt-qty-cell  { text-align: center; }
.invt-qty-val   { font-size: 14px; font-weight: 800; color: var(--gw-text-primary); line-height: 1; }
.invt-qty-label { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-text-subtle); margin-top: 1px; }
.invt-qty-val--low  { color: var(--gw-warning); }
.invt-qty-val--zero { color: var(--gw-danger); }
.invt-reorder-bar-wrap { margin-top: 4px; }
.invt-reorder-bar-track {
  height: 4px;
  background: var(--gw-bg-raised);
  border-radius: 99px;
  overflow: hidden;
  width: 80px;
}
.invt-reorder-bar-fill {
  height: 100%;
  background: var(--gw-success);
  border-radius: 99px;
  transition: width .3s ease;
}
.invt-reorder-bar-fill--warn   { background: var(--gw-warning); }
.invt-reorder-bar-fill--danger { background: var(--gw-danger); }
.invt-detail-expand {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
  display: none;
}
.invt-detail-expand.open { display: block; }
.invt-reservations-list { margin-top: 8px; }
.invt-reservation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--gw-border);
  color: var(--gw-text-secondary);
}
.invt-reservation-row:last-child { border-bottom: none; }

/* ── 15. MATERIAL ALLOCATION (alloc-*) ───────────────────────────────────── */
.alloc-summary {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.alloc-summary-text { font-size: 12px; color: var(--gw-text-muted); }
.alloc-summary-text strong { color: var(--gw-text-primary); }
.alloc-item {
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.alloc-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.alloc-item-name { font-size: 13px; font-weight: 700; color: var(--gw-text-primary); }
.alloc-item-qty  { font-size: 12px; color: var(--gw-text-secondary); }
.alloc-item-detail { font-size: 11px; color: var(--gw-text-muted); margin-bottom: 8px; }
.alloc-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Phase 6 supplemental / gap-fill classes ─────────────────────────────── */

/* Ops Hub wrapper */
.ops-hub-wrap { min-height: 100%; }

/* Work order status variants (map to ops-ready-badge color scheme) */
.wo-status--scheduled   { background: var(--gw-action-tint)    !important; color: var(--gw-action)    !important; border-color: var(--gw-action-border)    !important; }
.wo-status--inprogress  { background: var(--gw-accent3-tint)   !important; color: var(--gw-accent3)   !important; border-color: var(--gw-accent3-border)   !important; }
.wo-status--completed   { background: var(--gw-emerald-tint)   !important; color: var(--gw-emerald)   !important; border-color: var(--gw-emerald-border)   !important; }
.wo-status--onhold      { background: var(--gw-warning-bg)     !important; color: var(--gw-warning)   !important; border-color: var(--gw-warning-border)   !important; }
/* Traffic-light HOLD — job scheduled before the client accepted (yellow) */
.wo-status--hold        { background: #FEF3C7 !important; color: #92400E !important; border-color: #FCD34D !important; }
.wo-status--cancelled   { background: var(--gw-danger-tint)    !important; color: var(--gw-danger)    !important; border-color: var(--gw-danger-border)    !important; }

/* Schedule — additional sched-* classes */
.sched-job-head   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sched-job-num    { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-text-muted); }
.sched-job-time   { font-size: 10px; font-weight: 600; color: var(--gw-action); }
.sched-job-crew   { font-size: 11px; color: var(--gw-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-empty      { font-size: 11px; color: var(--gw-text-subtle); font-style: italic; text-align: center; padding: 12px 4px; }
.sched-add-btn    {
  display: block; width: 100%; text-align: center; padding: 5px;
  font-size: 18px; line-height: 1; color: var(--gw-text-subtle);
  background: none; border: 1px dashed var(--gw-border); border-radius: var(--gw-r-sm);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.sched-add-btn:hover { color: var(--gw-action); border-color: var(--gw-action); }

/* Dispatch — additional disp-* classes */
.disp-shell         { max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; }
.disp-crew-card     {
  border: 1px solid var(--gw-border); border-radius: var(--gw-r-md);
  background: var(--gw-bg-surface-2); margin-bottom: 10px; overflow: hidden;
}
.disp-crew-head     {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--gw-bg-surface-3); border-bottom: 1px solid var(--gw-border);
}
.disp-crew-name     { font-size: 12px; font-weight: 700; color: var(--gw-text-primary); }
.disp-crew-count    { font-size: 11px; color: var(--gw-text-muted); }
.disp-crew-jobs     { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.disp-feed-panel    { min-width: 0; }
.disp-panel-head    {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gw-text-muted); padding: 0 0 8px; border-bottom: 2px solid var(--gw-border); margin-bottom: 12px;
}
.disp-empty         { font-size: 12px; color: var(--gw-text-muted); font-style: italic; padding: 8px 4px; }
.disp-job-num       { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--gw-text-muted); white-space: nowrap; }
.disp-job-time      { font-size: 11px; font-weight: 600; color: var(--gw-text-secondary); white-space: nowrap; }

/* Recurring — additional recur-* classes */
.recur-shell        { max-width: 1100px; margin: 0 auto; padding: 20px 24px; }
.recur-due-shelf    {
  border: 1px solid var(--gw-warning-border); border-radius: var(--gw-r-md);
  background: var(--gw-warning-bg); padding: 12px 16px; margin-bottom: 20px;
}
.recur-shelf-head   {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gw-warning); margin-bottom: 8px;
}
.recur-list         { border: 1px solid var(--gw-border); border-radius: var(--gw-r-md); overflow: hidden; background: var(--gw-bg-surface-2); }
.recur-actions      { display: flex; gap: 6px; flex-shrink: 0; }

/* Maintenance — additional maint-* classes */
.maint-row--overdue { background: var(--gw-danger-tint) !important; }
.maint-overdue-text { color: var(--gw-danger); font-weight: 700; }
.maint-done         { font-size: 11px; color: var(--gw-text-secondary); white-space: nowrap; }
.maint-by           { font-size: 11px; color: var(--gw-text-muted); white-space: nowrap; flex: 1 1 100px; }

/* Inventory — additional invt-* classes */
.invt-bar-wrap      { display: flex; flex-direction: column; gap: 2px; min-width: 80px; max-width: 140px; }
.invt-bar           { height: 5px; background: var(--gw-border); border-radius: 99px; overflow: hidden; }
.invt-bar-fill      { height: 100%; border-radius: 99px; transition: width .3s; background: var(--gw-emerald); }
.invt-bar-fill--ok           { background: var(--gw-emerald); }
.invt-bar-fill--low-stock    { background: var(--gw-warning); }
.invt-bar-fill--out-of-stock { background: var(--gw-danger); width: 0% !important; }
.invt-reorder-label { font-size: 9px; color: var(--gw-text-subtle); }
.invt-vendor        { font-size: 11px; color: var(--gw-text-muted); flex: 1 1 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invt-cat           { font-size: 11px; color: var(--gw-text-muted); flex: 1 1 90px; white-space: nowrap; }
.invt-qty           { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }

/* ─── END PHASE 6 CSS ────────────────────────────────────────────────────── */

/* ─── SCHEDULE BOARD v2 — Crew Lanes, Drag-Drop, End-Time ───────────────── */

/* Crew filter bar */
.sb-crew-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: var(--gw-surface-2);
  border-bottom: 1px solid var(--gw-border);
  flex-wrap: wrap;
}
.sb-crew-bar-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.sb-crew-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sb-crew-lane-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 6px; border: 1.5px solid var(--gw-border);
  background: var(--gw-surface); color: var(--gw-text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.sb-crew-lane-btn.active {
  background: var(--gw-teal, #4D8A86);
  border-color: var(--gw-teal, #4D8A86);
  color: #fff;
}
.sb-crew-lane-btn:hover:not(.active) { background: var(--gw-surface-3); }

/* ── Crew Lane Grid ── */
.sb-lane-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}
.sb-lane-grid {
  display: grid;
  grid-template-columns: 120px repeat(7, 1fr);
  min-width: 800px;
}
.sb-lane-label-cell {
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
}
.sb-lane-day-head {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--gw-border);
  border-left: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted);
  gap: 2px;
}
.sb-lane-day-head.today {
  background: rgba(77,138,134,.1);
  color: var(--gw-teal, #4D8A86);
}
.sb-lane-day-head .sb-day-date {
  font-size: 17px; font-weight: 700; color: var(--gw-text);
}
.sb-lane-day-head.today .sb-day-date {
  background: var(--gw-teal, #4D8A86);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.sb-lane-label {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: 10px 8px;
  border-right: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-surface-2);
  gap: 4px;
  min-height: 80px;
}
.sb-lane-crew-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-lane-crew-name { font-size: 11px; font-weight: 700; color: var(--gw-text); word-break: break-word; }

.sb-lane-cell {
  border-bottom: 1px solid var(--gw-border);
  border-left: 1px solid var(--gw-border);
  padding: 6px;
  min-height: 80px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--gw-surface);
  transition: background .1s;
  position: relative;
}
.sb-lane-cell.today { background: rgba(77,138,134,.04); }
.sb-lane-cell.drag-over { background: rgba(77,138,134,.15) !important; outline: 2px dashed var(--gw-teal, #4D8A86); }

.sb-lane-add-btn {
  margin-top: auto; align-self: flex-end;
  width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px dashed var(--gw-border);
  background: transparent; color: var(--gw-text-muted);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.sb-lane-cell:hover .sb-lane-add-btn { opacity: 1; }

/* ── Job Cards v2 (draggable) ── */
.sb-job-card {
  cursor: grab;
  user-select: none;
}
.sb-job-card:active { cursor: grabbing; opacity: .8; }
.sb-card-top { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.sb-card-num { font-size: 10px; font-weight: 700; color: var(--gw-text-muted); flex: 1; }
.sb-card-time { font-size: 10px; color: var(--gw-text-muted); white-space: nowrap; }
.sb-card-dup-btn {
  width: 18px; height: 18px; border-radius: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--gw-text-muted); opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .12s, background .12s;
  flex-shrink: 0;
}
.sb-job-card:hover .sb-card-dup-btn { opacity: 1; }
.sb-card-dup-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.sb-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sb-card-type { font-size: 10px; color: var(--gw-text-muted); }
.sb-card-hrs  { font-size: 10px; color: var(--gw-text-muted); background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 10px; }

/* Drag-over for standard day columns */
.sb-day-body.drag-over { background: rgba(77,138,134,.1); outline: 2px dashed var(--gw-teal, #4D8A86); border-radius: 8px; }
.sb-month-cell.drag-over { background: rgba(77,138,134,.1) !important; outline: 2px dashed var(--gw-teal, #4D8A86); }

/* Equipment section in modal */
.sb-equip-row { transition: background .1s; }
.sb-equip-row:hover { background: var(--gw-surface-2) !important; }

/* ─── END SCHEDULE BOARD v2 ─────────────────────────────────────────────── */

/* ─── END GROUNDWORK DESIGN SYSTEM v2.0 ─────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   FLUID PAGE WIDTH — pages expand with the window (no more crunched center
   column on wide monitors). Overrides the fixed max-width caps set earlier
   in premium.css / this file. Document-style views (invoices, statements,
   learning articles) intentionally keep a readable cap.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Record pages (lead/opportunity detail), work orders, generic rp pages */
.rp-shell,
.wo-list-shell {
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Customer detail */
.cd-shell {
  max-width: none !important;
  margin: 0 auto !important;
}

/* Assets Hub */
.ah-shell {
  max-width: none !important;
  margin: 0 !important;
}

/* Estimates: list, detail, builder */
.est-list-shell    { max-width: none !important; margin: 0 !important; }
.est-detail-shell  { max-width: none !important; margin: 0 !important; }
.est-builder-shell { max-width: none !important; margin: 0 !important; }

/* Schedule board (sb-*) header / tabs / toolbar / grid */
.sb-header,
.sb-tabs,
.sb-toolbar,
.sb-grid-wrap {
  max-width: none !important;
}

/* Communications board */
.comms-shell { max-width: none !important; margin: 0 !important; }

/* ── Record page rails: scale up on big screens instead of fixed-narrow ── */
@media (min-width: 1440px) {
  .rp-body {
    grid-template-columns: 280px 1fr 320px !important;
  }
}
@media (min-width: 1800px) {
  .rp-body {
    grid-template-columns: 320px 1fr 360px !important;
  }
  /* Estimate detail/builder side panels get a touch wider too */
  .est-detail-shell  { grid-template-columns: 1fr 340px !important; }
  .est-builder-shell { grid-template-columns: 1fr 320px !important; }
}

/* Mid-size screens (1200–1379px): the app sidebar eats ~300px, so a 3-col
   record page leaves the center column crunched (<450px). Drop the left
   panel here — its contact fields are duplicated in the Overview tab. */
@media (min-width: 1200px) and (max-width: 1379px) {
  .rp-body {
    grid-template-columns: 1fr 280px !important;
  }
  .rp-left { display: none !important; }
}

/* ─── 63. PLATFORM ADMIN PREMIUM (gw-pa-*) ──────────────────────────────── */
/* Full-width shell — pages stretch to the window (view is already fluid). */
.gw-pa-shell { width: 100% !important; max-width: none !important; }

/* Panel tables: refined header + hover rows */
.gw-pa-panel table thead tr {
  background: var(--gw-bg-surface) !important;
}
.gw-pa-panel table tbody tr {
  transition: background .12s ease;
}
.gw-pa-panel table tbody tr:hover {
  background: rgba(77,138,134,.06) !important;
}
.gw-pa-panel table tbody tr:last-child td { border-bottom: none !important; }

/* Stat cards grid: responsive auto-fit so wide windows get more columns */
.gw-pa-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 700px) {
  .gw-pa-stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Keep the dark hero header band's light text legible (exempt from rescues) */
.gw-pa-shell [style*="color:#F2EFE6"]  { color: #F2EFE6 !important; }
.gw-pa-shell [style*="color:#A8BCB0"]  { color: #A8BCB0 !important; }
.gw-pa-shell [style*="color:#7FB5B0"]  { color: #7FB5B0 !important; }