/* peakpro-base.css — CSS variables, reset, typography */
/*
 * PeakPro Design System
 * Theme: Summit — Clean white/slate surfaces, vivid ember accent
 * Typography: Bebas Neue (display) + DM Sans (UI)
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;700&display=swap');

:root {
  /* Summit Palette — clean, modern SaaS */
  --canvas:    #f9fafb;        /* gray-50 — page background */
  --surface:   #ffffff;        /* pure white cards */
  --surface-2: #f3f4f6;        /* gray-100 — inputs */
  --surface-3: #e5e7eb;        /* gray-200 — hover states */
  --border:    #d1d5db;        /* gray-300 — dividers */
  --border-l:  #e5e7eb;        /* gray-200 — light borders */

  /* Text */
  --ink:       #111827;        /* gray-900 — headings */
  --body:      #374151;        /* gray-700 — body copy */
  --muted:     #6b7280;        /* gray-500 — secondary text */
  --ghost:     #9ca3af;        /* gray-400 — placeholders */

  /* Brand accent — Ember */
  --copper:    #f97316;        /* orange-500 — primary accent */
  --copper-l:  #fb923c;        /* orange-400 — hover */
  --copper-d:  #ea580c;        /* orange-600 — pressed */
  --rust:      #1e293b;        /* slate-800 — navbar/logo */

  /* Semantic accents */
  --aspen:     #f59e0b;        /* amber-500 */
  --sage:      #10b981;        /* emerald-500 */
  --sky:       #3b82f6;        /* blue-500 */
  --pine:      #059669;        /* emerald-600 */

  /* Status badges — vivid, modern */
  --s-pending:   #f97316;      /* ember orange */
  --s-lead:      #3b82f6;      /* blue-500 */
  --s-approved:  #10b981;      /* emerald-500 */
  --s-progress:  #f59e0b;      /* amber-500 */
  --s-completed: #059669;      /* emerald-600 */
  --s-invoice:   #8b5cf6;      /* violet-500 */
  --s-closed:    #6b7280;      /* gray-500 */

  --completed:   var(--s-completed);
  --lead:        var(--s-lead);
  --approved:    var(--s-approved);

  /* Dark panel colors */
  --carbon:    #1e293b;        /* slate-800 — dark panel bg */
  --carbon-2:  #334155;        /* slate-700 — dark card */
  --carbon-3:  #475569;        /* slate-600 — dark hover */
  --cream:     #f8fafc;        /* slate-50 — text on dark */

  /* Layout */
  --radius:    8px;
  --radius-l:  12px;
  --radius-xl: 20px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-m:  0 4px 12px rgba(0,0,0,.08);
  --shadow-l:  0 10px 30px rgba(0,0,0,.12);

  /* Nav heights */
  --nav-top-h: 40px;
  --nav-bot-h: 52px;
  --nav-total: calc(var(--nav-top-h) + var(--nav-bot-h)); /* 92px */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; overflow-x: hidden; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--canvas);
  color: var(--body);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100vw;
}

/* peakpro-layout.css — Navigation, page layout, grid */
/* ══════════════════════════════════════════════════════
   DOUBLE NAV
══════════════════════════════════════════════════════ */

/* TOP NAV — utility strip */
.nav-top {
  background: var(--rust);
  height: var(--nav-top-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.nav-top-release {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(238,233,224,.5);
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
.nav-top-release:hover { color: var(--canvas); }

.nav-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-top-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.nav-top-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--copper);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.nav-top-name {
  font-size: 12px;
  color: var(--canvas);
  font-weight: 500;
  white-space: nowrap;
}

.nav-top-settings {
  background: none;
  border: none;
  color: rgba(238,233,224,.6);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color .15s;
  font-size: 14px;
}
.nav-top-settings:hover { color: var(--canvas); }

/* BOTTOM NAV — main navigation */
.pk-topbar {
  background: white;
  border-bottom: 2px solid var(--border-l);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--nav-bot-h);
  position: sticky;
  top: var(--nav-top-h);
  z-index: 199;
  box-shadow: var(--shadow);
}

/* Brand */
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  margin-right: 20px;
  flex-shrink: 0;
}
.brand-peak {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--copper);
  line-height: 1;
}
.brand-arrow {
  font-size: 12px;
  color: var(--ghost);
  margin: 0 1px;
}
.brand-pmr {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--ink);
  line-height: 1;
}
.brand-wrap:hover .brand-peak { color: var(--copper-l); }
.brand-wrap:hover .brand-pmr  { color: var(--rust); }

/* Nav links */
.pk-topbar a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.pk-topbar a:hover { color: var(--ink); background: var(--surface); }
.pk-topbar a.active { color: var(--copper); }

.pk-topbar a.btn-new {
  background: var(--copper);
  color: white;
  font-weight: 600;
  margin-left: 4px;
  border-radius: var(--radius);
}
.pk-topbar a.btn-new:hover { background: var(--copper-l); color: white; }

.pk-topbar a.btn-ai {
  color: var(--copper);
  border: 1px solid var(--border);
}
.pk-topbar a.btn-ai:hover { background: var(--copper); color: white; border-color: var(--copper); }

/* Nav search */
.nav-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  margin-left: 8px;
  transition: border-color .15s;
}
.nav-search-form:focus-within {
  border-color: var(--copper);
  background: var(--carbon-2);
}
@media (max-width: 900px) { .nav-search-form { display: none; } }

.pk-topbar .spacer { flex: 1; }
.pk-topbar .user-info { display: none; } /* moved to top nav */
.pk-topbar a.logout { display: none; }   /* moved to top nav */

/* Nav dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown > .nav-drop-btn {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s, background .15s;
}
.nav-dropdown > .nav-drop-btn:hover,
.nav-dropdown > .nav-drop-btn.active { color: var(--ink); background: var(--surface); }
.nav-drop-btn .chevron { font-size: 9px; opacity: .5; transition: transform .2s; }
.nav-dropdown.open .chevron { transform: rotate(180deg); }

.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  min-width: 210px;
  z-index: 300;
  box-shadow: var(--shadow-l);
  overflow: hidden;
  padding: 6px 0;
}
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--body);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--surface); color: var(--ink); }
.nav-drop-menu a.active { color: var(--copper); }
.nav-drop-menu .drop-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.nav-drop-menu .drop-divider { height: 1px; background: var(--border-l); margin: 6px 0; }
.nav-drop-menu .drop-label {
  padding: 6px 16px 2px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ghost);
}

/* Integration badges in nav */
.integ-badge { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 500; }
.integ-on    { background: rgba(45,90,61,.1); color: var(--pine); border: 1px solid rgba(45,90,61,.25); }
.integ-off   { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* Page title sticky band */
.page-title-band {
  background: white;
  border-bottom: 1px solid var(--border-l);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: calc(var(--nav-top-h) + var(--nav-bot-h));
  z-index: 150;
  box-shadow: 0 1px 0 var(--border-l);
}
.page-title-band h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--ink);
  line-height: 1;
}
.page-title-band .breadcrumb {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-title-band .breadcrumb span { color: var(--ghost); }

/* Mobile nav */
.nav-hamburger {
  display: none; background: none; border: none;
  cursor: pointer; padding: 6px;
  flex-direction: column; gap: 4px; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--muted); border-radius: 2px; transition: all .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

.nav-drawer { display: none !important; }
.nav-drawer a {
  display: block; padding: 10px 14px; border-radius: var(--radius);
  color: var(--body); text-decoration: none; font-size: 14px;
  font-weight: 500; border: 1px solid transparent;
}
.nav-drawer a:hover  { background: var(--surface); color: var(--ink); }
.nav-drawer a.active { color: var(--copper); }
.nav-drawer a.btn-new { background: var(--copper); color: white; font-weight: 700; text-align: center; }
.nav-drawer a.btn-ai  { border-color: var(--border); color: var(--copper); text-align: center; }
.nav-drawer .nav-divider { height: 1px; background: var(--border-l); margin: 4px 0; }

/* ══════════════════════════════════════════════════════
   NOTIFICATION BELL
══════════════════════════════════════════════════════ */
.notif-wrap { position: relative; }
.notif-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: var(--radius); position: relative;
  display: flex; align-items: center; transition: color .15s;
}
.notif-btn:hover { color: var(--ink); }
.notif-badge {
  position: absolute; top: 1px; right: 1px;
  background: var(--copper); color: white;
  font-size: 9px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; padding: 0 3px;
}
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 320px; background: white; border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l); z-index: 200; overflow: hidden;
}
.notif-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border-l);
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); display: flex; justify-content: space-between; align-items: center;
}
.notif-mark-read {
  background: none; border: none; color: var(--copper);
  font-size: 11px; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-l); cursor: pointer;
  transition: background .15s; align-items: flex-start;
}
.notif-item:hover { background: var(--surface); }
.notif-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.notif-subject { font-size: 12px; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.notif-footer { padding: 10px 16px; border-top: 1px solid var(--border-l); text-align: center; }
.notif-footer a { font-size: 11px; color: var(--copper); text-decoration: none; }

/* peakpro-components.css — Cards, badges, tables, forms, buttons, KPIs */
/* ══════════════════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════════════════ */
.pk-page {
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px 24px;
}
.pk-page-header {
  margin-bottom: 24px;
}
.pk-page-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 2px;
  color: var(--ink); line-height: 1;
}
.pk-page-header p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */
.pk-card {
  background: white;
  border: 1px solid var(--border-l);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
/* Flush variant — removes bottom margin (for cards inside grids / adjacent sections) */
.pk-card--flush { margin-bottom: 0; }
.pk-card-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-l);
}

/* ══════════════════════════════════════════════════════
   STATUS BADGES — 7 states
══════════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; white-space: nowrap;
}
.badge-pending   { background: rgba(218,98,39,.1);  color: var(--s-pending);   border: 1px solid rgba(218,98,39,.3); }
.badge-lead      { background: rgba(74,127,168,.1);  color: var(--s-lead);     border: 1px solid rgba(74,127,168,.3); }
.badge-approved  { background: rgba(90,122,92,.1);   color: var(--s-approved); border: 1px solid rgba(90,122,92,.3); }
.badge-progress, .badge-in\ progress, .badge-in_progress {
                   background: rgba(200,148,26,.12); color: var(--s-progress); border: 1px solid rgba(200,148,26,.3); }
.badge-completed { background: rgba(45,90,61,.1);    color: var(--s-completed);border: 1px solid rgba(45,90,61,.25); }
.badge-invoice   { background: rgba(122,79,160,.1);  color: var(--s-invoice);  border: 1px solid rgba(122,79,160,.25); }
.badge-closed    { background: var(--surface);       color: var(--muted);      border: 1px solid var(--border); }
/* Extended badge variants */
.badge-amended  { background: rgba(224,160,48,.15); color: #e0a030;          border: 1px solid rgba(224,160,48,.3); }
.badge-locked   { background: rgba(45,90,61,.12);   color: #2d5a3d;          border: 1px solid rgba(45,90,61,.3); }
.badge-draft    { background: rgba(218,98,39,.1);   color: var(--copper);    border: 1px solid rgba(218,98,39,.3); }
.badge-admin    { background: rgba(45,90,61,.1);    color: var(--pine);      border: 1px solid rgba(45,90,61,.2); }
.badge-office   { background: rgba(74,127,168,.1);  color: var(--sky);       border: 1px solid rgba(74,127,168,.3); }
.badge-crew     { background: rgba(200,148,26,.1);  color: var(--aspen);     border: 1px solid rgba(200,148,26,.3); }
.badge-sales    { background: rgba(90,122,92,.1);   color: var(--sage);      border: 1px solid rgba(90,122,92,.3); }
.badge-count    { background: var(--copper); color: white; border: none; font-size: 11px; padding: 1px 7px; }
.badge-category { background: var(--surface); color: var(--ink); border: 1px solid var(--border-l); }


/* ══════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════ */
.pk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pk-table thead th {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; text-align: left;
  border-bottom: 2px solid var(--border-l);
  background: var(--surface);
}
.pk-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border-l);
  vertical-align: middle; color: var(--body);
}
.pk-table tbody tr:hover td { background: var(--surface); }
.pk-table .wc     { font-family: monospace; font-size: 11px; color: var(--copper); }
.pk-table .client { color: var(--ink); font-weight: 500; }
.pk-table .meta   { font-size: 12px; color: var(--muted); }
.pk-table .price  { color: var(--pine); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.pk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pk-form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pk-form-grid.single { grid-template-columns: 1fr; }

.pk-field { display: flex; flex-direction: column; gap: 6px; }
.pk-field label {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.pk-field input,
.pk-field select,
.pk-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 9px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pk-field input:focus,
.pk-field select:focus,
.pk-field textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(218,98,39,.12);
}
.pk-field input::placeholder,
.pk-field textarea::placeholder { color: var(--ghost); }
.pk-field textarea { resize: vertical; min-height: 80px; }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.pk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border: none; border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .15s;
  white-space: nowrap;
}
.pk-btn-primary   { background: var(--copper); color: white; }
.pk-btn-primary:hover { background: var(--copper-l); }
.pk-btn-ghost     { background: var(--surface); color: var(--body); border: 1px solid var(--border); }
.pk-btn-ghost:hover { border-color: var(--copper); color: var(--ink); background: white; }
.pk-btn-danger    { background: rgba(200,50,50,.08); color: #c03232; border: 1px solid rgba(200,50,50,.25); }
.pk-btn-danger:hover { background: #c03232; color: white; }
.pk-btn-success   { background: rgba(45,90,61,.1); color: var(--pine); border: 1px solid rgba(45,90,61,.25); }
.pk-btn-success:hover { background: var(--pine); color: white; }

/* ══════════════════════════════════════════════════════
   PILLS
══════════════════════════════════════════════════════ */
.pk-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pk-pill {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  cursor: pointer; background: white; transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.pk-pill:hover  { border-color: var(--copper); color: var(--copper); }
.pk-pill.active { background: var(--copper); color: white; border-color: var(--copper); }

/* ══════════════════════════════════════════════════════
   KPI / STAT CARDS
══════════════════════════════════════════════════════ */
.kpi {
  background: white; border: 1px solid var(--border-l);
  border-radius: var(--radius-l); padding: 18px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.kpi::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-color, var(--border));
}
.kpi .kpi-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kpi .kpi-val   { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--ink); letter-spacing: 1px; line-height: 1; }
.kpi .kpi-sub   { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   INFO GRID (detail view)
══════════════════════════════════════════════════════ */
.pk-info-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 10px; margin-bottom: 16px;
}
.pk-info-item { padding: 12px 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border-l); }
.pk-info-item .lbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pk-info-item .val { font-size: 14px; color: var(--ink); font-weight: 500; }
.pk-info-item.highlight .val { color: var(--copper); }
.pk-info-item.money .val { color: var(--pine); }

/* ══════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════ */
.pk-alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }
.pk-alert-success { background: rgba(45,90,61,.08);  border: 1px solid rgba(45,90,61,.2); color: var(--pine); }
.pk-alert-error   { background: rgba(192,50,50,.08); border: 1px solid rgba(192,50,50,.2); color: #c03232; }
.pk-alert-info    { background: rgba(218,98,39,.08); border: 1px solid rgba(218,98,39,.2); color: var(--copper); }

/* ══════════════════════════════════════════════════════
   DESCRIPTION BOX
══════════════════════════════════════════════════════ */
.pk-desc {
  background: var(--surface); border-left: 3px solid var(--copper);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 14px;
  margin-bottom: 14px;
}
.pk-desc h3 { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; }
.pk-desc p  { font-size: 14px; color: var(--body); line-height: 1.7; }

/* ══════════════════════════════════════════════════════
   STATS / WORK ITEMS
══════════════════════════════════════════════════════ */
.pk-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 20px;
}
.pk-stat {
  background: white; border: 1px solid var(--border-l);
  border-radius: var(--radius-l); padding: 18px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.pk-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--copper);
}
.pk-stat.lead::before      { background: var(--s-lead); }
.pk-stat.approved::before  { background: var(--s-approved); }
.pk-stat.completed::before { background: var(--s-completed); }
.pk-stat .num { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: var(--ink); line-height: 1; }
.pk-stat .label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.wo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-l);
}
.wo-row:last-child { border: none; }
.wo-code   { font-family: monospace; font-size: 11px; color: var(--copper); min-width: 100px; }
.wo-client { font-size: 13px; color: var(--ink); font-weight: 500; flex: 1; transition: color .15s; }
.wo-meta   { font-size: 11px; color: var(--muted); }
.wo-price  { font-size: 13px; color: var(--pine); font-weight: 600; min-width: 70px; text-align: right; }

/* ══════════════════════════════════════════════════════
   TIME BUTTONS
══════════════════════════════════════════════════════ */
.time-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-top: 8px; }
.time-btn {
  padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 12px; text-align: center;
  background: var(--surface); color: var(--muted);
  transition: all .15s; font-family: 'DM Sans', sans-serif;
}
.time-btn:hover { border-color: var(--copper); color: var(--copper); }
.time-btn.selected { background: var(--copper); color: white; border-color: var(--copper); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   SAVE TOAST
══════════════════════════════════════════════════════ */
/* Defined once below (in Settings section) — removed duplicate here */

/* ══════════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════════ */
.jtype { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.jtype-repair      { background: rgba(218,98,39,.1); color: var(--copper); border: 1px solid rgba(218,98,39,.25); }
.jtype-replacement { background: rgba(74,127,168,.1); color: var(--sky); border: 1px solid rgba(74,127,168,.25); }
.jtype-inspection  { background: rgba(90,122,92,.1);  color: var(--sage); border: 1px solid rgba(90,122,92,.25); }

a { color: var(--copper); }


/* ══════════════════════════════════════════════════════
   ACTIVITY THREAD
   ══════════════════════════════════════════════════════ */
.activity-thread { padding:0; }
.activity-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border); }
.activity-feed { max-height:400px;overflow-y:auto;margin-bottom:16px; }
.activity-empty { font-size:12px;color:var(--muted);padding:20px 0;text-align:center; }
.activity-item { display:flex;gap:10px;padding:10px 0;border-bottom:1px solid rgba(54,60,70,.3); }
.activity-item:last-child { border:none; }
.activity-dot { font-size:14px;margin-top:1px;flex-shrink:0;width:16px;text-align:center; }
.activity-body { flex:1;min-width:0; }
.activity-meta { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:3px; }
.activity-user { font-size:12px;font-weight:600;color:var(--cream); }
.activity-type { font-size:10px;letter-spacing:.8px;text-transform:uppercase; }
.activity-time { font-size:11px;color:var(--muted);margin-left:auto; }
.activity-content { font-size:13px;color:var(--body);line-height:1.5; }
.activity-add-note { padding-top:12px;border-top:1px solid var(--border); }
/* peakpro-utilities.css — Responsive helpers, mobile fixes, table overrides */
/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nav-hamburger { display: flex; }
  .pk-topbar > a:not(.brand-wrap) { display: none; }
  .pk-topbar > .spacer { display: none; }
  .pk-topbar > .notif-wrap { display: flex; }
  .nav-drawer.open {
    display: flex !important; position: fixed;
    top: calc(var(--nav-top-h) + var(--nav-bot-h));
    left: 0; right: 0; background: white;
    border-bottom: 1px solid var(--border-l); z-index: 99;
    padding: 12px; flex-direction: column; gap: 4px;
    box-shadow: var(--shadow-l);
  }
  .nav-top-release { display: none; }
}

@media (max-width: 768px) {
  .pk-page { padding: 12px; }
  .pk-stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .pk-form-grid { grid-template-columns: 1fr; }
  .pk-form-grid.cols-3 { grid-template-columns: 1fr; }
  .pk-info-grid { grid-template-columns: 1fr 1fr; }
  .pk-card { padding: 16px; }
  .pk-page-header h1 { font-size: 24px; }
  .time-grid { grid-template-columns: repeat(4,1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .dash-grid-2 { grid-template-columns: 1fr !important; }
  .kpi .kpi-val { font-size: 28px; }
  .layout { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; }
  .wo-list { max-height: 250px; }
  .payapp-layout { grid-template-columns: 1fr !important; }
  .ai-sidebar { display: none !important; }
  .page-title-band { top: calc(var(--nav-top-h) + var(--nav-bot-h)); }
}

@media (max-width: 480px) {
  .pk-page { padding: 10px; }
  .pk-stat .num { font-size: 32px; }
  .pk-info-grid { grid-template-columns: 1fr; }
  .kpi { padding: 14px; }
  .kpi .kpi-val { font-size: 24px; }
  .notif-dropdown { width: calc(100vw - 20px); right: -10px; }
  input, select, textarea { font-size: 16px !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE — GLOBAL OVERFLOW & TABLE FIXES
   ══════════════════════════════════════════════════════ */

/* All tables scroll horizontally on mobile instead of breaking layout */
.pk-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* Images never overflow their container */
img { max-width: 100%; height: auto; }

/* Prevent long words/URLs from breaking layout */
.pk-card, .pk-card * {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Fix inputs on iOS — prevent zoom on focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important; /* prevents iOS auto-zoom */
  }
}

/* ══════════════════════════════════════════════════════
   PANEL — dashboard
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pk-stats { grid-template-columns: repeat(2,1fr) !important; }
  .dash-grid  { grid-template-columns: 1fr !important; }
  .dash-grid-2 { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   VIEWWORK — work order detail
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pk-info-grid { grid-template-columns: 1fr 1fr !important; }
  .wo-action-bar { flex-wrap: wrap; gap: 8px; }
  .wo-action-bar .pk-btn { font-size: 12px !important; padding: 7px 10px !important; }
}
@media (max-width: 480px) {
  .pk-info-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   NOMINAS — pay applications
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .detail-kpis { gap: 10px !important; }
  .detail-kpis .kpi { min-width: 70px !important; }
  .kpi-val { font-size: 16px !important; }
}

/* ══════════════════════════════════════════════════════
   CUSTOMERS — table columns
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide less important columns on mobile */
  .customers-table .col-roof,
  .customers-table .col-contact,
  .customers-table .col-last { display: none; }
}

/* ══════════════════════════════════════════════════════
   SETTINGS — icon grid
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .settings-grid { grid-template-columns: repeat(2,1fr) !important; }
}

/* ══════════════════════════════════════════════════════
   MAP — sidebar collapse
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .map-layout { grid-template-columns: 1fr !important; height: auto !important; }
  .map-sidebar { height: 200px; overflow-y: auto; }
  #map-canvas { height: 60vh; }
}

/* ══════════════════════════════════════════════════════
   USERS / WORKERS — tables
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .users-table .col-email,
  .users-table .col-created { display: none; }
}

/* ══════════════════════════════════════════════════════
   NEW-WORK form — grid
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .new-work-grid { grid-template-columns: 1fr !important; }
  .time-grid { grid-template-columns: repeat(3,1fr) !important; }
}

/* ══════════════════════════════════════════════════════
   WORKERS page
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .workers-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   APP-LOG / SMS-LOG — wide tables
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .log-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .log-table-wrap .pk-table { min-width: 600px; }
}

/* ══════════════════════════════════════════════════════
   BOTTOM NAV bar fix — prevent content going under it
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pk-page { padding-bottom: 80px; }
}

/* ══════════════════════════════════════════════════════
   AI-CONNECT — AI panel
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ai-layout { grid-template-columns: 1fr !important; }
  .ai-sidebar { display: none !important; }
  .ai-main { border-radius: var(--radius-l); }
}

/* ══════════════════════════════════════════════════════
   STICKY HEADER OFFSET fix for mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .page-title-band {
    top: calc(var(--nav-top-h) + var(--nav-bot-h)) !important;
    font-size: 12px;
    padding: 6px 12px;
  }
}

/* ══════════════════════════════════════════════════════
   CUSTOMERS DETAIL — responsive grid
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .customers-detail-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   NOMINAS — detail KPIs wrap on mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .detail-kpis { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .detail-kpis .kpi { min-width: 0 !important; }
}

/* ══════════════════════════════════════════════════════
   VIEWWORK — sticky action bar
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wo-sticky-bar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
  }
  .wo-sticky-bar .pk-btn {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
}

/* ══════════════════════════════════════════════════════
   GENERAL — modals full-screen on mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  #co-modal > div,
  #merge-modal > div {
    max-width: 100% !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #co-modal,
  #merge-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
}

/* ══════════════════════════════════════════════════════
   WORKERS PAGE — cards
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .worker-card-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════
   AI-CONNECT — chat input area
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ai-input-row { flex-direction: column; }
  .ai-input-row button { width: 100%; }
}

/* ══════════════════════════════════════════════════════
   NAV — bottom bar overlap fix
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pk-nav-bot { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pk-nav-bot nav { min-width: max-content; }
}

/* ══════════════════════════════════════════════════════
   TABLE COLUMN VISIBILITY — mobile
   Hide less-critical columns on small screens
   ══════════════════════════════════════════════════════ */

/* viewwork list — hide Manager and Date on mobile */
@media (max-width: 640px) {
  .pk-table th:nth-child(5),
  .pk-table td:nth-child(5) { display: none; } /* Manager */
}

/* expenses component — hide Notes, By, Date on mobile */
@media (max-width: 640px) {
  .exp-col-notes,
  .exp-col-by,
  .exp-col-date { display: none !important; }
}

/* app-log — hide Role, Entity, IP on mobile */
@media (max-width: 768px) {
  .app-log-table th:nth-child(3),
  .app-log-table td:nth-child(3),
  .app-log-table th:nth-child(5),
  .app-log-table td:nth-child(5),
  .app-log-table th:nth-child(7),
  .app-log-table td:nth-child(7) { display: none; }
}

/* ══════════════════════════════════════════════════════
   VIEWWORK — sticky bar overflow fix
   ══════════════════════════════════════════════════════ */
.wo-sticky-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .wo-sticky-bar {
    gap: 6px;
    padding: 8px 10px !important;
  }
  .wo-sticky-bar .pk-btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
  .wo-sticky-bar .client-name-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════
   NOMINAS — fix KPI cards wrapping on small mobile
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .detail-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Dashboard financials grid — tablet responsive ────────────────────────── */
@media (max-width: 768px) {
  .d-fin {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .d-fin {
    grid-template-columns: 1fr !important;
  }
}

/* ── Scheduling availability alerts ───────────────────────────────────────── */
.pk-alert-warning {
  background: rgba(224,160,48,.08) !important;
  border-color: rgba(224,160,48,.3) !important;
  color: var(--ink);
}

/* peakpro-views.css — View-specific styles (panel, nominas, calendar, crew, etc.) */
/* ══════════════════════════════════════════════════════
   SMS LOG
   ══════════════════════════════════════════════════════ */
.sms-thread { display:none; }
.sms-thread.open { display:table-row; }
.convo-detail { background:var(--carbon-2);padding:12px 16px;border-radius:var(--radius);font-size:12px;line-height:1.7; }
.convo-field { display:flex;gap:8px;margin-bottom:4px; }
.convo-label { color:var(--muted);min-width:90px;font-size:11px;text-transform:uppercase;letter-spacing:.6px; }
.convo-val { color:var(--cream); }
.msg-preview { max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px; }

/* ══════════════════════════════════════════════════════
   NOMINAS HORAS
   ══════════════════════════════════════════════════════ */
.payroll-layout { display:grid; grid-template-columns:260px 1fr; gap:20px; }
.emp-btn { display:block; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--carbon-3); color:var(--body); text-decoration:none; font-size:13px; margin-bottom:6px; transition:all .15s; }
.emp-btn:hover { border-color:var(--copper); color:var(--cream); }
.emp-btn.active { background:var(--copper); color:var(--carbon); border-color:var(--copper); font-weight:600; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.summary-item { background:var(--carbon-3); border-radius:var(--radius); padding:14px; }
.summary-item .lbl { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.summary-item .val { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--cream); letter-spacing:1px; }
.summary-item.money .val { color:var(--completed); }
@media(max-width:768px){ .payroll-layout{grid-template-columns:1fr;} .summary-grid{grid-template-columns:1fr 1fr;} }

/* ══════════════════════════════════════════════════════
   USERS PAGE
   ══════════════════════════════════════════════════════ */
.role-select { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); padding:5px 8px; font-size:12px; outline:none; font-family:'DM Sans',sans-serif; transition:border-color .15s; }
.role-select:focus { border-color:var(--copper); }
.user-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-l); }
.user-row:last-child { border:none; }
.user-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:white; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:14px; font-weight:500; color:var(--ink); }
.user-email { font-size:12px; color:var(--muted); margin-top:1px; }
.worker-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-l); }
.worker-row:last-child { border:none; }

/* ══════════════════════════════════════════════════════
   VIEW (Pay App legacy viewer)
   ══════════════════════════════════════════════════════ */
.pa-list { max-height:calc(100vh - 200px); overflow-y:auto; }
.breakdown { background:var(--carbon-3); border-radius:var(--radius); padding:16px; margin-bottom:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.breakdown .lbl { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.breakdown .val { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--cream); }
.breakdown .val.money { color:var(--completed); }
@media(max-width:900px){ .pa-list{max-height:280px;} .breakdown{grid-template-columns:1fr 1fr;} }

/* ══════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════ */
.cal-nav { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.cal-nav h2 { font-family:'Bebas Neue',sans-serif; font-size:26px; color:var(--ink); letter-spacing:2px; flex:1; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border-l); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-s); }
.cal-header { background:var(--surface); padding:10px; text-align:center; font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.cal-day { background:white; padding:8px; min-height:100px; transition:background .12s; cursor:default; }
.cal-day.has-jobs { cursor:pointer; }
.cal-day.has-jobs:hover { background:var(--surface); }
.cal-day.empty { background:var(--surface); opacity:.5; cursor:default; }
.cal-day.today { background:white; border-top:3px solid var(--copper); }
.cal-day .day-num { font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.cal-day.today .day-num { color:var(--copper); font-size:14px; }
.cal-wo { font-size:10px; padding:3px 6px; border-radius:3px; margin-bottom:2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cal-wo.lead      { background:rgba(74,127,168,.12); color:var(--sky); }
.cal-wo.approved  { background:rgba(200,148,26,.12); color:var(--aspen); }
.cal-wo.completed { background:rgba(45,90,61,.12);   color:var(--pine); }
.cal-wo.pending   { background:rgba(218,98,39,.10);  color:var(--copper); }
.cal-wo.repair    { background:rgba(90,122,92,.10);  color:var(--sage); }
.cal-more { font-size:10px; color:var(--muted); margin-top:2px; cursor:pointer; }
.day-modal-backdrop { display:none; position:fixed; inset:0; background:rgba(42,31,20,.45); z-index:400; align-items:center; justify-content:center; padding:20px; }
.day-modal-backdrop.open { display:flex; }
.day-modal { background:white; border-radius:var(--radius-l); width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(42,31,20,.25); }

/* ══════════════════════════════════════════════════════
   MAP
   ══════════════════════════════════════════════════════ */
.map-sidebar-header { padding:14px 16px; border-bottom:1px solid var(--border-l); flex-shrink:0; }
.map-date-btn { display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-bottom:1px solid var(--border-l); cursor:pointer; transition:background .12s; font-size:13px; }
.map-date-btn:hover { background:var(--surface); }
.map-date-btn.active { background:rgba(218,98,39,.06); border-left:3px solid var(--copper); }
.map-date-btn .date-label { font-weight:500; color:var(--ink); }
.map-date-btn .date-count { font-size:11px; color:var(--muted); }
.map-job-list { padding:12px 16px; }
.map-job-item { padding:10px 0; border-bottom:1px solid var(--border-l); cursor:pointer; }
.map-job-item:hover { opacity:.8; }
.map-job-item:last-child { border-bottom:none; }
.map-stop-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; color:white; font-size:11px; font-weight:700; flex-shrink:0; margin-right:8px; }
.crew-chip { display:inline-block; font-size:10px; padding:2px 8px; border-radius:10px; background:var(--surface); border:1px solid var(--border-l); color:var(--muted); margin-right:4px; margin-bottom:4px; cursor:pointer; }
.crew-chip.active { background:rgba(218,98,39,.1); border-color:var(--copper); color:var(--copper); }
.map-legend { padding:10px 14px; display:flex; gap:12px; flex-wrap:wrap; border-top:1px solid var(--border-l); flex-shrink:0; }
.leg-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); }
.leg-dot { width:10px; height:10px; border-radius:50%; }

/* ══════════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════════ */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:24px; }
.setting-icon { background:var(--carbon-2); border:1px solid var(--border); border-radius:var(--radius-l); padding:18px 12px; text-align:center; cursor:pointer; transition:all .15s; position:relative; }
.setting-icon:hover { border-color:var(--copper); background:var(--carbon-3); }
.setting-icon.active { border-color:var(--copper); background:var(--carbon-3); }
.setting-icon .si-icon { font-size:28px; margin-bottom:8px; display:block; }
.setting-icon .si-label { font-size:12px; color:var(--body); font-weight:500; }
.setting-icon .si-status { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--border); }
.setting-icon .si-status.on { background:#4caf7d; }
.setting-icon .si-status.active { background:#4caf7d; }
.setting-icon .si-status.pending { background:#e0a030; }
.setting-panel { display:none; }
.setting-panel.active { display:block; }
.save-toast { position:fixed; bottom:24px; right:24px; z-index:999; background:var(--ink); border-radius:var(--radius-l); padding:12px 20px; font-size:13px; color:var(--canvas); transform:translateY(80px); opacity:0; transition:all .3s ease; pointer-events:none; box-shadow:var(--shadow-l); }
.save-toast.show  { transform:translateY(0); opacity:1; }
.save-toast.error { background:#c03232; }
.int-badge { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:600; margin-left:8px; vertical-align:middle; }
.int-on { background:rgba(76,175,125,.15); color:#4caf7d; border:1px solid rgba(76,175,125,.3); }
.int-off { background:rgba(90,98,112,.12); color:var(--muted); border:1px solid var(--border); }
.int-pending { background:rgba(224,160,48,.12); color:#e0a030; border:1px solid rgba(224,160,48,.3); }

/* ══════════════════════════════════════════════════════
   VIEWWORK
   ══════════════════════════════════════════════════════ */
.sidebar-search input { width:100%; background:var(--carbon-3); border:1px solid var(--border); border-radius:var(--radius); color:var(--cream); padding:9px 12px; font-family:'DM Sans',sans-serif; font-size:13px; outline:none; transition:border-color .15s; margin-bottom:12px; }
.sidebar-search input:focus { border-color:var(--copper); }
.wo-list { max-height:calc(100vh - 180px); overflow-y:auto; }
.wo-item { padding:12px; border-radius:var(--radius); cursor:pointer; border:1px solid transparent; margin-bottom:4px; transition:all .15s; }
.wo-item:hover { background:var(--carbon-3); border-color:var(--border); }
.wo-item.active { background:var(--carbon-3); border-color:var(--copper); }
.wo-item .code { font-family:monospace; font-size:11px; color:var(--copper); }
.wo-item .client { font-size:13px; color:var(--cream); font-weight:500; margin:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wo-item .meta { font-size:11px; color:var(--muted); display:flex; gap:8px; align-items:center; }
.detail-actions { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
@media(max-width:900px){ .wo-list{max-height:300px;} }

/* ══════════════════════════════════════════════════════
   NOMINAS
   ══════════════════════════════════════════════════════ */
.payapp-layout { display:block; max-width:100%; }
.pa-item { padding:12px 14px; border-radius:var(--radius); border:1px solid var(--border); background:var(--carbon-2); cursor:pointer; transition:all .15s; margin-bottom:6px; }
.pa-item:hover, .pa-item.active { border-color:var(--copper); background:var(--carbon-3); }
.pa-code { font-family:monospace; font-size:11px; color:var(--copper); }
.pa-crew { font-size:13px; color:var(--cream); font-weight:500; margin:2px 0; }
.pa-meta { font-size:11px; color:var(--muted); display:flex; justify-content:space-between; }
.detail-header { background:var(--carbon-2); border:1px solid var(--border); border-radius:var(--radius-l); padding:20px; margin-bottom:16px; }
.detail-kpis { display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; }
/* Scoped to payapp dark panel so it doesn't override dashboard .kpi cards */
.detail-kpis .kpi { flex:1; min-width:100px; }
.detail-kpis .kpi-label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
.detail-kpis .kpi-val { font-size:18px; font-weight:700; color:var(--cream); margin-top:2px; }
.detail-kpis .kpi-val.green { color:var(--completed); }
.detail-kpis .kpi-val.orange { color:var(--copper); }
.jtype { font-size:10px; padding:2px 8px; border-radius:20px; font-weight:600; white-space:nowrap; }
.jtype-repair { background:rgba(218,98,39,.15); color:var(--copper); border:1px solid rgba(218,98,39,.3); }
.jtype-replacement { background:rgba(74,144,217,.15); color:#4a90d9; border:1px solid rgba(74,144,217,.3); }
.jtype-inspection { background:rgba(76,175,125,.12); color:#4caf7d; border:1px solid rgba(76,175,125,.3); }
.state { display:none; }
.state.active { display:block; }

/* ══════════════════════════════════════════════════════
   PANEL — Dashboard
   ══════════════════════════════════════════════════════ */

/* ── Layout grids ─────────────────────────────────── */
.dash-grid   { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:20px; }
.dash-grid-2 { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:16px; }
.dash-fin    { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }

/* ── Section labels — visual dividers between dashboard sections */
.d-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 14px;
}
.d-section-label:first-child { margin-top: 4px; }
.d-section-label-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.d-section-label-line {
    flex: 1;
    height: 1px;
    background: var(--border-l);
}

/* Pipeline row — 7 WO status tiles */
.d-pipeline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 0;
}

/* Pipeline tile */
.pipe-card,
.d-pipe {
    background: white;
    border: 1px solid var(--border-l);
    border-radius: var(--radius);
    padding: 14px 16px 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.12s ease;
    text-decoration: none;
    display: block;
}
.pipe-card:hover,
.d-pipe:hover { background: var(--surface); transition: background 0.12s ease; }
.pipe-card::before,
.d-pipe::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--pc, var(--pipe-color, var(--border)));
}
/* Number */
.pipe-card .pc-num,
.d-pipe-n {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: 1px;
}
/* Label */
.pipe-card .pc-label,
.d-pipe-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 5px;
}
/* Badge */
.pipe-card .pc-badge,
.d-pipe-badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    margin-top: 7px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: rgba(0,0,0,.04);
    color: var(--muted);
}
.pipe-card.coming,
.d-pipe.coming { opacity: .5; pointer-events: none; }
.pipe-card.coming:hover,
.d-pipe.coming:hover { background: white; }
/* Pipeline tile value (sum of job amounts under stage count) */
.d-pipe-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--pc, var(--copper));
    margin: 3px 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Empty/coming soon placeholder dash in pipeline tile number */
.d-pipe-n--empty {
    font-size: 18px;
    color: var(--ghost);
}
/* "Ready to invoice" badge inside completed pipeline tile */
.d-pipe-ready {
    font-size: 10px;
    color: var(--aspen);
    margin-top: 3px;
    font-weight: 600;
}
/* Zero-value pipeline val placeholder (ghost dash) */
.d-pipe-val--empty { color: var(--ghost); }

/* ── KPI financial cards ──────────────────────────── */
.d-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
}
.fin-kpi,
.d-kpi {
    background: white;
    border: 1px solid var(--border-l);
    border-radius: var(--radius);
    padding: 14px 18px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
}
.fin-kpi::after,
.d-kpi::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kc, var(--fin-color, var(--border)));
}
.fin-kpi .fk-label,
.d-kpi-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
    line-height: 1.4;
}
.fin-kpi .fk-val,
.d-kpi-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    color: var(--ink);
    line-height: 1;
    letter-spacing: .5px;
}
.fin-kpi .fk-sub,
.d-kpi-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fin-kpi .fk-note,
.d-kpi-note {
    font-size: 10px;
    color: var(--ghost);
    margin-top: 5px;
    font-style: italic;
}

/* ── Mid row: activity + sales + crew ────────────── */
.d-mid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 0;
}
.d-mid > .pk-card { margin-bottom: 0; }

/* Activity mini-stat pills inside the activity card */
.d-activity-stats {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-shrink: 0;
}
.d-activity-stat { text-align: right; }
.d-activity-stat-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 2px;
}
.d-activity-stat-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--ink);
}

/* Card section header (inline, overrides default pk-card-title border) */
.d-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-l);
}
.d-card-header-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--copper);
}
.d-card-header-meta {
    font-size: 11px;
    color: var(--muted);
}
.d-card-header-action {
    font-size: 11px;
    color: var(--copper);
    text-decoration: none;
}
.d-card-header-action:hover { text-decoration: underline; }

/* ── Bar chart ────────────────────────────────────── */
.bar-chart,
.d-bars {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 60px;
    margin-top: 10px;
}
.bar,
.d-bar {
    flex: 1;
    background: var(--copper);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    opacity: .7;
    transition: opacity .15s;
    cursor: default;
}
.bar:hover,
.d-bar:hover { opacity: 1; }
.bar-labels,
.d-bar-labels { display: flex; gap: 4px; margin-top: 5px; }
.bar-label,
.d-bar-label {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: var(--muted);
}

/* ── Crew performance rows ────────────────────────── */
.crew-row       { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-l); }
.crew-row:last-child { border: none; }
.crew-name      { font-size: 13px; color: var(--ink); flex: 1; font-weight: 500; min-width: 0; }
.crew-bar-wrap  { flex: 2; height: 5px; background: var(--surface); border-radius: 3px; overflow: hidden; }
.crew-bar-fill  { height: 100%; background: var(--copper); border-radius: 3px; transition: width .4s ease; }
.crew-jobs      { font-size: 11px; color: var(--muted); min-width: 50px; text-align: right; white-space: nowrap; }

/* ── Alert banners ────────────────────────────────── */
.d-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--radius-l);
    padding: 12px 18px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: filter .15s;
    cursor: pointer;
}
.d-alert:hover { filter: brightness(.96); }
.d-alert-copper {
    background: linear-gradient(135deg, rgba(218,98,39,.07), rgba(218,98,39,.02));
    border: 1px solid rgba(218,98,39,.25);
    border-left: 4px solid var(--copper);
}
.d-alert-aspen {
    background: rgba(200,148,26,.06);
    border: 1px solid rgba(200,148,26,.25);
    border-left: 4px solid var(--aspen);
}
.d-alert-red {
    background: rgba(184,78,30,.07);
    border: 1px solid rgba(184,78,30,.22);
    border-left: 3px solid var(--copper-d);
}
.d-alert-amber {
    background: rgba(200,148,26,.07);
    border: 1px solid rgba(200,148,26,.22);
    border-left: 3px solid var(--aspen);
}
.d-alert-sky {
    background: rgba(74,127,168,.06);
    border: 1px solid rgba(74,127,168,.2);
    border-left: 3px solid var(--sky);
}
.d-alert-n {
    min-width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink);
    flex-shrink: 0;
}
.d-alert-copper .d-alert-n { background: rgba(218,98,39,.15); color: var(--copper-d); }
.d-alert-aspen  .d-alert-n { background: rgba(200,148,26,.15); color: var(--aspen); }
.d-alert-sky    .d-alert-n { background: rgba(74,127,168,.15); color: var(--sky); }
.d-alert-red    .d-alert-n { background: rgba(184,78,30,.15);  color: var(--copper-d); }
.d-alert-amber  .d-alert-n { background: rgba(200,148,26,.15); color: var(--aspen); }
.d-alert-body { flex: 1; min-width: 0; }
.d-alert-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.d-alert-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}
.d-alert-arrow {
    font-size: 16px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .15s;
}
.d-alert:hover .d-alert-arrow { transform: translateX(3px); }

/* System alerts strip (cron/info/warning/money) */
.d-alerts-strip {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.d-alert-sys {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: var(--radius-l);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--ink);
}
.d-alert-sys.warning { border-left: 3px solid #e0a030; }
.d-alert-sys.money   { border-left: 3px solid #c03232; }
.d-alert-sys.info    { border-left: 3px solid var(--s-lead); }
.d-alert-sys.cron    { border-left: 3px solid var(--border); }

/* ── Today's schedule card items ─────────────────── */
.d-today-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 1px solid var(--border-l);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .12s;
    margin-bottom: 6px;
    text-decoration: none;
}
.d-today-item:last-child { margin-bottom: 0; }
.d-today-item:hover { background: var(--surface); }
.d-today-time {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    min-width: 38px;
    flex-shrink: 0;
}
.d-today-info {
    flex: 1;
    min-width: 0;
}
.d-today-client {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.d-today-address {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.d-today-crew {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Crew owed rows ───────────────────────────────── */
.d-owed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-l);
}
.d-owed-row:last-child { border: none; }
.d-owed-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.d-owed-jobs {
    font-size: 11px;
    color: var(--muted);
}
.d-owed-total {
    font-size: 13px;
    font-weight: 700;
    color: #c03232;
    min-width: 70px;
    text-align: right;
}

/* ── WO table toolbar + table ─────────────────────── */
.d-wo-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.d-wo-toolbar-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.d-wo-search {
    flex: 1;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
}
.d-wo-search:focus { border-color: var(--copper); }
.d-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.d-table thead th {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-l);
    font-weight: 600;
}
.d-table thead th:last-child { text-align: right; }
.d-table tbody tr {
    border-bottom: 1px solid var(--border-l);
    cursor: pointer;
    transition: background .1s;
}
.d-table tbody tr:last-child { border: none; }
.d-table tbody tr:hover { background: var(--surface); }
.d-table td { padding: 10px 12px; }
.d-table .td-code { font-family: monospace; font-size: 11px; color: var(--copper); }
.d-table .td-client { font-weight: 500; color: var(--ink); }
.d-table .td-meta { font-size: 12px; color: var(--muted); }
.d-table .td-price { text-align: right; font-weight: 600; color: var(--pine); }

/* ── Pending alert (top-of-page) ─────────────────── */
.pending-alert {
    background: linear-gradient(135deg, rgba(218,98,39,.06) 0%, rgba(218,98,39,.02) 100%);
    border: 1px solid rgba(218,98,39,.25);
    border-left: 4px solid var(--copper);
    border-radius: var(--radius-l);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: background .15s;
    text-decoration: none;
}
.pending-alert:hover { background: rgba(218,98,39,.08); }
.pending-alert .num  { font-family: 'Bebas Neue', sans-serif; font-size: 44px; color: var(--copper); line-height: 1; }
.pending-alert .text .title { font-size: 14px; color: var(--ink); font-weight: 600; }
.pending-alert .text .sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pending-alert .arrow       { margin-left: auto; color: var(--copper); font-size: 18px; }

/* ── Dashboard loading state ─────────────────────── */
.d-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--muted);
    font-size: 13px;
    gap: 10px;
}
.d-loading::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--copper);
    border-radius: 50%;
    animation: d-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes d-spin { to { transform: rotate(360deg); } }

/* ── Responsive breakpoints ──────────────────────── */
@media (max-width: 1100px) {
    .d-pipeline  { grid-template-columns: repeat(4, 1fr); }
    .d-kpis      { grid-template-columns: repeat(2, 1fr); }
    .d-mid       { grid-template-columns: 1fr 1fr; }
    .dash-grid   { grid-template-columns: repeat(4, 1fr); }
    .dash-fin    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
    .dash-grid-2  { grid-template-columns: 1fr; }
    .d-mid        { grid-template-columns: 1fr; }
    .d-activity-stats { gap: 12px; }
}
@media (max-width: 768px) {
    .d-pipeline   { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .d-kpis       { grid-template-columns: 1fr 1fr; gap: 10px; }
    .d-section-label { margin: 20px 0 10px; }
    .d-pipe       { padding: 16px 14px 12px; }
    .d-pipe-n     { font-size: 34px; }
}
@media (max-width: 700px) {
    .d-pipeline   { grid-template-columns: repeat(3, 1fr); }
    .d-kpis       { grid-template-columns: 1fr 1fr; }
    .dash-grid    { grid-template-columns: repeat(2, 1fr); }
    .dash-fin     { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .d-pipeline   { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pipe-card .pc-num,
    .d-pipe-n     { font-size: 30px; }
    .d-kpi-val,
    .fin-kpi .fk-val { font-size: 26px; }
    .d-kpi        { padding: 18px 16px 14px; min-height: 95px; }
    .d-table thead th:nth-child(3),
    .d-table tbody td:nth-child(3),
    .d-table thead th:nth-child(4),
    .d-table tbody td:nth-child(4) { display: none; }
}
@media (max-width: 375px) {
    .d-pipeline   { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .d-kpis       { grid-template-columns: 1fr; }
    .pipe-card,
    .d-pipe       { padding: 14px 12px 10px; }
    .d-section-label { margin: 16px 0 8px; }
}


/* ══════════════════════════════════════════════════════
   DASHBOARD — HERO STATS BAR
   ══════════════════════════════════════════════════════ */
.d-hero {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-bottom: 20px;
    align-items: stretch;
}
.d-hero-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-l);
    border-radius: var(--radius);
    padding: 16px 20px 22px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.d-hero-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kc, var(--border));
    border-radius: var(--radius) var(--radius) 0 0;
}
.d-hero-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.d-hero-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: 1px;
}
.d-hero-sub {
    font-size: 11px;
    color: var(--body);
    margin-top: 6px;
}
@media (max-width:768px) { .d-hero { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .d-hero { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════
   DASHBOARD — SALES PERFORMANCE CARD
   ══════════════════════════════════════════════════════ */
.d-sales-mgr-row  { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.d-sales-mgr-rank { font-size:10px; font-weight:700; color:var(--muted); width:14px; text-align:center; }
.d-sales-mgr-name { font-size:12px; font-weight:600; color:var(--ink); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-sales-mgr-rev  { font-size:11px; color:var(--pine); font-weight:600; margin-left:auto; white-space:nowrap; }
.d-sales-mgr-jobs { font-size:10px; color:var(--muted); }
.d-sales-bar-wrap { flex:1; height:4px; background:var(--surface); border-radius:2px; overflow:hidden; margin:0 6px; }
.d-sales-bar-fill { height:100%; border-radius:2px; background:var(--copper); }
.d-sales-meta     { display:flex; gap:16px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.d-sales-meta-item  { display:flex; flex-direction:column; gap:2px; }
.d-sales-meta-label { font-size:10px; color:var(--muted); }
.d-sales-meta-val   { font-size:13px; font-weight:700; color:var(--ink); }
.d-sales-meta-val--accent { color:var(--copper); }

/* ══════════════════════════════════════════════════════
   DASHBOARD — OPERATIONAL HEALTH CARDS
   ══════════════════════════════════════════════════════ */

/* Responsive auto-fill grid wrapping the 3 health cards */
.d-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
    align-items: stretch;
}

/* Base card — left-bordered, semi-transparent bg */
.d-ops-card {
    border-left: 3px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    transition: background 0.12s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Override pk-card margin-bottom so the grid controls spacing */
    margin-bottom: 0 !important;
}
/* Link wrapper — full-height, no underline */
.d-ops-link {
    display: block;
    text-decoration: none;
    height: 100%;
}

/* Status modifiers — border + tinted bg */
.d-ops-card--ok    { border-left-color: var(--pine);     background: rgba(45,90,61,.06); }
.d-ops-card--warn  { border-left-color: var(--aspen);    background: rgba(200,148,26,.07); }
.d-ops-card--alert { border-left-color: var(--copper-d); background: rgba(184,78,30,.07); }

/* Inner content regions */
.d-ops-card-body  { flex: 1; min-width: 0; }
.d-ops-card-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.d-ops-card-amt {
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.3px;
}
.d-ops-card-val {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-top: 2px;
}
.d-ops-card-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}

/* Footer row with action label + dot indicator */
.d-ops-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,.06);
}
.d-ops-card-action-label {
    font-size: 11px;
    font-weight: 600;
    /* color is set via --oc custom property: style="--oc:var(--pine)" */
    color: var(--oc, var(--muted));
}
.d-ops-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    /* background is set via --od custom property: style="--od:var(--aspen)" */
    background: var(--od, var(--border));
}

/* Callback tag — inline pill for property names in card sub text */
.d-callback-tag {
    display: inline-block;
    font-size: 10px;
    background: rgba(192,50,50,.12);
    color: #c03232;
    padding: 1px 6px;
    border-radius: 3px;
    margin: 1px;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — KPI TOGGLE BUTTONS (Month / YTD)
   ══════════════════════════════════════════════════════ */
.d-kpi-toggle-btn {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--canvas);
    color: var(--muted);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.1s;
}
.d-kpi-toggle-btn.active {
    background: var(--copper);
    color: #fff;
    border-color: var(--copper);
}

/* KPI section header — flex wrapper for title + toggle buttons */
.d-kpi-section-head {
    display: flex;
    align-items: center;
}
.d-kpi-toggle-row {
    display: flex;
    gap: 4px;
    margin-left: 10px;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — SPARKLINE (Revenue Trend)
   ══════════════════════════════════════════════════════ */
.d-spark-wrap {
    margin: 8px 0 12px;
    padding: 8px 0 0;
}
.d-spark-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.d-spark-chart {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.d-spark-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0;
    min-width: 28px;
    text-align: right;
}
.d-spark-yaxis span {
    font-size: 9px;
    color: var(--ghost);
    line-height: 1;
}
.d-spark-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 58px;
    border-left: 1px solid var(--border-l);
    padding-left: 6px;
}
.d-spark-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}
.d-spark-bar-label {
    font-size: 9px;
    color: var(--muted);
    margin-bottom: 2px;
    white-space: nowrap;
    line-height: 1;
}
/* Individual bars get height inline (dynamic) and background via modifier class */
.d-spark-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
}
.d-spark-bar--data  { background: var(--copper); opacity: .8; }
.d-spark-bar--empty { background: var(--surface-3); opacity: .5; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — CREW ROW PCT BADGE
   ══════════════════════════════════════════════════════ */
.crew-row-stats {
    display: flex;
    gap: 5px;
    align-items: center;
    min-width: 68px;
    justify-content: flex-end;
}
.crew-pct {
    font-size: 10px;
    color: var(--ghost);
    min-width: 28px;
    text-align: right;
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — AGING FOOTER TOTALS
   ══════════════════════════════════════════════════════ */
.d-aging-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 16px;
    align-items: baseline;
}
.d-aging-footer-count {
    font-size: 11px;
    color: var(--muted);
}
.d-aging-footer-total {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — NEW SECTIONS
   ══════════════════════════════════════════════════════ */
.d-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:0; }
.d-action-section { background:white; border:1px solid var(--border-l); border-radius:var(--radius); overflow:hidden; }
.d-action-section-head { padding:10px 14px 8px; border-bottom:1px solid var(--border-l); display:flex; align-items:center; gap:8px; }
.d-action-section-title { font-size:9px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); flex:1; }
.d-action-section-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.d-action-item { display:flex; align-items:center; gap:10px; padding:8px 14px; border-bottom:1px solid var(--border-l); text-decoration:none; transition:background 0.1s; cursor:pointer; }
.d-action-item:last-child { border-bottom:none; }
.d-action-item:hover { background:var(--surface); }
.d-action-item-label { flex:1; font-size:12px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.d-action-count { font-size:11px; font-weight:700; min-width:22px; text-align:center; padding:1px 6px; border-radius:10px; background:var(--surface); color:var(--ink); flex-shrink:0; }
.d-action-count.has-items { background:var(--copper); color:white; }
.d-action-count.warn      { background:var(--aspen);  color:white; }
.d-action-count.alert     { background:var(--copper-d); color:white; }

.d-lb-tabs { display:flex; gap:3px; margin-bottom:12px; }
.d-lb-tab { font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 10px; border-radius:var(--radius); border:1px solid var(--border); background:var(--canvas); color:var(--muted); cursor:pointer; transition:all 0.1s; font-family:'DM Sans',sans-serif; }
.d-lb-tab.active { background:var(--copper); color:white; border-color:var(--copper); }
.d-lb-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-l); }
.d-lb-row:last-child { border-bottom:none; }
.d-lb-rank { font-size:11px; font-weight:700; color:var(--muted); width:18px; text-align:center; flex-shrink:0; }
.d-lb-name { flex:1; font-size:13px; font-weight:500; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-lb-jobs { font-size:11px; color:var(--muted); flex-shrink:0; }
.d-lb-bar-wrap { width:60px; height:4px; background:var(--surface); border-radius:2px; overflow:hidden; flex-shrink:0; }
.d-lb-bar  { height:100%; background:var(--copper); border-radius:2px; }
.d-lb-rev  { font-size:12px; font-weight:600; color:var(--ink); flex-shrink:0; min-width:64px; text-align:right; }
.d-lb-empty { font-size:12px; color:var(--muted); padding:12px 0; text-align:center; }

.d-schedule { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.d-schedule-card { background:white; border:1px solid var(--border-l); border-radius:var(--radius); padding:14px 16px 18px; position:relative; overflow:hidden; text-align:center; }
.d-schedule-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kc,var(--border)); border-radius:var(--radius) var(--radius) 0 0; }
.d-schedule-label { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.d-schedule-val { font-family:'Bebas Neue',sans-serif; font-size:44px; color:var(--ink); line-height:1; }
.d-schedule-sub { font-size:11px; color:var(--muted); margin-top:4px; }

.d-aging-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.d-aging-card { background:white; border:1px solid var(--border-l); border-radius:var(--radius); padding:12px 14px 16px; position:relative; overflow:hidden; text-align:center; }
.d-aging-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; background:var(--ac,var(--border)); }
.d-aging-label { font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.d-aging-count { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--ink); line-height:1; }
.d-aging-amt   { font-size:12px; font-weight:600; color:var(--ink); margin-top:4px; }

.d-act30-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.d-act30-link  { text-decoration:none; display:block; }
.d-act30-card { background:white; border:1px solid var(--border-l); border-radius:var(--radius); padding:12px 10px 14px; text-align:center; transition:background .12s; }
.d-act30-link:hover .d-act30-card { background:var(--surface); }
.d-act30-label { font-size:9px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; line-height:1.3; }
.d-act30-val   { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--ink); line-height:1; }

.d-feed { max-height:340px; overflow-y:auto; }
.d-feed-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border-l); }
.d-feed-item:last-child { border-bottom:none; }
.d-feed-dot    { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; background:var(--border); }
.d-feed-body   { flex:1; min-width:0; }
.d-feed-action { font-size:12px; font-weight:500; color:var(--ink); margin-bottom:1px; }
.d-feed-meta   { font-size:11px; color:var(--muted); }
.d-feed-time   { font-size:10px; color:var(--ghost); flex-shrink:0; margin-top:2px; white-space:nowrap; }
.d-feed-ref    { font-family:monospace; font-size:10px; color:var(--copper); }
.d-feed-detail { color:var(--muted); }
.d-feed-empty  { font-size:12px; color:var(--muted); padding:12px 0; text-align:center; }

/* ── Color-dot modifiers (for section header dots) ── */
.d-dot--sky   { background: var(--sky); }
.d-dot--aspen { background: var(--aspen); }
.d-dot--pine  { background: var(--pine); }
.d-dot--copper{ background: var(--copper); }

/* ── Misc dashboard utilities ─────────────────────── */
/* Empty-state note used in crew performance, etc. */
.d-empty-note { color:var(--muted); font-size:13px; padding:8px 0; }
/* Card description / legend text below card header */
.d-card-desc { font-size:12px; color:var(--muted); margin:4px 0 0; line-height:1.5; }
/* pk-pills with no bottom margin (inside toolbar row) */
.pk-pills--flush { margin-bottom:0; }
/* Sales best-month accent color */
.d-sales-meta-val--accent { color:var(--copper); }
/* Activity stat accent */
.d-activity-stat-val--accent { color:var(--copper); }

@media (max-width:1100px) { .d-action-grid{grid-template-columns:1fr 1fr;} .d-act30-grid{grid-template-columns:repeat(3,1fr);} .d-aging-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px)  { .d-action-grid{grid-template-columns:1fr;} .d-act30-grid{grid-template-columns:repeat(3,1fr);} .d-aging-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px)  { .d-schedule{grid-template-columns:1fr;} .d-act30-grid{grid-template-columns:repeat(2,1fr);} .d-aging-grid{grid-template-columns:1fr 1fr;} }

/* ══════════════════════════════════════════════════════
   AI CONNECT — AI Chat
   ══════════════════════════════════════════════════════ */
.ai-layout { display:flex; flex:1; overflow:hidden; }
.ai-sidebar { width:260px; background:var(--carbon-2); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.ai-sidebar-header { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.ai-sidebar-header h3 { font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.new-chat-btn { background:var(--copper); color:var(--carbon); border:none; border-radius:var(--radius); padding:4px 10px; font-size:11px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; }
.new-chat-btn:hover { background:var(--copper-l); }
.sessions-list { flex:1; overflow-y:auto; padding:8px; }
.session-item { padding:8px 10px; border-radius:var(--radius); cursor:pointer; margin-bottom:2px; display:flex; justify-content:space-between; align-items:center; transition:background .15s; }
.session-item:hover { background:var(--carbon-3); }
.session-item.active { background:var(--carbon-3); border-left:2px solid var(--copper); }
.session-item .s-title { font-size:12px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.session-item .s-del { color:var(--muted); background:none; border:none; cursor:pointer; font-size:14px; padding:0 2px; opacity:0; transition:opacity .15s; }
.session-item:hover .s-del { opacity:1; }
.ai-memory-section { padding:10px 16px; border-top:1px solid var(--border); max-height:140px; overflow-y:auto; }
.ai-memory-section .lbl { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.mem-item { font-size:11px; color:var(--body); margin-bottom:3px; }
.mem-key { color:var(--copper); }
.chat-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.alerts-bar { padding:8px 16px; border-bottom:1px solid var(--border); display:flex; gap:8px; flex-wrap:wrap; }
.alert-chip { font-size:11px; padding:3px 10px; border-radius:10px; }
.alert-chip.warning { background:rgba(224,160,48,.15); color:var(--approved); border:1px solid rgba(224,160,48,.3); }
.alert-chip.money   { background:rgba(76,175,125,.15); color:var(--completed); border:1px solid rgba(76,175,125,.3); }
.alert-chip.info    { background:rgba(74,144,217,.15); color:var(--lead); border:1px solid rgba(74,144,217,.3); }
.chat-area { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:75%; }
.msg.user      { align-self:flex-end; }
.msg.assistant { align-self:flex-start; }
.bubble { padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.6; white-space:pre-wrap; }
.msg.user .bubble      { background:var(--copper); color:var(--carbon); border-bottom-right-radius:3px; font-weight:500; }
.msg.assistant .bubble { background:var(--carbon-2); border:1px solid var(--border); color:var(--body); border-bottom-left-radius:3px; }
.msg-time { font-size:10px; color:var(--muted); padding:2px 4px; }
.msg.user .msg-time { text-align:right; }
.action-result     { display:inline-block; font-size:11px; padding:3px 10px; border-radius:10px; margin-top:6px; margin-right:4px; }
.action-result.ok  { background:rgba(76,175,125,.15); color:var(--completed); border:1px solid rgba(76,175,125,.3); }
.action-result.err { background:rgba(224,85,85,.15); color:#e05555; border:1px solid rgba(224,85,85,.3); }
.input-bar { background:var(--carbon-2); border-top:1px solid var(--border); padding:12px 16px; display:flex; gap:10px; align-items:flex-end; }
.input-bar textarea { flex:1; background:var(--carbon-3); border:1px solid var(--border); border-radius:var(--radius); color:var(--cream); padding:10px 14px; font-family:'DM Sans',sans-serif; font-size:14px; resize:none; min-height:44px; max-height:120px; outline:none; }
.input-bar textarea:focus { border-color:var(--copper); }
.quick-row { display:flex; gap:6px; flex-wrap:wrap; padding:6px 16px 0; }
.quick-btn { background:var(--carbon-3); border:1px solid var(--border); color:var(--muted); border-radius:20px; padding:4px 12px; font-size:11px; cursor:pointer; font-family:'DM Sans',sans-serif; transition:all .15s; }
.quick-btn:hover { border-color:var(--copper); color:var(--copper); }
.typing { display:none; align-self:flex-start; }
.typing .bubble { background:var(--carbon-2); border:1px solid var(--border); }
.dot { display:inline-block; width:6px; height:6px; background:var(--copper); border-radius:50%; margin:0 2px; animation:bounce .9s infinite; }
.dot:nth-child(2){animation-delay:.15s;} .dot:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.no-key { background:rgba(196,125,58,.1); border-bottom:1px solid rgba(196,125,58,.3); padding:10px 20px; font-size:13px; color:var(--copper); }
.no-key a { color:var(--copper); font-weight:600; }
@media(max-width:768px){ .ai-sidebar{display:none;} }

/* ai-connect page needs full-height flex body */
.pk-connect-page { display:flex; flex-direction:column; height:100vh; overflow:hidden; }

/* ══════════════════════════════════════════════════════
   CREW PORTAL — Mobile-first
   ══════════════════════════════════════════════════════ */
.crew-topbar { background:var(--rust); height:52px; display:flex; align-items:center; padding:0 16px; gap:12px; position:sticky; top:0; z-index:200; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.crew-brand { font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:2px; color:white; text-decoration:none; display:flex; align-items:center; gap:6px; }
.crew-brand-sep { color:rgba(255,255,255,.5); font-size:14px; }
.crew-user { font-size:12px; color:rgba(255,255,255,.8); font-weight:500; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.crew-logout { color:rgba(255,255,255,.7); text-decoration:none; font-size:12px; padding:6px 10px; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); flex-shrink:0; transition:all .15s; }
.crew-logout:hover { background:rgba(255,255,255,.1); color:white; }

.crew-bottom-nav { position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid var(--border-l); display:flex; z-index:200; box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.crew-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 4px; text-decoration:none; color:var(--muted); font-size:10px; letter-spacing:.5px; text-transform:uppercase; font-weight:600; transition:color .15s; gap:3px; border:none; background:none; cursor:pointer; }
.crew-nav-item .nav-icon { font-size:20px; line-height:1; }
.crew-nav-item.active { color:var(--copper); }

.crew-main { padding:16px 16px 80px; max-width:700px; margin:0 auto; }

.crew-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.crew-kpi { background:white; border:1px solid var(--border-l); border-radius:var(--radius-l); padding:14px 10px; text-align:center; box-shadow:var(--shadow-s); }
.crew-kpi .kpi-n { font-family:'Bebas Neue',sans-serif; font-size:32px; line-height:1; color:var(--ink); }
.crew-kpi .kpi-n.green { color:var(--pine); }
.crew-kpi .kpi-n.amber { color:var(--aspen); }
.crew-kpi .kpi-l { font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-top:3px; }

.crew-job-card { background:white; border:1px solid var(--border-l); border-radius:var(--radius-l); padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:all .15s; display:flex; align-items:center; gap:12px; text-decoration:none; box-shadow:var(--shadow-s); }
.crew-job-card:active { transform:scale(.98); box-shadow:none; }
.crew-job-card .job-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.crew-job-card .job-info { flex:1; min-width:0; }
.crew-job-card .job-client { font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crew-job-card .job-meta { font-size:12px; color:var(--muted); margin-top:2px; display:flex; gap:8px; flex-wrap:wrap; }
.crew-job-card .job-code { font-family:monospace; font-size:10px; color:var(--copper); }
.crew-job-card .job-arrow { color:var(--muted); font-size:16px; flex-shrink:0; }

.dot-lead      { background:var(--sky); }
.dot-approved  { background:var(--sage); }
.dot-progress  { background:var(--aspen); }
.dot-completed { background:var(--pine); }
.dot-pending   { background:var(--copper); }
.dot-default   { background:var(--muted); }

.crew-section { background:white; border:1px solid var(--border-l); border-radius:var(--radius-l); padding:16px; margin-bottom:14px; box-shadow:var(--shadow-s); }
.crew-section-title { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.crew-field-row { display:flex; justify-content:space-between; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--border-l); gap:12px; }
.crew-field-row:last-child { border-bottom:none; }
.crew-field-label { font-size:12px; color:var(--muted); flex-shrink:0; }
.crew-field-val { font-size:13px; font-weight:500; color:var(--ink); text-align:right; }

.crew-textarea { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); padding:10px 12px; font-family:'DM Sans',sans-serif; font-size:14px; resize:vertical; outline:none; transition:border-color .15s; min-height:90px; }
.crew-textarea:focus { border-color:var(--copper); }

.crew-btn-primary { background:var(--copper); color:white; border:none; border-radius:var(--radius); padding:13px 20px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; width:100%; transition:background .15s; display:flex; align-items:center; justify-content:center; gap:6px; }
.crew-btn-primary:active { background:#b8501e; }
.crew-btn-success { background:var(--pine); color:white; border:none; border-radius:var(--radius); padding:13px 20px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; width:100%; margin-top:10px; transition:background .15s; }
.crew-btn-success:active { background:#1e4028; }

.crew-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.crew-photo-thumb { aspect-ratio:1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-l); cursor:pointer; position:relative; }
.crew-photo-thumb img { width:100%; height:100%; object-fit:cover; }
.crew-photo-type { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.55); color:white; font-size:9px; letter-spacing:.5px; text-transform:uppercase; padding:3px 5px; text-align:center; }

.crew-upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:24px 16px; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; transition:all .15s; }
.crew-upload-zone:active { border-color:var(--copper); color:var(--copper); }

.crew-back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:13px; margin-bottom:14px; }

.lpa-card { background:white; border:1px solid var(--border-l); border-radius:var(--radius-l); padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-s); }
.lpa-card .lpa-info { flex:1; min-width:0; }
.lpa-card .lpa-code { font-family:monospace; font-size:12px; color:var(--copper); }
.lpa-card .lpa-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.lpa-card .lpa-total { font-size:16px; font-weight:700; color:var(--pine); text-align:right; }

.crew-alert { background:rgba(45,90,61,.1); border:1px solid rgba(45,90,61,.3); color:var(--pine); border-radius:var(--radius); padding:12px 14px; font-size:13px; margin-bottom:14px; }

.crew-list-label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:20px 0 10px; }

.crew-empty { text-align:center; padding:48px 20px; color:var(--muted); }
.crew-empty .empty-icon { font-size:40px; margin-bottom:10px; }
.crew-empty p { font-size:14px; }

.upload-bar-wrap { display:none; background:var(--surface); border-radius:var(--radius); overflow:hidden; height:6px; margin-top:10px; }
.upload-bar { height:100%; background:var(--copper); transition:width .2s; width:0; }

@media(min-width:480px){ .crew-photo-grid{grid-template-columns:repeat(4,1fr);} .crew-kpis{gap:14px;} }

/* ══════════════════════════════════════════════════════
   MAP — layout principal (se perdió en extracción CSS)
   ══════════════════════════════════════════════════════ */
.map-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    height: calc(100vh - 140px);
}
.map-sidebar {
    background: white;
    border-right: 1px solid var(--border-l);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
#map-canvas { flex: 1; }

/* ══════════════════════════════════════════════════════
   VIEWWORK — layout sidebar + detail (se perdió en extracción)
   ══════════════════════════════════════════════════════ */
.layout {
    display: block;
}
.sidebar {
    display: none; /* sidebar hidden — list is its own page now */
}
@media(max-width:900px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .wo-list { max-height: 300px; }
}

/* ══════════════════════════════════════════════════════
   WORK ORDER DETAIL — tabbed layout v2
   ══════════════════════════════════════════════════════ */

/* ── Hero header ─────────────────────────────────────── */
.wo-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: var(--rust);
    padding: 20px 24px 18px;
    border-radius: var(--radius-l);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.wo-hero-left { flex: 1; min-width: 0; }
.wo-hero-back {
    display: inline-block;
    font-size: 12px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color .15s;
}
.wo-hero-back:hover { color: white; }
.wo-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: white;
    line-height: 1.25;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wo-hero-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    line-height: 1.5;
}
.wo-hero-meta {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.wo-hero-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 4px;
}
.wo-hero-status-pill {
    background: var(--aspen);
    color: white;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 4px 12px;
    white-space: nowrap;
}
.wo-hero-status-pill.wo-status-invoice {
    background: color-mix(in srgb, var(--sky) 15%, transparent);
    color: var(--sky);
    border: 1px solid var(--sky);
}
.wo-hero-status-pill.wo-status-closed {
    background: color-mix(in srgb, var(--pine) 15%, transparent);
    color: var(--pine);
    border: 1px solid var(--pine);
}
.wo-hero-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    color: white;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    transition: background .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-height: 34px;
}
.wo-hero-btn:hover {
    background: rgba(255,255,255,.12);
    border-color: white;
    color: white;
}

/* ── Tab bar ─────────────────────────────────────────── */
.wo-tab-bar {
    display: flex;
    align-items: flex-end;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--nav-top-h, 40px);
    z-index: 88;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 0;
}
.wo-tab-bar::-webkit-scrollbar { display: none; }
.wo-tab-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
    padding: 14px 16px 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wo-tab-btn:hover { color: var(--ink); }
.wo-tab-btn.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--copper);
}
.wo-tab-btn-disabled {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}
.wo-tab-soon {
    background: var(--aspen);
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 8px;
    padding: 2px 6px;
}

/* ── Tab content area ────────────────────────────────── */
.wo-tab-content {
    background: var(--canvas);
    padding: 24px;
}

/* ── Two-column detail layout ────────────────────────── */
.wo-detail-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.wo-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Action panel ────────────────────────────────────── */
.wo-action-panel {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: calc(var(--nav-top-h, 40px) + 48px + 16px);
    align-self: flex-start;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.wo-ap-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-l);
}
.wo-ap-section:last-child { border-bottom: none; }
.wo-ap-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}
.wo-ap-select {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    padding: 7px 10px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color .15s;
}
.wo-ap-select:focus { border-color: var(--copper); }
.wo-ap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--ink);
    padding: 4px 0;
}
.wo-ap-row span:first-child { color: var(--muted); font-size: 12px; }
.wo-ap-reject-btn {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--radius);
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    padding: 7px;
    cursor: pointer;
    transition: all .15s;
}
.wo-ap-reject-btn:hover { border-color: #c03232; color: #c03232; }

/* ── Mini pipeline stepper ───────────────────────────── */
.wo-mini-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
}
.wo-mini-dot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.wo-mini-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wo-mini-dot.dot-active  { background: var(--copper); }
.wo-mini-dot.dot-future  { background: var(--border); }
.wo-mini-dot-label {
    font-size: 8px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.wo-mini-connector {
    flex: 1;
    height: 1px;
    background: var(--border-l);
    min-width: 12px;
    margin-bottom: 14px;
}

/* ── Milestone stepper ───────────────────────────────── */
.wo-milestone-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.wo-ms-node-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.wo-ms-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.wo-ms-circle.ms-current { background: var(--aspen); color: white; }
.wo-ms-circle.ms-past    { background: var(--aspen); color: white; }
.wo-ms-circle.ms-future  {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
}
.wo-ms-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    white-space: nowrap;
}
.wo-ms-connector {
    flex: 1;
    height: 1px;
    background: var(--border-l);
    min-width: 16px;
    margin-top: 16px;
}

/* ── Storm Phase Pipeline stepper ─────────────────────── */
.wo-storm-phase-track {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
}
.wo-sph-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    max-width: 80px;
    flex-shrink: 0;
}
.wo-sph-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
    transition: background .2s;
}
.wo-sph-node.sph-current .wo-sph-dot {
    background: var(--copper);
    color: white;
    box-shadow: 0 0 0 3px rgba(196,125,58,.25);
}
.wo-sph-node.sph-past .wo-sph-dot {
    background: var(--aspen);
    color: white;
}
.wo-sph-node.sph-future .wo-sph-dot {
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
}
.wo-sph-label {
    font-size: 9px;
    text-align: center;
    line-height: 1.3;
    color: var(--muted);
    letter-spacing: .3px;
    word-break: break-word;
    max-width: 72px;
}
.wo-sph-node.sph-current .wo-sph-label { color: var(--copper); font-weight: 700; }
.wo-sph-node.sph-past    .wo-sph-label { color: var(--aspen); }
.wo-sph-connector {
    flex: 1;
    height: 1px;
    background: var(--border-l);
    min-width: 8px;
    margin-top: 14px;
    flex-shrink: 1;
}
.wo-sph-connector.sph-connector-done { background: var(--aspen); }

.wo-ms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.wo-ms-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
}
.wo-advance-btn {
    background: var(--copper);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    padding: 7px 16px;
    cursor: pointer;
    transition: background .15s;
    min-height: 34px;
}
.wo-advance-btn:hover { background: var(--copper-l); }

.wo-status-final-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    margin-top: 8px;
}
.wo-status-closed-badge {
    color: var(--pine);
    border-color: var(--pine);
    background: color-mix(in srgb, var(--pine) 8%, transparent);
}

/* ── Activity pills ──────────────────────────────────── */
.wo-activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wo-activity-pill {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--ink);
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    padding: 6px 14px;
    cursor: pointer;
    transition: all .15s;
    min-height: 32px;
}
.wo-activity-pill:hover {
    border-color: var(--copper);
    color: var(--copper);
    background: rgba(218,98,39,.04);
}

/* ── Job info grid ───────────────────────────────────── */
.wo-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 24px;
}
.wo-info-item {}
.wo-info-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 3px;
}
.wo-info-val {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
}

/* ── Description / Notes accent cards ───────────────── */
.wo-desc-card {
    border-left: 4px solid var(--copper);
    background: var(--surface);
    padding: 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.wo-desc-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.wo-notes-card {
    border-left: 4px solid var(--sky);
    background: var(--surface);
    padding: 16px;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.wo-notes-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
}

/* ── Empty states ────────────────────────────────────── */
.wo-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
}
.wo-empty-icon {
    font-size: 32px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1;
}
.wo-empty-text {
    font-size: 14px;
    color: var(--muted);
}
.wo-outline-btn {
    background: transparent;
    border: 1px solid var(--copper);
    color: var(--copper);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    padding: 8px 18px;
    cursor: pointer;
    transition: all .2s;
    min-height: 38px;
}
.wo-outline-btn:hover {
    background: var(--copper);
    color: white;
}

/* ── AI tab card ─────────────────────────────────────── */
.wo-ai-card {
    max-width: 480px;
    margin: 0 auto;
    background: white;
    border: 1px solid var(--border-l);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    box-shadow: var(--shadow);
}
.wo-ai-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 16px;
    margin-bottom: 6px;
}
.wo-ai-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 24px;
}
.wo-ai-features {
    list-style: none;
    text-align: left;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wo-ai-features li {
    font-size: 13px;
    color: var(--body);
    padding-left: 18px;
    position: relative;
    line-height: 1.5;
}
.wo-ai-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--copper);
}
.wo-ai-notify-btn {
    border: 2px solid var(--copper);
    color: var(--copper);
    background: transparent;
    border-radius: var(--radius);
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: all .2s;
    min-height: 44px;
}
.wo-ai-notify-btn:hover {
    background: var(--copper);
    color: white;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .wo-detail-layout {
        flex-direction: column;
    }
    .wo-action-panel {
        width: 100%;
        position: static;
        order: -1;
    }
    .wo-hero {
        padding: 16px;
        gap: 14px;
    }
    .wo-hero-title { font-size: 18px; }
    .wo-hero-right {
        width: 100%;
        flex-wrap: wrap;
    }
    .wo-tab-content { padding: 16px; }
    .wo-info-grid { grid-template-columns: 1fr; gap: 10px; }
    .wo-ms-label { font-size: 9px; }
}
@media (max-width: 480px) {
    .wo-hero-title { font-size: 16px; }
    .wo-tab-btn { padding: 12px 12px 9px; font-size: 12px; }
    .wo-tab-content { padding: 12px; }
    .wo-milestone-stepper { gap: 0; }
    .wo-ms-connector { min-width: 8px; }
    .wo-ai-card { padding: 28px 20px; }
}

/* ══════════════════════════════════════════════════════
   FINANCIAL HEALTH BAR (viewwork detail)
   ══════════════════════════════════════════════════════ */
.wo-financial-bar { display:flex; align-items:center; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 24px; gap:0; }
.wo-fin-metric { flex:1; text-align:center; padding:0 16px; }
.wo-fin-label { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
.wo-fin-value { font-size:18px; font-weight:700; color:var(--ink); font-family:monospace; }
.wo-fin-positive { color:var(--pine); }
.wo-fin-balance { color:var(--copper); }
.wo-fin-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; }
@media(max-width:768px) { .wo-financial-bar { flex-wrap:wrap; gap:12px; padding:12px 16px; } .wo-fin-divider { display:none; } .wo-fin-metric { flex:calc(50% - 6px); } }

/* ══════════════════════════════════════════════════════
   STORM INSURANCE PIPELINE — Dashboard panel
   ══════════════════════════════════════════════════════ */

/* KPI row override for storm (same grid as .d-kpis but accent via --spc) */
.d-kpis-storm { grid-template-columns: repeat(4, 1fr); }

/* Phase funnel container */
.d-storm-funnel {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    align-items: end;
    min-height: 120px;
    padding: 12px 0 4px;
    overflow-x: auto;
}

/* Single phase column */
.d-storm-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    min-width: 52px;
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 4px 8px;
    transition: background .15s;
}
.d-storm-phase:hover { background: var(--surface); }
.d-storm-phase-empty { cursor: default; opacity: .45; }

/* Bar track + fill */
.d-storm-phase-bar-wrap {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 6px;
}
.d-storm-phase-bar {
    width: 60%;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height .3s ease;
}

/* Count number */
.d-storm-phase-n {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 4px;
}

/* Phase label */
.d-storm-phase-label {
    font-size: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    line-height: 1.3;
    word-break: break-word;
    max-width: 60px;
}

/* Optional dollar value under label */
.d-storm-phase-val {
    font-size: 9px;
    color: var(--ghost);
    margin-top: 3px;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1100px) {
    .d-storm-funnel { grid-template-columns: repeat(6, 1fr); }
    .d-kpis-storm   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .d-storm-funnel { grid-template-columns: repeat(4, 1fr); }
    .d-kpis-storm   { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .d-storm-funnel { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .d-storm-phase-n { font-size: 18px; }
}