/* ═══════════════════════════════════════════════════════════════════════════
   GROUNDWORK DESIGN SYSTEM — GW-002 Token Foundation
   Executive Operations palette · Sprint 1 · 2026-06-27
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand primitives ── */
  --gw-pine:       #113931;   /* sidebar / primary brand surface          */
  --gw-pine-deep:  #0E372F;   /* sidebar hover / pressed                  */
  --gw-pine-light: #1A4740;   /* sidebar active bg tint                   */
  --gw-pine-muted: #2D7A55;   /* sidebar secondary text / dividers        */
  --gw-emerald:    #2D7A55;   /* positive trend / success accent          */
  --gw-emerald-dim:#113931;   /* emerald on dark bg                       */
  --gw-sky:        #4D8A86;   /* interactive blue / links / focus rings   */
  --gw-sky-2:      #4D8A86;   /* sky hover / gradient end                 */
  --gw-sky-soft:   #E5F0EF;   /* sky tint surface                         */
  --gw-amber:      #8B6914;   /* warning / caution accent                 */
  --gw-rose:       #8B3A2A;   /* danger / overdue                         */

  /* ── Neutral scale ── */
  --gw-ink:        #0F1C14;   /* primary text                             */
  --gw-ink-2:      #1E3326;   /* secondary text                           */
  --gw-muted:      #5A6B79;   /* tertiary / placeholder text              */
  --gw-subtle:     #6F7E6A;   /* disabled / hint text                     */
  --gw-line:       #E2EBE8;   /* border / divider                         */
  --gw-line-strong:#C8D8D3;   /* stronger divider                         */

  /* ── Surface scale ── */
  --gw-bg:         #F5F9F7;   /* page background — warm off-white green   */
  --gw-surface:    #FFFFFF;   /* card / panel surface                     */
  --gw-surface-2:  #FDFCF9;   /* secondary surface / alt row              */
  --gw-surface-3:  #EAF1EE;   /* tertiary / hover surface                 */

  /* ── Shadow scale ── */
  --gw-shadow-xs:  0 1px 3px rgba(15,28,20,.06);
  --gw-shadow-sm:  0 4px 12px rgba(15,28,20,.07);
  --gw-shadow-md:  0 8px 28px rgba(15,28,20,.09);
  --gw-shadow-lg:  0 20px 56px rgba(15,28,20,.12);

  /* ── Radius scale ── */
  --gw-r-xs:  6px;
  --gw-r-sm:  10px;
  --gw-r-md:  14px;
  --gw-r-lg:  18px;
  --gw-r-xl:  24px;

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

  /* ── Spacing scale ──
     Use these instead of ad-hoc pixel values in new/edited rules. */
  --gw-space-1:  4px;
  --gw-space-2:  8px;
  --gw-space-3: 12px;
  --gw-space-4: 16px;
  --gw-space-5: 20px;
  --gw-space-6: 24px;
  --gw-space-7: 32px;
  --gw-space-8: 40px;

  /* ── Touch targets ──
     44px is the Apple HIG minimum and the Material 48dp guidance rounds near it.
     Anything a finger has to hit on a phone should reach --gw-tap. */
  --gw-tap:     44px;
  --gw-tap-sm:  38px;  /* dense secondary controls, still thumb-usable */

  /* ── Safe-area insets (notch / home indicator) ──
     env() resolves to 0px on non-notched devices, so these are always safe to add. */
  --gw-safe-t: env(safe-area-inset-top,    0px);
  --gw-safe-r: env(safe-area-inset-right,  0px);
  --gw-safe-b: env(safe-area-inset-bottom, 0px);
  --gw-safe-l: env(safe-area-inset-left,   0px);

  /* ── Z-index scale ──
     Layering was previously ad-hoc across 100/200/300/500/1200/9000/9999/10000.
     New floating UI should use these so stacking stays predictable. */
  --gw-z-sticky:  10;
  --gw-z-scrim:   19;
  --gw-z-drawer:  20;
  --gw-z-dropdown: 300;
  --gw-z-nav:    8000;   /* bottom mobile nav */
  --gw-z-sheet:  8500;   /* drawer above the bottom nav */
  --gw-z-modal:  9000;
  --gw-z-toast:  9999;

  /* ── Breakpoints (documentation anchors) ──
     CSS cannot use custom properties inside a media query, so these are not
     consumed directly — they record the canonical set so new rules stop
     inventing values. The file historically carried 40 distinct breakpoints.
       phone  : max-width 768px   (matches every JS branch in app_premium.js)
       tablet : 769px - 1100px
       desktop: 1101px and up                                                  */
  --gw-bp-phone:  768px;
  --gw-bp-tablet: 1100px;

  /* ── Legacy aliases (keep existing code working) ── */
  --blue:      var(--gw-sky);
  --blue-2:    var(--gw-sky-2);
  --blue-dark: #113931;
  --blue-deep: #0E372F;
  --blue-soft: var(--gw-sky-soft);
  --ink:       var(--gw-ink);
  --muted:     var(--gw-muted);
  --line:      var(--gw-line);
  --bg:        var(--gw-bg);
  --card:      var(--gw-surface);
  --green:     #2D7A55;
  --yellow:    #7A5C10;
  --red:       #8B3A2A;
  --shadow:    var(--gw-shadow-md);
}
/* ═══════════════════════════════════════════════════════════════════════════
   GW-005 · App Shell — Groundwork Executive theme
   ═══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--gw-font);
  color:var(--gw-ink);
  background:var(--gw-bg);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

/* ── App shell grid ── */
.app-shell{
  min-height:100vh; min-height:100dvh;
  display:grid;
  grid-template-columns:280px 1fr;
}

/* ════════════════════════════════════════════════════════
   SIDEBAR — deep pine green Executive Ops style
   ════════════════════════════════════════════════════════ */
.sidebar{
  background:var(--gw-pine);
  border-right:none;
  padding:0;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh; height:100dvh;
  overflow:auto;
  overflow-x:hidden;
}

/* Subtle scrollbar on sidebar */
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--gw-pine-muted);border-radius:4px}

/* ── Brand block ── */
.brand{
  display:flex;
  gap:14px;
  align-items:center;
  padding:22px 18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:0;
  flex-shrink:0;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:var(--gw-r-sm);
  background:transparent;
  border:none;
  overflow:hidden;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.brand-mark img{
  width:42px;
  height:42px;
  display:block;
  object-fit:cover;
  border-radius:9px;
}
.brand-name{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.03em;
  color:#FFFFFF;
  line-height:1.1;
}
.brand-subtitle{
  color:rgba(255,255,255,.45);
  font-size:11px;
  font-weight:600;
  margin-top:1px;
}
.brand-kicker{
  margin-top:3px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gw-emerald);
  min-height:12px;
}

/* ── Nav container ── */
.nav{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:12px 10px;
  flex:1;
}
.nav-group{
  margin-bottom:2px;
}

/* ── Nav group summary (section headers) ── */
.nav-summary{
  list-style:none;
  display:flex;
  align-items:center;
  padding:7px 10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  cursor:pointer;
  user-select:none;
  border-radius:var(--gw-r-xs);
  transition:color .15s;
  gap:0;
}
.nav-summary::-webkit-details-marker{display:none}
.nav-summary:hover{color:rgba(255,255,255,.6)}
.nav-summary::after{
  content:'›';
  font-size:13px;
  font-weight:300;
  color:rgba(255,255,255,.25);
  transition:transform .18s ease;
  display:inline-block;
  transform:rotate(0deg);
  margin-left:auto;
  flex-shrink:0;
}
.nav-group[open]>.nav-summary::after{transform:rotate(90deg)}
.nav-group[open]>.nav-summary{color:rgba(255,255,255,.5)}

/* ── Nav items container ── */
.nav-items{
  display:flex;
  flex-direction:column;
  padding:0 0 6px 0;
}

/* ── Individual nav buttons ── */
.nav-item{
  border:0;
  background:transparent;
  text-align:left;
  padding:8px 12px 8px 14px;
  border-radius:var(--gw-r-xs);
  color:rgba(255,255,255,.62);
  font-weight:500;
  font-size:13px;
  width:100%;
  transition:color .12s, background .12s;
  position:relative;
}
.nav-item:hover{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
}
.nav-item.active{
  background:rgba(255,255,255,.13);
  color:#FFFFFF;
  font-weight:700;
}
/* Active indicator bar */
.nav-item.active::before{
  content:'';
  position:absolute;
  left:0;
  top:20%;
  bottom:20%;
  width:3px;
  background:var(--gw-emerald);
  border-radius:0 3px 3px 0;
}

/* ── Sidebar footer ── */
.sidebar-footer{
  margin-top:auto;
  color:rgba(255,255,255,.28);
  font-size:11px;
  border-top:1px solid rgba(255,255,255,.07);
  padding:16px 18px;
  line-height:1.55;
  flex-shrink:0;
}
.sidebar-footer strong{
  color:rgba(255,255,255,.45);
  font-weight:700;
}

/* ════════════════════════════════════════════════════════
   GW-005 · TOPBAR
   ════════════════════════════════════════════════════════ */
.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  /* Respect the notch in landscape, where the inset lands on left/right. */
  padding:0 calc(24px + var(--gw-safe-r,0px)) 0 calc(24px + var(--gw-safe-l,0px));
  height:58px;
  background:var(--gw-surface);
  border-bottom:1px solid var(--gw-line);
  position:sticky;
  top:0;
  z-index:15;
  box-shadow:var(--gw-shadow-xs);
}
.topbar .menu-btn{
  display:none;
  background:none;
  border:none;
  color:var(--gw-muted);
  padding:6px;
  border-radius:var(--gw-r-xs);
  transition:background .12s, color .12s;
}
.topbar .menu-btn:hover{background:var(--gw-surface-2);color:var(--gw-ink)}

/* ── Search ── */
.search-wrap{
  flex:1;
  max-width:460px;
  position:relative;
}
.search-wrap input{
  width:100%;
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:8px 14px 8px 36px;
  font-size:13px;
  color:var(--gw-ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
  outline:none;
}
.search-wrap input:focus{
  border-color:var(--gw-pine);
  background:var(--gw-surface);
  box-shadow:0 0 0 3px rgba(30,70,56,.12);
}
.search-wrap::before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235A6B79' stroke-width='2' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4'/%3E%3Cline x1='10' y1='10' x2='14' y2='14'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* ── + New button ── */
.topbar-new-btn{
  background:var(--gw-pine);
  color:#fff;
  border:none;
  border-radius:var(--gw-r-sm);
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background .14s, box-shadow .14s;
  box-shadow:0 2px 8px rgba(30,70,56,.25);
  white-space:nowrap;
}
.topbar-new-btn:hover{
  background:var(--gw-pine-light);
  box-shadow:0 4px 14px rgba(30,70,56,.35);
}

/* ── Dropdown ── */
.topbar-new-dropdown{
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-md);
}
.tnd-item:hover{
  background:var(--gw-surface-2);
  color:var(--gw-pine);
}

/* ── Settings button ── */
.topbar-settings{
  border:1px solid var(--gw-line);
  background:var(--gw-surface);
  border-radius:var(--gw-r-sm);
  padding:7px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--gw-pine);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.topbar-settings:hover{
  background:var(--gw-surface-2);
  border-color:var(--gw-pine-muted);
}

/* ── Install button ── */
.install-btn{
  border:1px solid var(--gw-line);
  background:var(--gw-surface);
  border-radius:var(--gw-r-sm);
  padding:7px 12px;
  font-size:13px;
  font-weight:600;
  color:var(--gw-muted);
  white-space:nowrap;
  transition:all .12s;
}
.install-btn:hover{background:var(--gw-surface-2)}

/* ════════════════════════════════════════════════════════
   GW-005 · MAIN CONTENT AREA
   ════════════════════════════════════════════════════════ */
.main{
  background:var(--gw-bg);
  display:flex;
  flex-direction:column;
  min-height:100vh; min-height:100dvh;
  min-width:0;
}
.view{
  padding:28px 32px;
  max-width:none; /* fluid: pages stretch to window width */
  flex:1;
}

/* ── Page header pattern ── */
.pl-title{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--gw-ink);
}
.pl-subtitle{
  font-size:13px;
  color:var(--gw-muted);
  font-weight:500;
  margin-top:2px;
}

/* ── Card baseline ── */
.card{
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
}
.app-card{
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
  overflow:hidden;
}
.app-card:before{
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  opacity:.6;
}

/* nav-items width fix carried from old monolithic line */
.nav-items{width:100%}
/* ── end of monolithic shell block replacement ──
   The original minified shell block that used to live on this line was already
   inert: the comment opened here and was not closed until the end of the
   "Integrations / Spinner" comment two lines below, so ~11KB of legacy CSS was
   parsed as comment text and shipped to every client on every load without ever
   applying. Removed; the comment is now closed properly. ── */

/* ── Integrations / Spinner ──────────────────────────────────────────── */
.spinner-wrap{display:flex;justify-content:center;padding:24px}
/* ── Global readability upgrades ── */
.int-list-row{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 14px;background:#113931;border-radius:10px;margin-bottom:8px;gap:14px;border:1px solid #0E372F;cursor:default;transition:background .12s}
.int-list-row:hover{background:#0E372F}
.int-list-row-title{font-weight:600;font-size:14px;color:#EDEAE0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.int-list-row-meta{font-size:12px;color:#6F7E6A;margin-top:3px}
.int-list-row-link{font-size:12px;color:#4D8A86;white-space:nowrap;text-decoration:none;flex-shrink:0;padding:4px 8px;border:1px solid #4A5947;border-radius:6px;transition:background .12s}
.int-list-row-link:hover{background:#0E372F}
/* Settings topbar button */
.topbar-settings{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--blue-dark);cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;transition:background .12s}
.topbar-settings:hover{background:var(--blue-soft)}

/* ── + New quick-create button & dropdown ── */
.topbar-new-wrap {
  position: relative;
  flex-shrink: 0;
}
.topbar-new-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, box-shadow .12s;
  box-shadow: 0 2px 8px rgba(77,138,134,.25);
}
.topbar-new-btn:hover { background: var(--blue-2); box-shadow: 0 4px 14px rgba(0,167,225,.35); }
.topbar-new-caret { transition: transform .15s; opacity: .8; }
.tnd-open .topbar-new-caret { transform: rotate(180deg); }
.topbar-new-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(7,19,27,.12);
  padding: 6px;
  z-index: 50;
  animation: tnd-in .12s ease;
}
@keyframes tnd-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}
.tnd-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  padding: 4px 10px 6px;
}
.tnd-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: background .1s, color .1s;
}
.tnd-item:hover { background: var(--blue-soft); color: var(--blue-dark); }
.tnd-item svg { flex-shrink: 0; opacity: .7; }
/* Mark Sold modal */
.sold-modal-backdrop{position:fixed;inset:0;background:rgba(7,19,27,.7);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.sold-modal{background:#fff;border-radius:24px;padding:32px;width:100%;max-width:560px;box-shadow:0 30px 80px rgba(7,19,27,.25);position:relative;max-height:90vh;overflow-y:auto}
.sold-modal h2{margin:0 0 6px;font-size:22px;letter-spacing:-.03em}
.sold-modal-close{position:absolute;top:16px;right:16px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:4px 8px}
.sold-modal-close:hover{color:var(--ink)}
.spinner{width:32px;height:32px;border:3px solid #4A5947;border-top-color:#4D8A86;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
code{background:#113931;color:#E8E4D9;padding:2px 6px;border-radius:4px;font-size:12px}

/* ── Dark card readability improvements ─────────────────────────────────── */
/* Primary text on all dark sections */
[style*="background:#113931"] { color: #EDEAE0; }
[style*="background:#113931"] { color: #EDEAE0; }
[style*="background:linear-gradient(135deg,#113931"] { color: #EDEAE0; }
[style*="background:linear-gradient(135deg,#113931"] { color: #EDEAE0; }
/* Stat/metric values on dark cards */
.dark-card-val { font-size: 1.7rem; font-weight: 800; color: #FDFCF9 !important; }
.dark-card-label { font-size: 10px; font-weight: 700; color: #6F7E6A !important; text-transform: uppercase; letter-spacing: .06em; }
.dark-card-green { color: #2D7A55 !important; }
.dark-card-red   { color: #C97B6A !important; }
.dark-card-yellow{ color: #8B6914 !important; }
.dark-card-cyan  { color: #4D8A86 !important; }
/* Month mini-card row on Owner Dashboard */
.month-mini-card { background:#113931; border:1px solid #0E372F; border-radius:10px; padding:10px 12px; min-width:80px; text-align:center; }
.month-mini-card .budget { font-size:11px; color:#6F7E6A; }
.month-mini-card .actual { font-size:14px; font-weight:700; color:#4D8A86; }
.month-mini-card .variance.pos { color:#2D7A55; }
.month-mini-card .variance.neg { color:#C97B6A; }
.month-mini-card .variance.none { color:#5C6B58; }
/* Quick Actions integration buttons */
.int-action-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:10px;
  border:2px solid var(--line); background:#fff;
  color:var(--blue-dark); font-size:13px; font-weight:700;
  cursor:pointer; text-decoration:none;
  transition:all .15s;
}
.int-action-btn:hover { background:var(--blue-soft); border-color:var(--blue); box-shadow:0 4px 12px rgba(77,138,134,.12); }
/* ── Calendar view toggle ──────────────────────────────────────────────── */
.cal-view-toggle { display:flex; gap:4px; background:#113931; border-radius:8px; padding:3px; }
.cal-view-btn { border:0; background:transparent; color:#8FB8B2; font-size:12px; font-weight:600; padding:5px 12px; border-radius:6px; cursor:pointer; transition:all .12s; }
.cal-view-btn.active { background:#1A4740; color:#EDEAE0; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.cal-view-btn:hover:not(.active) { color:#D6D1C4; }
/* Month grid */
.cal-month-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#0E372F; border-radius:8px; overflow:hidden; margin-top:8px; }
.cal-month-day-header { background:#113931; color:#8FB8B2; font-size:10px; font-weight:700; text-align:center; padding:6px 0; text-transform:uppercase; letter-spacing:.05em; }
.cal-month-cell { background:#113931; min-height:72px; padding:4px; position:relative; }
.cal-month-cell.today { background:#1A4740; }
.cal-month-cell.other-month { background:#113931; opacity:.55; }
.cal-month-cell-num { font-size:11px; font-weight:700; color:#8FB8B2; margin-bottom:2px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cal-month-cell.today .cal-month-cell-num { background:#4D8A86; color:#fff; }
.cal-event-chip { font-size:10px; font-weight:600; color:#E8E4D9; background:#1A4740; border-radius:3px; padding:1px 5px; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-event-chip:hover { background:#245A52; }
/* Week columns */
.cal-week-grid { display:grid; grid-template-columns:48px repeat(7,1fr); gap:1px; background:#0E372F; border-radius:8px; overflow:hidden; margin-top:8px; }
.cal-week-header { background:#113931; padding:6px 4px; text-align:center; }
.cal-week-header .dow { font-size:10px; color:#8FB8B2; font-weight:700; text-transform:uppercase; }
.cal-week-header .dom { font-size:16px; font-weight:800; color:#E8E4D9; line-height:1.2; }
.cal-week-header .dom.today-num { background:#4D8A86; color:#fff; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.cal-week-time-label { background:#113931; padding:4px 4px; text-align:right; font-size:10px; color:#8FB8B2; border-bottom:1px solid #0E372F; }
.cal-week-cell { background:#113931; border-bottom:1px solid #0E372F; position:relative; min-height:28px; }
.cal-week-event { position:absolute; left:2px; right:2px; background:#1A4740; border-left:2px solid #4D8A86; border-radius:3px; padding:1px 4px; font-size:10px; color:#B8DEC9; overflow:hidden; z-index:1; cursor:pointer; }
.cal-week-event:hover { background:#245A52; color:#fff; }
/* Revenue editor */
.rev-editor-table { width:100%; border-collapse:collapse; font-size:13px; }
.rev-editor-table thead tr { background:#113931; }
.rev-editor-table th { padding:10px 12px; text-align:left; color:#6F7E6A; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid #113931; }
.rev-editor-table th.right { text-align:right; }
.rev-editor-table tbody tr { border-bottom:1px solid #113931; transition:background .1s; }
.rev-editor-table tbody tr:hover { background:#113931; }
.rev-editor-table td { padding:8px 12px; color:#E8E4D9; }
.rev-editor-table td.right { text-align:right; }
.rev-editor-input { width:100%; background:#113931; border:1px solid #113931; border-radius:6px; color:#EDEAE0; font-size:13px; font-weight:700; padding:6px 10px; text-align:right; box-sizing:border-box; }
.rev-editor-input:focus { border-color:#4D8A86; outline:none; }
.rev-editor-input.locked { opacity:.45; pointer-events:none; }
.rev-variance-pos { color:#2D7A55; font-weight:700; }
.rev-variance-neg { color:#C97B6A; font-weight:700; }
.rev-variance-none { color:#4A5947; }
.rev-month-tag { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#6F7E6A; margin-right:6px; }
.rev-locked-badge { font-size:9px; background:#113931; color:#5C6B58; border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle; }

/* ── Financial Hub tab nav / division entry ───────────────────────────────── */
.fin-tab-btn { padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .12s; }
.fin-tab-btn.active { background:#113931; border:1px solid #4D8A86; color:#4D8A86; }
.fin-tab-btn:not(.active) { background:#113931; border:1px solid #113931; color:#6F7E6A; }
.fin-tab-btn:hover:not(.active) { border-color:#4A5947; color:#D6D1C4; }
.div-entry-table { width:100%; border-collapse:collapse; font-size:13px; }
.div-entry-table th { padding:9px 10px; text-align:left; color:#6F7E6A; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid #113931; }
.div-entry-table th.right { text-align:right; }
.div-entry-table td { padding:6px 10px; color:#E8E4D9; border-bottom:1px solid #113931; }
.div-entry-table td.right { text-align:right; }
.div-entry-table tbody tr:hover { background:#113931; }
/* P&L upload drop zone */
.pnl-drop-zone { border:2px dashed #1A4740; border-radius:14px; padding:24px; text-align:center; background:#113931; transition:border-color .12s; }
.pnl-drop-zone:hover { border-color:#4D8A86; }
/* Dynamic tag */
.dynamic-tag { font-size:9px; font-weight:700; background:#113931; color:#4D8A86; border-radius:4px; padding:1px 5px; margin-left:4px; vertical-align:middle; letter-spacing:.04em; text-transform:uppercase; }

/* ════════════════════════════════════════════════════════════════════════════
   JIRA BATCH: T1/T2/T22/T24/T25 — Global UI readability, button hierarchy,
   permission matrix, mobile tap targets, dashboard card polish
   ════════════════════════════════════════════════════════════════════════════ */

/* ── T1: Button hierarchy — clear enabled / hover / focus / disabled states ── */
.primary-btn:hover   { filter:brightness(1.1); box-shadow:0 14px 28px rgba(0,167,225,.28); }
.primary-btn:active  { filter:brightness(.94); transform:translateY(1px); }
.primary-btn:focus-visible { outline:3px solid rgba(0,167,225,.55); outline-offset:3px; }
.primary-btn:disabled, .primary-btn[disabled] {
  opacity:.45; cursor:not-allowed; pointer-events:none;
}
.secondary-btn:hover { background:var(--blue-soft); border-color:rgba(0,167,225,.36); }
.secondary-btn:active { transform:translateY(1px); }
.secondary-btn:focus-visible { outline:3px solid rgba(0,167,225,.45); outline-offset:3px; }
.secondary-btn:disabled, .secondary-btn[disabled] {
  opacity:.42; cursor:not-allowed; pointer-events:none; color:var(--muted);
}
.danger-btn:hover { background:#FAE8E4; border-color:#C97B6A; }
.danger-btn:focus-visible { outline:3px solid rgba(248,113,113,.5); outline-offset:3px; }

/* ── T1: Loading state pill — show spinner inside any button ── */
.btn-loading { position:relative; pointer-events:none; }
.btn-loading::after {
  content:''; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}

/* ── T1: Status chips — not color-only; add shape/icon context ── */
.status-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700;
  border:1px solid transparent;
}
.status-chip.sold    { background:#EAF1EE; color:#1A4740; border-color:#B8DEC9; }
.status-chip.active  { background:#E5F0EF; color:#1A4740; border-color:#B8C8C7; }
.status-chip.overdue { background:#FAE8E4; color:#7A2E20; border-color:#F5D5C8; }
.status-chip.pending { background:#FAF6E8; color:#7A5C10; border-color:#F5E8C0; }
.status-chip.lost    { background:#EDEAE0; color:#2D3E3F; border-color:#D6D1C4; }

/* ── T1/T25: Dark card values — hierarchy and breathing room ── */
.kpi-card {
  background:linear-gradient(145deg,#113931,#113931);
  border:1px solid #113931; border-radius:16px; padding:18px 20px;
  transition:border-color .15s, box-shadow .15s;
}
.kpi-card:hover { border-color:#1A4740; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.kpi-card .kpi-label {
  font-size:10px; font-weight:800; color:#6F7E6A;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;
}
.kpi-card .kpi-value {
  font-size:1.9rem; font-weight:900; color:#FDFCF9;
  line-height:1; letter-spacing:-.03em;
}
.kpi-card .kpi-sub { font-size:11px; color:#5C6B58; margin-top:5px; }
.kpi-card .kpi-value.green  { color:#2D7A55; }
.kpi-card .kpi-value.red    { color:#C97B6A; }
.kpi-card .kpi-value.cyan   { color:#4D8A86; }
.kpi-card .kpi-value.amber  { color:#8B6914; }

/* ── T22: Permission matrix — zebra striping + hover guide ── */
.perm-table { width:100%; border-collapse:collapse; min-width:480px; }
.perm-table thead tr { border-bottom:2px solid #113931; }
.perm-table thead th {
  padding:11px 14px; font-size:12px; font-weight:700; text-align:left;
}
.perm-table thead th:not(:first-child) { text-align:center; }
.perm-table .perm-group-row td {
  padding:12px 14px 4px; font-size:10px; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase; color:#5C6B58;
  border-bottom:1px solid #113931; background:#FDFCF9;
}
.perm-table tbody tr.perm-row { border-bottom:1px solid var(--line); }
.perm-table tbody tr.perm-row:nth-child(even) { background:#FDFCF9; }
.perm-table tbody tr.perm-row:hover { background:var(--blue-soft) !important; }
.perm-table td.perm-section { padding:10px 14px; font-size:13px; color:var(--ink); }
.perm-table td.perm-check   { text-align:center; padding:10px; }
.perm-check input[type=checkbox] { width:18px; height:18px; cursor:pointer; }

/* ── T23: Empty states — richer, more actionable ── */
.empty-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; text-align:center;
  background:linear-gradient(180deg,#FDFCF9,#FDFCF9);
  border:1.5px dashed rgba(77,138,134,.2); border-radius:18px;
}
.empty-state .empty-icon { font-size:36px; margin-bottom:10px; opacity:.7; }
.empty-state .empty-title { font-weight:800; color:var(--ink); font-size:15px; margin-bottom:4px; }
.empty-state .empty-body  { color:var(--muted); font-size:13px; max-width:280px; line-height:1.55; }
.empty-state .empty-cta   { margin-top:14px; }

/* ── T24: Mobile tap targets — minimum 44px touch target ── */
@media (max-width:920px) {
  .primary-btn, .secondary-btn, .danger-btn {
    min-height:44px; padding:12px 18px; font-size:15px;
  }
  .small.primary-btn, .small.secondary-btn { min-height:38px; padding:10px 14px; }
  .nav-item { min-height:40px; padding:10px 10px 10px 24px; font-size:13px; }
  .check-item input { width:22px; height:22px; }
  select, input[type=text], input[type=number], input[type=date],
  input[type=email], textarea {
    min-height:44px; font-size:16px !important; /* prevent iOS zoom */
  }
  /* Quick Actions integration buttons on mobile */
  .int-action-btn { padding:12px 16px; font-size:14px; }
  /* Today page stat cards — bigger hit zone */
  .stat { padding:20px; }
  /* dashboard-strip tiles on mobile */
  .dash-tile { padding:16px; }
  .dash-tile strong { font-size:15px; }
  .dash-tile span   { font-size:13px; }

  /* Pipeline toolbar wraps on mobile */
  .pl-toolbar { gap:2px; padding:6px 6px; }
  .pl-filter-group { padding:2px 4px; }
  .pl-filter-divider { display:none; }
  .pl-page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .pl-page-actions { width:100%; }
  .pl-page-actions .primary-btn,
  .pl-page-actions .secondary-btn { flex:1; text-align:center; }

}

/* Sidebar scrim — dims content behind the open drawer. Phone only, matching the
   drawer breakpoint: JS only ever adds .visible at <=768px. */
@media (max-width:768px) {
  .sidebar-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(7,19,27,.38);
    z-index: 19; /* just below sidebar z-index:20 */
    backdrop-filter: blur(1px);
  }
  .sidebar-scrim.visible { display: block; }
}

/* ── T25: Owner Dashboard — clickable stat cards ── */
.dash-card-clickable {
  cursor:pointer; transition:transform .15s, box-shadow .15s, border-color .15s;
  user-select:none;
}
.dash-card-clickable:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(7,19,27,.12);
  border-color:rgba(77,138,134,.3) !important;
}
.dash-card-clickable:active { transform:translateY(0); }
.dash-card-clickable .card-drill-hint {
  font-size:10px; color:rgba(0,167,225,.6); margin-top:6px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  opacity:0; transition:opacity .15s;
}
.dash-card-clickable:hover .card-drill-hint { opacity:1; }

/* ── T6: Quick Actions integration buttons — prominent states ── */
.int-action-btn.active   { border-color:var(--blue); background:var(--blue-soft); }
.int-action-btn.success  { border-color:#2D7A55; background:#D4EDE1; color:#2D7A55; }
.int-action-btn.loading  { opacity:.7; pointer-events:none; }
.int-action-btn.loading::after {
  content:''; display:inline-block; width:12px; height:12px;
  border:2px solid rgba(7,62,86,.3); border-top-color:var(--blue-dark);
  border-radius:50%; animation:spin .7s linear infinite; margin-left:6px;
  vertical-align:middle;
}

/* ── T9: Activity timeline in lead detail ── */
.timeline { list-style:none; padding:0; margin:0; position:relative; }
.timeline::before {
  content:''; position:absolute; left:16px; top:0; bottom:0;
  width:2px; background:var(--line);
}
.timeline-item {
  display:flex; gap:14px; padding:10px 0; position:relative;
}
.timeline-dot {
  width:32px; height:32px; border-radius:50%;
  background:#fff; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0; z-index:1;
  box-shadow:0 2px 6px rgba(7,19,27,.07);
}
.timeline-dot.note    { border-color:var(--blue); background:var(--blue-soft); }
.timeline-dot.stage   { border-color:#B8744F; background:#FAF6E8; }
.timeline-dot.sold    { border-color:#2D7A55; background:#D4EDE1; }
.timeline-dot.created { border-color:#8B6914; background:#FAF6E8; }
.timeline-dot.admin   { border-color:#6F7E6A; background:#FDFCF9; }
.timeline-body { flex:1; min-width:0; padding-top:4px; }
.timeline-body time { font-size:11px; color:var(--muted); font-weight:700; }
.timeline-body .tl-title { font-weight:700; color:var(--ink); font-size:13px; margin-bottom:2px; }
.timeline-body .tl-detail { font-size:12px; color:var(--muted); line-height:1.5; }

/* ── General: Topbar quick-create pill ── */
.topbar-quick-add {
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff; border:0; border-radius:999px;
  padding:8px 14px; font-size:13px; font-weight:800;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,167,225,.22);
  transition:filter .15s, box-shadow .15s;
}
.topbar-quick-add:hover { filter:brightness(1.08); box-shadow:0 10px 22px rgba(77,138,134,.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   T26-T50 CSS additions — Jira Batch v2
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Lead Header Bar (T26) ── */
.lead-header-bar {
  display:flex; gap:0; border:1px solid #E8E4D9; border-radius:12px;
  overflow:hidden; margin-bottom:20px; background:#fff;
  box-shadow:0 2px 8px rgba(31,42,43,.06);
}
.lhb-cell {
  flex:1; padding:12px 14px; border-right:1px solid #E8E4D9;
  text-align:center; min-width:0;
}
.lhb-cell:last-child { border-right:none; }
.lhb-label {
  font-size:10px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;
}
.lhb-cell strong { font-size:13px; color:var(--ink); font-weight:700; }

/* ── Urgency Badges on Opp Cards (T27) ── */
.urgency-badge {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:10px; font-weight:800; letter-spacing:.04em; margin-bottom:4px;
}
.urgency-badge.overdue { background:#FAE8E4; color:#8B3A2A; border:1px solid #F5D5C8; }
.urgency-badge.stale   { background:#FAF6E8; color:#7A5C10; border:1px solid #F5E8C0; }
.opp-overdue { border-left:3px solid #8B3A2A !important; }
.opp-stale   { border-left:3px solid #8B6914 !important; }
.opp-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:4px; }
.opp-project  { font-size:12px; color:var(--muted); margin:2px 0 8px; line-height:1.4; }
.opp-meta     { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.opp-next     { font-size:11px; color:var(--muted); }
.opp-value    { font-size:12px; color:#2D7A55; font-weight:700; margin-left:auto; }
.opp-rep      { font-size:14px; }
.opp-card     { padding:14px; border-radius:14px; border:1px solid var(--line); background:#fff;
                margin-bottom:8px; transition:box-shadow .15s, border-color .15s; }
.opp-card:hover { box-shadow:0 4px 16px rgba(31,42,43,.09); border-color:rgba(77,138,134,.3); }
.opp-card h3  { font-size:14px; font-weight:700; margin:0; letter-spacing:-.01em; }

/* ── Pipeline page layout ── */
.pl-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.pl-page-title { display:flex; align-items:baseline; gap:12px; }
.pl-title { font-size: 26px; font-weight: 800; letter-spacing:-.03em; margin:0; line-height:1; }
.pl-subtitle { font-size: 12px; color: var(--muted); font-weight: 500; text-transform:uppercase; letter-spacing:.06em; }
.pl-page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Pipeline filter toolbar ── */
.pl-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 10px; margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(31,42,43,.05);
}
.pl-filter-group { display:flex; align-items:center; gap:4px; padding: 2px 6px; }
.pl-filter-label {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em; margin-right: 2px; white-space:nowrap;
}
.pl-filter-btn {
  border: none; background: transparent; color: #4A5947;
  font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.pl-filter-btn:hover { background: rgba(77,138,134,.08); color: var(--blue-dark); }
.pl-filter-btn.pl-active {
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(77,138,134,.25);
}
.pl-filter-divider {
  width: 1px; height: 20px; background: var(--line);
  margin: 0 4px; flex-shrink: 0;
}

/* ── Active filter notice ── */
.pl-active-filter-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; margin-bottom:12px;
  background:#FDFCF9; border:1px solid rgba(77,138,134,.2);
  border-radius:10px; font-size:13px; color:var(--muted);
}
.pl-active-filter-bar strong { color:var(--ink); }
.pl-clear-filter {
  margin-left:auto; border:none; background:transparent;
  color:var(--muted); font-size:12px; font-weight:700;
  cursor:pointer; padding:2px 6px; border-radius:6px;
}
.pl-clear-filter:hover { background:rgba(77,138,134,.1); color:var(--blue-dark); }

/* ── Stat cards — compact ── */
.stat-grid { margin-top:0; margin-bottom:14px; }
.stat { padding:14px 16px; }
.stat:after { display:none; } /* remove dot decoration */
.stat span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.stat strong { font-size:28px; }

/* ── Kanban count badge ── */
.kanban-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  background:#EDEAE0; color:#6F7E6A;
  font-size:11px; font-weight:700; border-radius:999px;
}
.kanban-col h3 { font-size:13px; font-weight:700; letter-spacing:.01em;
  text-transform:uppercase; color:#2D3E3F; margin-bottom:10px; }

/* ── Copy Feedback (T30) ── */
.btn-copied {
  background:#2D7A55 !important; color:#fff !important;
  border-color:#2D7A55 !important;
  transition:background .15s, color .15s;
}

/* ── Suggested Actions (T29) ── */
.suggested-actions { margin-top:16px; }
.sa-header {
  font-size:11px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:10px;
}
.sa-row {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px; background:#FDFCF9; border-radius:10px;
  margin-bottom:8px; cursor:pointer; transition:background .15s;
  border:1px solid #E8E4D9;
}
.sa-row:hover { background:#FDFCF9; border-color:var(--blue); }
.sa-icon { font-size:1.1rem; min-width:24px; margin-top:1px; }
.sa-text { font-size:13px; color:var(--ink); line-height:1.4; }

/* ── Due Now clear chip (T28) ── */
.due-now-clear {
  display:inline-flex; align-items:center; gap:6px;
  background:#FAE8E4; color:#8B3A2A; border:1px solid #F5D5C8;
  border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700;
  cursor:pointer; margin-left:8px; vertical-align:middle;
}
.due-now-clear:hover { background:#FAE8E4; }

/* ── Status chips (T50) ── */
.status-chip {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
}
.status-chip.new-lead      { background:#FDFCF9; color:#1A4740; }
.status-chip.contacted     { background:#EAF1EE; color:#2D7A55; }
.status-chip.discovery     { background:#FAF6E8; color:#7A5C10; }
.status-chip.proposal      { background:#FAF6E8; color:#8B3A2A; }
.status-chip.follow-up     { background:#FAF6E8; color:#B8744F; }
.status-chip.negotiation   { background:#FAE8E4; color:#8B3A2A; }
.status-chip.verbal        { background:#EAF1EE; color:#2D7A55; }
.status-chip.sold          { background:#D4EDE1; color:#2D7A55; border:1px solid #B8DEC9; font-weight:800; }
.status-chip.lost          { background:#EDEAE0; color:#6F7E6A; }
.status-chip.pending       { background:#FDFCF9; color:#6F7E6A; }

/* mini-row overdue (T46) */
.mini-row-overdue { border-left:3px solid #8B3A2A !important; }

/* ── Duplicate warning card (T36) ── */
.dup-warn {
  background:#FAE8E4; border:1px solid #F5D5C8; border-radius:10px;
  padding:12px 14px; margin-bottom:16px; font-size:13px; color:#7A2E20;
  line-height:1.6;
}
.dup-warn strong { color:#5C2318; }

/* ── Link-style button ── */
.link-btn {
  background:none; border:none; color:var(--blue);
  font-size:inherit; cursor:pointer; padding:0;
  text-decoration:underline;
}
.link-btn:hover { color:var(--blue-2); }

/* ── Missing data badges (T41) ── */
.missing-data-badge {
  display:inline-block; background:#FAE8E4; color:#8B3A2A;
  border:1px solid #F5D5C8; border-radius:4px;
  font-size:10px; font-weight:700; padding:1px 6px; margin-left:6px;
  vertical-align:middle;
}
.missing-data-alert {
  background:#FAE8E4; border:1px solid #F5D5C8; border-radius:10px;
  padding:12px 16px; margin-bottom:16px; font-size:13px; color:#7A2E20;
  font-weight:500;
}
.missing-data-alert strong { color:#5C2318; }

/* ── Live count badge (T34) ── */
.live-count-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff; font-size:11px; font-weight:800; padding:0 6px;
}
.live-count-badge.empty {
  background:#EDEAE0; color:#6F7E6A;
}

/* ── Checklist progress bar (T37) ── */
.checklist-progress {
  height:6px; background:#E8E4D9; border-radius:4px;
  margin-bottom:4px; overflow:hidden;
}
.cp-bar {
  height:6px; border-radius:4px;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.cp-label {
  font-size:11px; color:var(--muted); margin-bottom:8px;
  font-weight:600;
}

/* ── Google Integration: connected features (T44) ── */
.connected-features {
  background:#EAF1EE; border:1px solid #B8DEC9;
  border-radius:10px; padding:12px 14px;
}
.cf-row {
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:8px; font-size:13px; color:#2D7A55;
}
.cf-row:last-child { margin-bottom:0; }
.cf-icon { font-size:1.1rem; min-width:24px; margin-top:1px; }

/* ── Homeworks onboarding (T48) ── */
.int-onboarding-state {
  background:linear-gradient(135deg,#113931,#113931);
  border:1px solid rgba(139,105,20,.25); border-radius:12px;
  padding:16px; margin-bottom:16px;
}
.setup-steps { padding-left:4px; }
.step-num {
  display:flex; align-items:center; justify-content:center;
  min-width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#8B6914,#7A5C10);
  color:#fff; font-size:13px; font-weight:800; flex-shrink:0;
}

/* ── Forms clickable cards (T49) ── */
.card.clickable {
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s, transform .1s;
}
.card.clickable:hover {
  box-shadow:0 6px 20px rgba(77,138,134,.12);
  transform:translateY(-1px);
}

/* ══════════════════════════════════════════════
   Lead Intake Form Redesign
   ══════════════════════════════════════════════ */

/* Hero header */
.lf-hero {
  display:flex;
  align-items:baseline;
  gap:10px;
  max-width:680px;
  margin:0 auto 14px;
  padding:4px 0 0;
}
.lf-hero-eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#4D8A86;
}
.lf-hero-title {
  font-size:20px;
  font-weight:700;
  color:#113931;
  margin:0;
  line-height:1;
}
.lf-hero-sub {
  display:none;
}

/* Sections */
.lf-section {
  background:#fff;
  border:1px solid #E8E4D9;
  border-radius:14px;
  padding:18px 20px;
  margin:0 auto 10px;
  max-width:680px;
  box-shadow:0 1px 4px rgba(31,42,43,.05);
}
.lf-section-header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #EDEAE0;
}
.lf-section-num {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:6px;
  background:#4D8A86;
  color:#fff;
  font-size:11px;
  font-weight:800;
  flex-shrink:0;
}
.lf-section-title {
  font-size:14px;
  font-weight:700;
  color:#113931;
  line-height:1.2;
}
.lf-section-sub {
  font-size:11px;
  color:#6F7E6A;
  margin-top:1px;
}

/* Field grid */
.lf-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 14px;
}
@media (max-width:600px) {
  .lf-fields { grid-template-columns:1fr; }
  .lf-section { padding:14px 14px; }
}
.lf-field {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lf-field--full {
  grid-column:1 / -1;
}
.lf-label {
  font-size:11px;
  font-weight:600;
  color:#6F7E6A;
  letter-spacing:.02em;
}
.lf-required { color:#8B3A2A; }
.lf-hint { color:#6F7E6A; font-weight:400; }

/* Inputs */
.lf-input, .lf-select, .lf-textarea {
  background:#FDFCF9;
  border:1px solid #E8E4D9;
  border-radius:8px;
  color:#113931;
  font-size:13px;
  padding:8px 10px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
  box-sizing:border-box;
}
.lf-input:focus, .lf-select:focus, .lf-textarea:focus {
  border-color:#4D8A86;
  background:#fff;
  box-shadow:0 0 0 3px rgba(77,138,134,.1);
}
.lf-input::placeholder { color:#6F7E6A; }
.lf-input--lg { font-size:15px; padding:10px 12px; font-weight:600; }
.lf-input--value { font-size:16px; font-weight:700; color:#2D7A55; }
.lf-input--value::placeholder { color:#6F7E6A; font-weight:400; font-size:13px; }
.lf-textarea { resize:vertical; min-height:72px; font-family:inherit; line-height:1.5; }
.lf-select { cursor:pointer; }
.lf-select option { background:#fff; color:#113931; }

/* Client type toggle */
.lf-toggle-group {
  display:flex;
  gap:6px;
}
.lf-toggle-radio { display:none; }
.lf-toggle-btn {
  flex:1;
  text-align:center;
  padding:8px 8px;
  border:1px solid #E8E4D9;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:#6F7E6A;
  background:#FDFCF9;
  transition:all .15s;
  user-select:none;
}
.lf-toggle-radio:checked + .lf-toggle-btn {
  border-color:#4D8A86;
  background:rgba(77,138,134,.08);
  color:#1A4740;
  box-shadow:0 0 0 2px rgba(77,138,134,.12);
}
.lf-toggle-btn:hover { border-color:#4D8A86; color:#1A4740; }

/* Project category tiles */
.lf-cat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-tile {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #E8E4D9;
  border-radius: 999px;
  background: #FDFCF9;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  white-space: nowrap;
}
.cat-tile:hover {
  border-color: #4D8A86;
  background: rgba(77,138,134,.06);
}
.cat-tile--active {
  border-color: #4D8A86;
  background: rgba(77,138,134,.1);
  box-shadow: 0 0 0 2px rgba(77,138,134,.12);
}
.cat-tile-label { font-size: 12px; font-weight: 600; color: #5C6B58; letter-spacing: .01em; }
.cat-tile--active .cat-tile-label { color: #1A4740; font-weight: 700; }

/* Commission preview */
.lf-comm-preview {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  background:#EAF1EE;
  border:1px solid #B8DEC9;
  border-radius:8px;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  color:#2D7A55;
  animation:lf-comm-pop .2s ease;
}
.lf-comm-icon { font-size:20px; }
@keyframes lf-comm-pop {
  from { transform:scale(.95); opacity:.6; }
  to   { transform:scale(1);   opacity:1; }
}

/* Detail toggle */
.lf-detail-toggle {
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:680px;
  margin:0 auto 0;
  padding:10px 16px;
  cursor:pointer;
  color:#6F7E6A;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px dashed #E8E4D9;
  border-radius:10px;
  transition:color .15s, border-color .15s;
  background:#FDFCF9;
  user-select:none;
}
.lf-detail-toggle:hover { color:#1A4740; border-color:#4D8A86; }
.lf-detail-chevron {
  font-size:16px;
  transition:transform .2s;
  color:#6F7E6A;
}

/* Detail panel */
.lf-detail-panel {
  max-width:680px;
  margin:0 auto;
  padding-top:12px;
}
.lf-detail-panel .lf-fields { grid-template-columns:1fr; }

/* Footer */
.lf-footer {
  display:flex;
  align-items:center;
  gap:10px;
  max-width:680px;
  margin:14px auto 32px;
  flex-wrap:wrap;
}
.lf-save-btn {
  font-size:14px;
  padding:10px 24px;
  font-weight:700;
  letter-spacing:.01em;
}

/* ── Avalon Internal Icon System ─────────────────────────────────────────── */
/* Timeline dot SVG icons — override the plain font-size approach */
.timeline-dot {
  /* Override: make the inner span render SVG correctly */
  overflow: visible;
}
.timeline-dot span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.timeline-dot.note    span { color: var(--blue); }
.timeline-dot.stage   span { color: #B8744F; }
.timeline-dot.sold    span { color: #2D7A55; }
.timeline-dot.created span { color: #8B6914; }
.timeline-dot.admin   span { color: #6F7E6A; }

/* Category tile icon container */
.cat-tile-icon { display: none; } /* icons removed from intake form — text-only pills */

/* Suggested action icon container */
.sa-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Exec takeaway icon badge */
.takeaway-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Division icon wrapper */
.div-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}

/* Commission preview icon */
.lf-comm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* General inline SVG helper */
.av-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════
   Today Page — Clean-up styles
   ══════════════════════════════════════════════ */

/* ── Stat cards — Today page refinements ── */
.stat-grid { gap:12px; }
.stat {
  border-radius:14px;
  background:#fff;
  border:1px solid #E5F0EF;
  box-shadow:0 2px 8px rgba(31,42,43,.04);
}
.stat span {
  color:#6F7E6A;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.stat strong {
  font-size:26px;
  font-weight:800;
  color:#113931;
  letter-spacing:-.04em;
  line-height:1.1;
}
.stat.bad strong { color:#8B3A2A; }

/* ── Today section card headings ── */
.today-card-title {
  font-size:15px;
  font-weight:750;
  color:#113931;
  letter-spacing:-.01em;
  margin:0;
}

/* Override the global h2 only inside today cards */
.app-card h2,
.card h2.today-h2 {
  font-size:16px;
  font-weight:750;
  letter-spacing:-.02em;
  color:#113931;
  margin:0 0 10px;
}

/* Section head — align badge right, tighter */
.section-head {
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid #EDEAE0;
}
.section-head h2 {
  font-size:15px;
  font-weight:750;
  color:#113931;
  letter-spacing:-.01em;
  margin:0;
}

/* ── 0 follow-ups pill badge ── */
.warn-badge {
  background:#FAF6E8;
  color:#7A5C10;
  border:1px solid #F5E8C0;
  font-size:11px;
  font-weight:700;
}
/* neutral / zero state badge */
.neutral-badge {
  background:#EDEAE0;
  color:#5C6B58;
  border:1px solid #E8E4D9;
  font-size:11px;
  font-weight:700;
}

/* ── app-card top accent bar — thinner, subtler ── */
.app-card:before {
  height:3px;
  background:linear-gradient(90deg,#4D8A86,#4D8A86);
  opacity:.7;
}

/* ── Mini-rows (Coming Up / Recently Updated) ── */
.mini-row {
  background:#FDFCF9;
  border:1px solid #EDEAE0;
  border-bottom:none;
  border-radius:0;
  padding:10px 12px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 8px;
  align-items:center;
  transition:background .12s;
}
.mini-row:first-of-type { border-radius:10px 10px 0 0; border-top:1px solid #EDEAE0; }
.mini-row:last-of-type  { border-radius:0 0 10px 10px; border-bottom:1px solid #EDEAE0; }
.mini-row:only-of-type  { border-radius:10px; border:1px solid #EDEAE0; }
.mini-row:hover { background:#FDFCF9; border-color:#E5F0EF; }
.mini-row strong { font-size:13px; font-weight:650; color:#113931; }
.mini-row em     { font-size:12px; color:#6F7E6A; font-style:normal; grid-column:1; }
.mini-row .status-chip { align-self:start; margin-top:1px; }

/* ── Checklist items — tighter, lighter ── */
.check-item {
  padding:9px 0;
  gap:10px;
  border-bottom:1px solid #EDEAE0;
}
.check-item:last-child { border-bottom:none; }
.check-item input { width:16px; height:16px; }
.check-item label { font-size:13px; color:#113931; line-height:1.4; }

/* ── Due Now clear chip ── */
.due-now-clear {
  background:#EAF1EE;
  color:#2D7A55;
  border:1px solid #B8DEC9;
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:8px 0;
  cursor:default;
}
.due-now-clear:hover { background:#D4EDE1; }

/* ── Quick-action buttons in today header ── */
.pl-page-actions .primary-btn.small,
.pl-page-actions .secondary-btn.small {
  font-size:12px;
  padding:7px 14px;
  font-weight:700;
  letter-spacing:.01em;
}

/* ── pl-title / pl-subtitle on Today ── */
.pl-title   { font-size:22px; font-weight:800; letter-spacing:-.03em; color:#113931; }
.pl-subtitle { font-size:13px; color:#6F7E6A; font-weight:500; margin-top:1px; }

/* ── KPI activity widget (Ryan only) — light card ── */
.card[style*="border-left"] h3 {
  font-size:15px;
  font-weight:700;
  color:#113931;
  margin-bottom:4px;
}
.card[style*="border-left"] .muted.small-text {
  font-size:12px;
  color:#6F7E6A;
  margin-bottom:0;
}

/* ── Mobile Today adjustments ── */
@media(max-width:920px){
  .pl-title   { font-size:18px; }
  .pl-subtitle { font-size:12px; }
  .stat strong { font-size:22px; }
  .mini-row   { padding:9px 10px; }
}

/* ══════════════════════════════════════════════
   Clients & Properties View
   ══════════════════════════════════════════════ */

/* ── Type badges ── */
.cl-badge {
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap;
}
.cl-badge-residential { background:#FDFCF9; color:#1A4740; border:1px solid #D6D1C4; }
.cl-badge-commercial  { background:#EAF1EE; color:#2D7A55; border:1px solid #B8DEC9; }
.cl-badge-hoa         { background:#FAF6E8; color:#B8744F; border:1px solid #F5E8DF; }
.cl-badge-vendor      { background:#FAF6E8; color:#8B3A2A; border:1px solid #F5E8DF; }

/* ── Status dot ── */
.cl-status-dot {
  display:inline-block; width:7px; height:7px;
  border-radius:50%; vertical-align:middle; margin-right:3px;
}

/* ── Tags ── */
.cl-tag {
  display:inline-flex; padding:2px 8px; border-radius:999px;
  background:#EDEAE0; color:#5C6B58;
  font-size:10px; font-weight:600; white-space:nowrap;
}

/* ── Opp count bubble ── */
.cl-opp-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff; font-size:11px; font-weight:800;
}

/* ── Search bar ── */
.cl-search-wrap {
  position:relative; flex:1; max-width:320px; min-width:180px;
}
.cl-search-input {
  width:100%; border:1px solid #E8E4D9; border-radius:999px;
  padding:7px 12px 7px 30px; font-size:13px;
  background:#fff; outline:none; color:#113931;
  transition:border-color .15s, box-shadow .15s;
}
.cl-search-input:focus {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(77,138,134,.12);
}

/* ── Table wrapper ── */
.cl-table-wrap { margin-top:10px; }
.cl-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.cl-table thead tr {
  background:#FDFCF9;
  border-bottom:1px solid #E8E4D9;
}
.cl-table th {
  padding:10px 14px;
  text-align:left;
  font-size:11px; font-weight:700;
  color:#6F7E6A; text-transform:uppercase; letter-spacing:.05em;
}
.cl-table tbody .cl-row {
  border-bottom:1px solid #EDEAE0;
  cursor:pointer;
  transition:background .1s;
}
.cl-table tbody .cl-row:last-child { border-bottom:none; }
.cl-table tbody .cl-row:hover { background:#FDFCF9; }
.cl-table td {
  padding:11px 14px;
  vertical-align:middle;
}

/* ── Name cell ── */
.cl-name-wrap { display:flex; align-items:center; gap:10px; }
.cl-avatar {
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,#E5F0EF,#E5F0EF);
  color:#4D8A86; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.cl-name { font-weight:650; color:#113931; font-size:13px; }
.cl-sub  { font-size:11px; color:#6F7E6A; margin-top:1px; }
.cl-cell-addr, .cl-cell-contact { font-size:12px; color:#5C6B58; }
.cl-empty-cell { color:#D6D1C4; }
.cl-link { color:var(--blue-dark); text-decoration:none; font-size:12px; }
.cl-link:hover { text-decoration:underline; }

/* ── Back button ── */
.cl-back-btn {
  background:none; border:none; color:#6F7E6A; font-size:13px;
  font-weight:600; cursor:pointer; padding:0; display:block;
  margin-bottom:2px; transition:color .12s;
}
.cl-back-btn:hover { color:#113931; }

/* ── Detail DL ── */
.cl-dl { display:grid; grid-template-columns:100px 1fr; gap:6px 12px; font-size:13px; margin:0; }
.cl-dl dt { color:#6F7E6A; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; align-self:start; padding-top:1px; }
.cl-dl dd { margin:0; color:#113931; word-break:break-word; }
.cl-notes-block {
  margin-top:12px; padding:10px 14px;
  background:#FDFCF9; border-radius:10px; border:1px solid #EDEAE0;
  font-size:13px; color:#5C6B58; line-height:1.55; white-space:pre-wrap;
}

/* ── Properties grid ── */
.cl-properties-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; margin-top:2px; }
.cl-property-card {
  background:#FDFCF9; border:1px solid #E8E4D9;
  border-radius:12px; padding:12px 14px; position:relative;
}
.cl-property-label { font-weight:700; color:#113931; font-size:13px; margin-bottom:3px; }
.cl-property-addr  { font-size:12px; color:#6F7E6A; line-height:1.4; }
.cl-property-notes { font-size:11px; color:#6F7E6A; margin-top:5px; font-style:italic; }
.cl-property-delete {
  position:absolute; top:8px; right:8px;
  background:none; border:1px solid #F5D5C8; border-radius:6px;
  color:#8B3A2A; font-size:10px; font-weight:700; padding:2px 7px;
  cursor:pointer; opacity:.7; transition:opacity .12s;
}
.cl-property-delete:hover { opacity:1; background:#FAE8E4; }

/* ── Modal ── */
.cl-modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(7,19,27,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.cl-modal {
  background:#fff; border-radius:20px; width:100%; max-width:580px;
  max-height:90vh; overflow:auto;
  box-shadow:0 32px 80px rgba(7,19,27,.22);
  animation:cl-modal-in .18s ease;
}
@keyframes cl-modal-in {
  from { transform:translateY(12px); opacity:.6; }
  to   { transform:translateY(0);    opacity:1; }
}
.cl-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid #EDEAE0;
}
.cl-modal-header h3 { margin:0; font-size:16px; font-weight:750; color:#113931; }
.cl-modal-close {
  background:none; border:none; color:#6F7E6A; font-size:18px;
  cursor:pointer; padding:0 4px; line-height:1; transition:color .12s;
}
.cl-modal-close:hover { color:#113931; }
.cl-modal-body { padding:16px 20px; }
.cl-modal-footer {
  display:flex; gap:8px; justify-content:flex-end; align-items:center;
  padding:14px 20px 18px; border-top:1px solid #EDEAE0;
}
.cl-modal-footer .danger-btn { margin-right:auto; }

/* ── Form grid inside modal ── */
.cl-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cl-form-label { display:grid; gap:5px; }
.cl-form-label span { font-size:11px; font-weight:700; color:#2D3E3F; letter-spacing:.02em; }
.cl-form-label.full { grid-column:1/-1; }
.cl-input {
  width:100%; border:1px solid #E8E4D9; border-radius:10px;
  padding:8px 11px; font-size:13px; color:#113931; background:#fff;
  outline:none; transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
}
.cl-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(77,138,134,.12); }
.cl-input textarea { resize:vertical; }

/* ── Mobile ── */
@media(max-width:920px){
  .cl-form-grid { grid-template-columns:1fr; }
  .cl-table { font-size:12px; }
  .cl-cell-addr, .cl-cell-contact { display:none; }
  .cl-table th:nth-child(4), .cl-table th:nth-child(5) { display:none; }
  .cl-properties-grid { grid-template-columns:1fr; }
  .cl-search-wrap { max-width:100%; }
}

/* ══════════════════════════════════════════════
   Lead Form — Client Autocomplete
   ══════════════════════════════════════════════ */

/* Wrapper so dropdown is positioned relative to input */
.lf-client-search-wrap {
  position: relative;
}

/* Dropdown container */
.lf-client-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #E8E4D9;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(7,19,27,.12);
  z-index: 120;
  overflow: hidden;
  animation: lf-cd-in .12s ease;
  max-height: 320px;
  overflow-y: auto;
}
@keyframes lf-cd-in {
  from { opacity:.5; transform:translateY(-4px); }
  to   { opacity:1;  transform:translateY(0); }
}

/* Existing client row */
.lf-cd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .1s;
}
.lf-cd-item:hover { background: #FDFCF9; }

.lf-cd-avatar {
  width: 30px; height: 30px;
  border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg,#E5F0EF,#E5F0EF);
  color: #4D8A86; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.lf-cd-info {
  display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0;
}
.lf-cd-name {
  font-size: 13px; font-weight: 650; color: #113931;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-cd-sub {
  font-size: 11px; color: #6F7E6A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lf-cd-badge { flex-shrink: 0; }

/* Divider between results and create-new */
.lf-cd-divider {
  height: 1px; background: #EDEAE0; margin: 2px 0;
}

/* "Create new client" row */
.lf-cd-new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--blue-dark);
  transition: background .1s;
}
.lf-cd-new:hover { background: #FDFCF9; }
.lf-cd-new svg { flex-shrink: 0; opacity: .7; }

/* Client status chip (shown after selection) */
.lf-client-status { margin-top: 6px; min-height: 0; }

.lf-client-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FDFCF9;
  border: 1px solid #E5F0EF;
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  color: #4D8A86;
  line-height: 1.3;
}
.lf-client-chip--new {
  background: #EAF1EE;
  border-color: #B8DEC9;
  color: #2D7A55;
}
.lf-client-chip-clear {
  background: none; border: none;
  color: #6F7E6A; font-size: 13px;
  cursor: pointer; padding: 0 0 0 4px;
  line-height: 1; transition: color .12s;
}
.lf-client-chip-clear:hover { color: #8B3A2A; }

/* Read-only state when client is selected */
#lf-client-input[readonly] {
  background: #FDFCF9;
  color: #5C6B58;
  cursor: default;
  border-color: #E5F0EF;
}
/* ────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   GROUNDWORK GLOBAL THEME — Sprint 1+2 component layer
   GW-006 · GW-007 · GW-008 · GW-009 · GW-011 · GW-012 · GW-013 · GW-014
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   GW-006 · STATUS CHIPS — unified across all modules
   ════════════════════════════════════════════════════════ */
.status-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  border:1px solid transparent; white-space:nowrap;
}
/* Pipeline stages */
.status-chip.new-lead    { background:#EAF1EE; color:#1A4740; border-color:#D4EDE1; }
.status-chip.contacted   { background:#FDFCF9; color:#1A4740; border-color:#D6D1C4; }
.status-chip.discovery   { background:#FAF6E8; color:#7A5C10; border-color:#F5E8C0; }
.status-chip.proposal    { background:#FAF6E8; color:#8B3A2A; border-color:#F5E8DF; }
.status-chip.follow-up   { background:#FAF6E8; color:#B8744F; border-color:#F5E8DF; }
.status-chip.negotiation { background:#FAE8E4; color:#8B3A2A; border-color:#F5D5C8; }
.status-chip.verbal      { background:#EAF1EE; color:#2D7A55; border-color:#B8DEC9; }
.status-chip.sold        { background:#D4EDE1; color:#2D7A55; border-color:#B8DEC9; font-weight:800; }
.status-chip.lost        { background:#EDEAE0; color:#6F7E6A; border-color:#D6D1C4; }
.status-chip.pending     { background:#FDFCF9; color:#6F7E6A; border-color:#E8E4D9; }
/* General semantic */
.status-chip.active  { background:#EAF1EE; color:#1A4740; border-color:#D4EDE1; }
.status-chip.overdue { background:#FAE8E4; color:#7A2E20; border-color:#F5D5C8; }
.status-chip.warn    { background:#FAF6E8; color:#7A5C10; border-color:#F5E8C0; }

/* ── GW-006 · KPI CARDS — light & dark variants ── */
/* Light KPI card (Executive Ops style) */
.gw-kpi-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  padding:20px 22px;
  box-shadow:var(--gw-shadow-xs);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.gw-kpi-card:hover {
  border-color:var(--gw-pine-muted);
  box-shadow:var(--gw-shadow-sm);
  transform:translateY(-1px);
}
.gw-kpi-label {
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gw-muted); margin-bottom:8px;
}
.gw-kpi-value {
  font-size:2rem; font-weight:900; letter-spacing:-.04em;
  color:var(--gw-ink); line-height:1;
}
.gw-kpi-trend {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px; font-size:12px; font-weight:700;
}
.gw-kpi-trend.up   { color:var(--gw-emerald); }
.gw-kpi-trend.down { color:var(--gw-rose); }
.gw-kpi-sub {
  font-size:11.5px; color:var(--gw-muted); margin-top:4px;
}

/* Dark KPI card (Manager Tools style) */
.gw-kpi-card-dark {
  background:linear-gradient(145deg,var(--gw-pine-deep),var(--gw-pine));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--gw-r-md);
  padding:20px 22px;
  box-shadow:0 8px 28px rgba(0,0,0,.2);
  transition:border-color .15s, box-shadow .15s;
}
.gw-kpi-card-dark:hover {
  border-color:rgba(16,185,129,.3);
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.gw-kpi-card-dark .gw-kpi-label { color:rgba(255,255,255,.45); }
.gw-kpi-card-dark .gw-kpi-value { color:#FFFFFF; }
.gw-kpi-card-dark .gw-kpi-sub   { color:rgba(255,255,255,.4); }

/* Existing .kpi-card — keep dark but match new radius/spacing */
.kpi-card {
  background:linear-gradient(145deg,var(--gw-pine-deep),#113931);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--gw-r-md);
  padding:20px 22px;
}
.kpi-card:hover { border-color:rgba(16,185,129,.25); box-shadow:0 8px 28px rgba(0,0,0,.2); }

/* ── GW-006 · PROGRESS BARS ── */
.gw-progress-track {
  height:7px; background:var(--gw-surface-3);
  border-radius:999px; overflow:hidden;
}
.gw-progress-fill {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.gw-progress-fill.amber { background:linear-gradient(90deg,#7A5C10,#8B6914); }
.gw-progress-fill.rose  { background:linear-gradient(90deg,#8B3A2A,#8B3A2A); }

/* ════════════════════════════════════════════════════════
   GW-007 · SHARED STAT CARDS (Today / Dashboard)
   ════════════════════════════════════════════════════════ */
.stat {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  padding:18px 20px;
  box-shadow:var(--gw-shadow-xs);
  transition:box-shadow .15s, border-color .15s, transform .15s;
  position:relative;
  overflow:hidden;
}
.stat::after { display:none; }
.stat:hover {
  box-shadow:var(--gw-shadow-sm);
  border-color:var(--gw-pine-muted);
  transform:translateY(-1px);
}
.stat span {
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gw-muted); display:block;
  margin-bottom:8px;
}
.stat strong {
  font-size:28px; font-weight:900; letter-spacing:-.04em;
  color:var(--gw-ink); line-height:1; display:block;
}
.stat.bad strong { color:#8B3A2A; }
/* Accent bar bottom */
.stat::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  opacity:0;
  transition:opacity .15s;
}
.stat:hover::before { opacity:.6; }

/* ════════════════════════════════════════════════════════
   GW-008 · INTERACTION POLISH — buttons, inputs, focus
   ════════════════════════════════════════════════════════ */

/* ── Primary button ── */
.primary-btn {
  background:var(--gw-pine);
  color:#fff;
  border:none;
  border-radius:var(--gw-r-sm);
  padding:9px 18px;
  font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .14s, box-shadow .14s, transform .1s;
  box-shadow:0 2px 8px rgba(30,70,56,.22);
  cursor:pointer; white-space:nowrap;
}
.primary-btn:hover {
  background:var(--gw-pine-light);
  box-shadow:0 5px 16px rgba(30,70,56,.32);
  transform:translateY(-1px);
}
.primary-btn:active  { transform:translateY(0); box-shadow:none; }
.primary-btn:focus-visible { outline:3px solid rgba(30,70,56,.45); outline-offset:3px; }
.primary-btn:disabled { opacity:.42; cursor:not-allowed; pointer-events:none; }

/* ── Secondary button ── */
.secondary-btn {
  background:var(--gw-surface);
  color:var(--gw-ink);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:9px 16px;
  font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s, border-color .12s, transform .1s;
  cursor:pointer; white-space:nowrap;
}
.secondary-btn:hover {
  background:var(--gw-surface-2);
  border-color:var(--gw-pine-muted);
  transform:translateY(-1px);
}
.secondary-btn:active  { transform:translateY(0); }
.secondary-btn:focus-visible { outline:3px solid rgba(30,70,56,.3); outline-offset:3px; }
.secondary-btn:disabled { opacity:.42; cursor:not-allowed; pointer-events:none; }

/* ── Danger button ── */
.danger-btn {
  background:var(--gw-surface);
  color:#8B3A2A;
  border:1px solid #F5D5C8;
  border-radius:var(--gw-r-sm);
  padding:9px 16px;
  font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .12s, border-color .12s;
  cursor:pointer;
}
.danger-btn:hover { background:#FAE8E4; border-color:#F5D5C8; }
.danger-btn:focus-visible { outline:3px solid rgba(220,38,38,.3); outline-offset:3px; }

/* ── Input / select / textarea ── */
input[type=text], input[type=email], input[type=number],
input[type=date], input[type=search], input[type=tel],
select, textarea {
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  background:var(--gw-surface);
  color:var(--gw-ink);
  font-size:13px;
  padding:9px 12px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
  box-sizing:border-box;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--gw-pine);
  box-shadow:0 0 0 3px rgba(30,70,56,.12);
}
input::placeholder, textarea::placeholder { color:var(--gw-subtle); }

/* ── Focus ring for interactive elements ── */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline:3px solid rgba(30,70,56,.4);
  outline-offset:2px;
}

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

/* ── Hover transitions on cards ── */
.dash-card-clickable {
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.dash-card-clickable:hover {
  transform:translateY(-2px);
  box-shadow:var(--gw-shadow-sm);
  border-color:var(--gw-pine-muted) !important;
}
.dash-card-clickable:active { transform:translateY(0); }

/* ── Toast / feedback ── */
.toast {
  border-radius:var(--gw-r-sm) !important;
  box-shadow:var(--gw-shadow-md) !important;
}

/* ════════════════════════════════════════════════════════
   GW-009 · TODAY / DASHBOARD VIEW
   ════════════════════════════════════════════════════════ */
.today-card-title {
  font-size:15px; font-weight:750; color:var(--gw-ink);
  letter-spacing:-.01em; margin:0;
}
.section-head {
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--gw-line);
}
.section-head h2 {
  font-size:15px; font-weight:750; color:var(--gw-ink);
  letter-spacing:-.01em; margin:0;
}
.app-card h2, .card h2.today-h2 {
  font-size:15px; font-weight:750; letter-spacing:-.02em; color:var(--gw-ink); margin:0 0 12px;
}
/* Mini rows */
.mini-row {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-bottom:none; border-radius:0;
  padding:11px 14px;
  display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center;
  transition:background .12s, border-color .12s;
}
.mini-row:first-of-type { border-radius:var(--gw-r-sm) var(--gw-r-sm) 0 0; border-top:1px solid var(--gw-line); }
.mini-row:last-of-type  { border-radius:0 0 var(--gw-r-sm) var(--gw-r-sm); border-bottom:1px solid var(--gw-line); }
.mini-row:only-of-type  { border-radius:var(--gw-r-sm); border:1px solid var(--gw-line); }
.mini-row:hover { background:var(--gw-surface-2); border-color:var(--gw-pine-muted); }
.mini-row strong { font-size:13px; font-weight:650; color:var(--gw-ink); }
.mini-row em     { font-size:12px; color:var(--gw-muted); font-style:normal; grid-column:1; }

/* Check items */
.check-item {
  padding:10px 4px; gap:10px;
  border-bottom:1px solid var(--gw-line);
  transition:background .1s; border-radius:var(--gw-r-xs); cursor:pointer;
}
.check-item:last-child { border-bottom:none; }
.check-item:hover { background:var(--gw-surface-2); }
.check-item input { width:16px; height:16px; accent-color:var(--gw-pine); }
.check-item label { font-size:13px; color:var(--gw-ink); line-height:1.4; }

/* Stat grid */
.stat-grid { gap:14px; margin-bottom:16px; }

/* Empty states */
.empty-state {
  background:var(--gw-surface);
  border:1.5px dashed var(--gw-line-strong);
  border-radius:var(--gw-r-lg);
  padding:36px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.empty-state .empty-title { font-weight:800; color:var(--gw-ink); font-size:15px; margin-bottom:5px; }
.empty-state .empty-body  { color:var(--gw-muted); font-size:13px; max-width:280px; line-height:1.6; }

/* ════════════════════════════════════════════════════════
   GW-011 · LEAD DETAIL — Groundwork theme alignment
   ════════════════════════════════════════════════════════ */

/* Sticky header: warm surface, pine border accent */
.ld-sticky-header {
  background:rgba(245,249,247,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gw-line);
}
/* Hero avatar: pine gradient */
.ld-hero-avatar, .ld-sticky-avatar {
  background:linear-gradient(135deg, var(--gw-pine), var(--gw-pine-light));
  box-shadow:0 6px 18px rgba(30,70,56,.25);
}
/* Lead name */
.ld-name { color:var(--gw-ink); }
/* Tab bar */
.ld-tab-bar { border-bottom-color:var(--gw-line); }
.ld-tab { color:var(--gw-muted); }
.ld-tab:hover { color:var(--gw-ink); background:var(--gw-surface-2); }
.ld-tab-active {
  color:var(--gw-pine);
  border-bottom-color:var(--gw-pine);
  font-weight:700;
}
.ld-tab-active:hover { background:transparent; }
.ld-tab-count { background:#EAF1EE; color:var(--gw-pine); }
.ld-tab-active .ld-tab-count { background:var(--gw-pine); color:#fff; }
/* Lead cards */
.ld-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
}
/* Rail cards */
.ld-rail-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
}
/* Primary button in lead */
.ld-btn-primary {
  background:linear-gradient(135deg, var(--gw-pine), var(--gw-pine-light));
  box-shadow:0 4px 14px rgba(30,70,56,.28);
}
.ld-btn-primary:hover { box-shadow:0 6px 20px rgba(30,70,56,.38); }
/* Save action */
.ld-action-save {
  background:linear-gradient(135deg, var(--gw-pine), var(--gw-pine-light));
  box-shadow:0 2px 8px rgba(30,70,56,.22);
}
/* Quick action buttons */
.ld-qa-btn {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  transition:all .14s;
}
.ld-qa-btn:hover {
  border-color:rgba(30,70,56,.3);
  background:var(--gw-surface-2);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(30,70,56,.1);
}
.ld-qa-btn svg { color:var(--gw-pine); }
/* Form inputs in lead */
.ld-form input:focus, .ld-form select:focus, .ld-form textarea:focus {
  border-color:var(--gw-pine);
  box-shadow:0 0 0 3px rgba(30,70,56,.12);
}
/* Qual section */
.ld-qual-save-btn {
  background:var(--gw-pine);
}
.ld-qual-save-btn:hover {
  background:var(--gw-pine-light);
  box-shadow:0 3px 10px rgba(30,70,56,.25);
}
.ld-qual-edit-btn:hover {
  border-color:rgba(30,70,56,.3);
  background:var(--gw-surface-2);
  color:var(--gw-pine);
}
.ld-qual-textarea:focus {
  border-color:var(--gw-pine) !important;
  box-shadow:0 0 0 3px rgba(30,70,56,.12) !important;
}
/* Timeline */
.timeline::before { background:var(--gw-line); }
.timeline-dot { background:var(--gw-surface); border-color:var(--gw-line); }
.timeline-dot.note    { border-color:var(--gw-pine); background:var(--gw-surface-2); }
.timeline-dot.sold    { border-color:var(--gw-emerald); background:#EAF1EE; }
.timeline-dot.created { border-color:var(--gw-amber); background:#FAF6E8; }
/* Back button */
.ld-back-btn { border-color:var(--gw-line); color:var(--gw-muted); }
.ld-back-btn:hover { background:var(--gw-surface-2); color:var(--gw-ink); }
/* Rail buttons */
.ld-rail-btn { background:var(--gw-surface-2); border-color:var(--gw-line); }
.ld-rail-btn:hover {
  background:var(--gw-surface-3);
  border-color:var(--gw-pine-muted);
  color:var(--gw-pine);
}

/* ════════════════════════════════════════════════════════
   GW-012 · MANAGER TOOLS — token alignment
   ════════════════════════════════════════════════════════ */
.pl-toolbar {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
}
.pl-filter-btn:hover { background:var(--gw-surface-2); color:var(--gw-pine); }
.pl-filter-btn.pl-active {
  background:var(--gw-pine);
  color:#fff;
  box-shadow:0 2px 8px rgba(30,70,56,.25);
}
.pl-active-filter-bar {
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line-strong);
  border-radius:var(--gw-r-sm);
}

/* ── Opp cards in pipeline ── */
.opp-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
  padding:16px;
  margin-bottom:9px;
  transition:box-shadow .15s, border-color .15s, transform .12s;
}
.opp-card:hover {
  box-shadow:var(--gw-shadow-sm);
  border-color:var(--gw-pine-muted);
  transform:translateY(-1px);
}

/* ── Kanban columns ── */
.kanban-col h3 {
  font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gw-muted); margin-bottom:12px;
}
.kanban-count {
  background:var(--gw-surface-3);
  color:var(--gw-muted);
  font-size:11px; font-weight:700; border-radius:999px;
}

/* ════════════════════════════════════════════════════════
   GW-013 · SALES ACADEMY — Groundwork theme
   ════════════════════════════════════════════════════════ */
/* Academy progress bar */
.checklist-progress { background:var(--gw-surface-3); }
.cp-bar { background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald)); }
.cp-label { color:var(--gw-muted); }

/* ════════════════════════════════════════════════════════
   GW-014 · SETTINGS / USER MANAGEMENT / INTEGRATIONS
   ════════════════════════════════════════════════════════ */
/* Client table */
.cl-table thead tr { background:var(--gw-surface-2); border-bottom:1px solid var(--gw-line); }
.cl-table th { color:var(--gw-muted); }
.cl-table tbody .cl-row:hover { background:var(--gw-surface-2); }
.cl-search-input:focus { border-color:var(--gw-pine); box-shadow:0 0 0 3px rgba(30,70,56,.1); }
.cl-modal-overlay { background:rgba(15,28,20,.45); }
.cl-modal { border-radius:var(--gw-r-xl); }
.cl-input:focus { border-color:var(--gw-pine); box-shadow:0 0 0 3px rgba(30,70,56,.1); }

/* Permission table */
.perm-table tbody tr.perm-row:hover { background:var(--gw-surface-2) !important; }

/* Lead form inputs */
.lf-input:focus, .lf-select:focus, .lf-textarea:focus {
  border-color:var(--gw-pine);
  box-shadow:0 0 0 3px rgba(30,70,56,.1);
}
.lf-toggle-radio:checked + .lf-toggle-btn {
  border-color:var(--gw-pine);
  background:rgba(30,70,56,.07);
  color:var(--gw-pine-deep);
}
.lf-toggle-btn:hover { border-color:var(--gw-pine); color:var(--gw-pine); }
.cat-tile:hover { border-color:var(--gw-pine); background:rgba(30,70,56,.05); }
.cat-tile--active {
  border-color:var(--gw-pine);
  background:rgba(30,70,56,.09);
  box-shadow:0 0 0 2px rgba(30,70,56,.12);
}
.cat-tile--active .cat-tile-label { color:var(--gw-pine); }
.lf-cd-item:hover { background:var(--gw-surface-2); }
.lf-cd-new:hover  { background:var(--gw-surface-2); }

/* ════════════════════════════════════════════════════════
   GW-018 · EMPTY / LOADING / SKELETON STATES
   ════════════════════════════════════════════════════════ */
.gw-skeleton {
  background:linear-gradient(90deg, var(--gw-surface-3) 25%, var(--gw-surface-2) 50%, var(--gw-surface-3) 75%);
  background-size:200% 100%;
  animation:gw-shimmer 1.4s infinite;
  border-radius:var(--gw-r-xs);
}
@keyframes gw-shimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ════════════════════════════════════════════════════════
   GW-019 · ACCESSIBILITY — focus, contrast, tap targets
   ════════════════════════════════════════════════════════ */
@media (max-width:920px) {
  .primary-btn, .secondary-btn, .danger-btn { min-height:44px; padding:12px 20px; font-size:14px; }
  .nav-item { min-height:42px; padding:12px 14px 12px 18px; font-size:14px; }
  .view { padding:18px 16px; }
}
/* Off-canvas drawer — phone only. See the note in groundwork-design.css: the
   breakpoint must stay at 768px to match the JS branch in app_premium.js. */
@media (max-width:768px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar {
    position:fixed;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:20; width:280px;
    box-shadow:var(--gw-shadow-lg);
    /* Clear the notch at the top and the home indicator at the bottom so the
       brand row and the user footer stay tappable. */
    padding-top:var(--gw-safe-t,0px);
    padding-bottom:var(--gw-safe-b,0px);
  }
  .sidebar.open { transform:translateX(0); }
  .topbar .menu-btn { display:flex; }

  /* Modals become bottom-anchored and can never exceed the visible viewport. */
  .cl-modal, .gw-modal, .gw-modal-card, .sold-modal, .ah-modal {
    max-height:calc(100dvh - var(--gw-safe-t,0px) - var(--gw-safe-b,0px) - 24px);
    overflow-y:auto;
  }
}
@media print {
  .sidebar, .topbar, .toast { display:none; }
  .app-shell { display:block; }
  .view { max-width:none; padding:0; }
  .card, .gw-kpi-card { break-inside:avoid; box-shadow:none; }
}

/* ════════════════════════════════════════════════════════
   GW-020 · DESIGN GOVERNANCE — utility tokens
   ════════════════════════════════════════════════════════ */
/* Color utility aliases for inline use */
.text-pine    { color:var(--gw-pine) !important; }
.text-emerald { color:var(--gw-emerald) !important; }
.text-muted   { color:var(--gw-muted) !important; }
.text-ink     { color:var(--gw-ink) !important; }
.bg-pine      { background:var(--gw-pine) !important; }
.bg-surface   { background:var(--gw-surface) !important; }
.bg-surface-2 { background:var(--gw-surface-2) !important; }

/* Scrollbar — global subtle style */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gw-line-strong); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--gw-pine-muted); }

/* ────────────────────────────────────────────────────── */
/* END Groundwork Sprint 1+2 Theme                        */
/* ────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   GROUNDWORK SPRINT 3 — Core Product Structural Rebrand
   GW-010 · GW-011-deep · GW-012 · GW-013 · 2026-06-27
   ═══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   GW-010 · PIPELINE — Deep structural alignment
   ════════════════════════════════════════════════════════ */

/* Kanban board baseline */
.kanban {
  display:grid;
  grid-template-columns:repeat(3, minmax(280px,1fr));
  gap:14px;
  align-items:start;
  margin-top:18px;
}
@media(max-width:1100px){ .kanban { grid-template-columns:1fr 1fr; } }
@media(max-width:700px)  { .kanban { grid-template-columns:1fr; } }

/* Kanban column card */
.kanban-col {
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-lg);
  padding:14px 12px;
  transition:box-shadow .15s;
}

/* Column header: stage label + count badge */
.kanban-col > h3 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gw-muted);
  margin:0 0 10px;
  padding:0 2px;
  gap:8px;
}
.kanban-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:var(--gw-surface-3);
  color:var(--gw-muted);
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  border:1px solid var(--gw-line);
}

/* Opp card — full GW3 treatment */
.opp-card {
  display:block; /* override old grid layout */
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
  padding:14px 15px;
  margin-bottom:8px;
  cursor:pointer;
  text-align:left;
  width:100%;
  transition:box-shadow .14s, border-color .14s, transform .12s;
  position:relative;
  overflow:hidden;
}
.opp-card::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--gw-line);
  border-radius:3px 0 0 3px;
  transition:background .14s;
}
.opp-card:hover {
  box-shadow:var(--gw-shadow-sm);
  border-color:var(--gw-pine-muted);
  transform:translateY(-1px);
}
.opp-card:hover::before { background:var(--gw-emerald); }
.opp-card:last-child { margin-bottom:0; }

/* Urgency variants */
.opp-card.opp-overdue::before { background:#C97B6A; }
.opp-card.opp-stale::before   { background:var(--gw-amber); }

/* Card heading */
.opp-card h3 {
  font-size:13.5px;
  font-weight:700;
  color:var(--gw-ink);
  margin:0 0 3px;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.opp-project {
  font-size:12px;
  color:var(--gw-muted);
  margin:0 0 9px;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.opp-meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin:0;
}
.opp-next  { font-size:11px; color:var(--gw-muted); }
.opp-value { font-size:12px; color:var(--gw-emerald); font-weight:700; margin-left:auto; }
.opp-card-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:3px;
}

/* Urgency badges */
.urgency-badge {
  display:inline-block;
  padding:2px 7px;
  border-radius:20px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  flex-shrink:0;
}
.urgency-badge.overdue { background:#FAE8E4; color:#8B3A2A; border:1px solid #F5D5C8; }
.urgency-badge.stale   { background:#FAF6E8; color:#7A5C10; border:1px solid #F5E8C0; }

/* Pipeline filter active button — more legible */
.pl-filter-btn {
  border:none;
  background:transparent;
  color:var(--gw-muted);
  font-size:12px;
  font-weight:600;
  padding:5px 10px;
  border-radius:var(--gw-r-xs);
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, color .12s;
  font-family:inherit;
}
.pl-filter-btn:hover  { background:var(--gw-surface-2); color:var(--gw-pine); }
.pl-filter-btn.pl-active {
  background:var(--gw-pine);
  color:#fff;
  box-shadow:0 2px 8px rgba(30,70,56,.25);
}

/* Active filter notice bar */
.pl-active-filter-bar {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  margin-bottom:12px;
  background:rgba(30,70,56,.06);
  border:1px solid rgba(30,70,56,.15);
  border-radius:var(--gw-r-sm);
  font-size:13px;
  color:var(--gw-ink);
}
.pl-clear-filter {
  background:none;
  border:none;
  color:var(--gw-pine);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  padding:0;
  margin-left:auto;
  transition:color .12s;
}
.pl-clear-filter:hover { color:var(--gw-rose); }

/* Mini row — Today view follow-up lists */
.mini-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 8px;
  align-items:center;
  width:100%;
  text-align:left;
  border:none;
  background:var(--gw-surface);
  border-bottom:1px solid var(--gw-line);
  padding:11px 14px;
  font-family:inherit;
  cursor:pointer;
  transition:background .1s, border-color .1s;
  border-radius:0;
}
.mini-row:first-of-type { border-radius:var(--gw-r-sm) var(--gw-r-sm) 0 0; }
.mini-row:last-of-type  { border-radius:0 0 var(--gw-r-sm) var(--gw-r-sm); border-bottom:none; }
.mini-row:only-of-type  { border-radius:var(--gw-r-sm); border-bottom:1px solid var(--gw-line); }
.mini-row:hover { background:var(--gw-surface-2); }
.mini-row.mini-row-overdue { border-left:3px solid #C97B6A; }
.mini-row strong { font-size:13px; font-weight:650; color:var(--gw-ink); display:flex; align-items:center; gap:5px; }
.mini-row em     { font-size:12px; color:var(--gw-muted); font-style:normal; grid-column:1; }

/* ════════════════════════════════════════════════════════
   GW-011-DEEP · LEAD DETAIL — Full structural rebuild
   ════════════════════════════════════════════════════════ */

/* ── Sticky back-nav header ── */
.ld-back-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  color:var(--gw-muted);
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
}
.ld-back-btn:hover {
  background:var(--gw-surface-2);
  border-color:var(--gw-pine-muted);
  color:var(--gw-ink);
}

/* ── Hero block ── */
.ld-hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 0 18px;
  border-bottom:1px solid var(--gw-line);
  margin-bottom:16px;
  flex-wrap:wrap;
}
.ld-hero-left { display:flex; align-items:flex-start; gap:16px; flex:1; min-width:0; }
.ld-hero-avatar {
  width:54px; height:54px;
  border-radius:var(--gw-r-md);
  background:linear-gradient(135deg, var(--gw-pine), var(--gw-pine-light));
  color:#fff;
  font-size:18px; font-weight:900;
  display:grid; place-items:center;
  flex-shrink:0;
  box-shadow:0 6px 18px rgba(30,70,56,.28);
  letter-spacing:-.02em;
}
.ld-hero-info { flex:1; min-width:0; }
.ld-eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gw-muted);
  margin-bottom:5px;
}
.ld-source-pill {
  background:rgba(30,70,56,.08);
  color:var(--gw-pine);
  border:1px solid rgba(30,70,56,.15);
  border-radius:999px;
  padding:1px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
}
.ld-name {
  font-size:22px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--gw-ink);
  margin:0 0 3px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ld-subtitle {
  font-size:13px;
  color:var(--gw-muted);
  margin:0 0 10px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
.ld-subtitle-sep { margin:0 5px; color:var(--gw-line-strong); }

/* Hero stat chips row */
.ld-stat-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.ld-stat-chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  padding:4px 9px;
  transition:border-color .12s;
}
.ld-stat-chip:hover { border-color:var(--gw-pine-muted); }
.ld-stat-icon  { color:var(--gw-subtle); display:flex; align-items:center; flex-shrink:0; }
.ld-stat-body  { display:flex; flex-direction:column; gap:0; }
.ld-stat-label { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--gw-subtle); }
.ld-stat-val   { font-size:12.5px; font-weight:700; color:var(--gw-ink); }
.ld-stat-chip--green .ld-stat-val { color:#2D7A55; }
.ld-stat-chip--green { border-color:#B8DEC9; }
.ld-stat-chip--blue  .ld-stat-val { color:var(--gw-sky); }
.ld-stat-chip--blue  { border-color:rgba(77,138,134,.25); }
.ld-stat-chip--red   .ld-stat-val { color:#8B3A2A; }
.ld-stat-chip--red   { border-color:#F5D5C8; background:#FAE8E4; }
.ld-stat-chip--amber .ld-stat-val { color:var(--gw-amber); }

/* ── Hero action buttons ── */
.ld-hero-actions {
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.ld-btn-primary {
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:linear-gradient(135deg, var(--gw-pine), var(--gw-pine-light));
  color:#fff;
  border:none;
  border-radius:var(--gw-r-sm);
  padding:9px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(30,70,56,.28);
  transition:box-shadow .14s, transform .1s;
  white-space:nowrap;
}
.ld-btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(30,70,56,.38);
}
.ld-btn-primary:active { transform:translateY(0); box-shadow:none; }

.ld-btn-sold {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #2D7A55, #2D7A55);
  color:#fff;
  border:none;
  border-radius:var(--gw-r-sm);
  padding:9px 16px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(22,163,74,.28);
  transition:box-shadow .14s, transform .1s;
  white-space:nowrap;
}
.ld-btn-sold:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(22,163,74,.38);
}

.ld-btn-secondary {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--gw-surface);
  color:var(--gw-ink);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  white-space:nowrap;
}
.ld-btn-secondary:hover {
  background:var(--gw-surface-2);
  border-color:var(--gw-pine-muted);
}

.ld-sold-badge-large {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#D4EDE1;
  color:#2D7A55;
  border:1px solid #B8DEC9;
  border-radius:var(--gw-r-sm);
  padding:8px 14px;
  font-size:13px;
  font-weight:800;
}

/* Overflow menu */
.ld-overflow-wrap { position:relative; }
.ld-overflow-menu {
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:195px;
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-md);
  padding:6px;
  z-index:80;
  animation:gw-dropdown-in .12s ease;
}
@keyframes gw-dropdown-in {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}
.ld-overflow-menu button {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:none;
  border:none;
  border-radius:var(--gw-r-xs);
  padding:8px 10px;
  font-size:13px;
  font-weight:600;
  color:var(--gw-ink);
  cursor:pointer;
  text-align:left;
  transition:background .1s, color .1s;
  font-family:inherit;
}
.ld-overflow-menu button:hover { background:var(--gw-surface-2); color:var(--gw-pine); }
.ld-overflow-menu button.danger { color:#8B3A2A; }
.ld-overflow-menu button.danger:hover { background:#FAE8E4; color:#8B3A2A; }
.ld-overflow-hero .ld-overflow-menu { right:auto; left:0; }

/* ── Tab bar ── */
.ld-tab-bar {
  display:flex;
  gap:0;
  border-bottom:2px solid var(--gw-line);
  margin-bottom:20px;
  overflow-x:auto;
  scrollbar-width:none;
}
.ld-tab-bar::-webkit-scrollbar { height:0; }
.ld-tab {
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--gw-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:color .12s, background .12s, border-color .12s;
  border-radius:var(--gw-r-xs) var(--gw-r-xs) 0 0;
  font-family:inherit;
}
.ld-tab:hover {
  color:var(--gw-ink);
  background:var(--gw-surface-2);
}
.ld-tab-active {
  color:var(--gw-pine);
  border-bottom-color:var(--gw-pine);
  font-weight:700;
}
.ld-tab-active:hover { background:transparent; }
.ld-tab-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  background:var(--gw-surface-3);
  color:var(--gw-muted);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}
.ld-tab-active .ld-tab-count {
  background:var(--gw-pine);
  color:#fff;
}

/* ── Two-column body ── */
.ld-body {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:20px;
  align-items:start;
}
@media(max-width:1100px) { .ld-body { grid-template-columns:1fr 240px; } }
@media(max-width:900px)  { .ld-body { grid-template-columns:1fr; } }

/* ── Main working column ── */
.ld-main { min-width:0; display:flex; flex-direction:column; gap:16px; }

/* ── Section heading in lead detail ── */
.ld-section-head {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gw-muted);
  padding-bottom:10px;
  border-bottom:1px solid var(--gw-line);
  margin-bottom:12px;
}
.ld-section-head svg { color:var(--gw-pine-muted); flex-shrink:0; }
.ld-section-sub {
  font-size:10px;
  font-weight:600;
  color:var(--gw-subtle);
  letter-spacing:.04em;
  margin-left:auto;
  text-transform:none;
}

/* ── Lead detail card ── */
.ld-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
  overflow:hidden;
}
.ld-card-label {
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gw-muted);
  margin-bottom:8px;
}

/* ── Form inside lead card ── */
.ld-form { padding:18px 20px; }
.ld-form label { display:grid; gap:5px; margin-bottom:12px; }
.ld-form label:last-child { margin-bottom:0; }
.ld-form label span { font-size:11px; font-weight:700; color:var(--gw-muted); letter-spacing:.02em; }
.ld-form input, .ld-form select, .ld-form textarea {
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  background:var(--gw-surface);
  color:var(--gw-ink);
  font-size:13px;
  padding:8px 11px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  width:100%;
}
.ld-form input:focus, .ld-form select:focus, .ld-form textarea:focus {
  border-color:var(--gw-pine);
  box-shadow:0 0 0 3px rgba(30,70,56,.12);
}
.ld-form-grid   { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px; }
.ld-form-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 14px; }
@media(max-width:700px){ .ld-form-grid, .ld-form-grid-3 { grid-template-columns:1fr; } }
.ld-form .full { grid-column:1/-1; }

/* 3-up mini card row */
.ld-card-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:0; }
@media(max-width:900px) { .ld-card-row { grid-template-columns:1fr; } }
.ld-card-sm { min-height:0; padding:16px; }
.ld-card-sm select, .ld-card-sm input {
  margin-top:8px;
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  padding:7px 10px;
  font-size:13px;
  width:100%;
}

/* Inline action button inside card */
.ld-inline-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  background:rgba(30,70,56,.07);
  border:1px solid rgba(30,70,56,.18);
  border-radius:var(--gw-r-xs);
  padding:6px 12px;
  font-size:12px;
  font-weight:700;
  color:var(--gw-pine);
  cursor:pointer;
  transition:background .12s, border-color .12s;
  font-family:inherit;
}
.ld-inline-btn:hover {
  background:rgba(30,70,56,.13);
  border-color:rgba(30,70,56,.28);
}

/* ── Qual notes card ── */
.ld-qual-notes-card { padding:0; overflow:hidden; }
.ld-qual-field      { padding:0; }
.ld-qual-divider    { height:1px; background:var(--gw-line); }
.ld-qual-view, .ld-qual-edit { padding:14px 18px; }
.ld-qual-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.ld-qual-label {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:var(--gw-ink);
  letter-spacing:.01em;
}
.ld-qual-label svg { color:var(--gw-pine-muted); flex-shrink:0; }
.ld-qual-edit-btn {
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:none;
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  padding:4px 9px;
  font-size:11px;
  font-weight:600;
  color:var(--gw-muted);
  cursor:pointer;
  transition:all .12s;
  font-family:inherit;
}
.ld-qual-edit-btn:hover {
  border-color:rgba(30,70,56,.3);
  background:var(--gw-surface-2);
  color:var(--gw-pine);
  transform:translateY(-1px);
}
.ld-qual-edit-btn:active { transform:translateY(0); }
.ld-qual-content {
  font-size:13px;
  color:var(--gw-ink);
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
}
.ld-qual-empty { color:var(--gw-subtle); font-style:italic; font-size:13px; }

.ld-qual-save-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--gw-pine);
  color:#fff;
  border:none;
  border-radius:var(--gw-r-xs);
  padding:7px 14px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s, transform .1s, box-shadow .12s;
  font-family:inherit;
}
.ld-qual-save-btn:hover {
  background:var(--gw-pine-light);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(30,70,56,.25);
}
.ld-qual-save-btn:active { transform:translateY(0); }

.ld-qual-cancel-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--gw-surface-2);
  color:var(--gw-muted);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s;
  font-family:inherit;
}
.ld-qual-cancel-btn:hover { background:var(--gw-surface-3); color:var(--gw-ink); }

.ld-qual-textarea {
  width:100%;
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:10px 12px;
  font-size:13px;
  color:var(--gw-ink);
  background:var(--gw-surface);
  outline:none;
  resize:vertical;
  min-height:80px;
  line-height:1.55;
  transition:border-color .15s, box-shadow .15s;
  font-family:inherit;
}
.ld-qual-textarea:focus {
  border-color:var(--gw-pine) !important;
  box-shadow:0 0 0 3px rgba(30,70,56,.12) !important;
  background:var(--gw-surface);
}

/* ── Toggle row (checkboxes in detail) ── */
.ld-toggle-row {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--gw-ink);
  padding:10px 0;
  border-bottom:1px solid var(--gw-line);
}
.ld-toggle-row:last-child { border-bottom:none; }
.ld-toggle-row input[type=checkbox] {
  width:16px; height:16px;
  accent-color:var(--gw-pine);
  flex-shrink:0;
}
.ld-locked-field {
  font-size:12px;
  color:var(--gw-subtle);
  font-style:italic;
  padding:8px 0;
}

/* ── Quick Actions ── */
.ld-qa-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-bottom:0;
}
@media(max-width:700px) { .ld-qa-grid { grid-template-columns:1fr; } }
@media(min-width:1024px){ .ld-qa-grid { grid-template-columns:repeat(5, 1fr); } }

.ld-qa-btn {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  padding:14px 10px;
  cursor:pointer;
  transition:border-color .14s, background .14s, transform .1s, box-shadow .14s;
  font-family:inherit;
  text-align:center;
}
.ld-qa-btn:hover {
  border-color:rgba(30,70,56,.3);
  background:var(--gw-surface-2);
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(30,70,56,.1);
}
.ld-qa-btn:focus-visible { outline:3px solid rgba(30,70,56,.4); outline-offset:2px; }
.ld-qa-btn:active { transform:translateY(0) !important; box-shadow:none !important; }
.ld-qa-btn svg { color:var(--gw-pine); flex-shrink:0; }
.ld-qa-title { font-size:12.5px; font-weight:700; color:var(--gw-ink); }
.ld-qa-sub   { font-size:10.5px; color:var(--gw-muted); margin-top:1px; }
.ld-qa-btn.ld-qa-loading { pointer-events:none; opacity:.7; }
.ld-qa-btn.ld-qa-success svg { color:var(--gw-emerald); }
.ld-qa-btn.ld-qa-success { border-color:rgba(16,185,129,.3); background:#EAF1EE; }

/* ── Checklist progress in lead ── */
.ld-cl-progress {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  background:var(--gw-surface-2);
  border-bottom:1px solid var(--gw-line);
}
.ld-cl-bar-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.ld-cl-bar-track {
  flex:1;
  height:6px;
  background:var(--gw-line-strong);
  border-radius:4px;
  overflow:hidden;
}
.ld-cl-bar-fill {
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  transition:width .35s ease;
}
.ld-cl-count { font-size:11px; font-weight:700; color:var(--gw-muted); white-space:nowrap; flex-shrink:0; }
.ld-cl-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  flex-shrink:0;
}

/* ── Rail (right sidebar in lead detail) ── */
.ld-rail { display:flex; flex-direction:column; gap:14px; min-width:0; }
@media(max-width:900px) { .ld-rail { order:2; } }

.ld-rail-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  box-shadow:var(--gw-shadow-xs);
  overflow:hidden;
}
.ld-rail-card--alert {
  border-color:#F5D5C8;
  background:#FAE8E4;
}
.ld-rail-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--gw-line);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gw-muted);
}
.ld-rail-card-body { padding:14px; }

.ld-rail-follow-date {
  font-size:18px;
  font-weight:900;
  color:var(--gw-ink);
  letter-spacing:-.03em;
  margin-bottom:8px;
  line-height:1.1;
}
.ld-rail-follow-date.overdue { color:#8B3A2A; }
.ld-rail-overdue-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:#FAE8E4;
  color:#8B3A2A;
  border:1px solid #F5D5C8;
  border-radius:999px;
  padding:2px 8px;
  font-size:10px;
  font-weight:700;
  margin-bottom:10px;
}
.ld-rail-btn {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-xs);
  padding:6px 11px;
  font-size:12px;
  font-weight:600;
  color:var(--gw-ink);
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s;
  font-family:inherit;
  white-space:nowrap;
}
.ld-rail-btn:hover {
  background:var(--gw-surface-3);
  border-color:var(--gw-pine-muted);
  color:var(--gw-pine);
}
.ld-rail-empty { font-size:12.5px; color:var(--gw-subtle); font-style:italic; padding:4px 0 8px; }
.ld-rail-last-type    { font-size:12px; font-weight:700; color:var(--gw-ink); margin-bottom:3px; }
.ld-rail-last-time    { font-size:11.5px; color:var(--gw-muted); margin-bottom:6px; }
.ld-rail-last-preview { font-size:12px; color:var(--gw-muted); line-height:1.5; word-break:break-word; }
.ld-rail-stats {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:14px;
}
.ld-rail-stat {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.ld-rail-stat span  { display:block; font-size:20px; font-weight:800; color:var(--gw-ink); letter-spacing:-.03em; }
.ld-rail-stat label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--gw-subtle); margin-top:2px; }

/* ── Activity / timeline ── */
.ld-activity-item {
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--gw-line);
}
.ld-activity-item:last-child { border-bottom:none; }
.ld-act-dot {
  width:28px; height:28px;
  border-radius:50%;
  background:var(--gw-surface-2);
  border:1.5px solid var(--gw-line);
  display:grid; place-items:center;
  font-size:13px;
  flex-shrink:0;
}
.ld-act-content  { flex:1; min-width:0; }
.ld-act-header   { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.ld-act-type     { font-size:10.5px; font-weight:800; letter-spacing:.06em; }
.ld-act-dir      { font-size:11px; color:var(--gw-subtle); }
.ld-act-time     { font-size:11px; color:var(--gw-subtle); margin-left:auto; }
.ld-act-subject  { font-size:13px; font-weight:700; color:var(--gw-ink); margin-bottom:3px; }
.ld-act-body     { font-size:12.5px; color:var(--gw-muted); line-height:1.5; word-break:break-word; }
.ld-act-actor    { font-size:11px; color:var(--gw-subtle); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   GW-012 · MANAGER TOOLS — Light-mode / Groundwork conversion
   Converts the dark (#113931) hardcoded manager view into GW token palette
   ═══════════════════════════════════════════════════════════════════════════ */

/* Annual KPI banner override — dark inline style can't be overridden by class;
   catch via descendant rules when we can. We add .gw-mgr-* classes below
   and the JS will need to adopt them — OR we piggyback the .card class. */

/* Page headings that use h1/h2 inside .view */
.view h1 { font-size:clamp(24px,3.5vw,38px); font-weight:900; letter-spacing:-.04em; color:var(--gw-ink); margin:0 0 6px; }
.view h2 { font-size:18px; font-weight:750; color:var(--gw-ink); letter-spacing:-.02em; margin:0 0 10px; }
.view p.lede { font-size:15px; color:var(--gw-muted); max-width:700px; margin:0 0 24px; }
.view .eyebrow {
  font-size:10px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gw-emerald);
  margin-bottom:4px;
}

/* GW Manager KPI card — replace dark hardcoded tiles */
.gw-mgr-kpi-banner {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  gap:12px;
  margin-bottom:28px;
}
.gw-mgr-kpi {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  padding:18px 16px;
  box-shadow:var(--gw-shadow-xs);
  display:flex;
  flex-direction:column;
  gap:4px;
  position:relative;
  overflow:hidden;
}
.gw-mgr-kpi::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  opacity:.5;
}
.gw-mgr-kpi-label {
  font-size:10px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gw-muted);
}
.gw-mgr-kpi-value {
  font-size:26px; font-weight:900; letter-spacing:-.04em;
  color:var(--gw-ink); line-height:1.1;
}
.gw-mgr-kpi-value.kpi-positive { color:var(--gw-emerald); }
.gw-mgr-kpi-value.kpi-warn     { color:var(--gw-amber); }
.gw-mgr-kpi-value.kpi-danger   { color:#8B3A2A; }
.gw-mgr-kpi-value.kpi-blue     { color:var(--gw-sky); }
.gw-mgr-kpi-value.kpi-purple   { color:#B8744F; }
.gw-mgr-kpi-sub {
  font-size:10.5px; color:var(--gw-subtle);
  line-height:1.4; margin-top:2px;
}

/* Division P&L tiles */
.gw-div-tile {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-lg);
  padding:20px;
  box-shadow:var(--gw-shadow-xs);
  transition:box-shadow .14s, border-color .14s;
  position:relative;
  overflow:hidden;
}
.gw-div-tile:hover { box-shadow:var(--gw-shadow-sm); border-color:var(--gw-pine-muted); }
.gw-div-tile.above-plan { border-color:rgba(16,185,129,.3); }
.gw-div-tile::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  opacity:.5;
}
.gw-div-tile.above-plan::before { opacity:1; }
.gw-div-header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.gw-div-name { font-weight:750; font-size:15px; color:var(--gw-ink); }
.gw-div-plan-badge {
  background:var(--gw-emerald);
  color:#fff;
  font-size:10px; font-weight:700;
  border-radius:999px;
  padding:2px 8px;
  margin-left:auto;
}
.gw-div-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}
.gw-div-metric-label {
  font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gw-muted); margin-bottom:3px;
}
.gw-div-metric-val {
  font-size:20px; font-weight:800; letter-spacing:-.03em; color:var(--gw-ink);
}
.gw-div-metric-val.positive  { color:var(--gw-emerald); }
.gw-div-metric-val.sky       { color:var(--gw-sky); }
.gw-div-metric-val.warn      { color:var(--gw-amber); }
.gw-div-metric-val.danger    { color:#8B3A2A; }

/* Progress bar — manager tools */
.gw-pbar-wrap {
  margin-top:2px;
  height:7px;
  background:var(--gw-surface-3);
  border-radius:4px;
  overflow:hidden;
}
.gw-pbar-fill {
  height:100%;
  border-radius:4px;
  transition:width .5s ease;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
}
.gw-pbar-fill.pbar-warn   { background:var(--gw-amber); }
.gw-pbar-fill.pbar-danger { background:#C97B6A; }
.gw-pbar-pct {
  font-size:10px;
  color:var(--gw-muted);
  margin-top:4px;
  font-weight:600;
}

/* Manager table override (monthly actuals) */
.gw-mgr-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.gw-mgr-table thead tr {
  background:var(--gw-surface-2);
}
.gw-mgr-table th {
  padding:9px 12px;
  text-align:left;
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gw-muted);
  border-bottom:1px solid var(--gw-line);
}
.gw-mgr-table th:not(:first-child) { text-align:right; }
.gw-mgr-table td {
  padding:9px 12px;
  border-bottom:1px solid var(--gw-line);
  color:var(--gw-ink);
  font-weight:600;
}
.gw-mgr-table td:not(:first-child) { text-align:right; }
.gw-mgr-table td.actual   { color:var(--gw-sky); }
.gw-mgr-table td.positive { color:var(--gw-emerald); font-weight:700; }
.gw-mgr-table td.negative { color:#8B3A2A; font-weight:700; }
.gw-mgr-table td.missing  { color:var(--gw-subtle); }
.gw-mgr-table tfoot td    { font-weight:800; background:var(--gw-surface-2); }
.gw-mgr-table tbody tr:hover { background:var(--gw-surface-2); }

/* Missing data badges */
.missing-data-badge {
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:#FDFCF9;
  color:#8B3A2A;
  border:1px solid #F5D5C8;
  border-radius:999px;
  padding:1px 6px;
  font-size:10px;
  font-weight:700;
  margin-left:6px;
}
.missing-data-alert {
  background:#FDFCF9;
  border:1px solid #F5D5C8;
  border-radius:var(--gw-r-sm);
  padding:12px 16px;
  font-size:13px;
  color:#7A2E20;
  margin:14px 0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ════════════════════════════════════════════════════════
   GW-013 · SALES ACADEMY — Structural deep alignment
   ════════════════════════════════════════════════════════ */

/* Academy hero */
.acad-hero {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 28px;
  background:linear-gradient(135deg, var(--gw-pine) 0%, var(--gw-pine-light) 60%, var(--gw-emerald-dim) 100%);
  border-radius:var(--gw-r-xl);
  margin-bottom:20px;
  overflow:hidden;
  position:relative;
}
.acad-hero::after {
  content:'';
  position:absolute;
  right:-40px; top:-40px;
  width:180px; height:180px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
  pointer-events:none;
}
.acad-hero-text h1 {
  font-size:22px; font-weight:900; letter-spacing:-.04em;
  color:#fff; margin:0 0 4px;
}
.acad-hero-text p { font-size:13px; color:rgba(255,255,255,.6); margin:0; }
.acad-hero-stat { display:flex; gap:20px; align-items:center; flex-shrink:0; }
.acad-hero-kpi {
  text-align:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--gw-r-md);
  padding:12px 18px;
}
.acad-hero-kpi-val { font-size:24px; font-weight:900; color:#fff; letter-spacing:-.04em; }
.acad-hero-kpi-label {
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:2px;
}

/* Phase card */
.acad-phase-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-lg);
  overflow:hidden;
  box-shadow:var(--gw-shadow-xs);
  transition:box-shadow .14s, border-color .14s;
  margin-bottom:12px;
}
.acad-phase-card:hover { box-shadow:var(--gw-shadow-sm); border-color:var(--gw-pine-muted); }
.acad-phase-header {
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--gw-line);
  background:var(--gw-surface-2);
  cursor:pointer;
}
.acad-phase-icon {
  width:38px; height:38px;
  border-radius:var(--gw-r-sm);
  background:var(--gw-pine);
  color:#fff;
  font-size:16px;
  display:grid;
  place-items:center;
  flex-shrink:0;
}
.acad-phase-title {
  font-size:15px;
  font-weight:750;
  color:var(--gw-ink);
  letter-spacing:-.01em;
  flex:1;
}
.acad-phase-meta {
  font-size:11px;
  color:var(--gw-muted);
  margin-top:2px;
}
.acad-phase-progress {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.acad-phase-bar {
  width:90px;
  height:6px;
  background:var(--gw-surface-3);
  border-radius:4px;
  overflow:hidden;
}
.acad-phase-fill {
  height:100%;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  border-radius:4px;
  transition:width .4s ease;
}
.acad-phase-pct {
  font-size:11px;
  font-weight:800;
  color:var(--gw-pine);
  white-space:nowrap;
}
.acad-phase-badge-done {
  background:var(--gw-emerald);
  color:#fff;
  font-size:10px;
  font-weight:700;
  border-radius:999px;
  padding:2px 9px;
  flex-shrink:0;
}

/* Module rows inside a phase */
.acad-module-list { padding:0; }
.acad-module-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 20px;
  border-bottom:1px solid var(--gw-line);
  cursor:pointer;
  transition:background .12s;
  width:100%;
  text-align:left;
  background:none;
  border-left:none;
  border-right:none;
  border-top:none;
  font-family:inherit;
}
.acad-module-row:last-child { border-bottom:none; }
.acad-module-row:hover { background:var(--gw-surface-2); }
.acad-module-status {
  width:22px; height:22px;
  border-radius:50%;
  border:2px solid var(--gw-line);
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:12px;
  transition:border-color .12s, background .12s;
}
.acad-module-status.done {
  background:var(--gw-emerald);
  border-color:var(--gw-emerald);
  color:#fff;
}
.acad-module-status.in-progress {
  background:rgba(30,70,56,.08);
  border-color:var(--gw-pine);
}
.acad-module-info { flex:1; min-width:0; }
.acad-module-title {
  font-size:13.5px;
  font-weight:700;
  color:var(--gw-ink);
  letter-spacing:-.01em;
  margin-bottom:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.acad-module-meta { font-size:11.5px; color:var(--gw-muted); }
.acad-module-arrow { color:var(--gw-subtle); flex-shrink:0; }

/* Academy checklist progress (existing .checklist-progress override) */
.checklist-progress { background:var(--gw-surface-3); border-radius:var(--gw-r-xs); height:6px; }
.cp-bar { background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald)); border-radius:var(--gw-r-xs); }
.cp-label { color:var(--gw-muted); font-size:11px; font-weight:600; }

/* ════════════════════════════════════════════════════════
   GW-009-ENHANCED · TODAY VIEW — Activity widget + cards
   ════════════════════════════════════════════════════════ */

/* Activity targets card */
.gw-activity-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-lg);
  overflow:hidden;
  box-shadow:var(--gw-shadow-xs);
}
.gw-activity-card-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--gw-line);
  background:var(--gw-surface-2);
}
.gw-activity-card-header h3 {
  font-size:14px; font-weight:750;
  color:var(--gw-ink); margin:0;
  letter-spacing:-.01em;
}
.gw-activity-target-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px;
  padding:14px;
}
.gw-activity-target-tile {
  background:var(--gw-surface-2);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:12px;
  transition:border-color .12s;
}
.gw-activity-target-tile:hover { border-color:var(--gw-pine-muted); }
.gw-activity-target-label {
  font-size:11px; color:var(--gw-muted); margin-bottom:5px; font-weight:500;
}
.gw-activity-target-val {
  font-size:18px; font-weight:800; letter-spacing:-.03em;
  color:var(--gw-pine); line-height:1;
}
.gw-activity-target-desc {
  font-size:10.5px; color:var(--gw-subtle); margin-top:4px; line-height:1.4;
}

/* Suggested actions block */
.gw-suggested-actions {
  background:var(--gw-surface-2);
  border:1.5px dashed var(--gw-line-strong);
  border-radius:var(--gw-r-md);
  padding:18px;
  margin-top:10px;
}
.gw-suggested-actions h4 {
  font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--gw-muted);
  margin:0 0 12px;
}
.gw-suggested-action-btn {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-sm);
  padding:11px 13px;
  font-size:13px;
  font-weight:600;
  color:var(--gw-ink);
  cursor:pointer;
  text-align:left;
  margin-bottom:7px;
  transition:background .12s, border-color .12s, transform .1s;
  font-family:inherit;
}
.gw-suggested-action-btn:last-child { margin-bottom:0; }
.gw-suggested-action-btn:hover {
  background:var(--gw-surface-2);
  border-color:var(--gw-pine-muted);
  transform:translateX(2px);
}
.gw-suggested-action-btn svg { color:var(--gw-pine); flex-shrink:0; opacity:.8; }

/* ── Due now card — clear-state block ── */
.due-now-clear {
  font-size:13px;
  color:var(--gw-muted);
  padding:10px 0 4px;
  font-weight:500;
}

/* Neutral badge in section-head */
.neutral-badge {
  background:var(--gw-surface-3);
  color:var(--gw-muted);
  border:1px solid var(--gw-line);
  border-radius:999px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
}

/* ════════════════════════════════════════════════════════
   GW-SPRINT3 · GLOBAL POLISH
   ════════════════════════════════════════════════════════ */

/* Badge in section head */
.warn-badge {
  background:#FAF6E8;
  color:#7A5C10;
  border:1px solid #F5E8C0;
  border-radius:999px;
  padding:3px 10px;
  font-size:11px;
  font-weight:700;
}

/* General badge variant */
.badge {
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  background:var(--gw-surface-2);
  color:var(--gw-pine);
  font-size:11px;
  font-weight:700;
  border:1px solid var(--gw-line);
}

/* Stat grid fine-tuning */
.stat-grid {
  display:grid;
  gap:12px;
  margin-bottom:16px;
}
.stat-grid.grid-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:900px){ .stat-grid.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .stat-grid.grid-4 { grid-template-columns:1fr 1fr; } }

/* Section head — Today view cards */
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 20px;
  border-bottom:1px solid var(--gw-line);
}
.section-head h2 {
  font-size:14px; font-weight:750;
  color:var(--gw-ink); margin:0;
  letter-spacing:-.01em;
}

/* GW KPI cards (already in Sprint 1 but refine here) */
.gw-kpi-card {
  background:var(--gw-surface);
  border:1px solid var(--gw-line);
  border-radius:var(--gw-r-md);
  padding:18px 20px;
  box-shadow:var(--gw-shadow-xs);
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  overflow:hidden;
  transition:box-shadow .14s, border-color .14s, transform .12s;
  cursor:pointer;
}
.gw-kpi-card:hover {
  box-shadow:var(--gw-shadow-sm);
  border-color:var(--gw-pine-muted);
  transform:translateY(-1px);
}
.gw-kpi-card::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
  opacity:0;
  transition:opacity .15s;
}
.gw-kpi-card:hover::after { opacity:.6; }
.gw-kpi-label { font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gw-muted); }
.gw-kpi-value { font-size:28px; font-weight:900; letter-spacing:-.05em; color:var(--gw-ink); line-height:1; }
.gw-kpi-sub   { font-size:11.5px; color:var(--gw-muted); }
.gw-kpi-delta { font-size:11px; font-weight:700; }
.gw-kpi-delta.positive { color:var(--gw-emerald); }
.gw-kpi-delta.negative { color:#8B3A2A; }
.gw-kpi-drill { font-size:10px; color:var(--gw-pine); font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:0; transition:opacity .15s; }
.gw-kpi-card:hover .gw-kpi-drill { opacity:1; }

/* Print tweaks for Sprint 3 */
@media print {
  .ld-hero-actions, .ld-tab-bar, .ld-rail, .pl-toolbar { display:none; }
  .ld-body { grid-template-columns:1fr; }
}

/* ────────────────────────────────────────────────────── */
/* END Groundwork Sprint 3 Theme                          */
/* ────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════ */
/* Groundwork Sprint 5 — JS Token Adoption Classes        */
/* Replaces all hardcoded #113931 dark inline styles      */
/* ═══════════════════════════════════════════════════════ */

/* ── KPI Banner (manager() top strip) ─────────────────── */
.gw-kpi-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
  background: var(--gw-surface);   /* white card — clear contrast for all text */
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 20px;
  box-shadow: var(--gw-shadow-sm);
}
.gw-kpi-banner-cell { text-align: center; }
.gw-kpi-banner-label {
  font-size: 11px;        /* bumped from 10px — more legible */
  font-weight: 700;
  color: var(--gw-muted); /* now #4A5947 — sufficient contrast on white */
  text-transform: uppercase;
  letter-spacing: .07em;
}
.gw-kpi-banner-val {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--gw-ink);
  line-height: 1.1;
}
.gw-kpi-banner-sub { font-size: 11px; color: var(--gw-muted); margin-top: 2px; }

/* ── Division Tile (divTile helper) ────────────────────── */
.gw-div-tile {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.gw-div-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
}
.gw-div-tile.above-plan {
  border-color: var(--gw-emerald);
}
.gw-div-tile-meta {
  font-size: 10px;
  color: var(--gw-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.gw-div-tile-val {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gw-ink);
}
.gw-div-tile-remaining {
  font-size: 11px;
  color: var(--gw-muted);
  margin-top: 6px;
}
.gw-div-tile-over {
  font-size: 11px;
  color: var(--gw-emerald);
  margin-top: 6px;
  font-weight: 700;
}

/* ── Progress Bar (pbar helper) ────────────────────────── */
.gw-pbar-track {
  height: 6px;
  background: var(--gw-line);
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.gw-pbar-fill {
  height: 6px;
  border-radius: 4px;
  transition: width .5s;
  background: linear-gradient(90deg, var(--gw-pine), var(--gw-emerald));
}
.gw-pbar-fill.warn  { background: #8B6914; }
.gw-pbar-fill.alert { background: #8B3A2A; }
.gw-pbar-pct {
  font-size: 10px;
  color: var(--gw-muted);
  margin-top: 3px;
}

/* ── Data Tables (all manager/revenue tables) ──────────── */
.gw-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gw-data-table thead tr {
  background: var(--gw-surface-2);
}
.gw-data-table th {
  padding: 8px 10px;
  color: var(--gw-muted);
  border-bottom: 1px solid var(--gw-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gw-data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gw-surface-2);
  color: var(--gw-ink);
}
.gw-data-table tbody tr:hover {
  background: var(--gw-surface-2);
}
.gw-data-table tfoot tr {
  background: var(--gw-surface-2);
  font-weight: 700;
  border-top: 2px solid var(--gw-line);
}
.gw-data-table tfoot td { color: var(--gw-ink); }
.gw-data-table .right { text-align: right; }
.gw-data-table .center { text-align: center; }

/* ── Admin Panel Card (settings/comm panels) ───────────── */
.gw-admin-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.gw-admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gw-line);
  background: var(--gw-surface-2);
}
.gw-admin-panel-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--gw-ink);
}
.gw-admin-panel-sub {
  font-size: 11px;
  color: var(--gw-muted);
  margin-top: 2px;
}
.gw-admin-panel-body { padding: 16px 18px; }

/* ── Select / Input (form controls in manager/comm) ─────── */
.gw-select {
  padding: 5px 10px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  color: var(--gw-ink);
  font-size: 11px;
  font-family: inherit;
}
.gw-select:focus {
  outline: none;
  border-color: var(--gw-pine);
  box-shadow: 0 0 0 3px rgba(30,70,56,.1);
}
.gw-input-sm {
  padding: 4px 6px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 6px;
  color: var(--gw-ink);
  font-size: 12px;
  text-align: center;
  font-family: inherit;
}
.gw-input-sm:focus {
  outline: none;
  border-color: var(--gw-pine);
}

/* ── Aging Bucket Tile ─────────────────────────────────── */
.gw-aging-bucket {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-md);
  padding: 14px;
  text-align: center;
}
.gw-aging-bucket-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 6px;
}
.gw-aging-bucket-count {
  font-size: 22px;
  font-weight: 800;
}
.gw-aging-bucket-sub {
  font-size: 12px;
  color: var(--gw-muted);
  margin-top: 2px;
}

/* ── Revenue Admin Banner ──────────────────────────────── */
.gw-rev-banner {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 18px;
  margin-bottom: 20px;
}
.gw-rev-banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.gw-rev-banner-cell { text-align: center; }

/* ── Tab Nav (revenueAdmin tab pills) ──────────────────── */
.gw-tab-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gw-tab-pill {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gw-line);
  background: var(--gw-surface-2);
  color: var(--gw-muted);
  transition: all .15s;
}
.gw-tab-pill:hover {
  border-color: var(--gw-pine-muted);
  color: var(--gw-pine);
}
.gw-tab-pill.active {
  background: var(--gw-pine);
  border-color: var(--gw-pine);
  color: #fff;
}

/* ── Division Section Header (revenueAdmin div entry) ──── */
.gw-div-section {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.gw-div-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-line);
  background: var(--gw-surface-2);
}

/* ── Annual Field Card (annuals tab) ───────────────────── */
.gw-ann-field {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-md);
  padding: 12px;
}

/* ── P&L Upload Zone ───────────────────────────────────── */
.gw-upload-zone {
  background: var(--gw-surface);
  border: 2px dashed var(--gw-pine-muted);
  border-radius: var(--gw-r-lg);
  padding: 24px;
  text-align: center;
  margin-bottom: 20px;
  transition: border-color .15s;
}
.gw-upload-zone:hover { border-color: var(--gw-pine); }
.gw-upload-choose {
  display: inline-block;
  padding: 10px 24px;
  background: var(--gw-pine);
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.gw-upload-choose:hover { background: var(--gw-pine-light); }

/* ── P&L File Row ──────────────────────────────────────── */
.gw-pnl-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-md);
  margin-bottom: 8px;
}

/* ── Commission Panel ──────────────────────────────────── */
.gw-comm-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  overflow: hidden;
}
.gw-comm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--gw-surface-2);
  border-bottom: 1px solid var(--gw-line);
}
.gw-comm-tools {
  margin-top: 16px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 16px 18px;
}

/* ── Audit Trail ───────────────────────────────────────── */
.gw-audit-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  overflow: hidden;
}
.gw-audit-entry {
  padding: 10px 0;
  border-bottom: 1px solid var(--gw-surface-2);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gw-audit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

/* ── Audit Diff Modal ──────────────────────────────────── */
.gw-diff-modal-box {
  background: var(--gw-surface);
  border-radius: var(--gw-r-xl);
  padding: 24px;
  width: min(700px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--gw-line);
}
.gw-diff-pre {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  padding: 12px;
  font-size: 10px;
  color: var(--gw-muted);
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 0;
}

/* ── Feature Flag Panel ────────────────────────────────── */
.gw-flag-panel {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  padding: 10px;
  margin-top: 4px;
}
.gw-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--gw-line);
}

/* ── Simulator Panel (Commission) ──────────────────────── */
.gw-sim-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  overflow: hidden;
}
.gw-sim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--gw-surface-2);
  border-bottom: 1px solid var(--gw-line);
}
.gw-sim-body {
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.gw-sim-result {
  margin: 0 18px 16px;
  padding: 14px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-md);
  min-height: 60px;
  font-size: 13px;
  color: var(--gw-muted);
}

/* ── Confirm Modal (new-lead / delete modals) ──────────── */
.gw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-modal-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-xl);
  padding: 28px;
  width: min(420px, 90vw);
  box-shadow: var(--gw-shadow-lg);
}

/* ── Code/PRE blocks ───────────────────────────────────── */
.gw-code-block {
  display: block;
  background: var(--gw-surface-2);
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--gw-pine);
  font-size: 11px;
  line-height: 1.6;
  font-family: 'Courier New', monospace;
}

/* ── Academy Practice Challenge (GW token override) ─────── */
.acad-practice-challenge {
  background: linear-gradient(135deg, var(--gw-pine-deep) 0%, var(--gw-pine) 100%);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(30,70,56,.18);
}

/* ── Acad Practice icon area ───────────────────────────── */
.acad-practice-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* ── Export format buttons (CSV / XLSX / PDF picker) ──── */
.gw-export-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--gw-ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: border-color .15s;
}
.gw-export-btn:hover { border-color: var(--gw-pine); }

/* ── Comm panel — layout helpers ──────────────────────── */
.gw-comm-panel {
  /* Override: use padding instead of overflow:hidden so inputs aren't clipped */
  padding: 20px;
}
.gw-comm-tools {
  /* flex layout for admin controls strip */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.gw-comm-tools-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-ink);
  margin-bottom: 12px;
}
.gw-admin-btn {
  background: var(--gw-surface-3);
  border: 1px solid var(--gw-line);
  color: var(--gw-ink);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.gw-admin-btn:hover { background: var(--gw-pine-light); color: #fff; border-color: var(--gw-pine-light); }
.gw-tool-result {
  margin-top: 10px;
  font-size: 12px;
  color: var(--gw-muted);
}

/* ── Audit panel header ────────────────────────────────── */
.gw-audit-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gw-line);
}

/* ── Ghost / outline buttons ───────────────────────────── */
.gw-ghost-btn {
  font-size: 10px;
  color: var(--gw-muted);
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color .15s;
}
.gw-ghost-btn:hover { color: var(--gw-ink); }

/* ── Primary action button (GW pine) ──────────────────── */
.gw-btn-primary {
  background: var(--gw-pine);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.gw-btn-primary:hover { background: var(--gw-pine-light); }

/* ── Danger ghost button (destructive action outline) ──── */
.gw-btn-danger-ghost {
  background: transparent;
  border: 1px solid #C97B6A;
  color: #C97B6A;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.gw-btn-danger-ghost:hover { background: rgba(248,113,113,.08); }

/* ── Table row separator ───────────────────────────────── */
.gw-table-row {
  border-bottom: 1px solid var(--gw-line);
}

/* ── Form label (small, muted) ─────────────────────────── */
.gw-label {
  font-size: 11px;
  color: var(--gw-muted);
}

/* ── Section heading label ─────────────────────────────── */
.gw-section-label {
  color: var(--gw-ink);
}

/* ────────────────────────────────────────────────────── */
/* END Sprint 5 JS Token Adoption Classes                 */
/* ────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════ */
/* SPRINT 6 — reps.js / user_management.js / integrations.js */
/* ══════════════════════════════════════════════════════ */

/* ── Rep Dashboard Commission stat tiles ───────────────── */
/* Earned (green gradient) */
.gw-rep-tile-earned {
  background: linear-gradient(135deg, var(--gw-pine-deep), var(--gw-pine));
  border: 1px solid var(--gw-emerald);
  border-radius: var(--gw-r-lg);
  padding: 18px;
  text-align: center;
}
/* Pending (amber gradient) */
.gw-rep-tile-pending {
  background: linear-gradient(135deg, #113931, #113931);
  border: 1px solid #7A5C10;
  border-radius: var(--gw-r-lg);
  padding: 18px;
  text-align: center;
}
/* Neutral stat tile */
.gw-rep-tile {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 18px;
  text-align: center;
}
.gw-rep-tile-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.gw-rep-tile-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--gw-ink);
  margin-top: 8px;
}
.gw-rep-tile-sub {
  font-size: 11px;
  color: var(--gw-muted);
  margin-top: 4px;
}

/* ── Mini opp card (pipeline list items) ───────────────── */
.gw-opp-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gw-surface-2);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  border: 1px solid var(--gw-line);
  transition: background .12s, border-color .12s;
}
.gw-opp-mini:hover { background: var(--gw-surface-3); }
.gw-opp-mini.overdue { border-color: #5C2318; }

/* ── Payout card (commission breakdown list) ────────────── */
.gw-payout-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--gw-surface-2);
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: pointer;
  border: 1px solid var(--gw-line);
  transition: border-color .12s;
}
.gw-payout-card:hover { border-color: var(--gw-pine); }
.gw-payout-card.gate-held { border-color: rgba(139,105,20,.19); }

/* ── Weekly scoreboard progress bar ────────────────────── */
.gw-score-track {
  height: 5px;
  background: var(--gw-line);
  border-radius: 3px;
}
.gw-score-fill {
  height: 5px;
  border-radius: 3px;
  transition: width .4s;
}

/* ── Quick-nav action card (today / manager today view) ── */
.gw-qnav-card {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gw-qnav-card:hover { background: var(--gw-surface-3); border-color: var(--gw-pine); }
.gw-qnav-card.alert  { border-color: #5C2318; background: linear-gradient(135deg, rgba(42,10,10,.3), var(--gw-surface-2)); }
.gw-qnav-card.warn   { border-color: rgba(245,158,11,.38); }
.gw-qnav-card.active { background: linear-gradient(135deg, var(--gw-pine-deep), var(--gw-pine)); border-color: var(--gw-emerald); }

/* ── Manager Today micro-stat tile ─────────────────────── */
.gw-micro-tile {
  background: var(--gw-surface-2);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

/* ── Commission plan reference tables ──────────────────── */
/* Reuse .gw-data-table; only the inline thStyle/rowStyle vars need token values */
/* These are handled by overriding the string variables in the JS migration      */

/* ── Weekly activity tracker modal ─────────────────────── */
/* Uses .gw-modal-overlay + .gw-diff-modal-box already defined; no new class */

/* ── Commission payout section header ──────────────────── */
.gw-payout-header {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Sky-accented info card (target pipeline, HubSpot sync) */
.gw-sky-card {
  background: linear-gradient(135deg, var(--gw-surface-2), var(--gw-surface));
  border: 1px solid var(--gw-sky);
  border-radius: var(--gw-r-lg);
  margin-bottom: 20px;
}
.gw-sky-card-header {
  padding: 12px 16px;
  background: rgba(77,138,134,.06);
  border-bottom: 1px solid var(--gw-sky);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Today view — overdue section divider ───────────────── */
.gw-section-divider {
  border-top: 1px solid var(--gw-line);
  padding-top: 12px;
}
.gw-section-divider-top {
  border-top: 1px solid var(--gw-line);
  padding-top: 14px;
  margin-top: 10px;
}

/* ── Note / info strip ──────────────────────────────────── */
.gw-info-strip {
  font-size: 11px;
  color: var(--gw-muted);
  margin: 0;
  padding: 10px;
  background: var(--gw-surface-2);
  border-radius: 8px;
  border: 1px solid var(--gw-line);
}

/* ────────────────────────────────────────────────────── */
/* User Management classes                                */
/* ────────────────────────────────────────────────────── */

/* Tab nav border */
.gw-um-tab-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--gw-line);
  padding-bottom: 16px;
}
/* Search / filter panel */
.gw-um-search-panel {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-lg);
  padding: 20px;
  margin-bottom: 24px;
}
/* Edit/add user form card */
.gw-um-form-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 16px;
  padding: 28px;
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
/* Role description hint box */
.gw-um-role-desc {
  font-size: 12px;
  color: var(--gw-muted);
  background: var(--gw-surface-2);
  border-radius: 8px;
  padding: 10px 14px;
  line-height: 1.5;
}
/* Google workspace integration strip */
.gw-um-google-strip {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  overflow: hidden;
}
/* Roles grid card */
.gw-um-role-card {
  padding: 16px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
}
/* Permission table wrapper */
.gw-um-perm-table {
  overflow-x: auto;
  border: 1px solid var(--gw-line);
  border-radius: 12px;
}
/* Webhook / logs info strip */
.gw-um-info-strip {
  margin-top: 20px;
  padding: 16px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
}
/* User row in table */
.gw-um-user-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  margin-bottom: 8px;
}
/* Inline CSS in user_management.js (style tags) → tokenised */

/* ────────────────────────────────────────────────────── */
/* Integrations classes                                   */
/* ────────────────────────────────────────────────────── */

/* Generic integration panel card */
.gw-int-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 16px;
  padding: 28px;
}
/* Status strip inside integration panel */
.gw-int-status-strip {
  margin-top: 20px;
  padding: 14px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
}
.gw-int-status-row {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gw-line);
}
/* Icon square */
.gw-int-icon-sq {
  width: 32px;
  height: 32px;
  background: var(--gw-surface-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
/* Tab nav (integrations sub-tabs) */
.gw-int-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gw-line);
  margin-bottom: 0;
}
/* Modal card reuse: .gw-modal-card already defined */
/* Gmail thread list item */
.gw-gmail-thread {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gw-line);
  cursor: pointer;
  transition: background .12s;
}
.gw-gmail-thread:hover { background: var(--gw-surface-2); }
/* Reply box */
.gw-gmail-reply-box {
  margin-top: 16px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 16px;
}
/* Email detail panel */
.gw-email-detail {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  overflow: hidden;
}
/* Avatar circle */
.gw-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gw-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Calendar grid cells */
.gw-cal-header-row {
  background: var(--gw-surface-2);
  border-bottom: 1px solid var(--gw-line);
}
.gw-cal-day-header {
  padding: 8px 4px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gw-muted);
  border-bottom: 1px solid var(--gw-line);
  border-left: 1px solid var(--gw-line);
}
.gw-cal-cell {
  padding: 2px 6px;
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  border-top: 1px solid var(--gw-line);
  border-left: 1px solid var(--gw-line);
  height: 40px;
  position: relative;
  background: var(--gw-surface);
}
.gw-cal-cell.other-month { background: var(--gw-surface-2); opacity: .6; }
.gw-cal-time-block {
  border-top: 1px solid var(--gw-line);
  border-left: 1px solid var(--gw-line);
  height: 40px;
  position: relative;
  background: var(--gw-surface);
}
.gw-cal-event {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-left-width: 4px;
  transition: background .15s;
}
.gw-cal-event:hover { background: var(--gw-surface-3); }
/* Calendar nav buttons */
.gw-cal-nav-btn {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  color: var(--gw-muted);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s;
}
.gw-cal-nav-btn:hover { background: var(--gw-surface-3); color: var(--gw-ink); }
/* Calendar today button */
.gw-cal-today-btn {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-sky);
  color: var(--gw-sky);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
/* Contact/person list rows */
.gw-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: background .12s;
}
.gw-contact-row:hover { background: var(--gw-surface-3); }
/* Event form inputs container */
.gw-event-form {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 16px;
  padding: 24px;
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
/* Ghost back button */
.gw-back-btn {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  color: var(--gw-muted);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: color .12s;
}
.gw-back-btn:hover { color: var(--gw-ink); }

/* ────────────────────────────────────────────────────── */
/* END Sprint 6 Classes                                   */
/* ────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   SPRINT 7 — GROUNDWORK BRAND REDESIGN
   Palette: Evergreen Slate #1A4740 · Light Surface #F6F4EE · Satoshi font
   Overrides all prior token values and structural styles.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Import Satoshi font ──────────────────────────────────────────────── */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400,900&display=swap');

/* ── 2. Token override ───────────────────────────────────────────────────── */
:root {
  /* Brand */
  --gw-pine:         #113931;   /* Brand Primary — exact logo bg           */
  --gw-pine-deep:    #0E372F;   /* deeper for hover / pressed states       */
  --gw-pine-light:   #1A4740;   /* lighter tint for hover accents          */
  --gw-pine-muted:   #4D8A86;   /* muted pine for secondary elements       */
  --gw-accent:       #B8744F;   /* Accent terracotta                       */
  --gw-accent-soft:  #F5E8DF;   /* Accent tint                             */
  --gw-ui-accent:    #4D8A86;   /* UI Accent teal                          */
  --gw-emerald:      #2D7A55;   /* success green                           */
  --gw-sky:          #4D8A86;   /* UI Accent teal as interactive blue      */
  --gw-sky-soft:     #E5F0EF;   /* teal tint                               */

  /* Text */
  --gw-ink:          #113931;   /* Dark Text — primary                     */
  --gw-ink-2:        #2D3E3F;   /* secondary text                          */
  --gw-muted:        #4A5947;   /* Muted — boosted for legibility on cream */
  --gw-subtle:       #6F7E6A;   /* placeholder / truly disabled only       */

  /* Surfaces */
  --gw-bg:           #EDEAE0;   /* Warm cream — distinctly warm page bg    */
  --gw-surface:      #FDFCF9;   /* card / panel — off-white warm           */
  --gw-surface-2:    #F0EDE4;   /* secondary surface — lighter, less clash */
  --gw-surface-3:    #E4E0D6;   /* tertiary / hover                        */

  /* Borders */
  --gw-line:         #C8C3B6;   /* Stronger border — clearly visible       */
  --gw-line-strong:  #B4AFA3;   /* stronger divider                        */

  /* Shadows — richer, warmer depth */
  --gw-shadow-xs:  0 1px 3px rgba(31,42,43,.08), 0 1px 2px rgba(31,42,43,.05);
  --gw-shadow-sm:  0 2px 8px rgba(31,42,43,.10), 0 4px 16px rgba(31,42,43,.07);
  --gw-shadow-md:  0 4px 16px rgba(31,42,43,.12), 0 8px 32px rgba(31,42,43,.08);
  --gw-shadow-lg:  0 8px 32px rgba(31,42,43,.16), 0 20px 60px rgba(31,42,43,.12);

  /* Font */
  --gw-font: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;

  /* Legacy token aliases — keep existing code working */
  --blue:       var(--gw-sky);
  --blue-dark:  var(--gw-pine);
  --blue-soft:  var(--gw-sky-soft);
  --ink:        var(--gw-ink);
  --muted:      var(--gw-muted);
  --line:       var(--gw-line);
  --bg:         var(--gw-bg);
  --card:       var(--gw-surface);
  --green:      #2D7A55;
  --yellow:     #7A5C10;
  --red:        #8B3A2A;
  --shadow:     var(--gw-shadow-md);
}

/* ── 3. Base reset ───────────────────────────────────────────────────────── */
body {
  font-family: var(--gw-font);
  background: var(--gw-bg);
  color: var(--gw-ink);
  -webkit-font-smoothing: antialiased;
  font-weight: 450;
  font-size: 14px;
}

/* ── 4. App shell ────────────────────────────────────────────────────────── */
.app-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: 224px 1fr;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. SIDEBAR — Evergreen Slate dark background
   ════════════════════════════════════════════════════════════════════════════ */
.sidebar {
  background: #113931;   /* deep Evergreen Slate — rich dark green  */
  border-right: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: auto;
  overflow-x: hidden;
  box-shadow: 2px 0 12px rgba(0,0,0,.18);
}

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

/* Brand block */
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 0;
  flex-shrink: 0;
}
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-mark img {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: cover;
  border-radius: 9px;
}
/* SVG logo mark fallback (text-based) */
.brand-mark-svg {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.025em;
  color: #ffffff;
  line-height: 1.15;
}
.brand-subtitle {
  color: rgba(255,255,255,.5);
  font-size: 11px;
  font-weight: 500;
  margin-top: 1px;
}
.brand-kicker {
  display: none; /* hide old kicker */
}

/* Nav container */
.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 14px 10px;
  flex: 1;
}
.nav-group { margin-bottom: 4px; }

/* Section labels */
.nav-summary {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  cursor: default;
  user-select: none;
  border-radius: 0;
  gap: 0;
  transition: none;
}
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary:hover { color: rgba(255,255,255,.5); }
.nav-summary::after { display: none; }

/* Nav items */
.nav-items {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0;
  width: 100%;
}

.nav-item {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,.60);
  font-weight: 500;
  font-size: 13.5px;
  width: 100%;
  transition: color .12s, background .12s;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-item:hover {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
}
.nav-item.active {
  background: rgba(255,255,255,.14);
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.nav-item.active::before { display: none; } /* remove old left bar */

/* Sidebar footer / user card */
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 14px 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.80);
  font-size: 13px;
  background: rgba(0,0,0,.12);
}
.sidebar-footer strong {
  color: #ffffff;
  font-weight: 700;
  display: block;
  font-size: 13px;
}
.sidebar-footer span {
  color: rgba(255,255,255,.50);
  font-size: 11.5px;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. TOPBAR
   ════════════════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-line);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 15;
  box-shadow: 0 1px 4px rgba(31,42,43,.07);
  backdrop-filter: none;
}

/* Search bar */
.search-wrap {
  flex: 1;
  max-width: 380px;
  position: relative;
}
.search-wrap input,
#searchInput {
  width: 100%;
  background: var(--gw-bg);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  padding: 7px 14px 7px 36px;
  font-size: 13px;
  color: var(--gw-ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none;
}
.search-wrap input:focus,
#searchInput:focus {
  border-color: var(--gw-pine);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(32,74,67,.10);
}
.search-wrap::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236F7E6A' stroke-width='2' stroke-linecap='round' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4'/%3E%3Cline x1='10' y1='10' x2='14' y2='14'/%3E%3C/svg%3E");
}

/* Topbar action buttons */
.topbar-new-btn {
  background: var(--gw-pine);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .14s, box-shadow .14s;
  box-shadow: 0 2px 6px rgba(32,74,67,.25);
}
.topbar-new-btn:hover {
  background: var(--gw-pine-deep);
  box-shadow: 0 4px 10px rgba(32,74,67,.30);
}
.topbar-settings {
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-ink);
}
.topbar-settings:hover {
  background: var(--gw-surface-2);
  border-color: var(--gw-line-strong);
}
.topbar-new-dropdown {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  box-shadow: var(--gw-shadow-md);
}
.tnd-item:hover {
  background: var(--gw-surface-2);
  color: var(--gw-pine);
}

/* Notification / icon buttons in topbar */
.topbar-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  display: grid;
  place-items: center;
  color: var(--gw-muted);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.topbar-icon-btn:hover { background: var(--gw-surface-2); }

/* User avatar chip in topbar */
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gw-pine);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.01em;
  flex-shrink: 0;
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   6b. NAV HISTORY TRAIL BAR (#gw-trail)
   ════════════════════════════════════════════════════════════════════════════ */
.gw-trail {
  background: var(--gw-surface);
  border-bottom: 1px solid var(--gw-line);
  padding: 0 20px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  white-space: nowrap;
  position: sticky;
  top: 56px;                      /* sits flush below the 56px topbar */
  z-index: 14;
  box-shadow: 0 1px 3px rgba(31,42,43,.05);
}
.gw-trail::-webkit-scrollbar { display: none; }

/* ← Back button */
.gw-trail-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  border-radius: 20px;
  border: 1px solid var(--gw-line);
  background: var(--gw-bg);
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
  line-height: 1;
}
.gw-trail-back:hover {
  background: var(--gw-surface-2);
  color: var(--gw-pine);
  border-color: var(--gw-pine);
}
.gw-trail-back svg { flex-shrink: 0; }

/* Separator between back button and pills */
.gw-trail-sep {
  width: 1px;
  height: 16px;
  background: var(--gw-line);
  flex-shrink: 0;
  margin: 0 2px;
}

/* History pills */
.gw-trail-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  color: var(--gw-muted);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
  line-height: 1;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gw-trail-pill:hover {
  background: var(--gw-surface-2);
  color: var(--gw-ink);
  border-color: var(--gw-line);
}

/* Current / active pill */
.gw-trail-pill--active {
  background: rgba(32,74,67,.09);
  color: var(--gw-pine);
  border-color: rgba(32,74,67,.20);
  font-weight: 700;
  cursor: default;
}
.gw-trail-pill--active:hover {
  background: rgba(32,74,67,.09);
  color: var(--gw-pine);
  border-color: rgba(32,74,67,.20);
}

/* Trail chevron dividers between pills */
.gw-trail-chevron {
  color: var(--gw-line-strong);
  font-size: 10px;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
}

/* Mobile: hide trail on very small screens */
@media (max-width: 480px) {
  .gw-trail { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   7. MAIN VIEW AREA
   ════════════════════════════════════════════════════════════════════════════ */
.main {
  background: var(--gw-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  min-width: 0;
}
.view {
  padding: 24px 28px;
  max-width: none; /* fluid layout */
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   8. CARDS & SURFACES
   ════════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  box-shadow: var(--gw-shadow-sm);
  padding: 20px;
}
.card.clickable {
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.card.clickable:hover {
  box-shadow: var(--gw-shadow-md);
  border-color: var(--gw-pine);
  transform: translateY(-1px);
}
.app-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  box-shadow: var(--gw-shadow-sm);
  overflow: hidden;
}
.app-card:before { display: none; } /* remove old gradient top bar */

/* ── KPI metric strip ──────────────────────────────────────────────────── */
.metric-strip,
.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.metric-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--gw-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s, transform .15s;
}
.metric-card:hover { box-shadow: var(--gw-shadow-md); transform: translateY(-1px); }

.metric-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
/* Icon colour variants — match reference */
.metric-icon-wrap.revenue  { background: #EAF1EE; color: var(--gw-pine); }
.metric-icon-wrap.pipeline { background: #EAF1EE; color: var(--gw-ui-accent); }
.metric-icon-wrap.won      { background: #F5E8DF; color: var(--gw-accent); }
.metric-icon-wrap.deals    { background: #EDEAE0; color: var(--gw-muted); }
.metric-icon-wrap.rate     { background: #EAF1EE; color: var(--gw-pine); }

.metric-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gw-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.metric-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--gw-ink);
  letter-spacing: -.04em;
  line-height: 1;
}
.metric-delta {
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.metric-delta.pos { color: #2D7A55; }
.metric-delta.neg { color: #8B3A2A; }
.metric-delta .delta-desc {
  color: var(--gw-muted);
  font-weight: 400;
}

/* ── Dash tile (legacy reuse) ──────────────────────────────────────────── */
.dash-tile {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: var(--gw-shadow-xs);
}
.dash-tile strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-ink);
}
.dash-tile span {
  display: block;
  color: var(--gw-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. TYPOGRAPHY & HEADINGS
   ════════════════════════════════════════════════════════════════════════════ */
h1 { font-size: clamp(24px,3vw,36px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 4px; font-weight: 900; color: var(--gw-ink); }
h2 { font-size: 19px; letter-spacing: -.025em; margin: 0 0 12px; font-weight: 800; color: var(--gw-ink); }
h3 { font-size: 15px; letter-spacing: -.015em; margin: 0 0 8px; font-weight: 700; color: var(--gw-ink); }

.pl-title  { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--gw-ink); }
.pl-subtitle { font-size: 13px; color: var(--gw-muted); font-weight: 400; margin-top: 2px; }
.eyebrow { color: var(--gw-accent); text-transform: uppercase; letter-spacing: .10em; font-size: 10.5px; font-weight: 800; }
.lede { color: var(--gw-muted); font-size: 14px; max-width: 680px; line-height: 1.65; font-weight: 450; }

/* ════════════════════════════════════════════════════════════════════════════
   10. BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */
.primary-btn {
  background: var(--gw-accent);   /* Terracotta — warm CTA colour */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .14s, box-shadow .14s;
  box-shadow: 0 2px 8px rgba(184,116,79,.30);
}
.primary-btn:hover { background: #B8744F; box-shadow: 0 4px 12px rgba(184,116,79,.40); }

.secondary-btn {
  background: var(--gw-surface);
  color: var(--gw-ink);
  border: 1.5px solid var(--gw-line-strong);  /* stronger border — readable on cream bg */
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.secondary-btn:hover {
  background: var(--gw-surface-2);
  border-color: 7,.10);
}

.danger-btn {
  background: #FAE8E4;
  color: #8B3A2A;
  border: 1px solid #F5D5C8;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.danger-btn:hover { background: #FAE8E4; }

.install-btn {
  background: var(--gw-surface);
  color: var(--gw-muted);
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.install-btn:hover { background: var(--gw-surface-2); }

/* ════════════════════════════════════════════════════════════════════════════
   11. FORMS
   ════════════════════════════════════════════════════════════════════════════ */
.form input, .form select, .form textarea,
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="url"], input[type="password"], select, textarea {
  width: 100%;
  border: 1px solid var(--gw-line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--gw-surface);
  outline: none;
  color: var(--gw-ink);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--gw-pine);
  box-shadow: 0 0 0 3px rgba(32,74,67,.10);
}
.form label span { font-weight: 600; color: var(--gw-ink); font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   12. DATA TABLE
   ════════════════════════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead tr {
  background: transparent;
  border-bottom: 1px solid var(--gw-line);
}
.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--gw-surface-2);
}
.data-table tbody tr {
  border-bottom: 1px solid var(--gw-line);
  transition: background .1s;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--gw-surface-2); }
.data-table td {
  padding: 12px 14px;
  color: var(--gw-ink);
  vertical-align: middle;
}

/* ── GW data table (used in integrations/reps) ─── */
.gw-data-table {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════════════
   13. STAGE BADGES — match reference color palette
   ════════════════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Stage-specific badge colours */
.badge-prospecting,  .badge[data-stage="Prospecting"]   { background: #E5F0EF; color: #1A4740; }
.badge-qualification,.badge[data-stage="Qualification"] { background: #E5F0EF; color: #1A4740; }
.badge-proposal,     .badge[data-stage="Proposal"]      { background: #E5F0EF; color: #4D8A86; }
.badge-negotiation,  .badge[data-stage="Negotiation"]   { background: #FAF6E8; color: #7A5C10; }
.badge-closed-won,   .badge[data-stage="Closed Won"]    { background: #D4EDE1; color: #2D7A55; }
.badge-closed-lost,  .badge[data-stage="Closed Lost"]   { background: #FAE8E4; color: #7A2E20; }
.badge-new-lead,     .badge[data-stage="New Lead"]      { background: #EAF1EE; color: #2D7A55; }
.badge-contacted,    .badge[data-stage="Contacted"]     { background: #FAF6E8; color: #8B3A2A; }

/* Generic tonal badges */
.badge-green  { background: #D4EDE1; color: #2D7A55; }
.badge-blue   { background: #E5F0EF; color: #1A4740; }
.badge-amber  { background: #FAF6E8; color: #7A5C10; }
.badge-red    { background: #FAE8E4; color: #7A2E20; }
.badge-teal   { background: #D4EDE1; color: #4D8A86; }
.badge-purple { background: #E8E4D9; color: #1A4740; }
.badge-gray   { background: var(--gw-surface-2); color: var(--gw-muted); }

/* warn-badge / blue badge rewrite — solid amber bg with white text for legibility */
.warn-badge { background: #8B6914; color: #FFFFFF; border: none; font-weight: 700; }

/* ── Legacy pill/badge used in various views ─── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  border-radius: 20px;
  padding: 5px 12px;
  color: var(--gw-ink);
  font-size: 12px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. KANBAN BOARD
   ════════════════════════════════════════════════════════════════════════════ */
.kanban { display: grid; grid-template-columns: repeat(3,minmax(260px,1fr)); gap: 14px; align-items: start; }
.kanban-col {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: none;
}
.kanban-col h3 { display: flex; justify-content: space-between; font-size: 13px; color: var(--gw-ink); }

/* ════════════════════════════════════════════════════════════════════════════
   15. OPPORTUNITY / MINI-ROW CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.opp-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gw-line);
}
.opp-card h3 { margin: 0; font-size: 14px; }
.opp-card p  { margin: 3px 0 0; color: var(--gw-muted); font-size: 12px; }
.opp-meta    { display: grid; gap: 6px; justify-items: end; font-size: 12px; color: var(--gw-muted); }

.mini-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--gw-line);
  background: var(--gw-surface);
  padding: 12px;
  border-radius: 8px;
}
.mini-row:hover { background: var(--gw-surface-2); }
.mini-row em { grid-column: 1/-1; color: var(--gw-muted); font-style: normal; font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════════════
   16. SECTION HEADERS
   ════════════════════════════════════════════════════════════════════════════ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-head h2 { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   17. TOASTS & MODALS
   ════════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--gw-ink);
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  box-shadow: var(--gw-shadow-md);
  z-index: 50;
  font-size: 13px;
  font-weight: 600;
}

.sold-modal {
  background: var(--gw-surface);
  border-radius: 16px;
  padding: 28px;
  width: 100%;
  max-width: 540px;
  box-shadow: var(--gw-shadow-lg);
}
.sold-modal h2 { margin: 0 0 4px; font-size: 20px; }
.sold-modal-backdrop { background: rgba(31,42,43,.55); }

/* GW modal card */
.gw-modal-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  box-shadow: var(--gw-shadow-lg);
}

/* ════════════════════════════════════════════════════════════════════════════
   18. HERO / PIPELINE HERO
   ════════════════════════════════════════════════════════════════════════════ */
.hero {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 16px;
  padding: 0;
  box-shadow: var(--gw-shadow-xs);
  position: relative;
  overflow: hidden;
}
.hero:before, .hero:after { display: none; }

.hero-panel {
  background: var(--gw-pine);
  color: #fff;
  border-radius: 12px;
  padding: 24px;
}
.hero-panel h3 { color: #fff; }
.hero-panel .muted { color: rgba(255,255,255,.6); }

/* ════════════════════════════════════════════════════════════════════════════
   19. SEARCH RESULTS DROPDOWN
   ════════════════════════════════════════════════════════════════════════════ */
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  box-shadow: var(--gw-shadow-md);
  max-height: 380px;
  overflow: auto;
  padding: 6px;
  z-index: 100;
}
.result {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background .1s;
}
.result:hover { background: var(--gw-surface-2); }
.result-type  { font-size: 10px; color: var(--gw-pine); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.result-title { font-weight: 700; margin-top: 2px; color: var(--gw-ink); font-size: 13px; }
.result-text  { color: var(--gw-muted); font-size: 12px; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════════════
   20. PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.page-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  color: var(--gw-muted);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .1s;
}
.page-btn:hover { background: var(--gw-surface-2); color: var(--gw-ink); }
.page-btn.active { background: var(--gw-pine); color: #fff; border-color: var(--gw-pine); }

/* ════════════════════════════════════════════════════════════════════════════
   21. TABS — pill style
   ════════════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.tab {
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  color: var(--gw-muted);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.tab.active {
  background: var(--gw-pine);
  color: #fff;
  border-color: var(--gw-pine);
}
.tab:hover:not(.active) { background: var(--gw-surface-2); color: var(--gw-ink); }

/* ════════════════════════════════════════════════════════════════════════════
   22. STAT / METRIC TILES (legacy)
   ════════════════════════════════════════════════════════════════════════════ */
.stat {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--gw-shadow-sm);
}
.stat:after { display: none; }
.stat span  { display: block; color: var(--gw-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.stat strong { font-size: 32px; letter-spacing: -.05em; color: var(--gw-ink); font-weight: 900; }
.stat.bad { border-color: #E8C4BA; background: #FAE8E4; }
.stat.bad span   { color: #8B3A2A; }   /* overdue label — readable on pink bg */
.stat.bad strong { color: #8B3A2A; }   /* overdue count — strong red */

/* ════════════════════════════════════════════════════════════════════════════
   23. ACTIVITY LOG ROWS
   ════════════════════════════════════════════════════════════════════════════ */
.note { border-bottom: 1px solid var(--gw-line); padding: 10px 0; }
.note time { font-size: 11.5px; color: var(--gw-muted); font-weight: 600; }
.note p { margin: 5px 0 0; font-size: 13px; color: var(--gw-ink); line-height: 1.5; }

/* Tool list buttons */
.tool-list button {
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  border-radius: 10px;
  text-align: left;
  padding: 12px;
  font-weight: 700;
  color: var(--gw-pine);
  font-size: 13px;
}
.tool-list button:hover { background: var(--gw-surface-2); }

/* ════════════════════════════════════════════════════════════════════════════
   24. SPINNER & LOADING
   ════════════════════════════════════════════════════════════════════════════ */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--gw-line);
  border-top-color: var(--gw-pine);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-wrap { display: flex; justify-content: center; padding: 24px; }

/* ════════════════════════════════════════════════════════════════════════════
   25. INTEGRATIONS — light theme adapters for dark-origin components
   ════════════════════════════════════════════════════════════════════════════ */
/* Override hard-coded dark panel colours in integrations panel */
.gw-int-panel {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
}
.gw-info-strip {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
}
.gw-gmail-thread {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
}
.gw-sky-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  box-shadow: var(--gw-shadow-xs);
}
.gw-sky-card-header {
  background: var(--gw-surface-2);
  border-bottom: 1px solid var(--gw-line);
  padding: 14px 18px;
}
.gw-back-btn {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  color: var(--gw-muted);
}
.gw-back-btn:hover { background: var(--gw-surface-2); color: var(--gw-ink); }

/* ── Cal/Gmail label pills ─────────────────────────────────────────────── */
.gw-cal-nav-btn {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  color: var(--gw-muted);
}
.gw-cal-nav-btn:hover { background: var(--gw-surface-2); }
.gw-cal-today-btn {
  background: var(--gw-surface);
  border: 1px solid var(--gw-pine);
  color: var(--gw-pine);
}

/* ── User management panels ────────────────────────────────────────────── */
.gw-um-form-card, .gw-um-role-card, .gw-um-perm-table, .gw-um-user-row {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
}
.gw-um-tab-nav {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  gap: 4px;
}
.gw-um-role-desc { color: var(--gw-muted); }

/* ════════════════════════════════════════════════════════════════════════════
   26. LEAD / PIPELINE TAB BAR
   ════════════════════════════════════════════════════════════════════════════ */
.lead-tab-bar {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
}
.lead-tab {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-muted);
  transition: all .12s;
  cursor: pointer;
}
.lead-tab.active {
  background: var(--gw-surface);
  color: var(--gw-pine);
  font-weight: 700;
  box-shadow: var(--gw-shadow-xs);
}

/* ════════════════════════════════════════════════════════════════════════════
   27. CODE / INLINE CODE
   ════════════════════════════════════════════════════════════════════════════ */
code {
  background: var(--gw-surface-2);
  color: var(--gw-pine);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   28. RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 200px 1fr; }
  .metric-strip, .dashboard-strip { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .kanban { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 920px) {
  .view { padding: 16px; }
  .metric-strip, .dashboard-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2, .grid-3, .grid-4, .kanban, .form-grid { grid-template-columns: 1fr; }
  .opp-card { grid-template-columns: 1fr; }
  .opp-meta { justify-items: start; }
  .detail-head { display: block; }
  .detail-actions { justify-content: flex-start; margin-top: 12px; }
}
/* Off-canvas drawer — phone only. Duplicate of the block above; kept in sync.
   See the note in groundwork-design.css for why this is 768px, not 920px. */
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    transition: transform .2s;
    z-index: 20;
    width: 224px;
    box-shadow: 4px 0 20px rgba(0,0,0,.25);
  }
  .sidebar.open { transform: translateX(0); }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   29. DARK READABILITY OVERRIDES — neutralise old dark inline styles
   ════════════════════════════════════════════════════════════════════════════ */
/* These attribute selectors match any leftover inline dark backgrounds
   in sections not yet migrated, giving them readable light treatment */
[style*="background:var(--gw-surface)"]  { color: var(--gw-ink); }
[style*="background:var(--gw-surface-2)"] { color: var(--gw-ink); }
[style*="background:var(--gw-surface-3)"] { color: var(--gw-ink); }

/* Int action buttons — brand colour */
.int-action-btn {
  border: 1px solid var(--gw-line);
  background: var(--gw-surface);
  color: var(--gw-pine);
}
.int-action-btn:hover {
  background: var(--gw-surface-2);
  border-color: var(--gw-pine);
  box-shadow: 0 2px 8px rgba(32,74,67,.10);
}

/* Revenue editor — light theme */
.rev-editor-table thead tr { background: var(--gw-surface-2); }
.rev-editor-table th { color: var(--gw-muted); border-bottom: 1px solid var(--gw-line); }
.rev-editor-table tbody tr { border-bottom: 1px solid var(--gw-line); }
.rev-editor-table tbody tr:hover { background: var(--gw-surface-2); }
.rev-editor-table td { color: var(--gw-ink); }
.rev-editor-input {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  color: var(--gw-ink);
}
.rev-editor-input:focus { border-color: var(--gw-pine); outline: none; }
.rev-variance-pos { color: #2D7A55; }
.rev-variance-neg { color: #8B3A2A; }
.rev-variance-none { color: var(--gw-subtle); }

/* Financial tab buttons */
.fin-tab-btn.active { background: #EAF1EE; border: 1px solid var(--gw-pine); color: var(--gw-pine); }
.fin-tab-btn:not(.active) { background: var(--gw-surface); border: 1px solid var(--gw-line); color: var(--gw-muted); }
.fin-tab-btn:hover:not(.active) { background: var(--gw-surface-2); color: var(--gw-ink); }

/* Calendar view buttons — light */
.cal-view-toggle { background: var(--gw-surface-2); border-radius: 8px; padding: 3px; }
.cal-view-btn { color: var(--gw-muted); }
.cal-view-btn.active { background: var(--gw-surface); color: var(--gw-pine); box-shadow: var(--gw-shadow-xs); }
.cal-view-btn:hover:not(.active) { color: var(--gw-ink); }

/* Month/week grid — light */
.cal-month-grid { background: var(--gw-line); }
.cal-month-day-header { background: var(--gw-surface-2); color: var(--gw-muted); }
.cal-month-cell { background: var(--gw-surface); min-height: 72px; }
.cal-month-cell.today { background: #EAF1EE; }
.cal-month-cell.other-month { background: var(--gw-surface-2); opacity: .7; }
.cal-month-cell-num { color: var(--gw-muted); }
.cal-month-cell.today .cal-month-cell-num { background: var(--gw-pine); color: #fff; }
.cal-event-chip { background: #EAF1EE; color: var(--gw-pine); }
.cal-event-chip:hover { background: var(--gw-pine); color: #fff; }

.cal-week-grid { background: var(--gw-line); }
.cal-week-header { background: var(--gw-surface-2); }
.cal-week-header .dow { color: var(--gw-muted); }
.cal-week-header .dom { color: var(--gw-ink); }
.cal-week-header .dom.today-num { background: var(--gw-pine); color: #fff; }
.cal-week-time-label { background: var(--gw-surface-2); color: var(--gw-subtle); border-bottom: 1px solid var(--gw-line); }
.cal-week-cell { background: var(--gw-surface); border-bottom: 1px solid var(--gw-line); }
.cal-week-event { background: #EAF1EE; border-left-color: var(--gw-pine); color: var(--gw-pine); }
.cal-week-event:hover { background: var(--gw-pine); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
   30. OWNER / REP DASHBOARD — GW Sky/Surface card overrides
   ════════════════════════════════════════════════════════════════════════════ */
/* Month mini-card (light) */
.month-mini-card {
  background: var(--gw-surface-2);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 80px;
  text-align: center;
}
.month-mini-card .budget { font-size: 11px; color: var(--gw-muted); }
.month-mini-card .actual { font-size: 14px; font-weight: 700; color: var(--gw-pine); }
.month-mini-card .variance.pos { color: #2D7A55; }
.month-mini-card .variance.neg { color: #8B3A2A; }
.month-mini-card .variance.none { color: var(--gw-subtle); }

/* Dark card labels rewritten for light theme */
.dark-card-val   { font-size: 1.6rem; font-weight: 800; color: var(--gw-ink) !important; }
.dark-card-label { font-size: 10px; font-weight: 700; color: var(--gw-muted) !important; text-transform: uppercase; letter-spacing: .06em; }
.dark-card-green { color: #2D7A55 !important; }
.dark-card-red   { color: #8B3A2A !important; }
.dark-card-yellow{ color: #7A5C10 !important; }
.dark-card-cyan  { color: var(--gw-pine) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   31. GW INPUT SMALL (used in reps / integrations)
   ════════════════════════════════════════════════════════════════════════════ */
.gw-input-sm {
  padding: 6px 10px;
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 7px;
  color: var(--gw-ink);
  font-size: 12px;
}
.gw-input-sm:focus { border-color: var(--gw-pine); outline: none; }

/* ════════════════════════════════════════════════════════════════════════════
   32. CONTRAST FIX PASS — Warm Cream Theme Legibility
   All elements where text was blending into the cream/white surface.
   ════════════════════════════════════════════════════════════════════════════ */

/* Checklist progress bar track — was too faint on white card */
.ld-cl-bar-track { background: var(--gw-line-strong) !important; }
/* Checklist count text — always dark enough to read */
.ld-cl-count { color: var(--gw-ink) !important; }

/* Warn-badge text in section-heads needs to pop on cream bg */
.warn-badge { font-weight: 700 !important; }

/* Secondary buttons on cream page bg — stronger border treatment */
.pl-page-actions .secondary-btn,
.section-head .secondary-btn,
.detail-actions .secondary-btn {
  border-color: var(--gw-line-strong);
}

/* neutral-badge (All clear) */
.neutral-badge {
  background: var(--gw-surface-2);
  color: var(--gw-pine);
  border: 1px solid var(--gw-line-strong);
  font-weight: 700;
}

/* Table headers — clearer label text */
table th { color: var(--gw-muted); }

/* Topbar search input on warm bg */
#searchInput { color: var(--gw-ink); }
#searchInput::placeholder { color: var(--gw-subtle); }

/* Owner Dashboard: section headers on gw-sky-card (now white) */
.gw-sky-card .eyebrow { color: var(--gw-pine); }

/* Overdue badge on stat.bad — stronger red */
.stat.bad strong { color: #8B3A2A; }

/* KPI banner: ensure Needed/Month amber on white has enough contrast */
.gw-kpi-banner-val[style*="8B6914"] { color: #6B4D0A !important; }

/* Stat card label text inherits muted which is now #4A5947 — good */
/* But if any inline styles override, catch them */
.stat > span[style*="#6F7E6A"] { color: var(--gw-muted) !important; }

/* ── Section 33: app_premium.js dark-card text overrides ───────────────────
   These catch inline color:#E8E4D9 (cream) text that appears on light panels
   such as .gw-comm-panel (white surface) and .gw-flag-panel (surface-2).      */

/* Commission Rules Manager title — was cream on white panel */
.gw-comm-panel [style*="color:#E8E4D9"],
.gw-comm-panel [style*="color: #E8E4D9"] { color: var(--gw-ink) !important; }

/* Feature Flags panel title — was cream on surface-2 */
.gw-flag-panel [style*="color:#E8E4D9"],
.gw-flag-panel [style*="color: #E8E4D9"] { color: var(--gw-ink) !important; }

/* Review Cadence meeting titles — was cream on var(--bg2) row */
.card [style*="color:#E8E4D9"],
article [style*="color:#E8E4D9"] { color: var(--gw-ink) !important; }

/* Commission rate table header — was cream on white table */
.gw-data-table th[style*="color:#E8E4D9"] { color: var(--gw-muted) !important; }

/* Any remaining #6F7E6A inline style on light cards → boosted muted */
.gw-comm-panel [style*="color:#6F7E6A"],
.gw-flag-panel [style*="color:#6F7E6A"] { color: var(--gw-muted) !important; }

/* Access restricted modal — was cream text on light modal surface */
.modal-body [style*="color:#E8E4D9"] { color: var(--gw-ink) !important; }

/* ── END SPRINT 7 ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 34 — LAYOUT STANDARDIZATION + LOGO FIX
   - Logo: real colors, no filter invert
   - opp-card: no truncation, full text, consistent layout
   - mini-row: standardized 3-row grid, uniform spacing
   - Coming Up / Recently Updated: clean card padding
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Logo / Brand Mark ───────────────────────────────────────────────────── */
/* New logo is dark-green-background + white mark — show as-is, no invert    */
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: grid;
  place-items: center;
}
.brand-mark img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  filter: none !important;
  opacity: 1 !important;
}

/* Brand text — ensure Groundwork name is always visible */
.brand-name {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff !important;
  letter-spacing: -.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.brand-subtitle {
  color: rgba(255,255,255,.52) !important;
  font-size: 10.5px;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
}

/* ── opp-card (Due Now cards) — no truncation ────────────────────────────── */
/* Allow client name and project to wrap — never clip words */
.opp-card h3 {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gw-ink);
  margin: 0 0 3px;
  letter-spacing: -.01em;
  line-height: 1.3;
  word-break: break-word;
}
.opp-project {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  font-size: 12px;
  color: var(--gw-muted);
  margin: 0 0 8px;
  line-height: 1.45;
  word-break: break-word;
}
/* Ensure opp-card padding is generous enough */
.opp-card {
  padding: 14px 14px 13px 17px;
}

/* ── mini-row (Coming Up / Recently Updated rows) — standardized layout ─── */
/*
  HTML structure (per oppMini()):
    <button class="mini-row">
      <strong>   ← client name + urgency dot           — col 1, row 1
      <span.status-chip>  ← stage badge                — col 2, row 1
      <em>       ← project/service line                — col 1, row 2 (full width)
      <span>     ← rep pill + time                     — col 1-2, row 3
    </button>

  Grid: 3 rows, col 1 = flexible text, col 2 = badge (shrink-to-fit)
*/
.mini-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 0 8px;
  text-align: left;
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-bottom: none;
  border-radius: 0;
  padding: 11px 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  align-items: start;
  /* Reset any button defaults */
  font: inherit;
  color: inherit;
  position: relative;
}
.mini-row:first-of-type {
  border-radius: var(--gw-r-sm) var(--gw-r-sm) 0 0;
  border-top: 1px solid var(--gw-line);
}
.mini-row:last-of-type {
  border-radius: 0 0 var(--gw-r-sm) var(--gw-r-sm);
  border-bottom: 1px solid var(--gw-line);
}
.mini-row:only-of-type {
  border-radius: var(--gw-r-sm);
  border: 1px solid var(--gw-line);
}
.mini-row:hover {
  background: var(--gw-surface-2);
  border-color: var(--gw-pine-muted);
  z-index: 1;
}
/* Row 1, Col 1 — client name */
.mini-row > strong {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 650;
  color: var(--gw-ink);
  line-height: 1.3;
  /* Allow wrap — no clipping */
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 6px;
}
/* Row 1, Col 2 — status badge */
.mini-row > .status-chip {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 2px;
}
/* Row 2, Col 1 — project / service line (full width) */
.mini-row > em {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px;
  color: var(--gw-muted);
  font-style: normal;
  line-height: 1.4;
  margin-top: 3px;
  white-space: normal;
  word-break: break-word;
}
/* Row 3 — rep pill + time (full width, flex row, right-aligned) */
.mini-row > span:not(.status-chip):not(.opp-rep-pill) {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* Overdue left-border accent */
.mini-row.mini-row-overdue {
  border-left: 3px solid #C97B6A !important;
  padding-left: 10px;
}

/* ── Section card spacing — Coming Up / Recently Updated ─────────────────── */
/* Ensure the card containers have clean internal spacing */
.card > .section-head + .mini-row:first-of-type,
.card > .section-head ~ .mini-row:first-of-type {
  margin-top: 0;
}
/* Small gap between section-head and the mini-row list */
.card .section-head {
  margin-bottom: 10px;
}

/* ── opp-rep-pill — uniform pill style ───────────────────────────────────── */
.opp-rep-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 2px 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── status-chip uniform sizing in mini-rows ─────────────────────────────── */
.mini-row .status-chip {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

/* ── urgency-badge (OVERDUE / STALE) — no truncation in opp-card ─────────── */
.urgency-badge {
  white-space: nowrap;
  flex-shrink: 0;
}
.opp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

/* ── mini-row-meta / mini-row-time ──────────────────────────────────────── */
.mini-row-meta {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.mini-row-time {
  font-size: 10px;
  color: var(--gw-subtle, #8B9E95);
  font-weight: 500;
  white-space: nowrap;
}

/* ── END SECTION 34 ──────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 35 — Logo Visibility Fix + groundwork-crm.pages.dev → redirect notice
   ══════════════════════════════════════════════════════════════════════════════

   The logo PNG has a dark-green (#103830) background that matches the sidebar
   (#113931). Without visual separation it appears as an invisible dark square.
   Fix: add a subtle white ring (box-shadow) around the brand-mark so the logo
   has clear edges, and a slightly lighter background to create depth.
*/
.brand-mark {
  background: rgba(255,255,255,.08) !important;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.28) !important;
  border-radius: 10px !important;
}
.brand-mark img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  display: block !important;
  filter: none !important;
  opacity: 1 !important;
}

/* ── END SECTION 35 ───────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 36 — UI Polish Pass (Screenshot Fixes — June 2026)
   ══════════════════════════════════════════════════════════════════════════════

   Fixes applied:
   1. Search bar — icon no longer overlaps placeholder text (increase padding-left)
   2. Sidebar footer (Tyler card) — proper dark background, high-contrast text
   3. Super Admin nav button — flex layout, shield icon aligns with label
   4. Add Lead category tiles — richer contrast, bolder active state
   5. Kanban pipeline cards — min-width guard, proper overflow, no text squish
   6. Opp-card h3 — allow wrap in narrow columns instead of going invisible
*/

/* ── 1. Search bar — push placeholder right of the magnifying-glass icon ── */
.search-wrap input,
.search-wrap #searchInput,
#searchInput {
  padding-left: 40px !important; /* icon sits at left:12px + 14px icon + 4px gap */
}

/* Ensure ::before icon is perfectly centered regardless of input height */
.search-wrap::before {
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 15px !important;
  height: 15px !important;
  z-index: 2;
}

/* ── 2. Sidebar footer / Tyler user card — high contrast dark treatment ── */
.sidebar-footer {
  background: rgba(0, 0, 0, 0.28) !important;   /* deep dark, clearly separate from sidebar */
  border-top: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  margin: 8px 12px 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20) !important;
  color: rgba(255,255,255,.90) !important;
}
.sidebar-footer strong,
#sidebarUserName {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}
.sidebar-footer span,
#sidebarUserRole {
  color: rgba(255,255,255,.62) !important;
  font-size: 11.5px !important;
}

/* Avatar initials circle inside footer */
#sidebarAvatarInitials {
  background: var(--gw-emerald, #2EAD6D) !important;
  color: #fff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18) !important;
}

/* ── 3. Super Admin nav button — inline-flex so icon + text align ── */
#superAdminNavBtn {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--gw-emerald, #2EAD6D) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 8px 10px 8px 20px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  margin-top: 6px !important;
  border-radius: 6px !important;
  transition: background .14s !important;
}
#superAdminNavBtn:hover {
  background: rgba(46,173,109,.12) !important;
}
#superAdminNavBtn svg {
  flex-shrink: 0;
  opacity: .85;
}

/* ── 4. Add Lead — Project Category tiles: richer contrast ── */
.cat-tile {
  border: 1.5px solid rgba(30,70,56,.22) !important;
  background: #fff !important;
  color: var(--gw-ink, #1E2C2B) !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: background .14s, border-color .14s, box-shadow .14s !important;
  box-shadow: 0 1px 3px rgba(30,70,56,.06) !important;
}
.cat-tile:hover {
  border-color: var(--gw-pine, #1E4638) !important;
  background: rgba(30,70,56,.06) !important;
  color: var(--gw-pine, #1E4638) !important;
  box-shadow: 0 2px 6px rgba(30,70,56,.12) !important;
}
.cat-tile--active {
  border-color: var(--gw-pine, #1E4638) !important;
  background: var(--gw-pine, #1E4638) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(30,70,56,.30) !important;
}
.cat-tile-label {
  color: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
}
.cat-tile--active .cat-tile-label {
  color: #fff !important;
  font-weight: 700 !important;
}

/* ── 5. Kanban — prevent column/card text squish, proper overflow ── */
.kanban {
  overflow-x: auto !important;   /* scroll instead of squishing */
  min-width: 0;
}

/* Each column: enforce minimum width so cards never collapse to slivers */
.kanban-col {
  min-width: 260px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 6. Opp card heading — allow wrapping in narrow columns ── */
.opp-card h3 {
  white-space: normal !important;      /* allow wrap — no more vertical letter stacking */
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;    /* max 2 lines, then ellipsis */
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--gw-ink) !important;
}

/* Project subtitle: allow wrap for long "Maintenance – Recurring Contract" */
.opp-project {
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  color: var(--gw-muted) !important;
  margin-bottom: 8px !important;
}

/* Urgency badge: never shrink or wrap */
.urgency-badge {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
}

/* ── 7. Status badge in opp cards — make it crisp ── */
.status-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── END SECTION 36 ───────────────────────────────────────────────────────── */

/* ── SECTION 36-B — Pipeline heading & primary heading color fix ── */
/* .pl-title uses var(--gw-ink) which = #113931 (forest green) — override to near-black */
.pl-title,
h1.pl-title,
.view h1,
.view .pl-title {
  color: #0F1C14 !important;
}

/* ── Sidebar override guard (styles.css loads after, so re-assert here isn't enough) ──
   The actual fix is in styles.css STYLES-OVERRIDE block above.
   This block just documents the intent. */
/* ── END SECTION 36-B ────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 37 — Card Layout Redesign (June 2026)
   Fixes: Due Now oppCard blank space, kanban column width/overflow, overdue
   indicator clipping, column header wrapping.
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Kanban: definitive column sizing fix ── */
/* Override ALL prior grid declarations. Use a scrollable parent wrapper. */
.kanban {
  display: flex !important;           /* switch from grid to flex for clean column layout */
  flex-direction: row !important;
  gap: 14px !important;
  align-items: flex-start !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
  /* Custom scrollbar — subtle */
  scrollbar-width: thin;
  scrollbar-color: var(--gw-line) transparent;
}
.kanban::-webkit-scrollbar { height: 5px; }
.kanban::-webkit-scrollbar-track { background: transparent; }
.kanban::-webkit-scrollbar-thumb { background: var(--gw-line); border-radius: 3px; }

/* Each column: fixed min-width so headers never wrap */
.kanban-col {
  flex: 0 0 300px !important;         /* fixed 300px — never shrinks, never bloats */
  width: 300px !important;
  max-width: 300px !important;
  min-width: 0 !important;            /* flex child min-width override */
  box-sizing: border-box !important;
  background: var(--gw-surface-2) !important;
  border: 1px solid var(--gw-line) !important;
  border-radius: 14px !important;
  padding: 14px 12px !important;
}

/* Column header: single line, compact */
.kanban-col > h3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--gw-muted) !important;
  margin: 0 0 10px !important;
  gap: 6px !important;
  white-space: nowrap !important;     /* NEVER let stage name wrap to 2 lines */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── 2. Opp card: clean block layout, no ::before clip ── */
.opp-card {
  display: block !important;
  position: relative !important;
  background: var(--gw-surface) !important;
  border: 1px solid var(--gw-line) !important;
  border-radius: 10px !important;
  padding: 12px 13px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: box-shadow .13s, border-color .13s, transform .1s !important;
  overflow: hidden !important;         /* needed for ::before accent bar */
}
.opp-card:last-child { margin-bottom: 0 !important; }
.opp-card:hover {
  box-shadow: var(--gw-shadow-sm) !important;
  border-color: var(--gw-pine-muted) !important;
  transform: translateY(-1px) !important;
}

/* Accent bar — via ::before stays INSIDE rounded corners */
.opp-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: transparent !important;
  border-radius: 10px 0 0 10px !important;
  transition: background .13s !important;
}
.opp-card:hover::before            { background: var(--gw-emerald) !important; }
.opp-card.opp-overdue::before      { background: #C97B6A !important; }
.opp-card.opp-stale::before        { background: var(--gw-amber, #C4922A) !important; }

/* Remove old border-left overdue/stale — use ::before instead */
.opp-overdue,
.opp-stale {
  border-left-width: 1px !important;  /* reset to normal border, ::before handles accent */
}

/* Opp card internal layout */
.opp-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  flex-wrap: nowrap !important;
}
.opp-card h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gw-ink) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.urgency-badge {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .05em !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  margin-top: 1px !important;
}
.urgency-badge.overdue { background: #FAE8E4 !important; color: #8B3A2A !important; border: 1px solid #F5D5C8 !important; }
.urgency-badge.stale   { background: #FAF6E8 !important; color: #7A5C10 !important; border: 1px solid #F5E8C0 !important; }
.opp-project {
  font-size: 11.5px !important;
  color: var(--gw-muted) !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  word-break: break-word !important;
}
.opp-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}
.opp-value {
  margin-left: auto !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gw-emerald) !important;
}

/* ── 3. Due Now section: compact oppCard styling ── */
/* When oppCard appears inside the Today "Due Now" card, make it leaner */
.card .opp-card {
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 12px 14px 12px 16px !important;
}
.card .opp-card:last-child { margin-bottom: 0 !important; }

/* ── 4. Fix mini-row blank space — tighten the grid ── */
/* The blank space comes from mini-row-meta being placed at grid-row:3
   while col 2 of row 2 is empty. Fix: use align-items:start not center. */
.mini-row {
  align-items: start !important;
  gap: 2px 10px !important;
  padding: 10px 14px !important;
}

/* meta row: no forced grid-row, just flow naturally */
.mini-row-meta {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;         /* remove forced row 3 — flow naturally */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

/* Strong (name) and status-chip on same row */
.mini-row strong {
  align-self: center !important;
}
.mini-row .status-chip {
  align-self: center !important;
  margin-top: 0 !important;
}

/* Overdue indicator: left accent bar instead of border-left (no corner clash) */
.mini-row.mini-row-overdue {
  border-left: none !important;      /* remove the misaligned 3px border */
  border: 1px solid rgba(201,123,106,.35) !important;
  background: rgba(201,123,106,.04) !important;
  position: relative !important;
}
.mini-row.mini-row-overdue::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: #C97B6A !important;
  border-radius: 3px 0 0 3px !important;
}

/* ── END SECTION 37 ───────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   38. ROUND-4 POLISH — User Management rows, OAuth input, Commission form inputs
   2026-06-28 gw6
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. User Management: compact user rows ─────────────────────────────── */
/* The .gw-um-user-row had an extra flex layout applied via inline style that
   doubled padding. Override here so the main row div uses the expected height. */
.gw-um-user-row {
  display: block !important;         /* override flex — let inner divs handle layout */
  padding: 0 !important;
  background: var(--gw-surface) !important;
  border: 1px solid var(--gw-line) !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
}

/* Main row: name + badges + buttons — keeps its flex layout */
.gw-um-user-row > div:first-child {
  padding: 12px 16px !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Google status strip: tighter padding */
.gw-um-user-row > div:last-child {
  padding: 6px 16px !important;
}

/* ── 2. "Google not connected" — better contrast ───────────────────────── */
/* color:#5C6B58 on cream is barely readable; lift to ink-muted */
.gw-um-user-row span[style*="color:#5C6B58"] {
  color: var(--gw-ink) !important;
  opacity: 0.65 !important;
}

/* ── 3. Google OAuth Client ID input — fix excessive width ─────────────── */
/* The input wrapper has flex:1;min-width:220px — cap the input max-width */
#um-ws-client-id {
  max-width: 480px !important;
  flex: 1 1 220px !important;
}

/* ── 4. gw-info-strip label contrast: emoji pencil label was faint ─────── */
.gw-info-strip [style*="color:#5C6B58"],
.gw-info-strip [style*="color: #5C6B58"] {
  color: var(--gw-ink) !important;
  opacity: 0.6 !important;
}

/* ── 5. Commission form: gw-input-sm sizing in commission panels ───────── */
/* Small % and $ inputs were cramped (width:48px clips numbers). Ensure
   adequate width and consistent padding, especially the Cap $ inputs. */
.gw-comm-panel .gw-input-sm,
.gw-sim-panel .gw-input-sm {
  padding: 5px 8px !important;
  min-width: 52px !important;
  box-sizing: border-box !important;
}

/* Tier table % inputs — 60px is fine, ensure it's honoured */
.gw-comm-panel table .gw-input-sm {
  width: 62px !important;
  min-width: 52px !important;
}

/* Recurring row cap/bonus inputs — these were clipping at right */
.gw-comm-panel .gw-label {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.gw-comm-panel .gw-label .gw-input-sm[id$="-cap"] {
  width: 68px !important;
  min-width: 60px !important;
}

.gw-comm-panel .gw-label .gw-input-sm[id$="-bonus"] {
  width: 62px !important;
  min-width: 54px !important;
}

/* Soft approval / hard cap inputs below tier table */
#cr-soft-cap, #cr-hard-cap {
  width: 88px !important;
  min-width: 72px !important;
}

/* ── 6. Commission headings on cream bg: ensure icon+text are aligned ──── */
/* The gwIcon SVG sits inline — align-items keeps the row tidy */
.gw-comm-panel > div > div > div[style*="font-size:14px"],
.gw-sim-header > div > div[style*="font-size:14px"] {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ── END SECTION 38 ───────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 8 — PLATFORM LAYER STYLES
   Approval Engine · Automation Center · Audit Log · Portal · Field Mode
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shared: nav badge (pending count) ─────────────────────────────────── */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #C94A3A;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  margin-left: auto;
  line-height: 1;
}

/* ── Shared: GW Modal ──────────────────────────────────────────────────── */
.gw-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,28,20,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  backdrop-filter: blur(2px);
}
.gw-modal {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15,28,20,.3);
  width: 92%;
  overflow: hidden;
}
.gw-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gw-line);
}
.gw-modal-title {
  font-size: 15px; font-weight: 700; color: var(--gw-ink);
}
.gw-modal-close {
  color: var(--gw-muted); font-size: 16px; line-height: 1;
  background: none; border: none; cursor: pointer; padding: 4px;
  border-radius: 4px;
}
.gw-modal-close:hover { color: var(--gw-ink); background: var(--gw-surface-2); }
.gw-modal-body { padding: 18px 20px; }
.gw-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--gw-line);
}

/* ── Approval Engine ───────────────────────────────────────────────────── */
.ap-queue-stats {
  display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.ap-stat-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 14px 20px;
  min-width: 100px;
  text-align: center;
}
.ap-stat-num {
  font-size: 26px; font-weight: 800; color: var(--gw-ink); line-height: 1;
}
.ap-stat-label {
  font-size: 11px; font-weight: 600; color: var(--gw-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-top: 4px;
}
.ap-section { }
.ap-section-title {
  font-size: 13px; font-weight: 700; color: var(--gw-ink);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px;
}
.ap-empty { color: var(--gw-muted); font-size: 13px; padding: 20px 0; }
.ap-row {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.ap-row-left { flex: 1; min-width: 0; }
.ap-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ap-row-info { margin-top: 6px; }
.ap-row-entity { display: block; font-size: 14px; font-weight: 700; color: var(--gw-ink); }
.ap-row-type { display: block; font-size: 12px; color: var(--gw-muted); margin-top: 2px; }
.ap-row-meta { display: block; font-size: 11px; color: var(--gw-muted); margin-top: 3px; }
.ap-row-notes { display: block; font-size: 12px; color: var(--gw-ink); margin-top: 6px; padding: 6px 10px; background: var(--gw-bg); border-radius: 6px; }
.ap-meta { font-size: 11px; color: var(--gw-muted); }
/* Status chips */
.ap-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.ap-status--pending  { background: rgba(180,130,20,.12); color: #8B6914; border: 1px solid rgba(180,130,20,.20); }
.ap-status--approved { background: rgba(30,120,70,.10);  color: #1A6042; border: 1px solid rgba(30,120,70,.18); }
.ap-status--rejected { background: rgba(180,50,40,.10);  color: #882820; border: 1px solid rgba(180,50,40,.18); }
.ap-status--cancelled{ background: var(--gw-surface-2);  color: var(--gw-muted); border: 1px solid var(--gw-line); }
.ap-type { font-size: 12px; color: var(--gw-muted); margin-left: 6px; }
/* Buttons */
.ap-btn-approve {
  background: var(--gw-pine); color: #fff;
  border: none; border-radius: 7px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s;
}
.ap-btn-approve:hover { background: var(--gw-pine-deep); }
.ap-btn-reject {
  background: transparent; color: #882820;
  border: 1px solid rgba(180,50,40,.30); border-radius: 7px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ap-btn-reject:hover { background: rgba(180,50,40,.06); border-color: #C94A3A; }
.ap-btn-sm { font-size: 12px; padding: 5px 12px; }
.ap-request-btn {
  margin-top: 12px; font-size: 12px; font-weight: 600;
  color: var(--gw-pine); background: transparent;
  border: 1px dashed rgba(32,74,67,.30); border-radius: 7px;
  padding: 7px 16px; cursor: pointer; width: 100%;
  transition: background .12s;
}
.ap-request-btn:hover { background: rgba(32,74,67,.06); }
/* Inline panel */
.ap-panel { }
.ap-panel-empty { font-size: 13px; color: var(--gw-muted); margin-bottom: 10px; }
.ap-item { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.ap-item-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-actions { display: flex; gap: 8px; margin-top: 10px; }
.ap-notes { font-size: 12px; color: var(--gw-ink); margin-top: 8px; padding: 6px 10px; background: var(--gw-bg); border-radius: 6px; }
/* Modal fields */
.ap-modal-field { margin-bottom: 14px; }
.ap-modal-field label { display: block; font-size: 12px; font-weight: 700; color: var(--gw-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.ap-modal-field input[type=text], .ap-modal-field textarea, .ap-modal-field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gw-line);
  border-radius: 8px; font-size: 13px; color: var(--gw-ink);
  background: var(--gw-bg); font-family: inherit; outline: none;
  transition: border-color .12s;
}
.ap-modal-field input:focus, .ap-modal-field textarea:focus, .ap-modal-field select:focus {
  border-color: var(--gw-pine);
}

/* ── Automation Center ─────────────────────────────────────────────────── */
.auto-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gw-line); margin-bottom: 20px; }
.auto-tab {
  padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--gw-muted);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.auto-tab--active { color: var(--gw-pine); border-bottom-color: var(--gw-pine); }
.auto-tab:hover:not(.auto-tab--active) { color: var(--gw-ink); }
.auto-card {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 10px;
  transition: box-shadow .12s;
}
.auto-card--inactive { opacity: .65; }
.auto-card:hover { box-shadow: var(--gw-shadow-sm); }
.auto-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.auto-card-meta { display: flex; align-items: center; gap: 8px; }
.auto-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.auto-dot--on  { background: #1A6042; box-shadow: 0 0 0 3px rgba(26,96,66,.15); }
.auto-dot--off { background: var(--gw-muted); }
.auto-card-name { font-size: 14px; font-weight: 700; color: var(--gw-ink); }
.auto-badge-default {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #6B5EA8; background: rgba(107,94,168,.10);
  border: 1px solid rgba(107,94,168,.20); border-radius: 20px;
  padding: 2px 7px;
}
.auto-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-toggle-btn, .auto-edit-btn, .auto-delete-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 7px; cursor: pointer;
  transition: background .12s;
}
.auto-toggle-btn { background: var(--gw-surface-2); color: var(--gw-ink); border: 1px solid var(--gw-line); }
.auto-toggle-btn:hover { background: var(--gw-line); }
.auto-edit-btn { background: transparent; color: var(--gw-pine); border: 1px solid rgba(32,74,67,.25); }
.auto-edit-btn:hover { background: rgba(32,74,67,.06); }
.auto-delete-btn { background: transparent; color: #882820; border: 1px solid rgba(180,50,40,.25); }
.auto-delete-btn:hover { background: rgba(180,50,40,.06); }
.auto-card-desc { font-size: 13px; color: var(--gw-muted); margin-bottom: 10px; line-height: 1.5; }
.auto-card-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.auto-pill {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  background: var(--gw-surface-2); color: var(--gw-muted); border: 1px solid var(--gw-line);
}
.auto-pill--trigger { background: rgba(32,74,67,.09); color: var(--gw-pine); border-color: rgba(32,74,67,.20); }
.auto-pill--log     { background: rgba(107,94,168,.08); color: #6B5EA8; border-color: rgba(107,94,168,.18); }
.auto-actions-list  { display: flex; gap: 5px; flex-wrap: wrap; }
.auto-action-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 5px;
  background: var(--gw-bg); color: var(--gw-ink); border: 1px solid var(--gw-line);
}
.auto-action-chip--more { color: var(--gw-muted); }
.auto-empty { color: var(--gw-muted); font-size: 13px; padding: 20px 0; }
/* Execution log */
.auto-log-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gw-line); gap: 10px; flex-wrap: wrap; }
.auto-log-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auto-log-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.auto-log-status--success { background: rgba(30,120,70,.10); color: #1A6042; }
.auto-log-status--error   { background: rgba(180,50,40,.10); color: #882820; }
.auto-log-rule { font-size: 13px; font-weight: 600; color: var(--gw-ink); }
.auto-log-trigger { font-size: 12px; color: var(--gw-muted); }
.auto-log-time { font-size: 11px; color: var(--gw-muted); flex-shrink: 0; }
/* Rule modal */
.auto-modal-field { margin-bottom: 14px; }
.auto-modal-field label { display: block; font-size: 12px; font-weight: 700; color: var(--gw-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.auto-modal-field input, .auto-modal-field textarea, .auto-modal-field select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--gw-line); border-radius: 8px;
  font-size: 13px; color: var(--gw-ink); background: var(--gw-bg); font-family: inherit; outline: none;
}
.auto-modal-field input:focus, .auto-modal-field textarea:focus, .auto-modal-field select:focus { border-color: var(--gw-pine); }
.auto-modal-actions-list { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; padding: 2px 0; }
.auto-modal-action-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gw-ink); padding: 4px 2px; cursor: pointer; }
.auto-modal-action-row:hover { color: var(--gw-pine); }

/* ── Audit Log ─────────────────────────────────────────────────────────── */
.audit-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.audit-filter-select {
  padding: 7px 12px; border: 1px solid var(--gw-line); border-radius: 8px;
  font-size: 13px; color: var(--gw-ink); background: var(--gw-surface);
  outline: none; cursor: pointer;
}
.audit-count { font-size: 12px; color: var(--gw-muted); }
.audit-empty { color: var(--gw-muted); font-size: 13px; line-height: 1.6; padding: 24px 0; }
.audit-log-list { }
.audit-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--gw-line);
}
.audit-row-icon { flex-shrink: 0; padding-top: 4px; }
.audit-type-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gw-pine); opacity: .6; }
.audit-row-body { flex: 1; min-width: 0; }
.audit-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.audit-row-summary { font-size: 13px; font-weight: 600; color: var(--gw-ink); }
.audit-row-time { font-size: 11px; color: var(--gw-muted); flex-shrink: 0; }
.audit-row-meta { font-size: 12px; color: var(--gw-muted); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }
.audit-entity-type {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gw-muted); background: var(--gw-surface-2); border: 1px solid var(--gw-line);
  border-radius: 4px; padding: 1px 6px;
}

/* ── Client Portal — Internal Admin UI ────────────────────────────────── */
.portal-info-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(32,74,67,.06); border: 1px solid rgba(32,74,67,.15);
  border-radius: 10px; padding: 12px 16px;
  font-size: 13px; color: var(--gw-ink); line-height: 1.55;
  margin-bottom: 24px;
}
.portal-info-banner svg { flex-shrink: 0; margin-top: 1px; stroke: var(--gw-pine); }
.portal-section { }
.portal-section-title { font-size: 13px; font-weight: 700; color: var(--gw-ink); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.portal-empty { color: var(--gw-muted); font-size: 13px; padding: 16px 0; }
.portal-row {
  background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.portal-row-left { flex: 1; min-width: 0; }
.portal-row-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.portal-client-name { font-size: 14px; font-weight: 700; color: var(--gw-ink); }
.portal-client-email { font-size: 12px; color: var(--gw-muted); margin-top: 2px; }
.portal-row-meta { font-size: 11px; color: var(--gw-muted); margin-top: 4px; }
.portal-type-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.portal-type-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(91,127,166,.10); color: #3B6EA5; border: 1px solid rgba(91,127,166,.20);
}
.portal-link-btn { }
.portal-revoke-btn { color: #882820 !important; border-color: rgba(180,50,40,.30) !important; }
.portal-revoked-label { font-size: 12px; color: var(--gw-muted); font-style: italic; }
.portal-action-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px; font-size: 11px; font-weight: 700; color: var(--gw-muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 0; border-bottom: 1px solid var(--gw-line); margin-bottom: 4px;
}
.portal-action-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px; font-size: 12px; color: var(--gw-ink);
  padding: 8px 0; border-bottom: 1px solid var(--gw-line);
}
.portal-action-label { font-weight: 600; text-transform: capitalize; }
.portal-action-time { font-size: 11px; color: var(--gw-muted); }
/* Modal */
.portal-modal-type-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gw-ink); padding: 4px 2px; cursor: pointer; }
/* Portal shell (external client view) */
.portal-shell {
  min-height: 100vh; min-height: 100dvh; background: #F5F9F7;
  display: flex; flex-direction: column; font-family: inherit;
}
.portal-header {
  background: #0F1F1E; padding: 0 24px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.portal-brand { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.portal-client-badge {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px; padding: 4px 12px;
}
.portal-body { flex: 1; padding: 32px 24px; max-width: 820px; margin: 0 auto; width: 100%; }
.portal-welcome { margin-bottom: 28px; }
.portal-welcome-title { font-size: 24px; font-weight: 800; color: #0F1F1E; margin-bottom: 6px; }
.portal-welcome-sub { font-size: 14px; color: #5E6E6F; }
.portal-nav { display: flex; gap: 4px; border-bottom: 1px solid #D5E3DE; margin-bottom: 24px; }
.portal-nav-btn {
  padding: 9px 18px; font-size: 13px; font-weight: 600; color: #5E6E6F;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.portal-nav-btn--active { color: #113931; border-bottom-color: #113931; }
.portal-nav-btn:hover:not(.portal-nav-btn--active) { color: #1F2A2B; }
.portal-content { }
.portal-section-heading { font-size: 17px; font-weight: 700; color: #0F1F1E; margin-bottom: 16px; }
.portal-record-empty {
  background: #fff; border: 1px solid #D5E3DE; border-radius: 10px; padding: 32px 24px; text-align: center;
  font-size: 14px; color: #5E6E6F; line-height: 1.6;
}
.portal-record-empty-sub { font-size: 13px; color: #94A3B8; margin-top: 8px; }
.portal-footer { text-align: center; font-size: 12px; color: #94A3B8; padding: 20px 24px; border-top: 1px solid #D5E3DE; }
.portal-error-state { text-align: center; padding: 80px 24px; }
.portal-error-icon { width: 64px; height: 64px; border-radius: 50%; background: #FAE8E4; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.portal-error-icon svg { stroke: #7A2E20; }
.portal-error-state h2 { font-size: 20px; font-weight: 700; color: #0F1F1E; margin-bottom: 10px; }
.portal-error-state p { font-size: 14px; color: #5E6E6F; max-width: 360px; margin: 0 auto; line-height: 1.6; }

/* ── Field / Mobile Mode ───────────────────────────────────────────────── */
.field-mode-wrap { max-width: 640px; margin: 0 auto; }
.field-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 10px;
}
.field-title { font-size: 22px; font-weight: 800; color: var(--gw-ink); margin-bottom: 2px; }
.field-sub { font-size: 13px; color: var(--gw-muted); }
.field-exit-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--gw-muted);
  background: var(--gw-surface); border: 1px solid var(--gw-line);
  border-radius: 8px; padding: 7px 12px; cursor: pointer;
  transition: background .12s, color .12s;
}
.field-exit-btn:hover { background: var(--gw-surface-2); color: var(--gw-ink); }
/* Quick actions */
.field-quick-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px; margin-bottom: 24px;
}
.field-quick-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; background: var(--gw-surface); border: 1px solid var(--gw-line);
  border-radius: 12px; padding: 14px 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--gw-ink);
  transition: background .12s, box-shadow .12s;
}
.field-quick-btn:hover { background: var(--gw-surface-2); box-shadow: var(--gw-shadow-sm); }
.field-quick-btn svg { stroke: var(--gw-pine); }
/* Sections */
.field-section { margin-bottom: 24px; }
.field-section-title { font-size: 12px; font-weight: 700; color: var(--gw-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.field-empty { font-size: 13px; color: var(--gw-muted); padding: 14px 0; }
/* Work order cards */
.field-wo-card {
  background: var(--gw-surface); border: 1px solid var(--gw-line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.field-wo-card--today { border-color: rgba(32,74,67,.25); box-shadow: 0 0 0 1px rgba(32,74,67,.08); }
.field-wo-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.field-wo-title { font-size: 15px; font-weight: 700; color: var(--gw-ink); }
.field-wo-meta { font-size: 12px; color: var(--gw-muted); margin-top: 2px; }
.field-wo-status {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 20px; flex-shrink: 0;
}
.field-wo-status--scheduled { background: rgba(91,127,166,.10); color: #3B6EA5; }
.field-wo-status--active    { background: rgba(180,130,20,.12);  color: #8B6914; }
.field-wo-status--done      { background: rgba(30,120,70,.10);   color: #1A6042; }
.field-wo-status--pending   { background: var(--gw-surface-2);   color: var(--gw-muted); }
.field-wo-date { font-size: 12px; color: var(--gw-muted); margin-bottom: 6px; }
.field-wo-notes { font-size: 12px; color: var(--gw-ink); line-height: 1.5; margin-bottom: 10px; }
.field-wo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.field-action-btn {
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 8px;
  cursor: pointer; transition: background .12s;
  background: var(--gw-surface-2); color: var(--gw-ink); border: 1px solid var(--gw-line);
}
.field-action-btn--primary { background: var(--gw-pine); color: #fff; border-color: var(--gw-pine); }
.field-action-btn--primary:hover { background: var(--gw-pine-deep); }
.field-action-btn--large { width: 100%; padding: 12px 16px; font-size: 14px; }
/* Detail */
.field-wo-detail { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 12px; padding: 18px; }
.field-wo-detail-title { font-size: 18px; font-weight: 800; color: var(--gw-ink); margin-bottom: 12px; }
.field-wo-detail-meta { display: grid; gap: 6px; font-size: 13px; color: var(--gw-ink); margin-bottom: 14px; }
.field-wo-detail-meta strong { color: var(--gw-muted); font-weight: 600; margin-right: 4px; }
.field-wo-detail-notes { font-size: 13px; color: var(--gw-ink); line-height: 1.6; padding: 10px 12px; background: var(--gw-bg); border-radius: 8px; margin-bottom: 14px; }
.field-checklist { margin-bottom: 16px; }
.field-checklist-title { font-size: 12px; font-weight: 700; color: var(--gw-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.field-checklist-item {
  display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gw-ink);
  padding: 8px 0; border-bottom: 1px solid var(--gw-line); cursor: pointer;
}
.field-checklist-item input { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.field-detail-actions { margin: 16px 0; }
.field-complete-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 8px;
  background: rgba(30,120,70,.10); color: #1A6042;
  font-size: 14px; font-weight: 700; border: 1px solid rgba(30,120,70,.20); width: 100%; justify-content: center;
}
/* Quick note */
.field-note-area { display: flex; flex-direction: column; gap: 8px; }
.field-note-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--gw-line);
  border-radius: 8px; font-size: 13px; color: var(--gw-ink);
  background: var(--gw-bg); font-family: inherit; outline: none; resize: vertical;
  transition: border-color .12s;
}
.field-note-input:focus { border-color: var(--gw-pine); }
/* Field mode topbar button */
.field-mode-topbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 7px; border: 1px solid var(--gw-line);
  background: var(--gw-surface); color: var(--gw-ink);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.field-mode-topbar-btn:hover { background: var(--gw-surface-2); }
@media (max-width: 768px) {
  .field-mode-wrap { max-width: 100%; }
  .field-quick-actions { grid-template-columns: repeat(2, 1fr); }
  .field-wo-actions { flex-direction: column; }
  .field-action-btn { width: 100%; }
  .portal-action-header, .portal-action-row { grid-template-columns: 1fr 1fr; }
  .portal-action-entity, .portal-action-time { display: none; }
}

/* ════════════════════════════════════════════════════════
   GW-WORKSPACE — 5-workspace navigation model
   Sidebar expand/collapse with subtab list per workspace
   ════════════════════════════════════════════════════════ */

/* ── Hide the old top-of-content workspace header bar ── */
#gw-ws-header { display: none !important; }
.gw-workspace-header { display: none !important; }
.gw-ws-tabs { display: none !important; }
.gw-ws-tab { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR NAV TREE — v4 refined (Linear/Notion-inspired)
   Philosophy: breathe more, ink less. Clear hierarchy without weight.

   L0  .nav-workspace   → section heading row (icon + label + chevron)
   L1  .nav-subtab      → item inside an open section
   L2  .nav-subtab--sub → child item inside a collapsible sub-group
   ══════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────── */
.nav-ws-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2px;
}

/* ── L0: Section heading ─────────────────────────────────────── */
/*
   Design: icon (16px, 50% opacity) · label (12px, UPPERCASE, tracked) · chevron
   Hover: label brightens to 80%, no fill background — keeps it lightweight
   Active: label fully white, icon fully opaque, subtle left pip
*/
.nav-workspace {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 7px;
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .13s, background .13s;
  position: relative;
  margin-top: 6px;
}
.nav-workspace svg {
  flex-shrink: 0;
  width: 15px; height: 15px;
  opacity: .5;
  transition: opacity .13s;
}
.nav-workspace:hover {
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
}
.nav-workspace:hover svg { opacity: .75; }

/* Active section heading */
.nav-workspace.active {
  color: rgba(255,255,255,.92);
  background: transparent;
}
.nav-workspace.active svg { opacity: .9; }
/* Left pip — 2px teal line flush to sidebar edge */
.nav-workspace.active::before {
  content: '';
  position: absolute;
  left: 0; top: 28%; bottom: 28%;
  width: 2.5px;
  background: #34d399;
  border-radius: 0 2px 2px 0;
}

/* Chevron — far right, rotates when open */
.nav-workspace .nav-chevron-icon {
  margin-left: auto;
  width: 10px; height: 10px;
  opacity: .3;
  transition: transform .18s ease, opacity .13s;
  flex-shrink: 0;
}
.nav-workspace:hover .nav-chevron-icon { opacity: .55; }
.nav-workspace.active .nav-chevron-icon { opacity: .5; }
/* Open = chevron points down; closed = chevron points right */
.nav-ws-group--collapsed .nav-workspace .nav-chevron-icon { transform: rotate(-90deg); }

/* ── L1 panel (the expanding container) ─────────────────────── */
.nav-subtabs {
  display: flex;
  flex-direction: column;
  padding: 2px 6px 6px 6px;
  overflow: hidden;
  transition: max-height .22s cubic-bezier(.4,0,.2,1);
  max-height: 900px;
}
.nav-ws-group--collapsed .nav-subtabs {
  max-height: 0 !important;
  padding: 0 !important;
}

/* ── L1: Nav item ────────────────────────────────────────────── */
/*
   Design: 13px medium weight, left-padded, pill hover/active
   Active: soft teal-tinted pill + white text + 3px left dot indicator
   No left accent bar on items — that belongs only to section headings
*/
.nav-subtab {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 6px 10px 6px 14px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,.52);
  cursor: pointer;
  border-radius: 6px;
  transition: color .11s, background .11s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
  position: relative;
  gap: 0;
}
.nav-subtab:hover {
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.07);
}
/* Active item — pill highlight */
.nav-subtab--active {
  color: #fff;
  font-weight: 500;
  background: rgba(52,211,153,.13);
}
/* Active dot — small teal circle left of text */
.nav-subtab--active::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
}

/* ── Divider (hidden — not used) ─────────────────────────────── */
.nav-subtab-divider { display: none; }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-workspace { font-size: 10.5px; padding: 6px 10px 6px 9px; margin-top: 4px; }
  .nav-subtab { font-size: 12.5px; padding: 5px 8px 5px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 9 — WORKDAY CLOCK + FIELD DASHBOARD
   ══════════════════════════════════════════════════════════════════════ */

/* ── Header clock pill (light topbar theme) ── */
.gw-clock-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--gw-line, rgba(32,74,67,.18));
  background: var(--gw-surface-2, #FDFCF9);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-ink, #1A2E2B);
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
  flex-shrink: 0;
}
.gw-clock-pill:hover { background: var(--gw-surface-3, #EAF1EE); border-color: rgba(32,74,67,.28); }
.gw-clock-pill.clocked-in  { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.gw-clock-pill.on-break    { border-color: #d97706; background: #fffbeb; color: #b45309; }
.gw-clock-pill.clocked-out { border-color: var(--gw-line); background: var(--gw-surface-2); color: var(--gw-muted); }

.gw-clock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gw-muted, #9CA3A0);
  flex-shrink: 0;
}
.gw-clock-pill.clocked-in .gw-clock-dot  { background: #16a34a; box-shadow: 0 0 6px #16a34a66; animation: gwPulse 1.8s ease-in-out infinite; }
.gw-clock-pill.on-break .gw-clock-dot    { background: #d97706; box-shadow: 0 0 6px #d9770666; }
.gw-clock-pill.clocked-out .gw-clock-dot { background: #9CA3A0; }

@keyframes gwPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .65; transform: scale(1.15); }
}

.gw-clock-label { font-size: 12px; font-weight: 600; }
.gw-clock-timer { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .85; }

/* Dropdown menu */
.gw-clock-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #1C2B26;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  z-index: 9999;
  padding: 8px;
  overflow: hidden;
}
.gw-clock-menu-hd {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 4px 8px 6px;
}
.gw-clock-menu-action {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: 0;
  border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #fff;
  text-align: left; transition: background .12s;
}
.gw-clock-menu-action:hover { background: rgba(255,255,255,.09); }
.gw-clock-menu-action.danger { color: #fca5a5; }
.gw-clock-menu-action.danger:hover { background: rgba(239,68,68,.12); }
.gw-clock-menu-divider { height: 1px; background: rgba(255,255,255,.09); margin: 4px 0; }
.gw-clock-menu-status {
  font-size: 11px; color: rgba(255,255,255,.45);
  padding: 6px 10px 4px;
}
.gw-clock-menu-job {
  font-size: 11px; font-weight: 600; color: #86efac;
  padding: 0 10px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Field Dashboard view ── */
.fd-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 80px;
}
.fd-hero {
  background: linear-gradient(135deg, #0F2419 0%, #1A3A2A 100%);
  border: 1px solid rgba(52,211,153,.18);
  border-radius: 16px;
  padding: 24px 20px 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.fd-hero::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(52,211,153,.12) 0%, transparent 70%);
  pointer-events: none;
}
.fd-hero-greeting { font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 2px; }
.fd-hero-name     { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -.01em; }
.fd-status-badge  {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 16px;
}
.fd-status-badge.not-in  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.12); }
.fd-status-badge.clocked-in  { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.25); }
.fd-status-badge.on-break    { background: rgba(251,191,36,.15); color: #fcd34d; border: 1px solid rgba(251,191,36,.25); }
.fd-status-badge.clocked-out { background: rgba(100,116,139,.1); color: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.1); }

.fd-timer { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 6px; }
.fd-timer-sub { font-size: 12px; color: rgba(255,255,255,.4); margin-bottom: 20px; }

.fd-cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fd-btn-primary {
  flex: 1; min-width: 120px;
  padding: 14px 18px; border-radius: 12px;
  background: #16a34a; border: 0; color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.fd-btn-primary:active { transform: scale(.97); }
.fd-btn-primary:hover  { background: #15803d; }
.fd-btn-primary.break  { background: #b45309; }
.fd-btn-primary.break:hover  { background: #92400e; }
.fd-btn-primary.end-break    { background: #1d4ed8; }
.fd-btn-primary.end-break:hover { background: #1e40af; }
.fd-btn-primary.clock-out { background: #dc2626; }
.fd-btn-primary.clock-out:hover { background: #b91c1c; }
.fd-btn-secondary {
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.fd-btn-secondary:hover { background: rgba(255,255,255,.13); }

/* Section cards */
.fd-section { margin-bottom: 14px; }
.fd-section-hd {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F); margin-bottom: 8px; padding: 0 2px;
}
.fd-card {
  background: var(--gw-surface, #fff);
  border: 1px solid var(--gw-line, #E0DDD5);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.fd-card + .fd-card { margin-top: 0; }
.fd-card-row { display: flex; align-items: center; gap: 10px; }
.fd-card-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fd-card-label { font-size: 12px; color: var(--gw-muted, #5E6E6F); margin-bottom: 1px; }
.fd-card-value { font-size: 14px; font-weight: 600; color: var(--gw-ink, #1F2A2B); }
.fd-card-meta  { font-size: 11px; color: var(--gw-muted, #5E6E6F); }

/* Job selection (9B) */
.fd-job-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--gw-line, #E0DDD5);
  background: var(--gw-surface, #fff);
  cursor: pointer; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.fd-job-item:hover    { border-color: #4D8A86; background: #4D8A8608; }
.fd-job-item.selected { border-color: #16a34a; background: #16a34a0D; }
.fd-job-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--gw-line, #D0CCC3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.fd-job-item.selected .fd-job-check {
  background: #16a34a; border-color: #16a34a;
}
.fd-job-body { flex: 1; min-width: 0; }
.fd-job-name { font-size: 13px; font-weight: 600; color: var(--gw-ink, #1F2A2B); }
.fd-job-meta { font-size: 11px; color: var(--gw-muted, #5E6E6F); }
.fd-job-time { font-size: 11px; color: #4D8A86; font-weight: 600; white-space: nowrap; }

/* 9C timesheet roll-up table */
.ts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts-table th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gw-muted,#5E6E6F); padding: 6px 12px; border-bottom: 1px solid var(--gw-line,#E0DDD5); }
.ts-table td { padding: 10px 12px; border-bottom: 1px solid var(--gw-line,#F0EDE5); color: var(--gw-ink,#1F2A2B); }
.ts-table tr:last-child td { border-bottom: 0; }
.ts-table tr:hover td { background: var(--gw-surface-2, #FAFAF8); }
.ts-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.ts-badge.approved  { background: #dcfce7; color: #166534; }
.ts-badge.pending   { background: #fef9c3; color: #854d0e; }
.ts-badge.rejected  { background: #fee2e2; color: #991b1b; }
.ts-badge.open      { background: #dbeafe; color: #1d4ed8; }
.ts-badge.overtime  { background: #fff7ed; color: #c2410c; }
.ts-badge.missed    { background: #fee2e2; color: #991b1b; }

/* Workday settings form */
.wd-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .wd-settings-grid { grid-template-columns: 1fr; } }
.wd-field label { font-size: 11px; font-weight: 700; color: var(--gw-muted,#5E6E6F); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 5px; }
.wd-field input, .wd-field select {
  width: 100%; padding: 9px 11px;
  background: var(--gw-surface-2, #FAFAF8);
  border: 1px solid var(--gw-line, #E0DDD5);
  border-radius: 8px; font-size: 13px; color: var(--gw-ink, #1F2A2B);
  box-sizing: border-box;
}
.wd-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gw-line,#F0EDE5); }
.wd-toggle-row:last-child { border-bottom: 0; }
.wd-toggle-label { font-size: 13px; font-weight: 500; color: var(--gw-ink,#1F2A2B); }
.wd-toggle-sub { font-size: 11px; color: var(--gw-muted,#5E6E6F); margin-top: 1px; }

/* Mobile adjustments */
@media (max-width: 640px) {
  .fd-hero { padding: 20px 16px 16px; }
  .fd-timer { font-size: 30px; }
  .fd-btn-primary { font-size: 14px; padding: 13px 14px; }
  .gw-clock-label { display: none; }
  .gw-clock-pill { padding: 6px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Phase 10 — Unified Task / To-Do Engine
   All .gw-task-* and .gw-today-* classes used by task_engine.js + app_premium.js
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Modal overlay ─────────────────────────────────────────────────────────── */
.gw-task-modal-overlay {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(15, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: gwOverlayIn .15s ease;
}
.gw-task-modal-overlay.closing { animation: gwOverlayOut .18s ease forwards; }

@keyframes gwOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gwOverlayOut { from { opacity: 1; } to { opacity: 0; } }

/* ── Modal card ────────────────────────────────────────────────────────────── */
.gw-task-modal {
  width: 100%; max-width: 560px;
  background: var(--gw-surface, #fff);
  border-radius: var(--gw-r-xl, 14px);
  box-shadow: var(--gw-shadow-lg, 0 16px 48px rgba(0,0,0,.18));
  display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow: hidden;
  animation: gwModalIn .18s cubic-bezier(.22,.6,.36,1);
}
@keyframes gwModalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.gw-task-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gw-line, #E8E5DD);
  flex-shrink: 0;
}
.gw-task-modal-title {
  font-size: 15px; font-weight: 700;
  color: var(--gw-ink, #1F2A2B); margin: 0;
}
.gw-task-modal-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: transparent; cursor: pointer;
  color: var(--gw-muted, #5E6E6F);
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.gw-task-modal-close:hover { background: var(--gw-surface-2, #F4F2EC); }

.gw-task-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.gw-task-modal-foot {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--gw-line, #E8E5DD);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
}

/* ── Form fields inside modal ──────────────────────────────────────────────── */
.gw-task-field { display: flex; flex-direction: column; gap: 4px; }
.gw-task-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
}
.gw-task-input,
.gw-task-select,
.gw-task-textarea {
  width: 100%;
  padding: 8px 11px;
  background: var(--gw-surface-2, #FAFAF8);
  border: 1px solid var(--gw-line, #E0DDD5);
  border-radius: var(--gw-r-md, 8px);
  font-size: 13px; color: var(--gw-ink, #1F2A2B);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .12s;
  -webkit-appearance: none;
}
.gw-task-input:focus,
.gw-task-select:focus,
.gw-task-textarea:focus {
  outline: none;
  border-color: var(--gw-pine, #4D8A86);
  box-shadow: 0 0 0 3px rgba(77,138,134,.1);
}
.gw-task-input--error {
  border-color: var(--gw-rose, #e05050) !important;
  box-shadow: 0 0 0 3px rgba(224,80,80,.1) !important;
}
.gw-task-textarea { resize: vertical; min-height: 72px; }
.gw-task-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .gw-task-row-2 { grid-template-columns: 1fr; } }

/* ── Calendar push row ─────────────────────────────────────────────────────── */
.gw-task-cal-row {
  padding: 10px 12px;
  background: var(--gw-sky-soft, #EEF6F6);
  border: 1px solid var(--gw-line, #D8EAE9);
  border-radius: var(--gw-r-md, 8px);
}
.gw-task-toggle-row {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--gw-ink, #1F2A2B);
}
.gw-task-toggle-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.gw-task-cal-hint {
  display: block; font-size: 11px;
  color: var(--gw-muted, #5E6E6F); font-weight: 400; margin-top: 1px;
}
.gw-task-cal-icon {
  color: var(--gw-pine, #4D8A86); margin-left: 4px;
  vertical-align: middle; opacity: .75;
}

/* ── Modal buttons ─────────────────────────────────────────────────────────── */
.gw-task-btn {
  height: 36px; padding: 0 18px;
  border-radius: var(--gw-r-md, 8px);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; transition: background .12s, opacity .12s;
  font-family: inherit;
}
.gw-task-btn--primary {
  background: var(--gw-pine, #4D8A86); color: #fff;
}
.gw-task-btn--primary:hover  { background: var(--gw-pine-deep, #3a6f6b); }
.gw-task-btn--primary:disabled { opacity: .55; cursor: not-allowed; }
.gw-task-btn--ghost {
  background: transparent;
  border: 1px solid var(--gw-line, #D0CCC3);
  color: var(--gw-muted, #5E6E6F);
}
.gw-task-btn--ghost:hover { background: var(--gw-surface-2, #F4F2EC); }

/* ── Task row ──────────────────────────────────────────────────────────────── */
.gw-task-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--gw-r-md, 8px);
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
  position: relative;
}
.gw-task-row:hover {
  background: var(--gw-surface-2, #FAFAF8);
  border-color: var(--gw-line, #E8E5DD);
}
.gw-task-row--overdue {
  background: #FFF5F5;
  border-color: #FDD !important;
}
.gw-task-row--overdue:hover { background: #FEF0F0; }
.gw-task-row--today {
  background: var(--gw-sky-soft, #EEF6F5);
  border-color: var(--gw-line, #D8EAE9) !important;
}
.gw-task-row--today:hover { background: #E5F2F1; }
.gw-task-row--done {
  opacity: .65;
}
.gw-task-row--done .gw-task-row-title {
  text-decoration: line-through;
  color: var(--gw-muted, #7A8A8B);
}
.gw-task-prio--high { border-left: 3px solid var(--gw-rose, #e05050) !important; }
.gw-task-prio--low  { border-left: 3px solid var(--gw-line, #C8C4BA) !important; }

.gw-task-row-left {
  display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0;
}
.gw-task-row-body { flex: 1; min-width: 0; }
.gw-task-row-title {
  font-size: 13px; font-weight: 600;
  color: var(--gw-ink, #1F2A2B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.gw-task-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 3px;
}
.gw-task-row-notes {
  font-size: 11px; color: var(--gw-muted, #6A7A7B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.gw-task-row-actions {
  display: flex; align-items: center; gap: 2px;
  flex-shrink: 0;
}

/* ── Action buttons on rows ────────────────────────────────────────────────── */
.gw-task-action-btn {
  width: 28px; height: 28px;
  border-radius: var(--gw-r-sm, 6px);
  border: none; background: transparent; cursor: pointer;
  color: var(--gw-muted, #6A7A7B);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.gw-task-action-btn:hover { background: var(--gw-surface-3, #EDE9E0); color: var(--gw-ink, #1F2A2B); }
.gw-task-action-btn--complete:hover {
  background: #dcfce7; color: #166534;
}
.gw-task-action-btn--archive:hover {
  background: var(--gw-surface-3, #EDE9E0); color: var(--gw-ink, #1F2A2B);
}

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.gw-task-type-chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--gw-surface-3, #EDE9E0);
  color: var(--gw-muted, #5E6E6F);
  white-space: nowrap;
}
.gw-task-due-chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 700;
  white-space: nowrap;
}
.gw-task-due-chip--overdue {
  background: #fee2e2; color: #991b1b;
}
.gw-task-due-chip--today {
  background: #fef9c3; color: #854d0e;
}
.gw-task-due-chip--upcoming {
  background: var(--gw-surface-3, #EDE9E0);
  color: var(--gw-muted, #5E6E6F);
}
.gw-task-record-chip {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
  background: var(--gw-sky-soft, #EEF6F5);
  color: var(--gw-pine, #4D8A86);
  white-space: nowrap;
}

/* ── Task workspace (Today page) ───────────────────────────────────────────── */
.gw-task-workspace {
  padding: 4px 0;
}
.gw-today-group-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--gw-muted, #6A7A7B);
  padding: 10px 12px 4px;
}
.gw-today-group-label--overdue {
  color: #991b1b;
}
.gw-today-group-label--today {
  color: #854d0e;
}
.gw-today-section-empty {
  padding: 4px 12px;
  font-size: 12px; color: var(--gw-muted, #8A9A9B);
}
.gw-task-empty {
  font-size: 13px;
  color: var(--gw-muted, #7A8A8B);
  text-align: center;
  padding: 18px 12px;
}

/* ── Completed/archived details section ────────────────────────────────────── */
.gw-task-done-details {
  margin-top: 4px;
}
.gw-task-done-details > summary,
.gw-task-done-summary {
  cursor: pointer;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gw-muted, #7A8A8B);
  padding: 8px 12px;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
  border-radius: var(--gw-r-sm, 6px);
  transition: background .1s;
  user-select: none;
}
.gw-task-done-details > summary::-webkit-details-marker { display: none; }
.gw-task-done-details > summary::before {
  content: '';
  display: inline-block; width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .15s;
  flex-shrink: 0;
}
.gw-task-done-details[open] > summary::before { transform: rotate(45deg); }
.gw-task-done-details > summary:hover { background: var(--gw-surface-2, #F4F2EC); }

/* ── Task panel (record rail card) ─────────────────────────────────────────── */
.gw-task-panel {
  width: 100%;
}
.gw-task-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid var(--gw-line, #EDE9E0);
}
.gw-task-panel-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  flex: 1;
}
.gw-task-panel-count {
  font-size: 11px; font-weight: 600;
  color: var(--gw-pine, #4D8A86);
  background: var(--gw-sky-soft, #EEF6F5);
  padding: 1px 8px; border-radius: 10px;
}
.gw-task-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--gw-line, #D0CCC3);
  border-radius: var(--gw-r-sm, 6px);
  font-size: 11px; font-weight: 600;
  color: var(--gw-pine, #4D8A86);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gw-task-add-btn:hover {
  background: var(--gw-sky-soft, #EEF6F5);
  border-color: var(--gw-pine-light, #7AB5B1);
}
.gw-task-panel-body {
  padding: 6px 4px 8px;
}

/* ── Team View task columns ─────────────────────────────────────────────────── */
.tv-task-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.tv-task-badge--overdue  { background: #fee2e2; color: #991b1b; }
.tv-task-badge--today    { background: #fef9c3; color: #854d0e; }
.tv-task-badge--open     { background: var(--gw-surface-3, #EDE9E0); color: var(--gw-muted, #5E6E6F); }
.tv-task-badge--done     { background: #dcfce7; color: #166534; }
.tv-needs-attention {
  margin-top: 16px;
  border-radius: var(--gw-r-lg, 12px);
  border: 1px solid #fdd;
  background: #fff8f8;
  overflow: hidden;
}
.tv-na-head {
  padding: 10px 16px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #991b1b;
  border-bottom: 1px solid #fdd;
}
.tv-na-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid #fde8e8;
  font-size: 13px;
}
.tv-na-row:last-child { border-bottom: 0; }
.tv-na-name { flex: 1; font-weight: 600; color: var(--gw-ink, #1F2A2B); }
.tv-na-detail { font-size: 11px; color: #991b1b; font-weight: 600; }

/* ── Mobile adjustments ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gw-task-modal { max-width: 100%; border-radius: var(--gw-r-lg, 12px) var(--gw-r-lg, 12px) 0 0; margin-top: auto; }
  .gw-task-modal-overlay { align-items: flex-end; padding: 0; }
  .gw-task-row-notes { max-width: 180px; }
  .gw-task-row-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PHASE B — My Day view: pipeline strip, two-column layout, finance snap card
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Pipeline stat strip → Command Center hero KPI band ──────────────────────
   Same 4 real figures as before (Open Leads / Proposals Out / Pipeline Value
   / Won MTD), restyled as a proper hero band: each tile gets an icon chip in
   its own accent color plus a soft tinted top edge, so the top of Command
   Center reads as a hub summary rather than a plain stat row. Pure
   presentation — no new data, no grid/masonry changes. */
.gw-today-pipe-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.gw-today-pipe-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  background: var(--gw-surface, #ffffff);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: var(--gw-r-lg, 14px);
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.gw-today-pipe-cell:before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
}
.gw-today-pipe-cell:hover { box-shadow: 0 6px 18px rgba(15,28,20,.09); transform: translateY(-1px); }
.gw-today-pipe-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.gw-today-pipe-cell--sky:before, .gw-today-pipe-cell--sky .gw-today-pipe-ic     { background: var(--gw-sky, #4D8A86); }
.gw-today-pipe-cell--amber:before, .gw-today-pipe-cell--amber .gw-today-pipe-ic { background: var(--gw-amber, #8B6914); }
.gw-today-pipe-cell--pine:before, .gw-today-pipe-cell--pine .gw-today-pipe-ic   { background: var(--gw-pine, #113931); }
.gw-today-pipe-cell--emerald:before, .gw-today-pipe-cell--emerald .gw-today-pipe-ic { background: var(--gw-emerald, #2D7A55); }
.gw-today-pipe-cell--rose:before, .gw-today-pipe-cell--rose .gw-today-pipe-ic   { background: var(--gw-rose, #8B3A2A); }
.gw-today-pipe-ic { color: #fff; opacity: .92; }

/* 5th hero chip (Avg Close Likelihood) — same tile grid, one extra column */
.gw-today-pipe-strip--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .gw-today-pipe-strip--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .gw-today-pipe-strip--five { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.gw-today-pipe-cell > div,
.gw-today-pipe-cell .gw-today-pipe-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-today-pipe-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
}
.gw-today-pipe-val {
  font-size: 21px;
  font-weight: 700;
  color: var(--gw-ink, #1F2A2B);
  line-height: 1.15;
}
.gw-today-pipe-val--money { font-size: 19px; color: var(--gw-pine, #113931); }
.gw-today-pipe-val--won   { font-size: 16px; color: var(--gw-emerald, #2D7A55); }

@media (max-width: 680px) {
  .gw-today-pipe-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ── Two-column My Day grid ───────────────────────────────────────────────── */
.gw-today-main-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.gw-today-tasks-col { min-width: 0; }
.gw-today-side-col  { min-width: 0; }

@media (max-width: 900px) {
  .gw-today-main-grid { grid-template-columns: 1fr; }
  .gw-today-side-col  { order: -1; } /* show finance snap above tasks on mobile */
}

/* ── Financial Pulse card ─────────────────────────────────────────────────── */
.gw-today-fin-card {
  background: var(--gw-surface, #ffffff);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: var(--gw-r-lg, 12px);
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.gw-today-fin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gw-today-fin-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gw-ink, #1F2A2B);
}
.gw-today-fin-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-pine, #4D8A86);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gw-today-fin-link:hover { opacity: .75; }

/* KPI grid */
.gw-today-fin-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.gw-today-fin-kpi {
  background: var(--gw-bg2, #F5F8F7);
  border-radius: var(--gw-r-md, 8px);
  padding: 10px 12px;
}
.gw-today-fin-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 3px;
}
.gw-today-fin-kpi-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--gw-ink, #1F2A2B);
  line-height: 1.2;
}
.gw-today-fin-kpi-sub {
  font-size: 10px;
  color: var(--gw-muted, #5E6E6F);
  margin-top: 2px;
}

/* Annual progress bar */
.gw-today-fin-progress { margin-bottom: 14px; }
.gw-today-fin-prog-bar {
  height: 6px;
  background: var(--gw-line, #E2EAE9);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 4px;
}
.gw-today-fin-prog-bar > div {
  height: 100%;
  background: var(--gw-pine, #4D8A86);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}
.gw-today-fin-prog-label {
  font-size: 11px;
  color: var(--gw-muted, #5E6E6F);
  text-align: right;
}

/* Divisional bars */
.gw-today-fin-divs {
  border-top: 1px solid var(--gw-line, #E2EAE9);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gw-today-fin-div { display: flex; flex-direction: column; gap: 2px; }
.gw-today-fin-div-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-ink, #1F2A2B);
}
.gw-today-fin-div-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-pine, #4D8A86);
}
.gw-today-fin-div-bar {
  height: 4px;
  background: var(--gw-line, #E2EAE9);
  border-radius: 99px;
  overflow: hidden;
}
.gw-today-fin-div-bar > div {
  height: 100%;
  background: var(--gw-pine, #4D8A86);
  border-radius: 99px;
  transition: width .4s ease;
  min-width: 2px;
}
.gw-today-fin-div-target {
  font-size: 10px;
  color: var(--gw-muted, #5E6E6F);
  text-align: right;
}

/* ── Financial Pulse — monthly actual-vs-target-pace bar chart (Command
   Center mockup parity). Sits between the annual progress bar and the
   per-division bars inside .gw-today-fin-card. ── */
.gwcc-chart-wrap { margin: 4px 0 16px; }
.gwcc-chart-label {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--gw-muted, #5E6E6F); font-weight: 650;
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em;
}
.gwcc-bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; }
.gwcc-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; min-width: 0; }
.gwcc-bar-track {
  width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start;
  height: 72px; background: var(--gw-surface-3, #EAF1EE); border-radius: 4px 4px 0 0; overflow: hidden;
}
.gwcc-bar-fill { background: var(--gw-pine, #4D8A86); border-radius: 4px 4px 0 0; width: 100%; transition: height .4s ease; }
.gwcc-bar-fill.target { background: #C9A24A; }
.gwcc-bar-month { font-size: 9.5px; color: var(--gw-muted, #5E6E6F); font-weight: 650; }
.gwcc-chart-legend { display: flex; gap: 14px; font-size: 10.5px; color: var(--gw-muted, #5E6E6F); margin-top: 8px; }
.gwcc-chart-legend span { display: flex; align-items: center; gap: 5px; }
.gwcc-dot2 { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

/* ── Financial Pulse — per-division progress bars, restyled to the mockup's
   thin-track + amount-inline treatment (replaces .gw-today-fin-div's boxed
   layout when the Command Center's finance widget is in play). ── */
.gwcc-fp-cats { border-top: 1px solid var(--gw-line, #E2EAE9); padding-top: 12px; }
.gwcc-fp-cat { margin-bottom: 12px; }
.gwcc-fp-cat:last-child { margin-bottom: 0; }
.gwcc-fp-cat-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; font-weight: 600; color: var(--gw-ink, #1F2A2B); }
.gwcc-fp-cat-track { height: 6px; background: var(--gw-line, #E2EAE9); border-radius: 4px; overflow: hidden; }
.gwcc-fp-cat-fill { height: 100%; border-radius: 4px; background: #6FA383; transition: width .4s ease; }
.gwcc-fp-cat-fill.over { background: #B0473E; }
.gwcc-fp-cat-amt { color: var(--gw-muted, #5E6E6F); font-weight: 500; }

/* ── Money Owed — donut/ring chart + legend (Command Center mockup parity).
   Replaces the old 3-cell .gw-myday-ar-grid layout. ── */
.gwcc-mo-row-main { display: flex; align-items: center; gap: 18px; margin-bottom: 4px; }
.gwcc-mo-ring { flex-shrink: 0; }
.gwcc-mo-ring circle { transition: stroke-dasharray .4s ease; }
.gwcc-mo-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.gwcc-mo-legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; gap: 8px; }
.gwcc-mo-legend-name { display: flex; align-items: center; gap: 7px; color: var(--gw-ink, #1F2A2B); min-width: 0; }
.gwcc-mo-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gwcc-mo-legend-amt { font-weight: 700; color: var(--gw-muted, #5E6E6F); flex-shrink: 0; }
.gwcc-mo-foot {
  display: flex; justify-content: space-between; font-size: 11.5px; color: var(--gw-muted, #5E6E6F);
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gw-line, #E2EAE9);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEARNING HUB — .gl-* classes
   Track cards, lesson modals, module rows, progress bars
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Learning hub landing grid ───────────────────────────────────────────────── */
.gl-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* ── Track card shell ────────────────────────────────────────────────────────── */
.gl-track-card {
  background: var(--gw-surface, #FFFFFF);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}
.gl-track-card:hover {
  box-shadow: 0 6px 24px rgba(77,138,134,.14);
  transform: translateY(-2px);
}
.gl-track-card--soon {
  cursor: default;
  opacity: .72;
}
.gl-track-card--soon:hover {
  transform: none;
  box-shadow: none;
}

/* ── Track card header band ──────────────────────────────────────────────────── */
.gl-track-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
}
.gl-track-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.gl-track-info {
  flex: 1;
  min-width: 0;
}
.gl-track-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 3px;
}
.gl-track-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gw-ink, #1F2A2B);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Coming-soon badge ───────────────────────────────────────────────────────── */
.gl-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--gw-sand, #F5F0E8);
  color: var(--gw-amber, #B97B2A);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 4px;
}

/* ── Progress bar (inside card) ──────────────────────────────────────────────── */
.gl-track-progress {
  padding: 14px 20px 0;
}
.gl-track-prog-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 6px;
}
.gl-track-prog-bar {
  height: 6px;
  background: var(--gw-line, #E2EAE9);
  border-radius: 99px;
  overflow: hidden;
}
.gl-track-prog-bar > div {
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}

/* ── Module list (inside card) ───────────────────────────────────────────────── */
.gl-mod-list {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gl-mod-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.gl-mod-row:hover {
  background: var(--gw-bg, #F6F9F9);
}
.gl-mod-row--done {
  opacity: .7;
}
.gl-mod-row--done .gl-mod-title {
  text-decoration: line-through;
  color: var(--gw-muted, #5E6E6F);
}
.gl-mod-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gw-line, #E2EAE9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  transition: background .15s ease, border-color .15s ease;
  color: #fff;
}
.gl-mod-check--done {
  background: var(--gw-pine, #4D8A86);
  border-color: var(--gw-pine, #4D8A86);
}
.gl-mod-body {
  flex: 1;
  min-width: 0;
}
.gl-mod-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-ink, #1F2A2B);
  line-height: 1.3;
}
.gl-mod-meta {
  font-size: 11px;
  color: var(--gw-muted, #5E6E6F);
  margin-top: 1px;
}

/* ── Status badge (Go / Done / Soon) ────────────────────────────────────────── */
.gl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  flex-shrink: 0;
}
.gl-badge--go {
  background: #EAF4F3;
  color: var(--gw-pine, #4D8A86);
}
.gl-badge--done {
  background: #E8F5E9;
  color: #2E7D32;
}
.gl-badge--soon {
  background: var(--gw-sand, #F5F0E8);
  color: var(--gw-amber, #B97B2A);
}

/* ── Lesson overlay & modal ──────────────────────────────────────────────────── */
.gl-lesson-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 30, .55);
  backdrop-filter: blur(3px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: glOverlayIn .18s ease;
}
@keyframes glOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gl-lesson-modal {
  background: var(--gw-surface, #FFFFFF);
  border-radius: 18px;
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  animation: glModalIn .2s cubic-bezier(.34,1.3,.64,1);
  overflow: hidden;
}
@keyframes glModalIn {
  from { transform: scale(.94) translateY(12px); opacity: 0; }
  to   { transform: scale(1) translateY(0);      opacity: 1; }
}
.gl-lesson-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
  flex-shrink: 0;
}
.gl-lesson-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 5px;
}
.gl-lesson-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--gw-ink, #1F2A2B);
  line-height: 1.25;
}
.gl-lesson-close {
  background: var(--gw-bg, #F6F9F9);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--gw-muted, #5E6E6F);
  flex-shrink: 0;
  transition: background .12s ease, color .12s ease;
  line-height: 1;
}
.gl-lesson-close:hover {
  background: var(--gw-line, #E2EAE9);
  color: var(--gw-ink, #1F2A2B);
}
.gl-lesson-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gw-ink, #1F2A2B);
  overscroll-behavior: contain;
}
.gl-lesson-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 20px 0 8px;
  color: var(--gw-ink, #1F2A2B);
}
.gl-lesson-body h3:first-child {
  margin-top: 0;
}
.gl-lesson-body p {
  margin: 0 0 12px;
}
.gl-lesson-body ul,
.gl-lesson-body ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.gl-lesson-body li {
  margin-bottom: 6px;
}
.gl-lesson-body strong {
  font-weight: 700;
  color: var(--gw-ink, #1F2A2B);
}
.gl-lesson-body .gl-callout {
  background: #EAF4F3;
  border-left: 3px solid var(--gw-pine, #4D8A86);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 13px;
}
.gl-lesson-body .gl-callout strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gw-pine, #4D8A86);
}
.gl-lesson-body .gl-example {
  background: var(--gw-bg, #F6F9F9);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 13px;
}
.gl-lesson-body .gl-example-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 6px;
}
.gl-lesson-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 16px 0;
}
.gl-lesson-body th {
  background: var(--gw-bg, #F6F9F9);
  font-weight: 700;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--gw-line, #E2EAE9);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gw-muted, #5E6E6F);
}
.gl-lesson-body td {
  padding: 8px 12px;
  border: 1px solid var(--gw-line, #E2EAE9);
  vertical-align: top;
}
.gl-lesson-body tr:nth-child(even) td {
  background: #FAFCFC;
}

/* ── Lesson footer (Mark Complete) ───────────────────────────────────────────── */
.gl-lesson-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--gw-line, #E2EAE9);
  flex-shrink: 0;
  background: var(--gw-bg, #F6F9F9);
}
.gl-lesson-footer-left {
  font-size: 12px;
  color: var(--gw-muted, #5E6E6F);
}
.gl-lesson-done-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2E7D32;
}
.gl-btn-mark {
  background: var(--gw-pine, #4D8A86);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, transform .1s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gl-btn-mark:hover {
  background: #3d7470;
  transform: translateY(-1px);
}
.gl-btn-mark:disabled {
  background: var(--gw-line, #E2EAE9);
  color: var(--gw-muted, #5E6E6F);
  cursor: default;
  transform: none;
}

/* ── Learning hub landing page header ────────────────────────────────────────── */
.gl-hub-header {
  margin-bottom: 24px;
}
.gl-hub-hero {
  background: linear-gradient(135deg, #EAF4F3 0%, #F5F0E8 100%);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}
.gl-hub-hero-icon {
  font-size: 40px;
  flex-shrink: 0;
}
.gl-hub-hero-text h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-ink, #1F2A2B);
  margin: 0 0 6px;
}
.gl-hub-hero-text p {
  font-size: 14px;
  color: var(--gw-muted, #5E6E6F);
  margin: 0;
  line-height: 1.5;
}
.gl-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  margin: 0 0 14px;
}

/* ── Track detail page (learnEstimating, learnFinancial, learnCrmGuide) ─────── */
.gl-track-detail {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}
.gl-detail-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding: 22px 24px;
  background: var(--gw-surface, #FFFFFF);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 14px;
}
.gl-detail-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.gl-detail-meta {
  flex: 1;
}
.gl-detail-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
  margin-bottom: 4px;
}
.gl-detail-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gw-ink, #1F2A2B);
  margin-bottom: 6px;
}
.gl-detail-desc {
  font-size: 13px;
  color: var(--gw-muted, #5E6E6F);
  line-height: 1.5;
}
.gl-detail-prog {
  text-align: right;
  flex-shrink: 0;
}
.gl-detail-prog-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--gw-pine, #4D8A86);
  line-height: 1;
}
.gl-detail-prog-label {
  font-size: 11px;
  color: var(--gw-muted, #5E6E6F);
  margin-top: 3px;
}
.gl-module-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-module-item {
  background: var(--gw-surface, #FFFFFF);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.gl-module-item:hover {
  box-shadow: 0 4px 16px rgba(77,138,134,.1);
  transform: translateY(-1px);
  border-color: var(--gw-pine, #4D8A86);
}
.gl-module-item--done {
  background: #FAFCFC;
}
.gl-module-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--gw-line, #E2EAE9);
  color: var(--gw-muted, #5E6E6F);
  background: var(--gw-bg, #F6F9F9);
}
.gl-module-num--done {
  background: var(--gw-pine, #4D8A86);
  border-color: var(--gw-pine, #4D8A86);
  color: #fff;
}
.gl-module-info {
  flex: 1;
  min-width: 0;
}
.gl-module-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gw-ink, #1F2A2B);
  margin-bottom: 3px;
}
.gl-module-name--done {
  text-decoration: line-through;
  color: var(--gw-muted, #5E6E6F);
}
.gl-module-desc {
  font-size: 12px;
  color: var(--gw-muted, #5E6E6F);
  line-height: 1.4;
}
.gl-module-arrow {
  font-size: 18px;
  color: var(--gw-muted, #5E6E6F);
  flex-shrink: 0;
}

/* ── Responsive adjustments ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gl-hub-grid {
    grid-template-columns: 1fr;
  }
  .gl-hub-hero {
    flex-direction: column;
    text-align: center;
    padding: 22px 20px;
  }
  .gl-lesson-modal {
    border-radius: 14px;
    max-height: 94vh;
  }
  .gl-lesson-header {
    padding: 18px 18px 14px;
  }
  .gl-lesson-body {
    padding: 18px;
  }
  .gl-lesson-footer {
    padding: 14px 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .gl-btn-mark {
    width: 100%;
    justify-content: center;
  }
  .gl-detail-hero {
    flex-direction: column;
    text-align: center;
  }
  .gl-detail-prog {
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCHEDULE BOARD — Phase 16 (Crew System)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Loading spinner */
.sb-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--gw-border);
  border-top-color: var(--gw-pine-500);
  border-radius: 50%;
  animation: sb-spin .7s linear infinite;
  display: inline-block;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* Shell */
.sched-shell {
  min-height: 100vh; min-height: 100dvh;
  background: var(--gw-bark-25, #f9f8f6);
  width: 100%; max-width: none; margin: 0;
  box-sizing: border-box;
}

/* Header */
.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.sb-header-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sb-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-nav-controls { display: flex; align-items: center; gap: 6px; }
.sb-nav-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--gw-border);
  border-radius: 6px;
  background: var(--gw-bg-surface-2);
  cursor: pointer;
  font-size: 16px;
  color: var(--gw-text);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.sb-nav-btn:hover { background: var(--gw-bg-surface-3); }
.sb-period-label { font-size: 14px; font-weight: 600; color: var(--gw-text); min-width: 180px; text-align: center; }
.sb-today-btn {
  padding: 4px 12px;
  border: 1px solid var(--gw-border);
  border-radius: 6px;
  background: var(--gw-bg-surface-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--gw-text-muted);
  transition: all .15s;
}
.sb-today-btn:hover { background: var(--gw-bg-surface-3); color: var(--gw-text); }

/* View toggle */
.sb-view-toggle {
  display: flex;
  border: 1px solid var(--gw-border);
  border-radius: 8px;
  overflow: hidden;
}
.sb-view-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--gw-bg-surface-2);
  border: none;
  cursor: pointer;
  color: var(--gw-text-muted);
  transition: all .15s;
}
.sb-view-btn.active {
  background: var(--gw-pine-500, #22c55e);
  color: #fff;
}

/* Stats bar */
.sb-stats-bar {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.sb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  border-right: 1px solid var(--gw-border);
  min-width: 90px;
}
.sb-stat:last-child { border-right: none; }
.sb-stat-num { font-size: 20px; font-weight: 800; color: var(--gw-text); }
.sb-stat-num--blue  { color: #3b82f6; }
.sb-stat-num--green { color: #22c55e; }
.sb-stat-num--muted { color: var(--gw-text-muted); }
.sb-stat-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-text-muted); margin-top: 2px; }

/* Crew toggle bar */
.sb-crew-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--gw-bg-surface);
  border-bottom: 1px solid var(--gw-border);
  max-width: 1400px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.sb-crew-bar-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gw-text-muted); margin-right: 4px; }
.sb-crew-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1.5px solid var(--crew-color, #94a3b8);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted);
  cursor: pointer;
  transition: all .15s;
  opacity: 0.55;
}
.sb-crew-toggle.active { opacity: 1; background: color-mix(in srgb, var(--crew-color) 12%, transparent); color: var(--gw-text); }
.sb-crew-toggle:hover { opacity: 1; }
.sb-crew-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-crew-dot-lg { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.sb-crew-count {
  background: var(--gw-border);
  color: var(--gw-text-muted);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
}
.sb-crew-manage-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1.5px dashed var(--gw-border);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted);
  cursor: pointer;
  transition: all .15s;
}
.sb-crew-manage-btn:hover { border-color: var(--gw-pine-500); color: var(--gw-pine-500); }
.sb-crew-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
}

/* Grid wrap */
.sb-grid-wrap {
  padding: 16px 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: auto;
}

/* Week grid */
.sb-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-width: 840px;
}
.sb-day-col {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.sb-day-col--today {
  border-color: var(--gw-pine-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gw-pine-500) 15%, transparent);
}
.sb-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--gw-border);
  background: var(--gw-bg-surface-2);
}
.sb-day-col--today .sb-day-head { background: color-mix(in srgb, var(--gw-pine-500) 8%, transparent); }
.sb-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gw-text-muted); }
.sb-day-count {
  font-size: 10px;
  font-weight: 700;
  background: var(--gw-pine-500);
  color: #fff;
  padding: 1px 6px;
  border-radius: 10px;
  margin-top: 2px;
}
.sb-day-body {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sb-empty-day {
  color: var(--gw-text-muted);
  font-size: 11px;
  text-align: center;
  padding: 16px 4px;
  font-style: italic;
}
.sb-add-btn {
  width: 100%;
  border: 1.5px dashed var(--gw-border);
  border-radius: 7px;
  background: transparent;
  padding: 5px;
  font-size: 16px;
  color: var(--gw-text-muted);
  cursor: pointer;
  transition: all .15s;
  margin-top: auto;
}
.sb-add-btn:hover { border-color: var(--gw-pine-500); color: var(--gw-pine-500); background: color-mix(in srgb, var(--gw-pine-500) 6%, transparent); }

/* Job card */
.sb-job-card {
  border-radius: 8px;
  padding: 9px 10px 8px;
  background: var(--gw-bg-surface);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  border: 1px solid var(--gw-border);
  position: relative;
  user-select: none;
}
.sb-job-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
/* top row: drag dots | WO# | time */
.sb-card-top {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
}
.sb-card-num { font-size: 10px; font-weight: 700; color: var(--gw-text-muted); flex: 1; }
.sb-card-time { font-size: 10px; color: var(--gw-text-muted); white-space: nowrap; }
/* client name — prominent */
.sb-card-client { font-size: 13px; font-weight: 700; color: var(--gw-text); line-height: 1.3; margin-bottom: 3px; }
/* crew pill */
.sb-card-crew {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 10px;
  padding: 1px 7px;
  margin-bottom: 4px;
}
/* meta row: type + hours */
.sb-card-meta { display: flex; align-items: center; gap: 6px; }
.sb-card-type { font-size: 10px; color: var(--gw-text-muted); }
.sb-card-hrs  { font-size: 10px; color: var(--gw-text-muted); }
.sb-card-status { margin-top: 5px; font-size: 9px !important; padding: 2px 7px !important; display: inline-block; }

/* Month grid */
.sb-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  min-width: 700px;
}
.sb-month-dow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gw-text-muted);
  text-align: center;
  padding: 8px 4px;
}
.sb-month-cell {
  background: var(--gw-bg-surface);
  border: 1px solid var(--gw-border);
  border-radius: 6px;
  padding: 6px;
  min-height: 80px;
  cursor: pointer;
  transition: background .1s;
}
.sb-month-cell:hover { background: var(--gw-bg-surface-2); }
.sb-month-cell--blank { background: transparent; border: none; cursor: default; }
.sb-month-cell--today { border-color: var(--gw-pine-500); background: color-mix(in srgb, var(--gw-pine-500) 6%, transparent); }
.sb-month-num { font-size: 12px; font-weight: 700; color: var(--gw-text); margin-bottom: 4px; }
.sb-month-cell--today .sb-month-num {
  width: 22px; height: 22px;
  background: var(--gw-pine-500);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.sb-month-dots { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 3px; }
.sb-month-dot { width: 7px; height: 7px; border-radius: 50%; }
.sb-month-more { font-size: 9px; color: var(--gw-text-muted); }
.sb-month-chip {
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--gw-bg-surface-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  cursor: pointer;
}
.sb-month-chip:hover { background: var(--gw-bg-surface-3); }
.sb-month-more-link { font-size: 10px; color: var(--gw-text-muted); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════════
   VISIT / WORK ORDER MODAL
   ══════════════════════════════════════════════════════════════════════════════ */
.sb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  animation: sbOverlayIn .18s ease;
}
@keyframes sbOverlayIn { from { opacity:0; } to { opacity:1; } }
.sb-modal-panel {
  background: var(--gw-bg-surface);
  border-radius: 14px;
  width: min(960px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  animation: sbPanelIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes sbPanelIn { from { transform: translateY(30px); opacity:0; } to { transform: translateY(0); opacity:1; } }
.sb-modal-panel--new { width: min(680px, calc(100vw - 24px)); }
.sb-modal-panel--crew-mgr { width: min(640px, calc(100vw - 24px)); }

.sb-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gw-border);
  flex-shrink: 0;
}
.sb-modal-title-block { display: flex; align-items: center; gap: 10px; }
.sb-modal-wo-num { font-size: 16px; font-weight: 800; color: var(--gw-text); }
.sb-modal-header-meta { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; }
.sb-modal-close {
  width: 28px; height: 28px;
  border: 1px solid var(--gw-border);
  border-radius: 6px;
  background: var(--gw-bg-surface-2);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--gw-text-muted);
  flex-shrink: 0;
  transition: all .12s;
}
.sb-modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

.sb-modal-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  overflow-y: auto;
  flex: 1;
}
.sb-modal-left { padding: 16px 20px; border-right: 1px solid var(--gw-border); overflow-y: auto; }
.sb-modal-right { padding: 16px; overflow-y: auto; }

.sb-modal-section { margin-bottom: 20px; }
.sb-modal-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.sb-modal-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--gw-text-muted);
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.sb-modal-field { display: flex; flex-direction: column; gap: 4px; }
.sb-modal-field span:first-child { font-size: 11px; font-weight: 600; color: var(--gw-text-muted); }
.sb-modal-date-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

/* Action bar */
.sb-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--gw-border);
  background: var(--gw-bg-surface-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sb-modal-actions-left  { display: flex; gap: 8px; align-items: center; }
.sb-modal-actions-right { display: flex; gap: 8px; align-items: center; }
.sb-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--gw-border);
  background: var(--gw-bg-surface);
  color: var(--gw-text);
  transition: all .12s;
}
.sb-action-btn:hover { background: var(--gw-bg-surface-3); }
.sb-action-skip { color: var(--gw-text-muted); }
.sb-action-skip:hover { border-color: #f59e0b; color: #d97706; }
.sb-action-delete { color: #dc2626; border-color: #fca5a5; }
.sb-action-delete:hover { background: #fee2e2; }
.sb-action-upsell { color: var(--gw-pine-600); border-color: var(--gw-pine-300); }
.sb-action-upsell:hover { background: color-mix(in srgb, var(--gw-pine-500) 10%, transparent); }
.sb-action-wo { color: #6366f1; border-color: #a5b4fc; }
.sb-action-wo:hover { background: #eef2ff; }

/* Employees */
.sb-emp-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 28px;
  padding: 4px 0;
}
.sb-emp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  background: var(--gw-bg-surface-2);
  border: 1px solid var(--gw-border);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gw-text);
}
.sb-emp-chip button {
  border: none; background: none; cursor: pointer;
  color: var(--gw-text-muted); font-size: 14px; line-height: 1;
  padding: 0 0 0 2px;
}
.sb-emp-chip button:hover { color: #dc2626; }
.sb-emp-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-emp-add-row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }

/* Photos */
.sb-photo-group { margin-bottom: 10px; }
.sb-photo-label { font-size: 11px; font-weight: 600; color: var(--gw-text-muted); margin-bottom: 6px; }
.sb-photo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 7px; overflow: hidden; }
.sb-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-photo-thumb button {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%; border: none;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.sb-photo-add {
  width: 64px; height: 64px;
  border: 2px dashed var(--gw-border);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gw-text-muted);
  cursor: pointer;
  transition: all .15s;
}
.sb-photo-add:hover { border-color: var(--gw-pine-500); color: var(--gw-pine-500); }

/* Checklist */
.sb-check-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--gw-border); }
.sb-check-box {
  width: 18px; height: 18px;
  border: 2px solid var(--gw-border);
  border-radius: 4px;
  background: var(--gw-bg-surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
}
.sb-check-box.done { background: var(--gw-pine-500); border-color: var(--gw-pine-500); color: #fff; }
.sb-check-label { font-size: 13px; flex: 1; color: var(--gw-text); }
.sb-check-label.done { text-decoration: line-through; color: var(--gw-text-muted); }
.sb-check-del { border: none; background: none; cursor: pointer; color: var(--gw-text-muted); font-size: 14px; padding: 0; }
.sb-check-del:hover { color: #dc2626; }

/* Line items */
.sb-line-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.sb-total-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--gw-border); font-weight: 700; font-size: 14px; margin-top: 8px; }

/* Work tracking */
.sb-work-track { display: flex; gap: 16px; }
.sb-work-stat { display: flex; flex-direction: column; align-items: center; }
.sb-work-num { font-size: 20px; font-weight: 800; color: var(--gw-text); }
.sb-work-num--blue { color: #3b82f6; }
.sb-work-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gw-text-muted); }

/* Empty notes */
.sb-empty-note { font-size: 12px; color: var(--gw-text-muted); font-style: italic; }

/* Color swatches (crew manager) */
.sb-color-palette { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0; }
.sb-color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.sb-color-swatch:hover { transform: scale(1.15); }
.sb-color-swatch.selected { border-color: var(--gw-text) !important; transform: scale(1.1); }

/* Crew manager rows */
.sb-cm-crew-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gw-border);
}
.sb-cm-crew-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sb-cm-members { font-size: 11px; color: var(--gw-text-muted); }
.sb-cm-crew-actions { display: flex; gap: 6px; }

/* Estimate schedule button */
.est-btn--schedule {
  background: var(--gw-pine-500);
  color: #fff;
  border-color: var(--gw-pine-600, #16a34a);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.est-btn--schedule:hover { background: var(--gw-pine-600, #16a34a); }

/* Responsive */
@media (max-width: 768px) {
  .sb-modal-body { grid-template-columns: 1fr; }
  .sb-modal-left { border-right: none; border-bottom: 1px solid var(--gw-border); }
  .sb-modal-date-row { grid-template-columns: 1fr 1fr; }
  .sb-week-grid { grid-template-columns: repeat(3, 1fr); }
  .sb-modal-actions { flex-direction: column; gap: 6px; }
  .sb-modal-actions-left, .sb-modal-actions-right { width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* ── Drag handle on job cards ─────────────────────────────────────────────── */
/* pointer-events:none at all times — the handle is purely decorative.
   Dragging is triggered by draggable="true" on the card div itself.
   The grab cursor shows only when hovering the dots area, but since
   pointer-events:none the cursor is overridden by the card's pointer cursor. */
.sb-card-drag-handle {
  padding: 2px 5px 2px 0;
  color: var(--gw-text-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.sb-job-card:hover .sb-card-drag-handle { opacity: .5; }

/* ── Crew-lane week view ──────────────────────────────────────────────────── */
.sb-lane-wrap {
  min-width: 700px;
  border: 1px solid var(--gw-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--gw-bg-surface);
}

/* Single unified grid — header row + all crew rows are flat children.
   Columns: 110px label  +  7 equal day columns.
   Rows auto-size together so a tall card stretches the whole row. */
.sb-lane-grid {
  display: grid;
  grid-template-columns: 110px repeat(7, 1fr);
  /* no explicit rows — auto-placed, each "row" is 8 consecutive cells */
}

/* Top-left corner cell */
.sb-lane-corner {
  background: var(--gw-bg-surface-2);
  border-right: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
}

/* Header day cells */
.sb-lane-day-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  background: var(--gw-bg-surface-2);
  border-right: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
  gap: 2px;
}
.sb-lane-day-head:last-of-type { border-right: none; }
.sb-lane-day-head .sb-day-name { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gw-text-muted); }
.sb-lane-day-head .sb-day-date { font-size: 15px; font-weight: 700; color: var(--gw-text); }
.sb-lane-day-head.today { background: color-mix(in srgb, var(--gw-pine-500) 8%, transparent); }
.sb-lane-day-head.today .sb-day-date {
  background: var(--gw-pine-500);
  color: #fff;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

/* Crew label cell — left column of each crew row */
.sb-lane-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px;
  background: var(--gw-bg-surface-2);
  border-right: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-text);
}
.sb-lane-label:last-of-type { border-bottom: none; }
.sb-lane-crew-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-lane-crew-name { line-height: 1.2; }

/* Day cells — 7 per crew row */
.sb-lane-cell {
  padding: 5px 6px;
  border-right: 1px solid var(--gw-border);
  border-bottom: 1px solid var(--gw-border);
  min-height: 72px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .1s;
}
/* Last cell in each visual row (column 8 = 7th day) has no right border */
.sb-lane-cell:nth-child(8n) { border-right: none; }
/* Last crew row cells have no bottom border */
.sb-lane-label:last-of-type ~ .sb-lane-cell { border-bottom: none; }
.sb-lane-cell.today { background: color-mix(in srgb, var(--gw-pine-500) 4%, transparent); }
.sb-lane-cell.drag-over { background: color-mix(in srgb, var(--gw-pine-500) 10%, transparent); }

/* Add button — hidden until cell hovered */
.sb-lane-add-btn {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--gw-text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 0;
  cursor: pointer;
  opacity: 0;
  border-radius: 4px;
  transition: opacity .15s, background .15s;
  margin-top: auto;
}
.sb-lane-cell:hover .sb-lane-add-btn { opacity: 1; }
.sb-lane-add-btn:hover { background: color-mix(in srgb, var(--gw-pine-500) 10%, transparent); color: var(--gw-pine-500); }

/* ── Client / address links in visit modal ───────────────────────────────── */
.sb-client-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; color: var(--gw-text);
  font-size: 13px; font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed var(--gw-text-muted);
  transition: color .15s;
}
.sb-client-link:hover { color: var(--gw-pine-500, #2D7A55); }
.sb-addr-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gw-text-muted); font-size: 12px; text-decoration: none;
  border-bottom: 1px dashed var(--gw-border);
  transition: color .15s;
}
.sb-addr-link:hover { color: var(--gw-pine-500, #2D7A55); }

/* ── Attachments section ─────────────────────────────────────────────────── */
.sb-attach-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--gw-surface-3, #f8f9fa);
  border-radius: 6px;
  border: 1px solid var(--gw-border);
}
.sb-attach-icon { font-size: 16px; flex-shrink: 0; }
.sb-attach-upload-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  background: var(--gw-surface-2, #f1f3f5);
  border: 1px dashed var(--gw-border);
  border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--gw-text-muted);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sb-attach-upload-btn:hover { background: var(--gw-surface-3); border-color: var(--gw-pine-500, #2D7A55); color: var(--gw-text); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* CUSTOMER DETAIL PAGE                                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */
.cd-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* Hero card — wraps page header + stats bar in one elevated, high-end panel */
.cd-hero-card {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--gw-bg-surface, #FDFCF9) 55%, var(--gw-pine-50, #F3FAF6) 100%);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-2xl, 24px);
  box-shadow: var(--gw-shadow-card);
  padding: 22px 26px 0;
  margin-bottom: 20px;
  overflow: hidden;
}
.cd-hero-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gw-pine-800, #1F5C3F), var(--gw-teal-500, #4D8A86), var(--gw-pine-300, #9BD3B4));
}

/* Page header */
.cd-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.cd-page-header-left { display: flex; align-items: center; gap: 14px; }
.cd-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gw-text-muted);
}
.cd-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gw-pine-600, #2D7A55), var(--gw-teal-500, #4D8A86));
  color: #fff; font-size: 21px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(45,122,85,.22);
}
.cd-title-block { display: flex; flex-direction: column; gap: 3px; }
.cd-name { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--gw-text); margin: 0; }
.cd-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gw-text-muted); }
.cd-since { font-size: 11px; }
.cd-page-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Stats bar — sits inside the hero card, separated by a hairline */
.cd-stats-bar {
  display: flex; gap: 0;
  border-top: 1px solid var(--gw-border);
  margin: 0 -26px; padding: 14px 26px 4px;
}
.cd-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px;
  border-right: 1px solid var(--gw-border);
  text-align: center;
}
.cd-stat:last-child { border-right: none; }
.cd-stat-val { font-size: 19px; font-weight: 800; color: var(--gw-text); letter-spacing: -.01em; }
.cd-stat-val--green { color: var(--gw-success, #2D7A55); }
.cd-stat-val--blue { color: #3b82f6; }
.cd-stat-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--gw-text-muted); margin-top: 3px; }

/* Body layout — compact bento-style grid so cards sit side-by-side instead
   of one long stacked column. Cards declare width via cd-span-2 (2 of 3
   columns) or default to a single column; the grid fills row by row. */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 16px;
  align-items: start;
}
.cd-span-2 { grid-column: span 2; }
@media (max-width: 1100px) {
  .cd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-span-2 { grid-column: span 2; }
}
@media (max-width: 680px) {
  .cd-grid { grid-template-columns: 1fr; }
  .cd-span-2 { grid-column: span 1; }
}

/* Sections — premium card treatment matching the rest of the app */
.cd-section {
  background: var(--gw-bg-surface-2, #fff);
  border: 1px solid var(--gw-border);
  border-radius: var(--gw-r-lg, 16px);
  box-shadow: var(--gw-shadow-card);
  padding: 16px 18px;
  container-type: inline-size;
  transition: box-shadow .15s, border-color .15s;
  align-self: start;
  height: fit-content;
}
.cd-section:hover { box-shadow: var(--gw-shadow-md); border-color: var(--gw-border-strong); }
/* Sections with no real data yet get a quieter treatment so they read as
   compact placeholders, not as blocks straining to fill leftover space. */
.cd-section--empty { background: var(--gw-bg-app, #FAFAF8); }
.cd-section--empty:hover { box-shadow: var(--gw-shadow-card); border-color: var(--gw-border); }
.cd-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 8px;
}
.cd-section-title {
  font-size: 11.5px; font-weight: 800; color: var(--gw-text-muted);
  text-transform: uppercase; letter-spacing: .07em; margin: 0;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
/* Per-section icon badge — small gradient tile that replaces the plain dot,
   echoing the avatar / quick-action icon treatment for a cohesive, high-end
   visual language across the page. */
.cd-section-icon {
  width: 21px; height: 21px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gw-pine-600, #2D7A55), var(--gw-teal-500, #4D8A86));
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 2px 6px rgba(45,122,85,.22);
}
.cd-section-icon svg { width: 12px; height: 12px; }
/* Inline hint text / dynamic amounts inside titles should stay normal-case */
.cd-section-title > span { text-transform: none; letter-spacing: normal; }
#cdAutosaveInd { text-transform: none; letter-spacing: normal; }

/* Info grid — 2-column layout on wider cards (e.g. Contact Info spans 2) */
.cd-info-grid { display: flex; flex-direction: column; gap: 7px; }
.cd-info-row {
  display: flex; gap: 12px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--gw-border-subtle, rgba(0,0,0,.045));
}
.cd-info-grid--2col .cd-info-row:nth-last-child(-n+2) { border-bottom: none; }
.cd-info-lbl { font-size: 11px; font-weight: 600; color: var(--gw-text-muted); width: 72px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }
.cd-info-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 32px;
  align-content: start;
}
@container (max-width: 480px) {
  .cd-info-grid--2col { grid-template-columns: 1fr; }
  .cd-info-grid--2col .cd-info-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--gw-border-subtle, rgba(0,0,0,.045)); }
  .cd-info-grid--2col .cd-info-row:last-child { border-bottom: none; }
}

/* Compact empty state — used inside client-page cards that have no data yet
   (Recurring & Projections, Notes, Timeline, Jobs, etc). Intentionally short
   and centered so a placeholder card never fights taller neighbours for
   visual weight. */
.cd-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 16px 10px 6px;
}
.cd-empty-icon {
  width: 32px; height: 32px; border-radius: 9px; margin-bottom: 3px;
  background: var(--gw-bg-app, #f4f6f8);
  display: flex; align-items: center; justify-content: center;
  color: var(--gw-pine-400, #6fae8d);
}
.cd-empty-icon svg { width: 15px; height: 15px; }
.cd-empty-title { font-size: 12.5px; font-weight: 600; color: var(--gw-text-muted); margin: 0; }
.cd-empty-sub { font-size: 11px; color: var(--gw-text-muted); opacity: .8; max-width: 240px; line-height: 1.45; margin: 0; }
.cd-empty-cta { margin-top: 2px; }

/* Inline-editable contact fields (lead-style: edit in place, autosave) */
.cd-inline-input {
  flex: 1; min-width: 0;
  font-size: 13px; color: #233123;
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  padding: 4px 8px; margin: -4px 0;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.cd-inline-input:hover { border-color: var(--gw-border, #E5E7EB); background: #FAFAF7; }
.cd-inline-input:focus {
  outline: none; border-color: #2D7A55; background: #fff;
  box-shadow: 0 0 0 2px rgba(45,122,85,.12);
}
.cd-inline-input::placeholder { color: #B8BDB4; font-style: italic; }
.cd-inline-select { cursor: pointer; appearance: auto; }

/* Green create buttons under each client-page section */
.cd-add-btn-row { margin-top: 12px; }
.cd-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2D7A55; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
.cd-add-btn:hover { background: #236343; }
.cd-add-btn:active { transform: scale(.98); }
.cd-info-val { font-size: 13px; color: var(--gw-text); }
.cd-link { color: var(--gw-pine-500, #2D7A55); text-decoration: none; }
.cd-link:hover { text-decoration: underline; }

/* Tags */
.cd-tag-add-btn {
  background: none; border: 1px dashed var(--gw-border);
  border-radius: 20px; padding: 2px 10px; font-size: 11px;
  color: var(--gw-text-muted); cursor: pointer; transition: all .15s;
}
.cd-tag-add-btn:hover { border-color: var(--gw-pine-500, #2D7A55); color: var(--gw-pine-500, #2D7A55); }

/* Notes */
.cd-note-item {
  background: var(--gw-surface-2, #f8f9fa);
  border-radius: 8px; padding: 10px 12px;
  border-left: 3px solid var(--gw-pine-400, #4aa87a);
}
.cd-note-body { font-size: 13px; color: var(--gw-text); line-height: 1.5; }
.cd-note-meta { font-size: 11px; color: var(--gw-text-muted); margin-top: 6px; }

/* Tab bar */
.cd-tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--gw-border); margin-bottom: 12px; }
.cd-tab {
  background: none; border: none; padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--gw-text-muted); cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.cd-tab.active { color: var(--gw-pine-500, #2D7A55); border-bottom-color: var(--gw-pine-500, #2D7A55); }
.cd-tab:hover { color: var(--gw-text); }

/* Jobs list */
.cd-wo-row {
  display: grid; grid-template-columns: 80px 1fr 100px 80px 80px;
  gap: 8px; align-items: center;
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
  font-size: 12px;
}
.cd-wo-row:hover { background: var(--gw-surface-2, #f8f9fa); border-color: var(--gw-border); }
.cd-wo-num { font-weight: 700; color: var(--gw-text-muted); font-size: 11px; }
.cd-wo-title { font-weight: 600; color: var(--gw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-wo-date { color: var(--gw-text-muted); font-size: 11px; }
.cd-wo-amt { font-weight: 700; color: var(--gw-text); text-align: right; }

/* Opportunity rows */
.cd-opp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  border: 1px solid transparent; transition: background .12s;
  font-size: 12px;
}
.cd-opp-row:hover { background: var(--gw-surface-2, #f8f9fa); }
.cd-opp-proj { flex: 1; font-weight: 600; color: var(--gw-text); }
.cd-opp-val { font-weight: 700; color: var(--gw-text-muted); }

/* Properties */
.cd-property-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--gw-border);
}
.cd-property-row:last-child { border-bottom: none; }

/* Timeline */
.cd-timeline { display: flex; flex-direction: column; gap: 0; }
.cd-timeline-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 6px; border-bottom: 1px solid var(--gw-border);
  border-radius: 6px; margin: 0 -6px;
  cursor: pointer; transition: background .1s;
}
.cd-timeline-item:hover { background: var(--gw-bg-surface-2, #f8fafc); }
.cd-timeline-item:last-child { border-bottom: none; }
.cd-tl-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  background: var(--gw-text-muted);
}
.cd-tl-dot.status-scheduled { background: #3b82f6; }
.cd-tl-dot.status-in-progress { background: #f59e0b; }
.cd-tl-dot.status-completed { background: #22c55e; }
.cd-tl-dot.status-cancelled { background: #ef4444; }
.cd-tl-content { flex: 1; }
.cd-tl-title { font-size: 13px; font-weight: 600; color: var(--gw-text); }
.cd-tl-meta { font-size: 11px; color: var(--gw-text-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.cd-tl-amt { font-size: 12px; font-weight: 700; color: var(--gw-text); margin-top: 3px; }

/* Job/estimate/invoice/payment rows collapse based on their own card width
   (container query) rather than the viewport — cards are narrower now that
   they sit side-by-side in the bento grid. */
@container (max-width: 480px) {
  .cd-wo-row { grid-template-columns: 60px 1fr 68px; }
  .cd-wo-date, .cd-wo-amt { display: none; }
}

/* Responsive */
@media (max-width: 900px) {
  .cd-stats-bar { flex-wrap: wrap; }
  .cd-stat { min-width: 30%; border-right: none; }
}
@media (max-width: 600px) {
  .cd-page-header { flex-direction: column; }
  .cd-page-header-actions { flex-wrap: wrap; }
}

/* Quick Actions button — icon + label + chevron */
.cd-quick-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 8px;
  background: var(--gw-bg-surface, #fff);
  color: var(--gw-text, #1e293b);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .1s;
}
.cd-quick-btn:hover {
  background: var(--gw-bg-surface-2, #f8fafc);
  border-color: var(--gw-pine-300, #7ecda0);
  transform: translateX(2px);
}
.cd-quick-btn svg:first-child { flex-shrink: 0; color: var(--gw-pine-500, #2D7A55); }

/* ═══════════════════════════════════════════════════════════════════════════
   Shared RP (Report/Page) components — used across Work Orders, Assets,
   Recurring Services, and other list pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page shell */
.wo-list-shell,
.rp-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* Page header */
.rp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.rp-header-left { flex: 1; min-width: 0; }
.rp-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.rp-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--gw-text);
  margin: 0 0 4px;
  letter-spacing: -.5px;
}
.rp-subtitle { font-size: 13px; color: var(--gw-text-muted); margin: 0; }

/* Buttons */
.rp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--gw-r-md, 8px);
  border: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
  color: var(--gw-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.rp-btn:hover { background: var(--gw-bg-surface-2); border-color: var(--gw-text-muted); }
.rp-btn--primary {
  background: var(--gw-pine-500, #2D7A55);
  color: #fff;
  border-color: var(--gw-pine-500, #2D7A55);
}
.rp-btn--primary:hover { background: var(--gw-pine-600, #24613f); border-color: var(--gw-pine-600, #24613f); }
.rp-btn--danger { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.rp-btn--danger:hover { background: #fecaca; }

.rp-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--gw-border);
  background: var(--gw-bg-surface);
  color: var(--gw-text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.rp-btn-sm:hover { background: var(--gw-bg-surface-2); }
.rp-btn-sm--danger { color: #dc2626; border-color: #fca5a5; background: #fee2e2; }
.rp-btn-sm--danger:hover { background: #fecaca; }

/* Empty state */
.rp-empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--gw-text-muted);
}

/* ── Work Order list rows ─────────────────────────────────────────────────── */
.wo-row {
  display: grid;
  grid-template-columns: 90px 1fr 100px 90px 130px 100px 90px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--gw-border);
  font-size: 13px;
  color: var(--gw-text);
  transition: background .1s;
}
.wo-row:last-child { border-bottom: none; }
.wo-row[style*="cursor:pointer"]:hover { background: var(--gw-bg-surface-2); }
.wo-number { font-weight: 700; font-size: 12px; color: var(--gw-text-muted); }
.wo-client { font-weight: 600; }
.wo-type   { font-size: 12px; color: var(--gw-text-muted); }
.wo-date   { font-size: 12px; color: var(--gw-text-muted); }
.wo-actions { display: flex; gap: 4px; justify-content: flex-end; }

@media (max-width: 860px) {
  .wo-row { grid-template-columns: 80px 1fr 80px 70px; }
  .wo-type, .wo-date, .wo-row > span:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FINANCIAL REPORTS HUB  (.stmt-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* Shell — full-height page wrapper */
.stmt-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gw-bg-app, #f4f6f8);
  overflow: hidden;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.stmt-tab-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 16px;
  background: var(--gw-bg-surface, #fff);
  border-bottom: 1px solid var(--gw-border, #e2e8f0);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
}
.stmt-tab-bar::-webkit-scrollbar { display: none; }

.stmt-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted, #64748b);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  user-select: none;
}
.stmt-tab:hover { color: var(--gw-text, #1e293b); }
.stmt-tab.active {
  color: var(--gw-pine-500, #2D7A55);
  border-bottom-color: var(--gw-pine-500, #2D7A55);
}

/* ── Date range bar ──────────────────────────────────────────────────────── */
.stmt-range-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--gw-bg-surface, #fff);
  border-bottom: 1px solid var(--gw-border, #e2e8f0);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.stmt-range-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted, #64748b);
  white-space: nowrap;
}
.stmt-range-input {
  padding: 5px 9px;
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 6px;
  background: var(--gw-bg-app, #f4f6f8);
  color: var(--gw-text, #1e293b);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.stmt-range-input:focus { border-color: var(--gw-pine-500, #2D7A55); }
.stmt-preset {
  padding: 5px 12px;
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 6px;
  background: var(--gw-bg-surface, #fff);
  color: var(--gw-text, #1e293b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.stmt-preset:hover {
  background: var(--gw-pine-50, #e8f5ee);
  border-color: var(--gw-pine-400, #3a9965);
  color: var(--gw-pine-600, #24613f);
}

/* ── Scrollable body ─────────────────────────────────────────────────────── */
.stmt-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── KPI summary row ─────────────────────────────────────────────────────── */
.stmt-kpi-row {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stmt-kpi {
  flex: 1;
  min-width: 140px;
  background: var(--gw-bg-surface, #fff);
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stmt-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gw-text-muted, #64748b);
}
.stmt-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--gw-text, #1e293b);
  line-height: 1.1;
}

/* ── Section title ───────────────────────────────────────────────────────── */
.stmt-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--gw-border, #e2e8f0);
  margin-bottom: 4px;
}

/* ── Data table card ─────────────────────────────────────────────────────── */
.stmt-table {
  background: var(--gw-bg-surface, #fff);
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Generic row (AR, AP, expenses, revenue reports) */
.stmt-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gw-border-light, #f1f5f9);
  font-size: 13px;
  color: var(--gw-text, #1e293b);
  transition: background .1s;
}
.stmt-row:last-child { border-bottom: none; }
.stmt-row:hover { background: var(--gw-bg-surface-2, #f8fafc); }
.stmt-row.bold {
  font-weight: 700;
  background: var(--gw-bg-app, #f4f6f8);
  color: var(--gw-text, #1e293b);
}
.stmt-row.bold:hover { background: var(--gw-bg-app, #f4f6f8); }
.stmt-row.overdue { color: #dc2626; }
.stmt-row.indent { padding-left: 32px; }

/* P&L specific rows */
.stmt-pl-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 16px;
  border-bottom: 1px solid var(--gw-border-light, #f1f5f9);
  font-size: 13px;
  color: var(--gw-text, #1e293b);
  transition: background .1s;
}
.stmt-pl-row:last-child { border-bottom: none; }
.stmt-pl-row:hover { background: var(--gw-bg-surface-2, #f8fafc); }
.stmt-pl-row.bold {
  font-weight: 700;
  background: var(--gw-bg-app, #f4f6f8);
  border-top: 1px solid var(--gw-border, #e2e8f0);
}
.stmt-pl-row.bold:hover { background: var(--gw-bg-app, #f4f6f8); }
.stmt-pl-row.indent { padding-left: 32px; font-size: 12px; color: var(--gw-text-muted, #64748b); }

/* ── Status badges ───────────────────────────────────────────────────────── */
.stmt-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  background: var(--gw-bg-surface-2, #f8fafc);
  color: var(--gw-text-muted, #64748b);
  border: 1px solid var(--gw-border, #e2e8f0);
}
.stmt-badge.paid {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.stmt-badge.open {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.stmt-badge.overdue {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* ── Misc helpers ────────────────────────────────────────────────────────── */
.stmt-note {
  font-size: 12px;
  color: var(--gw-text-muted, #64748b);
  padding: 6px 16px 10px;
  font-style: italic;
}
.stmt-link {
  color: var(--gw-pine-500, #2D7A55);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}
.stmt-link:hover { text-decoration: underline; color: var(--gw-pine-600, #24613f); }
.stmt-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--gw-text-muted, #64748b);
  font-size: 13px;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .stmt-tab { padding: 8px 10px; font-size: 11px; }
  .stmt-kpi { min-width: 120px; padding: 12px 14px; }
  .stmt-kpi-val { font-size: 18px; }
  .stmt-body { padding: 12px; }
  .stmt-range-bar { padding: 8px 12px; gap: 6px; }
}

/* ── In-app Message Compose Modal (email / SMS slide-up) ─────────────────── */
@keyframes gwSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Overlay backdrop */
#gw-message-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.45);
}

/* Panel */
#gw-message-modal .gwm-panel {
  width: 100%;
  max-width: 560px;
  background: var(--gw-bg-surface, #fff);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18);
  padding: 0 0 env(safe-area-inset-bottom, 0);
  animation: gwSlideUp .22s cubic-bezier(.22,1,.36,1);
}

/* Header row */
#gw-message-modal .gwm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--gw-border, #e2e8f0);
  gap: 10px;
}

/* Tab pills */
#gw-message-modal .gwm-tabs {
  display: flex;
  gap: 4px;
  background: var(--gw-bg, #f1f5f9);
  border-radius: 8px;
  padding: 3px;
}

#gw-message-modal .gwm-tab {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}

#gw-message-modal .gwm-tab.active {
  background: var(--gw-pine-500, #2D7A55);
  color: #fff;
}

#gw-message-modal .gwm-tab:not(.active) {
  background: transparent;
  color: var(--gw-text-muted, #64748b);
}

/* Gmail status banner */
#gw-message-modal .gwm-banner {
  margin: 10px 18px 0;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

#gw-message-modal .gwm-banner.connected {
  background: #dcfce7;
  color: #15803d;
}

#gw-message-modal .gwm-banner.disconnected {
  background: #fffbeb;
  color: #b45309;
}

/* Form body */
#gw-message-modal .gwm-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#gw-message-modal .gwm-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
  display: block;
}

#gw-message-modal .gwm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 7px;
  font-size: 13px;
  color: var(--gw-text, #1e293b);
  background: var(--gw-bg-surface, #fff);
  outline: none;
  transition: border-color .15s;
}

#gw-message-modal .gwm-input:focus {
  border-color: var(--gw-pine-400, #4DA876);
}

#gw-message-modal .gwm-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  padding: 9px 10px;
  border: 1px solid var(--gw-border, #e2e8f0);
  border-radius: 7px;
  font-size: 13px;
  color: var(--gw-text, #1e293b);
  background: var(--gw-bg-surface, #fff);
  resize: vertical;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
  line-height: 1.5;
}

#gw-message-modal .gwm-textarea:focus {
  border-color: var(--gw-pine-400, #4DA876);
}

/* SMS counter */
#gw-message-modal .gwm-sms-counter {
  font-size: 11px;
  color: var(--gw-text-muted, #64748b);
  text-align: right;
  margin-top: -6px;
}

/* Footer buttons */
#gw-message-modal .gwm-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 4px 18px 20px;
}

/* Mobile full-width */
@media (max-width: 600px) {
  #gw-message-modal .gwm-panel {
    border-radius: 14px 14px 0 0;
  }
  #gw-message-modal .gwm-footer {
    flex-direction: column-reverse;
  }
  #gw-message-modal .gwm-footer button {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ESTIMATES SYSTEM — p45
   Full component CSS: list, KPIs, builder, detail, portal preview
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared tokens & reset ─────────────────────────────────────────────────── */
.est-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 7px; font-size: 13.5px; font-weight: 600;
  background: var(--gw-action, #2A6E51); color: #fff; border: none; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.est-btn-primary:hover { background: var(--gw-pine-600, #1f5640); }
.est-btn-primary.est-btn-sm { padding: 6px 12px; font-size: 12.5px; }

.est-btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
  background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text, #1C2B22);
  border: 1px solid var(--gw-border, #DDD8CE); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.est-btn-secondary:hover { background: var(--gw-bark-50, #F2EDE3); border-color: var(--gw-pine-300, #7BB89A); }
.est-btn-secondary.est-btn-sm { padding: 5px 11px; font-size: 12px; }

.est-btn-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 7px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--gw-text-muted, #64748b);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.est-btn-ghost:hover { background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text, #1C2B22); }
.est-btn-ghost.est-btn-sm { padding: 5px 10px; font-size: 12px; }

.est-link {
  background: none; border: none; padding: 0; color: var(--gw-action, #2A6E51);
  font-size: inherit; cursor: pointer; text-decoration: underline;
  text-decoration-color: transparent; transition: text-decoration-color .15s;
}
.est-link:hover { text-decoration-color: currentColor; }

.est-input {
  width: 100%; padding: 8px 11px; border-radius: 6px; font-size: 13.5px;
  border: 1px solid var(--gw-border, #DDD8CE); background: var(--gw-surface, #fff);
  color: var(--gw-text, #1C2B22); font-family: inherit; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.est-input:focus { outline: none; border-color: var(--gw-pine-400, #4DA876); box-shadow: 0 0 0 3px rgba(42,110,81,.08); }
.est-textarea--sm { height: 72px; resize: vertical; }
.est-textarea--md { resize: vertical; }

.est-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--gw-text-muted, #64748b);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.est-required { color: var(--gw-pine-500, #2A6E51); }
.est-field-hint { font-size: 11.5px; color: var(--gw-text-muted, #64748b); margin: -2px 0 6px; }

.est-badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .03em; white-space: nowrap;
}
.est-badge--draft    { background: #f3f4f6; color: #6b7280; }
.est-badge--sent     { background: #dbeafe; color: #1d4ed8; }
.est-badge--viewed   { background: #ede9fe; color: #6d28d9; }
.est-badge--accepted { background: #d1fae5; color: #065f46; }
.est-badge--declined { background: #fee2e2; color: #991b1b; }
.est-badge--changes  { background: #fef3c7; color: #92400e; }
.est-badge--expired  { background: #f3f4f6; color: #9ca3af; }
.est-badge--invoiced { background: #e0f2fe; color: #0369a1; }

.est-text-green { color: #059669; }
.est-text-red   { color: #dc2626; }

/* Spinner */
.est-spinner {
  width: 18px; height: 18px; border: 2px solid var(--gw-border, #DDD8CE);
  border-top-color: var(--gw-action, #2A6E51); border-radius: 50%;
  animation: estSpin .7s linear infinite; display: inline-block;
}
@keyframes estSpin { to { transform: rotate(360deg); } }

/* ── Estimate List ─────────────────────────────────────────────────────────── */
.est-list-shell {
  padding: 24px 28px 60px;
  width: 100%; max-width: none; margin: 0;
  box-sizing: border-box;
}

.est-list-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.est-list-header-left { display: flex; align-items: baseline; gap: 12px; }
.est-list-title { font-size: 22px; font-weight: 800; color: var(--gw-text, #1C2B22); margin: 0; }
.est-list-subtitle { font-size: 13px; color: var(--gw-text-muted, #64748b); }

/* KPI Row */
.est-kpi-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px;
}
@media (max-width: 1100px) { .est-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .est-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.est-kpi-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; padding: 14px 16px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s; position: relative; overflow: hidden;
}
.est-kpi-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); border-color: var(--gw-pine-300, #7BB89A); }
.est-kpi-card--loading { min-height: 72px; }
.est-kpi-card--yellow { border-left: 3px solid #f59e0b; }
.est-kpi-card--red    { border-left: 3px solid #ef4444; }
.est-kpi-card--muted  { border-left: 3px solid var(--gw-border, #DDD8CE); }

.est-kpi-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: estShimmer 1.4s ease-in-out infinite;
  background-color: var(--gw-bark-25, #F8F6F0);
}
@keyframes estShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.est-kpi-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.est-kpi-icon--blue  { background: #dbeafe; color: #1d4ed8; }
.est-kpi-icon--green { background: #d1fae5; color: #059669; }
.est-kpi-icon--yellow{ background: #fef3c7; color: #d97706; }
.est-kpi-icon--red   { background: #fee2e2; color: #dc2626; }
.est-kpi-icon--muted { background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text-muted, #64748b); }

.est-kpi-value { font-size: 22px; font-weight: 800; color: var(--gw-text, #1C2B22); line-height: 1; }
.est-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--gw-text-muted, #64748b); margin-top: 2px; }
.est-kpi-sub   { font-size: 11px; color: var(--gw-text-muted, #64748b); margin-top: 1px; }

/* Filter Bar */
.est-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.est-search-wrap {
  display: flex; align-items: center; gap: 7px;
  background: var(--gw-bark-25, #F8F6F0); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 6px; padding: 0 10px; flex: 1; min-width: 180px;
}
.est-search-icon { color: var(--gw-text-muted, #64748b); flex-shrink: 0; }
.est-search-input {
  flex: 1; border: none; background: transparent; padding: 7px 0;
  font-size: 13px; color: var(--gw-text, #1C2B22); font-family: inherit;
}
.est-search-input:focus { outline: none; }
.est-filter-select {
  padding: 7px 11px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--gw-border, #DDD8CE); background: var(--gw-surface, #fff);
  color: var(--gw-text, #1C2B22); font-family: inherit; cursor: pointer;
}
.est-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.est-chip {
  padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--gw-border, #DDD8CE); background: var(--gw-surface, #fff);
  color: var(--gw-text-muted, #64748b); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.est-chip:hover { border-color: var(--gw-pine-400, #4DA876); color: var(--gw-text, #1C2B22); }
.est-chip--active { background: var(--gw-action, #2A6E51); color: #fff; border-color: var(--gw-action, #2A6E51); }

/* Table */
.est-table-wrap {
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; overflow: hidden;
}
.est-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.est-table thead th {
  padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted, #64748b); background: var(--gw-bark-25, #F8F6F0);
  border-bottom: 1px solid var(--gw-border, #DDD8CE); white-space: nowrap;
}
.est-table-row { cursor: pointer; transition: background .1s; border-bottom: 1px solid var(--gw-border, #DDD8CE); }
.est-table-row:last-child { border-bottom: none; }
.est-table-row:hover { background: var(--gw-bark-25, #F8F6F0); }
.est-table-row--active { background: rgba(42,110,81,.04); }
.est-table-row td { padding: 11px 14px; vertical-align: middle; }

.est-table-loading, .est-table-error {
  padding: 32px; text-align: center; color: var(--gw-text-muted, #64748b);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

.est-number-tag {
  font-size: 12px; font-weight: 700; color: var(--gw-action, #2A6E51);
  font-family: monospace; letter-spacing: .02em;
}
.est-row-client { font-weight: 600; color: var(--gw-text, #1C2B22); }
.est-row-prop   { font-size: 11.5px; color: var(--gw-text-muted, #64748b); margin-top: 1px; }
.est-row-title  { color: var(--gw-text, #1C2B22); }
.est-row-rep    { font-size: 11px; color: var(--gw-text-muted, #64748b); margin-top: 1px;
  display: flex; align-items: center; gap: 3px; }
.est-row-total  { font-weight: 700; color: var(--gw-text, #1C2B22); font-variant-numeric: tabular-nums; }
.est-row-date   { font-size: 12px; color: var(--gw-text-muted, #64748b); white-space: nowrap; }

/* Engagement chips in table */
.est-eng-chips { display: flex; flex-direction: column; gap: 3px; }
.est-eng-chip  {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 7px;
  border-radius: 4px; white-space: nowrap;
}
.est-eng-chip--sent     { background: #dbeafe; color: #1d4ed8; }
.est-eng-chip--viewed   { background: #ede9fe; color: #6d28d9; }
.est-eng-chip--accepted { background: #d1fae5; color: #065f46; }
.est-eng-chip--declined { background: #fee2e2; color: #991b1b; }
.est-eng-chip--changes  { background: #fef3c7; color: #92400e; }
.est-eng-chip--none     { background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text-muted, #64748b); }

/* Row actions */
.est-row-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s; }
.est-table-row:hover .est-row-actions { opacity: 1; }
.est-row-action {
  width: 28px; height: 28px; border-radius: 5px; border: none;
  background: transparent; color: var(--gw-text-muted, #64748b);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.est-row-action:hover { background: var(--gw-bark-50, #F2EDE3); color: var(--gw-text, #1C2B22); }
.est-row-more-wrap { position: relative; }

/* More menu */
.est-more-menu {
  position: absolute; right: 0; top: 100%; z-index: 300;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 180px; overflow: hidden; margin-top: 3px;
}
.est-more-menu--inline { left: 0; right: auto; }
.est-more-menu button {
  display: block; width: 100%; text-align: left; padding: 9px 14px;
  font-size: 13px; border: none; background: none; color: var(--gw-text, #1C2B22);
  cursor: pointer; transition: background .1s;
}
.est-more-menu button:hover { background: var(--gw-bark-25, #F8F6F0); }
.est-more-menu--danger { color: #dc2626 !important; }

/* Empty state */
.est-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; gap: 10px; text-align: center;
}
.est-empty-icon { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.est-empty-title { font-size: 17px; font-weight: 700; color: var(--gw-text, #1C2B22); }
.est-empty-sub   { font-size: 14px; color: var(--gw-text-muted, #64748b); margin-bottom: 10px; }

/* Preview Drawer */
.est-preview-drawer {
  position: fixed; right: 0; top: 0; bottom: 0; width: 360px; z-index: 200;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
}
.est-preview-drawer-inner {
  background: var(--gw-surface, #fff); height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.est-preview-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--gw-border, #DDD8CE);
  font-weight: 700; font-size: 14px;
}
.est-preview-drawer-close {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text-muted, #64748b);
  cursor: pointer; font-size: 14px;
}
.est-preview-drawer-close:hover { background: var(--gw-bark-50, #F2EDE3); }

/* Drawer content */
.est-drawer-loading { padding: 40px; text-align: center; }
.est-drawer-error   { padding: 20px; color: var(--gw-text-muted); text-align: center; }
.est-drawer-header  { display: flex; align-items: center; gap: 10px; padding: 16px 18px 10px; }
.est-drawer-num     { font-size: 12px; font-weight: 700; color: var(--gw-action); font-family: monospace; }
.est-drawer-client  { display: flex; align-items: center; gap: 10px; padding: 0 18px 14px; }
.est-drawer-avatar  {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gw-pine-600, #1f5640); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.est-drawer-client-name { font-weight: 700; font-size: 14px; color: var(--gw-text); }
.est-drawer-client-prop { font-size: 12px; color: var(--gw-text-muted); margin-top: 1px; }
.est-drawer-financials  { padding: 10px 18px; background: var(--gw-bark-25, #F8F6F0); margin: 0 18px 14px; border-radius: 8px; }
.est-drawer-fin-row     { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--gw-text-muted); }
.est-drawer-fin-total   { font-weight: 700; color: var(--gw-text); border-top: 1px solid var(--gw-border); margin-top: 4px; padding-top: 6px; }
.est-drawer-deposit {
  margin-top: 8px; padding: 8px 10px; background: #fef3c7; border-radius: 6px;
  font-size: 12px; color: #92400e; display: flex; align-items: center; gap: 6px;
}
.est-drawer-section { padding: 10px 18px; }
.est-drawer-label   { font-size: 11px; font-weight: 600; color: var(--gw-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.est-drawer-scope   { font-size: 13px; color: var(--gw-text); line-height: 1.55; max-height: 100px; overflow: hidden; -webkit-mask-image: linear-gradient(black 60%, transparent); }
.est-drawer-line    { display: flex; justify-content: space-between; font-size: 12.5px; padding: 2px 0; }
.est-drawer-actions { padding: 14px 18px 18px; display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--gw-border); margin-top: auto; }

/* When drawer is open, shrink list slightly */
.est-list-shell:has(#est-preview-drawer[style*="flex"]) .est-table-wrap {
  margin-right: 376px; transition: margin-right .2s;
}

/* ── Estimate Detail ───────────────────────────────────────────────────────── */
.est-detail-shell {
  display: grid; grid-template-columns: 1fr 300px; gap: 24px;
  padding: 24px 28px 60px; max-width: 1300px; margin: 0 auto; align-items: start;
}
@media (max-width: 900px) { .est-detail-shell { grid-template-columns: 1fr; } }

.est-detail-nav { margin-bottom: 16px; }
.est-back-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--gw-text-muted); font-weight: 500;
  background: none; border: none; cursor: pointer; padding: 4px 0;
  transition: color .15s;
}
.est-back-btn:hover { color: var(--gw-text); }

.est-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.est-detail-num    { font-size: 12px; font-weight: 700; color: var(--gw-action); font-family: monospace; letter-spacing: .03em; margin-bottom: 4px; }
.est-detail-title  { font-size: 22px; font-weight: 800; color: var(--gw-text); margin: 0 0 10px; line-height: 1.25; }
.est-detail-meta   { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.est-detail-meta-item {
  display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--gw-text-muted);
}
.est-detail-total-badge {
  font-size: 24px; font-weight: 800; color: var(--gw-text); white-space: nowrap;
  background: var(--gw-bark-25); padding: 8px 16px; border-radius: 10px;
  border: 1px solid var(--gw-border);
}
.est-detail-header-right { flex-shrink: 0; }

/* Action Row */
.est-detail-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid var(--gw-border); border-bottom: 1px solid var(--gw-border);
  margin-bottom: 24px; background: var(--gw-surface, #fff);
  transition: box-shadow .2s, padding .2s;
}
.est-detail-actions--sticky {
  position: sticky; top: 0; z-index: 50;
  padding: 12px 0; box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.est-detail-action-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 700;
  background: var(--gw-action, #2A6E51); color: #fff; border: none; cursor: pointer;
  transition: background .15s;
}
.est-detail-action-primary:hover { background: var(--gw-pine-600, #1f5640); }
.est-detail-action-primary--green { background: #059669; }
.est-detail-action-primary--green:hover { background: #047857; }

.est-detail-secondary-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.est-detail-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: 7px; font-size: 13px; font-weight: 600;
  background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text);
  border: 1px solid var(--gw-border); cursor: pointer; transition: background .15s;
}
.est-detail-action-btn:hover { background: var(--gw-bark-50, #F2EDE3); }
.est-more-wrap-inline { position: relative; }

/* Banners */
.est-changes-banner, .est-declined-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13.5px;
}
.est-changes-banner  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.est-declined-banner { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Sections */
.est-detail-section { margin-bottom: 32px; }
.est-detail-section-title {
  font-size: 14px; font-weight: 700; color: var(--gw-text); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gw-border);
  display: flex; align-items: center; gap: 8px;
}
.est-internal-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: #fef3c7; color: #92400e; }

/* ── Traffic-light scheduling (hold = yellow, confirmed = green, cancelled = red) ── */
.est-traffic-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.est-traffic-dot--yellow { background:#EAB308; box-shadow:0 0 0 3px rgba(234,179,8,.28); animation: sbHoldPulse 1.8s ease-in-out infinite; }
.est-traffic-dot--green  { background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.est-traffic-dot--red    { background:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.22); }
@keyframes sbHoldPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(234,179,8,.28); }
  50%     { box-shadow:0 0 0 5px rgba(234,179,8,.12); }
}
.est-sched-btn--hold  { background:#B45309 !important; }
.est-sched-btn--hold:hover  { background:#92400E !important; }
.est-sched-btn--green { background:#15803D !important; }
.est-sched-btn--green:hover { background:#166534 !important; }
.est-detail-action-btn--danger { color:#B91C1C !important; border-color:#FECACA !important; }
.est-detail-action-btn--danger:hover { background:#FEF2F2 !important; }

/* Internal-only column markers in the pricing breakdown */
.est-col-internal { background: rgba(254,243,199,.45); }
.est-col-internal-dot { color:#D97706; font-size:8px; vertical-align:2px; }

/* Hold styling on schedule board month chips */
.sb-month-chip--hold { background:#FEF9E7; }
.sb-month-dot--hold { animation: sbHoldPulse 1.8s ease-in-out infinite; }
.sb-job-card.wo-status--hold { outline:1.5px dashed #EAB308; outline-offset:-1.5px; }
.est-section-internal { opacity: .9; }

.est-detail-scope {
  font-size: 14px; line-height: 1.7; color: var(--gw-text);
  background: var(--gw-bark-25, #F8F6F0); border-radius: 8px;
  padding: 16px 18px; border: 1px solid var(--gw-border);
  white-space: pre-wrap;
}
.est-detail-notes {
  font-size: 13.5px; line-height: 1.65; color: var(--gw-text);
  padding: 14px; background: var(--gw-bark-25); border-radius: 8px;
  border: 1px solid var(--gw-border);
}
.est-detail-notes--internal { background: #fefce8; border-color: #fde68a; }
.est-detail-terms {
  font-size: 12.5px; line-height: 1.7; color: var(--gw-text-muted);
  background: var(--gw-bark-25); border-radius: 8px; padding: 14px;
  border: 1px solid var(--gw-border);
}

/* Line table */
.est-detail-line-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 0; }
.est-detail-line-table thead th {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted); padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--gw-border); background: var(--gw-bark-25);
}
.est-detail-line-table tbody tr { border-bottom: 1px solid var(--gw-border); }
.est-detail-line-table tbody tr:last-child { border-bottom: none; }
.est-detail-line-table tbody td { padding: 10px 12px; vertical-align: top; }
.est-col-num { text-align: right; width: 90px; }
.est-li-name { font-weight: 600; color: var(--gw-text); }
.est-li-desc { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; }
.est-li-total { font-weight: 700; }

/* Totals */
.est-detail-totals { border-top: 1px solid var(--gw-border); padding-top: 14px; margin-top: 4px; }
.est-totals-row {
  display: flex; justify-content: space-between;
  font-size: 13.5px; padding: 4px 12px; color: var(--gw-text-muted);
}
.est-totals-total {
  font-size: 16px; font-weight: 800; color: var(--gw-text);
  border-top: 2px solid var(--gw-border); padding-top: 10px; margin-top: 6px;
}

/* Deposit callout in detail */
.est-deposit-callout {
  margin-top: 16px; padding: 14px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border: 1px solid #6ee7b7; display: flex; flex-direction: column; gap: 3px;
}
.est-deposit-callout-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #065f46; }
.est-deposit-callout-amount { font-size: 22px; font-weight: 800; color: #065f46; }
.est-deposit-callout-sub    { font-size: 12px; color: #059669; }

/* Attachment gallery */
.est-attachment-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
}
.est-attachment-card {
  background: var(--gw-bark-25); border: 1px solid var(--gw-border); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s; position: relative;
}
.est-attachment-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.1); border-color: var(--gw-pine-300); }
.est-attachment-thumb {
  height: 88px; background-size: cover; background-position: center;
  background-color: var(--gw-bark-50);
}
.est-attachment-icon {
  height: 88px; display: flex; align-items: center; justify-content: center;
  color: var(--gw-text-muted); background: var(--gw-bark-25);
}
.est-attachment-name {
  padding: 6px 8px; font-size: 11px; color: var(--gw-text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.est-attachment-open {
  padding: 0 8px 7px; font-size: 11px; color: var(--gw-action); text-decoration: none;
  font-weight: 600;
}
.est-attachment-open:hover { text-decoration: underline; }
.est-attachment-remove {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.5); color: #fff;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.est-attachment-card:hover .est-attachment-remove { opacity: 1; }

.est-detail-empty-section { font-size: 13.5px; color: var(--gw-text-muted); padding: 20px 0; }

/* Rail */
.est-detail-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }

.est-rail-card {
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border); border-radius: 10px; padding: 16px;
}
.est-rail-card--fin { border-left: 3px solid var(--gw-action); }
.est-rail-card-title {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted); margin-bottom: 12px;
}
.est-rail-empty   { font-size: 13px; color: var(--gw-text-muted); }
.est-rail-actions-minor { display: flex; flex-direction: column; gap: 6px; }

.est-engagement-timeline { display: flex; flex-direction: column; gap: 0; }
.est-eng-event {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
  font-size: 13px; color: var(--gw-text); position: relative;
}
.est-eng-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gw-action); flex-shrink: 0; margin-top: 4px;
}
.est-eng-dot--muted { background: var(--gw-border); }
.est-eng-event--accepted .est-eng-dot { background: #059669; }
.est-eng-event--declined .est-eng-dot { background: #dc2626; }
.est-eng-event--changes .est-eng-dot  { background: #d97706; }
.est-eng-event--viewed .est-eng-dot   { background: #7c3aed; }
.est-eng-event--sent .est-eng-dot     { background: #1d4ed8; }
.est-eng-time { font-size: 11px; color: var(--gw-text-muted); margin-top: 1px; }

.est-rail-fin-row {
  display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0;
  color: var(--gw-text); border-bottom: 1px solid var(--gw-border);
}
.est-rail-fin-row:last-child { border-bottom: none; }
.est-rail-fin-deposit { color: var(--gw-action); font-weight: 600; }
.est-rail-tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; margin-top: 10px; }
.est-rail-tag--invoiced { background: #e0f2fe; color: #0369a1; }

.est-rail-client-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.est-rail-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--gw-pine-600, #1f5640); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.est-rail-client-name   { font-size: 14px; font-weight: 700; color: var(--gw-text); }
.est-rail-client-detail { font-size: 12px; color: var(--gw-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.est-rail-prop { font-size: 12px; color: var(--gw-text-muted); display: flex; align-items: center; gap: 5px; padding-top: 6px; border-top: 1px solid var(--gw-border); }

.est-rail-status-btns { display: flex; flex-direction: column; gap: 7px; }
.est-rail-status-btn {
  display: block; width: 100%; padding: 8px; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; transition: background .15s;
}
.est-rail-status-btn--accept { background: #d1fae5; color: #065f46; }
.est-rail-status-btn--accept:hover { background: #a7f3d0; }
.est-rail-status-btn--decline { background: #fee2e2; color: #991b1b; }
.est-rail-status-btn--decline:hover { background: #fecaca; }

/* Detail skeleton */
.est-detail-skeleton     { padding: 24px; }
.est-detail-skeleton-bar { background: var(--gw-bark-25); border-radius: 6px; animation: estShimmer 1.4s ease-in-out infinite; background-size: 200% 100%; margin-bottom: 10px; display: block; }

/* ── Estimate Builder ──────────────────────────────────────────────────────── */
.est-builder-shell {
  display: grid; grid-template-columns: 1fr 280px; gap: 24px;
  padding: 24px 28px 80px; max-width: 1300px; margin: 0 auto; align-items: start;
}
@media (max-width: 900px) { .est-builder-shell { grid-template-columns: 1fr; } }

.est-builder-main { display: flex; flex-direction: column; gap: 0; }

.est-builder-topnav {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--gw-border);
}
.est-builder-topnav-title { font-size: 16px; font-weight: 700; color: var(--gw-text); flex: 1; }
.est-builder-save-state   { font-size: 12.5px; color: var(--gw-text-muted); }

.est-builder-section {
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border);
  border-radius: 10px; padding: 20px 22px; margin-bottom: 16px;
}
.est-builder-section-title {
  font-size: 14px; font-weight: 700; color: var(--gw-text); margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.est-builder-section-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gw-action); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.est-builder-section-hint { font-size: 13px; color: var(--gw-text-muted); margin: -8px 0 14px; line-height: 1.5; }

.est-builder-customer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.est-builder-meta-grid { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: 14px; }
@media (max-width: 700px) {
  .est-builder-customer-grid, .est-builder-meta-grid { grid-template-columns: 1fr; }
}
.est-builder-field-group { display: flex; flex-direction: column; }
.est-builder-field-group--wide { grid-column: 1 / -1; }

/* Customer selector */
.est-customer-selector { position: relative; }
.est-customer-search-wrap {
  display: flex; align-items: center; gap: 7px;
  background: var(--gw-bark-25); border: 1px solid var(--gw-border);
  border-radius: 6px; padding: 0 10px;
}
.est-customer-search-input {
  flex: 1; border: none; background: transparent; padding: 9px 0;
  font-size: 13.5px; color: var(--gw-text); font-family: inherit;
}
.est-customer-search-input:focus { outline: none; }
.est-customer-selected {
  display: flex; align-items: center; gap: 10px;
  background: var(--gw-bark-25); border: 1px solid var(--gw-border);
  border-radius: 6px; padding: 10px 12px;
}
.est-customer-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--gw-pine-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.est-customer-info { flex: 1; min-width: 0; }
.est-customer-name   { font-size: 14px; font-weight: 700; color: var(--gw-text); }
.est-customer-detail { font-size: 12px; color: var(--gw-text-muted); margin-top: 1px; }
.est-customer-change {
  padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--gw-border); background: var(--gw-surface); color: var(--gw-text-muted);
  cursor: pointer;
}
.est-client-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 100; margin-top: 3px;
  background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden;
}
.est-client-result {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer;
  transition: background .1s;
}
.est-client-result:hover { background: var(--gw-bark-25); }
.est-client-result-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--gw-pine-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.est-client-result-name { font-size: 13.5px; font-weight: 600; color: var(--gw-text); }
.est-client-result-sub  { font-size: 12px; color: var(--gw-text-muted); }
.est-client-result-empty { padding: 12px 14px; font-size: 13px; color: var(--gw-text-muted); }

/* Scope textarea */
.est-scope-textarea { min-height: 160px; resize: vertical; line-height: 1.6; }

/* Line item editor */
/* Shared column template: drag-handle | desc | qty | rate | total | del */
:root { --est-line-cols: 18px 1fr 68px 90px 90px 32px; }

.est-line-editor { border: 1px solid var(--gw-border); border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
.est-line-editor-header {
  display: grid; grid-template-columns: var(--est-line-cols);
  gap: 0; background: var(--gw-bark-25); border-bottom: 1px solid var(--gw-border);
  padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gw-text-muted); align-items: center;
}
/* Remove conflicting flex overrides — grid template controls widths */
.est-line-col { display: flex; align-items: center; min-width: 0; }
.est-line-col--handle { /* drag handle spacer — no text content */ }
.est-line-col--qty    { justify-content: center; }
.est-line-col--rate   { justify-content: flex-end; }
.est-line-col--total  { justify-content: flex-end; font-weight: 700; color: var(--gw-text); }
.est-line-col--del    { justify-content: center; }

.est-line-row {
  display: grid; grid-template-columns: var(--est-line-cols);
  gap: 0; align-items: start; border-bottom: 1px solid var(--gw-border);
  padding: 6px 10px; transition: background .1s;
}
.est-line-row:last-child { border-bottom: none; }
.est-line-row:hover { background: var(--gw-bark-25); }

.est-line-drag-handle {
  color: var(--gw-text-muted); cursor: grab; padding: 0 2px; opacity: .4;
  display: flex; align-items: center;
}
.est-line-drag-handle:hover { opacity: .8; }

.est-line-input {
  width: 100%; border: 1px solid transparent; border-radius: 5px; padding: 5px 7px;
  font-size: 13px; background: transparent; color: var(--gw-text);
  font-family: inherit; transition: border-color .15s, background .15s;
}
.est-line-input:focus {
  outline: none; border-color: var(--gw-pine-400); background: var(--gw-surface);
}
.est-line-input--name { font-weight: 600; }
.est-line-input--desc { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; width: 100%; }
.est-line-input--num  { text-align: right; }
/* Desc cell stacks name + description inputs vertically */
.est-line-col--desc { flex-direction: column; align-items: stretch; justify-content: center; }

.est-line-del {
  width: 28px; height: 28px; border-radius: 5px; border: none;
  background: transparent; color: var(--gw-text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .12s;
}
.est-line-row:hover .est-line-del { opacity: 1; }
.est-line-del:hover { background: #fee2e2; color: #dc2626; }

.est-line-empty { padding: 20px; text-align: center; font-size: 13px; color: var(--gw-text-muted); }

.est-add-line-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px dashed var(--gw-border); background: transparent;
  color: var(--gw-action); cursor: pointer; width: 100%; justify-content: center;
  transition: background .15s, border-color .15s;
}
.est-add-line-btn:hover { background: var(--gw-bark-25); border-color: var(--gw-pine-400); }

/* Pricing grid — constrained width so inputs don't stretch absurdly wide */
.est-pricing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(120px, 220px)); gap: 14px;
}
@media (max-width: 600px) { .est-pricing-grid { grid-template-columns: 1fr 1fr; } }

/* Upload zone */
.est-upload-zone {
  border: 2px dashed var(--gw-border); border-radius: 10px; padding: 32px 24px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--gw-text-muted);
}
.est-upload-zone:hover, .est-upload-zone--drag {
  border-color: var(--gw-pine-400); background: rgba(42,110,81,.03);
}
.est-upload-text  { font-size: 14px; font-weight: 500; color: var(--gw-text); }
.est-upload-link  { color: var(--gw-action); font-weight: 600; }
.est-upload-hint  { font-size: 12px; }
.est-attachment-list { margin-top: 12px; }
.est-attachment-gallery--builder { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.est-attachment-card--builder .est-attachment-thumb { height: 72px; }
.est-attachment-card--builder .est-attachment-icon  { height: 72px; }

/* Notes grid */
.est-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .est-notes-grid { grid-template-columns: 1fr; } }

/* Builder footer */
.est-builder-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 16px 22px; background: var(--gw-surface);
  border: 1px solid var(--gw-border); border-radius: 10px;
  position: sticky; bottom: 0; z-index: 50;
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
}
.est-builder-footer-right { display: flex; align-items: center; gap: 8px; }

/* Builder rail */
.est-builder-rail { position: sticky; top: 24px; }
.est-rail-card--sticky { max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }

/* Summary rail */
.est-summary-client { padding-bottom: 10px; border-bottom: 1px solid var(--gw-border); margin-bottom: 10px; }
.est-summary-client-name  { font-size: 14px; font-weight: 700; color: var(--gw-text); }
.est-summary-client-prop  { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; }
.est-summary-client-empty { font-size: 13px; color: var(--gw-text-muted); font-style: italic; }
.est-summary-divider      { height: 1px; background: var(--gw-border); margin: 8px 0; }
.est-summary-row {
  display: flex; justify-content: space-between; font-size: 13.5px;
  padding: 3px 0; color: var(--gw-text-muted);
}
.est-summary-total {
  display: flex; justify-content: space-between; font-size: 17px; font-weight: 800;
  color: var(--gw-text); padding: 8px 0; border-top: 2px solid var(--gw-border);
  margin-top: 6px;
}
.est-summary-deposit {
  margin-top: 10px; padding: 10px 12px; border-radius: 7px;
  background: #d1fae5; border: 1px solid #6ee7b7;
}
.est-summary-deposit-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #065f46; }
.est-summary-deposit-amount { font-size: 18px; font-weight: 800; color: #065f46; }
.est-summary-items-count    { font-size: 12px; color: var(--gw-text-muted); text-align: right; margin-top: 8px; }
.est-builder-rail-actions   { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* Builder loading */
.est-builder-loading { padding: 48px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gw-text-muted); font-size: 14px; }

/* ── Send Modal ────────────────────────────────────────────────────────────── */
.est-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.est-modal-panel {
  background: var(--gw-surface); border-radius: 12px; width: 480px; max-width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.2); overflow: hidden;
}
.est-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--gw-border);
}
.est-modal-title { font-size: 15px; font-weight: 700; color: var(--gw-text); }
.est-modal-close {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: var(--gw-bark-25); color: var(--gw-text-muted); cursor: pointer; font-size: 14px;
}
.est-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.est-modal-field { display: flex; flex-direction: column; gap: 5px; }
.est-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--gw-border); background: var(--gw-bark-25);
}
.est-send-method-row { flex-direction: row; align-items: center; justify-content: space-between; }
.est-toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.est-toggle input { opacity: 0; width: 0; height: 0; }
.est-toggle-track {
  position: absolute; inset: 0; background: var(--gw-border); border-radius: 22px; cursor: pointer; transition: background .2s;
}
.est-toggle input:checked + .est-toggle-track { background: var(--gw-action); }
.est-toggle-track::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s;
}
.est-toggle input:checked + .est-toggle-track::after { left: 19px; }

/* ── Portal Preview ────────────────────────────────────────────────────────── */
.est-portal-overlay {
  position: fixed; inset: 0; z-index: 2000; background: #f8f7f4;
  overflow-y: auto;
}
.est-portal-shell { display: flex; flex-direction: column; min-height: 100%; }

.est-portal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: var(--gw-pine-800, #1C3A2B);
  position: sticky; top: 0; z-index: 10;
}
.est-portal-topbar-left { display: flex; align-items: center; gap: 14px; }
.est-portal-brand { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.est-portal-preview-tag {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.8);
}
.est-portal-close-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 7px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.2);
  cursor: pointer; transition: background .15s;
}
.est-portal-close-btn:hover { background: rgba(255,255,255,.25); }

.est-portal-body { flex: 1; }

.est-portal-content {
  display: grid; grid-template-columns: 1fr 340px; gap: 0; max-width: 1100px;
  margin: 0 auto; padding: 40px 24px;
}
@media (max-width: 860px) { .est-portal-content { grid-template-columns: 1fr; } }

/* Portal doc */
.est-portal-doc { padding-right: 32px; }
@media (max-width: 860px) { .est-portal-doc { padding-right: 0; } }
.est-portal-doc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 20px; border-bottom: 2px solid var(--gw-pine-800, #1C3A2B); margin-bottom: 28px;
}
.est-portal-company-name     { font-size: 22px; font-weight: 900; color: var(--gw-pine-800, #1C3A2B); }
.est-portal-company-logo     { margin-bottom: 4px; }
.est-portal-company-logo img { display: block; }
.est-portal-company-tagline  { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; margin-bottom: 4px; font-style: italic; }
.est-portal-est-meta { font-size: 13px; color: var(--gw-text-muted); margin-top: 4px; display: flex; gap: 8px; }
.est-portal-wave { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 4px; }

.est-portal-greeting  { margin-bottom: 28px; }
.est-portal-greeting h2 { font-size: 22px; font-weight: 800; color: var(--gw-text); margin: 0 0 6px; }
.est-portal-greeting p  { font-size: 14px; color: var(--gw-text-muted); line-height: 1.6; margin: 0; }

.est-portal-property {
  background: var(--gw-bark-25); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px;
  border: 1px solid var(--gw-border);
}
.est-portal-property-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gw-text-muted); margin-bottom: 4px; }
.est-portal-property-addr  { font-size: 14px; font-weight: 600; color: var(--gw-text); }

.est-portal-section { margin-bottom: 28px; }
.est-portal-section-title {
  font-size: 16px; font-weight: 700; color: var(--gw-text); margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gw-border);
}
.est-portal-scope {
  font-size: 14px; line-height: 1.7; color: var(--gw-text);
  white-space: pre-wrap;
}
.est-portal-notes { font-size: 14px; line-height: 1.65; color: var(--gw-text); }
.est-portal-terms { font-size: 13px; line-height: 1.7; color: var(--gw-text-muted); }

/* Portal line table */
.est-portal-line-table { border: 1px solid var(--gw-border); border-radius: 8px; overflow: hidden; }
.est-portal-line-header {
  display: grid; grid-template-columns: 1fr 60px 80px 80px;
  gap: 0; background: var(--gw-bark-25); padding: 10px 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted); border-bottom: 1px solid var(--gw-border);
}
.est-portal-line-row {
  display: grid; grid-template-columns: 1fr 60px 80px 80px;
  gap: 0; padding: 12px 14px; border-bottom: 1px solid var(--gw-border);
  align-items: center;
}
/* Customer-simple table: Item · Qty · Total (no rate column) */
.est-portal-line-table--simple .est-portal-line-header,
.est-portal-line-table--simple .est-portal-line-row {
  grid-template-columns: 1fr 60px 90px;
}
.est-portal-line-row:last-child { border-bottom: none; }
.est-portal-li-name  { font-size: 14px; font-weight: 600; color: var(--gw-text); }
.est-portal-li-desc  { font-size: 12px; color: var(--gw-text-muted); margin-top: 2px; }
.est-portal-li-num   { text-align: right; font-size: 13.5px; color: var(--gw-text-muted); }
.est-portal-li-total { font-weight: 700; color: var(--gw-text); }

.est-portal-attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: 12px; }

/* Portal panel */
.est-portal-panel { position: sticky; top: 80px; align-self: start; }
.est-portal-panel-inner {
  background: var(--gw-surface); border: 1px solid var(--gw-border); border-radius: 12px;
  padding: 20px; box-shadow: 0 4px 24px rgba(0,0,0,.1);
}

.est-portal-totals { margin-bottom: 16px; }
.est-portal-totals-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted); margin-bottom: 10px;
}
.est-portal-totals-row {
  display: flex; justify-content: space-between; font-size: 14px;
  padding: 5px 0; color: var(--gw-text-muted); border-bottom: 1px solid var(--gw-border);
}
.est-portal-totals-grand {
  display: flex; justify-content: space-between; font-size: 22px; font-weight: 900;
  color: var(--gw-text); padding-top: 12px; margin-top: 6px;
}

.est-portal-deposit-callout {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0); border: 1px solid #6ee7b7;
  border-radius: 10px; padding: 14px; margin-bottom: 20px;
}
.est-portal-deposit-icon    { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.est-portal-deposit-title   { font-size: 12px; font-weight: 700; color: #065f46; text-transform: uppercase; letter-spacing: .04em; }
.est-portal-deposit-amount  { font-size: 24px; font-weight: 900; color: #065f46; line-height: 1.1; margin-top: 2px; }
.est-portal-deposit-sub     { font-size: 12px; color: #059669; margin-top: 3px; }

.est-portal-cta-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.est-portal-cta-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 9px; font-size: 15px; font-weight: 700;
  background: var(--gw-action, #2A6E51); color: #fff; border: none; cursor: pointer;
  transition: background .15s;
}
.est-portal-cta-primary:hover { background: var(--gw-pine-600, #1f5640); }
.est-portal-cta-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 600;
  background: var(--gw-bark-25); color: var(--gw-text); border: 1px solid var(--gw-border);
  cursor: pointer; transition: background .15s;
}
.est-portal-cta-secondary:hover { background: var(--gw-bark-50); }
.est-portal-cta-text {
  text-align: center; font-size: 13px; color: var(--gw-text-muted); cursor: pointer;
  background: none; border: none; padding: 6px; text-decoration: underline;
  text-decoration-color: transparent; transition: text-decoration-color .15s;
}
.est-portal-cta-text:hover { text-decoration-color: currentColor; }

.est-portal-expiry {
  display: flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--gw-text-muted); justify-content: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   GROUNDWORK CRM — GLOBAL MOBILE LAYOUT FIXES  @media (max-width: 768px)
   Fixes rp-header collisions, subtitle wrapping, action button overflow,
   table/grid cramping, and content padding across ALL views.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── rp-header: stack title above actions, never side-by-side ─────────── */
  .rp-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  /* Title: smaller on mobile, never truncate */
  .rp-title {
    font-size: 20px !important;
    letter-spacing: -.3px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.2 !important;
  }

  /* Subtitle: stays as ONE flowing line, wraps gracefully */
  .rp-subtitle {
    font-size: 12px !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    color: var(--gw-text-muted) !important;
    margin-top: 2px !important;
  }

  /* Action buttons row: wraps, full-width stretch on very small screens */
  .rp-header-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Individual action buttons: auto-size, don't overflow.
     Sizing deliberately left to the global tap-target rule below — this block
     used to force font-size:12px/padding:7px 10px here, which shrank header
     buttons to roughly 31px tall on exactly the screens where they most need to
     be thumb-sized. */
  .rp-header-actions .rp-btn,
  .rp-header-actions .rp-btn--primary,
  .rp-header-actions button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  /* ── View shell containers: consistent padding ────────────────────────── */
  .wo-list-shell,
  .disp-shell,
  .rp-shell,
  .view-wrap {
    padding: 14px 12px !important;
  }

  /* disp-shell inner header (has its own inline padding:20px 24px) */
  .disp-shell .rp-header {
    padding: 14px 12px 10px !important;
    margin: 0 !important;
  }

  /* ── wo-row table: allow horizontal scroll, keep columns readable ──────── */
  .wo-row {
    display: grid !important;
    grid-template-columns: 90px 1fr auto !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }

  /* Header row inside table: hide less important columns on mobile */
  .wo-row > span:nth-child(3),
  .wo-row > span:nth-child(4) {
    display: none !important;
  }

  /* ── Ops stat grid: 3 across instead of 5 ─────────────────────────────── */
  .ops-stat-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* ── Dispatch board layout: single column stack ───────────────────────── */
  .disp-layout {
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* ── rp-cols / rp-columns: always stack on mobile ─────────────────────── */
  .rp-cols,
  .rp-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .rp-col-main,
  .rp-col-side {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── rp-actions / rp-footer-actions: wrap ─────────────────────────────── */
  .rp-actions,
  .rp-footer-actions,
  .footer-actions,
  .gw-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── Status badge rows: wrap tightly ──────────────────────────────────── */
  .ops-ready-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* ── Stat/KPI grids used in Financial, Ops, Dashboard ─────────────────── */
  .stat-row,
  .kpi-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Section headings with inline actions ─────────────────────────────── */
  .section-head,
  .gw-section-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Record page shell inner padding ──────────────────────────────────── */
  .rp-shell {
    padding: 12px !important;
  }

  /* Ensure record page header has no fixed inline padding overriding ours */
  header.rp-header[style*="padding"] {
    padding: 0 !important;
  }

}
/* ── end mobile layout fixes ─────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SCHEDULE BOARD  — sbm-* classes
   Renders a touch-optimised day-list layout on screens ≤ 768px.
   All rules are scoped so they cannot affect the desktop schedule.
   ══════════════════════════════════════════════════════════════════════════ */

/* Shell */
.sbm-shell {
  background: var(--gw-surface, #fff);
  min-height: 100vh; min-height: 100dvh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.sbm-header {
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EBE8);
  padding: 10px 14px 0;
  position: sticky;
  top: 56px;           /* sit below the topbar */
  z-index: 30;
}

.sbm-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sbm-title-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.sbm-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--gw-ink, #0F1C14);
  margin: 0;
  white-space: nowrap;
}

.sbm-period {
  font-size: 13px;
  font-weight: 600;
  color: var(--gw-ink, #0F1C14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: center;
}

.sbm-nav-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 8px;
  background: var(--gw-surface-2, #F4F7F5);
  color: var(--gw-ink, #0F1C14);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
}
.sbm-nav-btn:active { background: var(--gw-line, #E2EBE8); }

.sbm-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sbm-today-btn {
  padding: 5px 10px;
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 8px;
  background: var(--gw-surface-2, #F4F7F5);
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-ink, #0F1C14);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.sbm-today-btn:active { background: var(--gw-line, #E2EBE8); }

.sbm-new-btn {
  padding: 5px 12px;
  border: none;
  border-radius: 8px;
  background: var(--gw-emerald, #2D7A55);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.sbm-new-btn:active { background: #235f42; }

/* View mode strip */
.sbm-view-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  padding-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sbm-view-strip::-webkit-scrollbar { display: none; }

.sbm-view-btn {
  padding: 5px 12px;
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 20px;
  background: var(--gw-surface-2, #F4F7F5);
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted, #5A7A68);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  touch-action: manipulation;
}
.sbm-view-btn.active {
  background: var(--gw-emerald, #2D7A55);
  border-color: var(--gw-emerald, #2D7A55);
  color: #fff;
}
.sbm-view-btn:active { opacity: 0.8; }

/* ── Stat summary strip ─────────────────────────────────────────────────── */
.sbm-stat-row {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EBE8);
}
.sbm-stat-row::-webkit-scrollbar { display: none; }

.sbm-stat-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--gw-surface-2, #F4F7F5);
  border: 1px solid var(--gw-line, #E2EBE8);
  color: var(--gw-ink, #0F1C14);
  white-space: nowrap;
  flex-shrink: 0;
}
.sbm-stat-pill--blue  { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.sbm-stat-pill--green { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.sbm-stat-pill--muted { color: var(--gw-text-muted, #5A7A68); }

/* ── Crew filter strip ──────────────────────────────────────────────────── */
.sbm-crew-strip {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EBE8);
}
.sbm-crew-strip::-webkit-scrollbar { display: none; }

.sbm-crew-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1.5px solid color-mix(in srgb, var(--cc, #94a3b8) 40%, transparent);
  border-radius: 20px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-text-muted, #5A7A68);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.55;
  touch-action: manipulation;
}
.sbm-crew-chip.active {
  opacity: 1;
  background: color-mix(in srgb, var(--cc, #94a3b8) 12%, transparent);
  color: var(--gw-ink, #0F1C14);
}
.sbm-crew-chip--manage {
  border-style: dashed;
  border-color: var(--gw-line, #E2EBE8);
  opacity: 1;
  color: var(--gw-text-muted, #5A7A68);
}
.sbm-crew-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sbm-crew-cnt {
  background: var(--gw-line, #E2EBE8);
  color: var(--gw-text-muted, #5A7A68);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
}

/* ── Day selector strip ─────────────────────────────────────────────────── */
.sbm-day-strip {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EBE8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: space-between;
}
.sbm-day-strip::-webkit-scrollbar { display: none; }

.sbm-day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  flex: 1;
  min-width: 36px;
  touch-action: manipulation;
}
.sbm-day-chip.is-today .sbm-chip-date {
  background: var(--gw-emerald, #2D7A55);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbm-day-chip.is-selected {
  background: color-mix(in srgb, var(--gw-emerald, #2D7A55) 10%, transparent);
  border-color: var(--gw-emerald, #2D7A55);
}
.sbm-chip-wd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gw-text-muted, #5A7A68);
  letter-spacing: .05em;
}
.sbm-chip-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
  line-height: 1;
}
.sbm-chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gw-emerald, #2D7A55);
}
.sbm-chip-dot--empty { background: transparent; }

/* ── Day header (label + add button) ───────────────────────────────────── */
.sbm-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 6px;
  background: var(--gw-surface, #fff);
}
.sbm-day-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
}
.sbm-add-day-btn {
  padding: 5px 12px;
  border: 1px solid var(--gw-emerald, #2D7A55);
  border-radius: 8px;
  background: transparent;
  color: var(--gw-emerald, #2D7A55);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.sbm-add-day-btn:active { background: var(--gw-emerald, #2D7A55); color: #fff; }

/* ── Day content area ───────────────────────────────────────────────────── */
.sbm-day-content {
  padding: 8px 14px 0;
}

.sbm-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--gw-text-muted, #5A7A68);
  font-size: 13px;
  font-style: italic;
}

/* ── Mobile job cards ───────────────────────────────────────────────────── */
.sbm-job-card {
  background: var(--gw-surface, #fff);
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: box-shadow .12s;
}
.sbm-job-card:active { box-shadow: 0 0 0 2px var(--gw-emerald, #2D7A55); }

.sbm-job-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.sbm-job-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-text-muted, #5A7A68);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sbm-job-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-ink, #0F1C14);
  background: var(--gw-surface-2, #F4F7F5);
  padding: 2px 7px;
  border-radius: 6px;
}
.sbm-job-status {
  margin-left: auto;
  font-size: 10px !important;
  padding: 2px 7px !important;
}
.sbm-job-client {
  font-size: 15px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
  margin-bottom: 5px;
  line-height: 1.2;
}
.sbm-job-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sbm-job-type {
  font-size: 12px;
  color: var(--gw-text-muted, #5A7A68);
}
.sbm-job-dur {
  font-size: 12px;
  color: var(--gw-text-muted, #5A7A68);
  background: var(--gw-surface-2, #F4F7F5);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── Crew lane rows (mobile) ────────────────────────────────────────────── */
.sbm-crew-lane {
  margin-bottom: 12px;
}
.sbm-crew-lane-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--gw-surface-2, #F4F7F5);
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--gw-line, #E2EBE8);
  border-bottom: none;
  margin-bottom: 0;
}
.sbm-crew-lane-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sbm-crew-lane-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
  flex: 1;
}
.sbm-crew-lane-count {
  font-size: 11px;
  color: var(--gw-text-muted, #5A7A68);
}
.sbm-add-lane-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 6px;
  background: var(--gw-surface, #fff);
  color: var(--gw-emerald, #2D7A55);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  touch-action: manipulation;
}
.sbm-lane-empty {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--gw-text-muted, #5A7A68);
  font-style: italic;
  background: var(--gw-surface, #fff);
  border: 1px solid var(--gw-line, #E2EBE8);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.sbm-crew-lane .sbm-job-card {
  border-radius: 0;
  border-top: none;
  margin-bottom: 0;
  border-left-width: 4px;
}
.sbm-crew-lane .sbm-job-card:last-child {
  border-radius: 0 0 8px 8px;
}

/* ── Mobile month view ──────────────────────────────────────────────────── */
.sbm-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--gw-line, #E2EBE8);
  border-bottom: 1px solid var(--gw-line, #E2EBE8);
}
.sbm-month-dow {
  background: var(--gw-surface-2, #F4F7F5);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gw-text-muted, #5A7A68);
  padding: 6px 0;
  letter-spacing: .05em;
}
.sbm-month-blank {
  background: var(--gw-surface-2, #F4F7F5);
  min-height: 40px;
}
.sbm-month-day {
  background: var(--gw-surface, #fff);
  border: none;
  text-align: left;
  padding: 6px 4px 4px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  touch-action: manipulation;
}
.sbm-month-day.is-today .sbm-month-num {
  background: var(--gw-emerald, #2D7A55);
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sbm-month-day.is-selected {
  background: color-mix(in srgb, var(--gw-emerald, #2D7A55) 8%, transparent);
}
.sbm-month-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-ink, #0F1C14);
  line-height: 1;
}
.sbm-month-dot-row {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  align-items: center;
}
.sbm-day-panel {
  padding: 12px 14px 0;
}
.sbm-day-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sbm-day-panel-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
}
/* ── end mobile schedule ────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   gwtd-* — Mobile My Day layout  (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shell -------------------------------------------------------------------- */
.gwtd-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Header ------------------------------------------------------------------- */
.gwtd-header {
  padding: 14px 16px 10px;
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
}
.gwtd-header-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.gwtd-title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.gwtd-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  color: var(--gw-ink, #0F1C14) !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.gwtd-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gw-muted, #5E6E6F);
  text-transform: uppercase;
}
.gwtd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.gwtd-btn {
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.gwtd-btn:active { opacity: .75; }
.gwtd-btn--primary {
  background: var(--gw-pine, #4D8A86);
  color: #fff;
  box-shadow: 0 4px 10px rgba(77,138,134,.25);
}
.gwtd-btn--secondary {
  background: var(--gw-surface, #fff);
  color: var(--gw-pine, #4D8A86);
  border: 1.5px solid var(--gw-line, #E2EAE9);
}

/* Stats grid --------------------------------------------------------------- */
.gwtd-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--gw-surface, #fff);
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
  margin-bottom: 0;
}
.gwtd-stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  gap: 4px;
  cursor: pointer;
  transition: background .15s;
  border-right: 1px solid var(--gw-line, #E2EAE9);
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
  text-align: center;
}
.gwtd-stat-cell:nth-child(2),
.gwtd-stat-cell:nth-child(4) { border-right: 0; }
.gwtd-stat-cell:nth-child(3),
.gwtd-stat-cell:nth-child(4) { border-bottom: 0; }
.gwtd-stat-cell:active { background: var(--gw-bg2, #F5F8F7); }
.gwtd-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gw-muted, #5E6E6F);
}
.gwtd-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--gw-ink, #0F1C14);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.gwtd-stat-val--money { font-size: 18px; color: var(--gw-pine, #4D8A86); }
.gwtd-stat-val--won   { font-size: 16px; color: #2D7A55; }
.gwtd-stat-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: #2D7A55;
}

/* Sections ----------------------------------------------------------------- */
.gwtd-section {
  padding: 14px 14px 0;
}
.gwtd-section + .gwtd-section { padding-top: 10px; }

.gwtd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gwtd-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--gw-ink, #0F1C14);
  text-transform: uppercase;
}
.gwtd-link-btn {
  background: none;
  border: none;
  color: var(--gw-pine, #4D8A86);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

/* Collapsible checklist ---------------------------------------------------- */
.gwtd-collapsible {
  background: var(--gw-surface, #fff);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 14px;
  overflow: hidden;
}
.gwtd-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--gw-ink, #0F1C14);
  text-align: left;
  gap: 8px;
}
.gwtd-chevron {
  flex-shrink: 0;
  color: var(--gw-muted, #5E6E6F);
  transition: transform .2s;
}
.gwtd-collapsible.gwtd-collapsed .gwtd-chevron {
  transform: rotate(-90deg);
}
.gwtd-collapse-body {
  padding: 0 16px 12px;
  border-top: 1px solid var(--gw-line, #E2EAE9);
  overflow: hidden;
  transition: max-height .25s ease;
}
.gwtd-collapsible.gwtd-collapsed .gwtd-collapse-body {
  display: none;
}

/* Recent leads list -------------------------------------------------------- */
.gwtd-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--gw-surface, #fff);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 14px;
  overflow: hidden;
}
.gwtd-recent-list .mini-row {
  border-radius: 0;
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
  padding: 11px 14px;
}
.gwtd-recent-list .mini-row:last-child { border-bottom: 0; }

/* Financial Pulse overrides for mobile ------------------------------------ */
.gwtd-section .gw-today-fin-card {
  border-radius: 14px;
  padding: 14px;
  margin: 0;
}
.gwtd-section .gw-today-fin-kpis {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gwtd-section .gw-today-fin-kpi-val {
  font-size: 17px;
}

/* Task section overrides for mobile --------------------------------------- */
.gwtd-section .app-card {
  border-radius: 14px;
  padding: 14px;
  margin: 0;
}
.gwtd-section section.app-card h2 {
  font-size: 15px !important;
  margin-bottom: 0 !important;
}

/* Bottom padding so content clears the nav bar ---------------------------- */
.gwtd-shell {
  padding-bottom: 80px;
}

/* ── end mobile My Day ── */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE PIPELINE  — gw-pipe-* classes
   Replaces kanban with a grouped vertical list on screens ≤ 768px.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-pipe-mobile {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 80px;
}

.gw-pipe-group {
  margin-bottom: 16px;
}

.gw-pipe-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #F3F4F6;
  border-radius: 10px 10px 0 0;
  border-bottom: 1.5px solid #E5E7EB;
}

.gw-pipe-group-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gw-pipe-group-count {
  background: #fff;
  border: 1.5px solid #D1D5DB;
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
}

.gw-pipe-card {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-top: none;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.gw-pipe-card:last-child {
  border-radius: 0 0 10px 10px;
}
.gw-pipe-card:active {
  background: #F9FAFB;
}

.gw-pipe-card--overdue {
  border-left: 3px solid #EF4444;
}
.gw-pipe-card--stale {
  border-left: 3px solid #F59E0B;
}

.gw-pipe-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.gw-pipe-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-pipe-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.gw-pipe-badge--overdue {
  background: #FEF2F2;
  color: #DC2626;
}
.gw-pipe-badge--stale {
  background: #FFFBEB;
  color: #B45309;
}

.gw-pipe-card-project {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-pipe-card-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gw-pipe-card-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-pine, #4D8A86);
  flex: 1;
}

.gw-pipe-card-date {
  font-size: 11px;
  color: #9CA3AF;
}

.gw-pipe-card-rep {
  font-size: 11px;
  color: #9CA3AF;
  background: #F3F4F6;
  border-radius: 20px;
  padding: 2px 7px;
}

.gw-pipe-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9CA3AF;
  font-size: 14px;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE CLIENTS  — gw-cl-* classes
   Replaces 7-column table with a vertical card list on screens ≤ 768px.
   ══════════════════════════════════════════════════════════════════════════ */

.gw-cl-mobile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 80px;
}

.gw-cl-card {
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.gw-cl-card:active {
  background: #F9FAFB;
}

.gw-cl-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.gw-cl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gw-pine, #4D8A86);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.gw-cl-card-info {
  flex: 1;
  min-width: 0;
}

.gw-cl-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-cl-card-addr {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gw-cl-opp-pill {
  background: #EEF7F6;
  color: var(--gw-pine, #4D8A86);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.gw-cl-count {
  display: inline-block;
  background: #EEF7F6;
  color: var(--gw-pine, #4D8A86);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.gw-cl-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.gw-cl-phone,
.gw-cl-email {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6B7280;
  background: #F3F4F6;
  border-radius: 20px;
  padding: 3px 9px;
  text-decoration: none;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE FINANCIAL HUB  — fhub-mobile-* classes
   Compact rows + quick-link buttons on screens ≤ 768px.
   ══════════════════════════════════════════════════════════════════════════ */

/* KPI row: 2-up on mobile (was 4 across) */
@media (max-width: 768px) {
  .fhub-kpi-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .fhub-quick-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}

.fhub-mobile-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 16px;
}

.fhub-mobile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fhub-mobile-see-all {
  background: none;
  border: none;
  color: var(--gw-pine, #4D8A86);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fhub-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.fhub-mobile-row:active {
  background: #F9FAFB;
}

.fhub-mobile-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

.fhub-mobile-row-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-pine, #4D8A86);
  white-space: nowrap;
  flex-shrink: 0;
}

.fhub-mobile-empty {
  text-align: center;
  padding: 18px 14px;
  color: #9CA3AF;
  font-size: 13px;
  background: #F9FAFB;
  border-radius: 10px;
  margin-bottom: 6px;
}

.fhub-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.fhub-mobile-link-btn {
  display: block;
  width: 100%;
  padding: 13px 18px;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s;
}
.fhub-mobile-link-btn:active {
  background: #F3F4F6;
  border-color: var(--gw-pine, #4D8A86);
}

/* ── end mobile pipeline / clients / financial hub ── */

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE ESTIMATES LIST  — responsive overrides ≤ 768px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .est-list-shell {
    padding: 0 0 80px !important;
  }
  .est-list-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px 14px 10px !important;
  }
  .est-list-header-right {
    width: 100% !important;
  }
  .est-btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
  /* KPI row already goes 2-col at 680px via existing rule */
  .est-filter-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 14px !important;
  }
  .est-search-wrap {
    width: 100% !important;
  }
  .est-filter-select {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .est-filter-chips {
    width: 100% !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Table: scroll horizontally — keeps all data without JS rewrite */
  .est-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .est-table {
    min-width: 640px !important;
  }
  /* Hide low-priority columns to reduce min-width */
  .est-table thead th:nth-child(7),
  .est-table-row td:nth-child(7) {
    display: none !important; /* Updated column */
  }
  /* Engagement column narrower */
  .est-table thead th:nth-child(6),
  .est-table-row td:nth-child(6) {
    display: none !important;
  }
  /* Drawer push doesn't apply on mobile */
  .est-list-shell:has(#est-preview-drawer[style*="flex"]) .est-table-wrap {
    margin-right: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE INVENTORY LIST  — invt-row responsive stacking ≤ 768px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Hide the header row (it's a div, not thead) */
  .invt-row:first-child {
    display: none !important;
  }
  .invt-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px 8px !important;
    padding: 12px 14px !important;
  }
  /* Row 1: name + status badge */
  .invt-name { grid-column: 1; grid-row: 1; }
  /* Category under name */
  .invt-cat  { grid-column: 1; grid-row: 2; }
  /* Stock bar + reorder label */
  .invt-bar-wrap { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; gap: 8px; }
  /* Qty cell — top right */
  .invt-qty  { grid-column: 2; grid-row: 1; text-align: right; }
  /* Status badge — right of category */
  .invt-row > span:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; }
  /* Vendor — hidden on mobile to save space */
  .invt-vendor { display: none !important; }
  /* Actions — full width row at bottom */
  .invt-row .wo-actions { grid-column: 1 / -1; grid-row: 4; display: flex; gap: 8px; margin-top: 4px; }
  /* Bar itself needs to be visible */
  .invt-bar {
    height: 6px !important;
    flex: 1 !important;
    min-width: 80px !important;
    background: #E5E7EB !important;
    border-radius: 99px !important;
    overflow: hidden !important;
  }
  .invt-bar-fill {
    height: 100% !important;
    border-radius: 99px !important;
  }
  .invt-bar-fill--ok         { background: var(--gw-pine, #4D8A86) !important; }
  .invt-bar-fill--low-stock  { background: #F59E0B !important; }
  .invt-bar-fill--out-of-stock { background: #EF4444 !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TOOLS & CONSUMABLES  — tc-mobile-* card classes
   ══════════════════════════════════════════════════════════════════════════ */
.tc-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 80px;
}
.tc-mobile-card {
  background: var(--gw-card, #fff);
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 14px;
}
.tc-mobile-card--low {
  border-left: 3px solid #F59E0B;
}
.tc-mc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.tc-mc-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  flex: 1;
  min-width: 0;
}
.tc-mc-low-badge {
  font-size: 10px;
  font-weight: 800;
  color: #8B6914;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 6px;
}
.tc-mc-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.tc-mc-qty {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
.tc-mc-qty-label {
  font-size: 11px;
  color: #9CA3AF;
  margin-left: 2px;
}
.tc-mc-reorder {
  font-size: 11px;
  color: #9CA3AF;
}
.tc-mc-vendor {
  font-size: 11px;
  color: #9CA3AF;
  background: #F3F4F6;
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: auto;
}
.tc-mc-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}
.tc-mc-actions button {
  flex: 1;
  padding: 6px 0;
  border-radius: 8px;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tc-mc-actions button:active { background: #F9FAFB; }

/* ── Section 34b: Pipeline + Financial Data Hub — mobile tightening ─────────
   Targets ≤ 768px. Fixes:
     1. Pipeline: header gap, filter dividers, Division overflow, stat cards 2×2
     2. Financial Data Hub: tab pills stretch, banner tighter, lede shorter
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 1a. Pipeline page header: tight gap, close to filter card ───────────── */
  .pl-page-header {
    margin-bottom: 6px !important;
    gap: 6px !important;
  }
  /* h1 inside pl-page-title: override the global 12px margin */
  .pl-page-title .pl-title {
    margin: 0 !important;
  }
  .pl-title {
    font-size: 22px !important;
  }

  /* Action buttons: compact, equal-width row */
  .pl-page-actions {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .pl-page-actions .primary-btn.small,
  .pl-page-actions .secondary-btn.small {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    padding: 7px 6px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  /* ── 1b. Toolbar: column layout, no internal padding waste ───────────────── */
  .pl-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 2px 0 !important;      /* strip top/bottom card padding */
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Vertical dividers become invisible on mobile — rows are separated by
     border-bottom on each filter-group instead */
  .pl-filter-divider {
    display: none !important;
  }

  .pl-filter-group {
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;          /* Firefox */
    gap: 3px !important;
    padding: 5px 10px !important;
    border-bottom: 1px solid var(--line) !important;
    margin: 0 !important;
  }
  .pl-filter-group:last-of-type {
    border-bottom: none !important;
    padding-bottom: 5px !important;
  }
  .pl-filter-group::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .pl-filter-label {
    flex-shrink: 0 !important;     /* label never shrinks */
    font-size: 10px !important;
    margin-right: 4px !important;
    min-width: 46px !important;    /* consistent label column */
  }
  .pl-filter-btn {
    flex-shrink: 0 !important;     /* buttons never wrap, scroll instead */
    font-size: 12px !important;
    padding: 5px 9px !important;
  }

  /* ── 1c. Stat cards: 2×2 grid — never single-column stack ─────────────── */
  .stat-grid.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }
  /* Stat card itself: compact */
  .stat-grid .stat {
    padding: 12px 14px !important;
  }
  .stat-grid .stat span {
    font-size: 10px !important;
  }
  .stat-grid .stat strong {
    font-size: 26px !important;
    letter-spacing: -.04em !important;
  }

  /* ── 2a. Financial Data Hub: tighten h1 + lede on revenueAdmin page ─────── */
  /* (The .view h1 / .view .lede rules in Section 34 already apply here too) */

  /* ── 2b. KPI banner: tighter padding + smaller values ───────────────────── */
  .gw-rev-banner {
    padding: 12px 10px !important;
    margin-bottom: 12px !important;
  }
  .gw-rev-banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gw-rev-banner-cell {
    padding: 4px 2px !important;
  }
  /* The banner reuses .gw-kpi-banner-val — already handled in Section 34 */

  /* ── 2c. Tab nav pills: stretch to fill full width evenly ───────────────── */
  .gw-tab-nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
  }
  .gw-tab-pill {
    text-align: center !important;
    padding: 9px 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* ── 2d. Back button on revenueAdmin — full width, compact ─────────────── */
  .view > .secondary-btn:first-child {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

}

/* ── gw-settings-sync-btns: base rule (all viewports) ──────────────────────── */
.gw-settings-sync-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Section 34c: Settings page — complete mobile overhaul (b010) ────────────
   Goals:
   1. Zero dead space — eyebrow/h1/lede collapse to a tight 3-line header
   2. Cards are compact — no internal breathing room waste on phone screens
   3. Admin panels hidden behind a tap-to-expand accordion row
   4. All buttons full-width stacked
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 1. Page header: nuke ALL vertical gaps ───────────────────────────────── */
  .view > .eyebrow,
  .view .eyebrow {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .view .eyebrow + h1,
  .view h1:first-of-type,
  .view h1 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
  }
  .view p.lede,
  .view .lede {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    margin-bottom: 10px !important;
    max-width: 100% !important;
  }

  /* ── 2. Cards: tighter, no wasted vertical space ─────────────────────────── */
  .card {
    padding: 12px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }
  .card h2 {
    font-size: 14px !important;
    margin: 0 0 4px !important;
  }
  .card p {
    font-size: 12px !important;
    margin: 0 0 10px !important;
    line-height: 1.4 !important;
  }

  /* ── 3. grid-2: always single column on phones ────────────────────────────── */
  .grid.grid-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }

  /* ── 4. Export / Import buttons: full-width stacked ──────────────────────── */
  .footer-actions {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .footer-actions .primary-btn,
  .footer-actions .secondary-btn {
    width: 100% !important;
    text-align: center !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }

  /* ── 5. Cloud sync card ───────────────────────────────────────────────────── */
  .gw-settings-sync-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-top: 8px !important;
  }
  .gw-settings-sync-btns .primary-btn,
  .gw-settings-sync-btns .secondary-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── 6. Admin / commission tools section ─────────────────────────────────── */
  .gw-comm-tools {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .gw-comm-tools > button,
  .gw-comm-tools .secondary-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .gw-comm-tools div[style*="flex-wrap"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gw-admin-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* ── 7. Admin accordion panels: collapsed by default on mobile ───────────── */
  .gw-mobile-accordion {
    border: 1px solid var(--gw-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--gw-surface);
  }
  .gw-mobile-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--gw-ink);
    background: var(--gw-surface-2);
    gap: 8px;
  }
  .gw-mobile-accordion-header:active {
    background: var(--gw-line);
  }
  .gw-mobile-accordion-chevron {
    font-size: 10px;
    color: var(--gw-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .gw-mobile-accordion-chevron.open {
    transform: rotate(180deg);
  }
  .gw-mobile-accordion-body {
    display: none;
    padding: 12px;
    overflow-x: auto;
  }
  .gw-mobile-accordion-body.open {
    display: block;
  }

  /* ── 8. Commission panel tables: scroll horizontally, don't overflow ──────── */
  .gw-comm-panel {
    padding: 0 !important;
  }
  .gw-comm-panel table {
    font-size: 11px !important;
    min-width: 280px;
  }
  .gw-comm-panel .gw-input-sm {
    width: 44px !important;
    font-size: 11px !important;
    padding: 3px 4px !important;
  }

  /* ── 9. File input ───────────────────────────────────────────────────────── */
  input[type="file"] {
    width: 100% !important;
    font-size: 13px !important;
  }

  /* ── 10. mt / mt8 utility classes: tighten on mobile ─────────────────────── */
  .mt8 { margin-top: 6px !important; }

}

/* ── Section 34d: Multi-page mobile fixes (b008 → b011) ──────────────────────
   Covers: User Mgmt (full card redesign), Dispatch Board, Academy banner,
   Invoice detail, Clients toolbar, Add Lead form, Pipeline gap.
   All rules target ≤768px unless noted.
   ────────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   BASE (all viewports) — new um-* semantic classes for user management cards
   ════════════════════════════════════════════════════════════════════════════ */

/* Tab nav base */
.um-tab-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
  background: var(--gw-surface-2);
  color: var(--gw-muted);
  border: 1.5px solid var(--gw-line);
  white-space: nowrap;
}
.um-tab-btn.um-tab-active {
  background: #4D8A86;
  color: #fff;
  border-color: #4D8A86;
}

/* ── User card — base (all viewports) ── */
.gw-um-user-row {
  background: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.gw-um-user-row.um-row-pending {
  opacity: 0.88;
  border-color: #8B691430;
}

/* Section 1: identity row — avatar + name/meta/badges + desktop actions */
.um-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
.um-card-body {
  flex: 1;
  min-width: 0; /* allow text truncation */
}
.um-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.um-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--gw-ink);
  white-space: nowrap;
}
.um-invite-badge {
  font-size: 10px;
  font-weight: 700;
  color: #8B6914;
  background: #8B691418;
  border: 1px solid rgba(139,105,20,.35);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Pill row sits on name-line, pushed right naturally via flex-wrap */
.um-pills-inline {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.um-card-meta {
  font-size: 12px;
  color: var(--gw-muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.um-meta-dot { opacity: 0.5; margin: 0 1px; flex-shrink: 0; }
.um-meta-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Pill styles */
.um-role-pill {
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
}
.um-status-pill {
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.um-status-pending {
  color: #8B6914;
  background: #8B691418;
  border: 1px solid rgba(139,105,20,.25);
}
.um-status-reset {
  color: #8B6914;
  background: #8B691418;
  border: 1px solid rgba(139,105,20,.25);
}

/* Desktop action buttons — shown on desktop, hidden on mobile */
.um-card-actions-desktop {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Mobile action strip — hidden on desktop, shown on mobile */
.um-card-actions-mobile {
  display: none;
}

.um-action-btn {
  font-size: 12px !important;
  padding: 6px 11px !important;
  white-space: nowrap;
}
.um-action-invite { color: #8B6914 !important; border-color: #8B691440 !important; }
.um-action-onboard { color: #4D8A86 !important; border-color: #4D8A8640 !important; }

/* Bottom strip */
.um-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-top: 1px solid var(--gw-line);
  background: var(--gw-surface);
  flex-wrap: wrap;
}
.um-strip-pending { background: #8B691408; border-top-color: #8B691420; }
.um-strip-google-on { background: #2D7A5508; }
.um-strip-label { font-size: 11px; font-weight: 600; color: var(--gw-muted); }
.um-strip-pending .um-strip-label { color: #8B6914; }
.um-strip-email {
  font-size: 11px;
  color: var(--gw-muted);
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}
.um-strip-hint { font-size: 11px; color: var(--gw-muted); margin-left: auto; }
.um-google-badges { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.um-gbadge {
  font-size: 10px;
  color: #2D7A55;
  background: #2D7A5515;
  border: 1px solid #2D7A5530;
  border-radius: 4px;
  padding: 1px 6px;
}
.um-disconnect-btn {
  font-size: 10px;
  font-weight: 700;
  color: #C97B6A;
  background: #C97B6A15;
  border: 1px solid #C97B6A40;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  margin-left: 2px;
}

/* Lede override for UM page */
.um-lede { margin-bottom: 14px !important; }

/* ────────────────────────────────────────────────────────────────────────────
   1. USER MANAGEMENT — mobile overrides ≤768px
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Header: zero dead space */
  .um-lede {
    font-size: 12px !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
  }

  /* Tab nav: 3-col top row, 2-col bottom row via auto-fit */
  .gw-um-tab-nav {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  /* 4th and 5th tabs span naturally into second row */
  .um-tab-btn {
    padding: 8px 6px !important;
    font-size: 11.5px !important;
    text-align: center !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Card top: compact padding */
  .um-card-top {
    padding: 11px 12px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .um-name { font-size: 14px !important; }

  /* Name line: allow wrapping so invite badge stays readable */
  .um-name-line {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  /* Pills row: wrap onto next line if needed */
  .um-pills-inline {
    gap: 4px !important;
  }

  /* Meta: truncate nicely, no word-wrap */
  .um-card-meta {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  /* Desktop actions: hide on mobile */
  .um-card-actions-desktop {
    display: none !important;
  }

  /* Mobile action strip: show as full-width flex row */
  .um-card-actions-mobile {
    display: flex !important;
    gap: 6px !important;
    padding: 0 12px 11px !important;
  }
  .um-card-actions-mobile .um-action-btn {
    flex: 1 1 0 !important;
    text-align: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 7px 4px !important;
  }

  /* Strip: clamp email so it doesn't overflow */
  .um-strip {
    padding: 6px 12px !important;
    gap: 6px !important;
  }
  .um-strip-email {
    max-width: 120px !important;
    font-size: 10px !important;
  }
  .um-strip-hint { display: none !important; } /* hide long hint on mobile */
  .um-google-badges { flex-wrap: wrap !important; gap: 4px !important; }

  /* Team header row: stack count + buttons */
  #um-tab-content > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  #um-tab-content > div:first-child > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  #um-tab-content > div:first-child > div:last-child > button {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   2. DISPATCH BOARD — kill the ~180px empty-state dead space in Crews card
   Problem: rp-empty-state inside disp-crew-panel has no min-height/padding,
   the panel itself stretches due to flex/grid inherited sizing.
   Fix: compact the crew panel, remove min-height, tighten empty state
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .disp-shell {
    padding: 0 12px 24px !important;
  }

  /* Stack crew + feed panels vertically (already done in existing rule at 11843,
     but enforce here for specificity) */
  .disp-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* Crew panel wrapper: no artificially tall min-height */
  .disp-crew-panel {
    min-height: 0 !important;
  }

  /* Empty-state inside dispatch: compact, no padding bloat */
  .disp-crew-panel .rp-empty-state,
  .disp-layout .rp-empty-state {
    padding: 20px 16px !important;
    text-align: center !important;
  }
  .disp-crew-panel .rp-empty-state p {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  /* Activity feed: compact header, no extr !important;
  }
  .disp-panel-head {
    font-size: 10px !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }

  /* No-activity italic text: compact */
  .disp-feed-panel > p {
    font-size: 12px !important;
    padding: 8px 0 !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   3. ACADEMY (Sales Training) — banner title wraps, stat-row cramped
   Problem: acad-banner-title at 1.75rem wraps to 3 lines on mobile,
   acad-banner-right (level badge + buttons) runs out of room.
   Fix: tighten title, stack banner-row vertically, make stat pills flex-wrap
   Note: ACAD_STYLES is injected as a <style> tag in the DOM — our media rules
   in premium.css will override it since they're appended later in the cascade.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Main banner card: tighter padding */
  .acad-banner {
    padding: 16px 16px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }

  /* Banner row: stack left+right vertically */
  .acad-banner-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Left column: shrink title font */
  .acad-banner-title {
    font-size: 1.3rem !important;
    margin-bottom: 4px !important;
    line-height: 1.15 !important;
  }
  .acad-banner-sub {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
  }

  /* Right column (level badge + button): row on mobile */
  .acad-banner-right {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .acad-level-badge {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }

  /* Stat row: pills wrap evenly, remove side padding compression */
  .acad-stat-row {
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
  .acad-stat-pill {
    flex: 1 1 30% !important;     /* ~3 per row then 2 */
    min-width: 60px !important;
    padding: 8px 6px !important;
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .acad-stat-pill:last-child {
    border-right: none !important;
  }
  .acad-stat-pill-num {
    font-size: 1.25rem !important;
  }
  .acad-stat-pill-label {
    font-size: 0.6rem !important;
  }

  /* Level progress bar: tighter */
  .acad-level-progress {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }

  /* Continue card: compact */
  .acad-continue-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   4. INVOICE DETAIL — parties grid collapses, line-table scrollable
   Problem: inv-parties-grid is 2-col (equal) — Bill To and From cards
   have mismatched heights. Line-items table columns are cramped.
   Fix: stack parties to 1-col, allow line-table horizontal scroll
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Bill To / From: single column */
  .inv-parties-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Invoice body: tighter side padding */
  .inv-body {
    padding: 14px 12px !important;
  }

  /* Line items table: allow horizontal scroll on narrow phones */
  .inv-line-table {
    font-size: 12px !important;
  }
  .inv-line-table th,
  .inv-line-table td {
    padding: 7px 6px !important;
  }
  /* QTY column: narrower */
  .inv-line-table th:nth-child(2),
  .inv-line-table td:nth-child(2) {
    width: 36px !important;
  }
  /* Price + Total columns: narrower */
  .inv-line-table th:nth-child(3),
  .inv-line-table td:nth-child(3),
  .inv-line-table th:nth-child(4),
  .inv-line-table td:nth-child(4) {
    width: 80px !important;
    font-size: 11px !important;
  }

  /* Totals block: full width on mobile */
  .inv-totals-col {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    border-top: 1px solid var(--gw-border) !important;
    padding-top: 10px !important;
  }

  /* Invoice header band */
  .inv-header-band {
    padding: 12px 12px 10px !important;
  }
  .inv-title {
    font-size: 17px !important;
    margin-bottom: 4px !important;
  }
  .inv-meta-row {
    gap: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   5. CLIENTS & PROPERTIES — filter pills overflow, large dead gap
   Problem: TYPE filter has HOA/Vendor cut off. Large blank space below filter
   card. STATUS row also benefits from scroll.
   The toolbar already uses .pl-toolbar structure — our Section 34b rules
   (hide .pl-filter-divider, scroll each .pl-filter-group) apply here too,
   but the search row inside the toolbar needs special treatment.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Search wrap: full width inside toolbar column layout */
  .cl-search-wrap {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }
  .cl-search-input {
    font-size: 14px !important;
    padding: 9px 10px 9px 32px !important;
  }

  /* Mobile client card list: tighter spacing */
  .gw-cl-mobile {
    gap: 8px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   6. ADD LEAD FORM — hero eyebrow+title gap, input placeholder clipping
   Problem: lf-hero uses display:flex align-items:baseline creating a large
   gap between "NEW OPPORTUNITY" eyebrow and "Add Lead" h1.
   The input has overflow:hidden clipping placeholder text.
   Fix: tighten hero layout, fix placeholder visibility
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Lead form hero: stack eyebrow above title */
  .lf-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
  }
  .lf-hero-title {
    font-size: 26px !important;
    font-weight: 900 !important;
  }

  /* Section cards: full-width, tighter padding */
  .lf-section {
    padding: 14px 14px !important;
    border-radius: 12px !important;
  }

  /* Client name input: ensure placeholder shows fully */
  .lf-client-search-wrap input,
  .lf-field input[type="text"],
  .lf-field input[type="tel"],
  .lf-field input[type="email"] {
    font-size: 14px !important;
  }
}

/* ── Section 34a: Financial Snapshot — responsive grid classes ─────────────
   These replace hardcoded inline grid-template-columns on the snapshot page.
   Desktop: 4-col KPI rows, 4-col budget row, 2-col panel row.
   Mobile (≤768px): collapses to 2-col KPIs, 2-col budget, 1-col panels.
   ────────────────────────────────────────────────────────────────────────── */
.fr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.fr-budget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.fr-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.fr-kpi-card {
  background: var(--gw-card, #fff);
  border: 1px solid var(--gw-line, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
}
.fr-kpi-card-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 5px;
}
.fr-kpi-card-val {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}
.fr-kpi-card-val--sm {
  font-size: 20px; /* secondary row — slightly smaller */
}
.fr-kpi-card-sub {
  font-size: 11px;
  color: var(--gw-muted);
  margin-top: 3px;
}

@media (max-width: 768px) {
  /* KPI rows: 2-column on phone */
  .fr-kpi-grid,
  .fr-budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }
  /* Panel grid: single column */
  .fr-panel-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* KPI card: tighter padding, smaller value font */
  .fr-kpi-card {
    padding: 10px 12px;
  }
  .fr-kpi-card-val {
    font-size: 18px !important;
  }
  .fr-kpi-card-val--sm {
    font-size: 16px !important;
  }
  /* rp-shell: remove extra inline padding override */
  .rp-shell[style] {
    padding: 14px 12px 32px !important;
  }
  /* Budget vs actual inner budget grid */
  .fr-budget-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* Budget table: allow horizontal scroll */
  .fr-budget-table-wrap {
    overflow-x: auto;
  }
  /* Invoices/Payments side panels: hide tables, show as stacked cards */
  .fr-panel-table {
    font-size: 11px;
  }
  .fr-panel-table th,
  .fr-panel-table td {
    padding: 6px 8px !important;
  }
}

/* ── Section 34: Manager Tools — mobile-specific overrides ─────────────────
   Targets viewports ≤ 768 px (phones). Keeps desktop layout untouched.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Page header: tighten eyebrow + h1 + lede ─────────────────────────── */
  .view .eyebrow {
    margin-bottom: 4px;
    font-size: 10px;
  }
  /* h1 inside .view: tighten the clamp so it doesn't eat half the screen */
  .view h1 {
    font-size: clamp(22px, 7vw, 32px);
    margin: 6px 0 6px;
    letter-spacing: -.04em;
  }
  /* Lede: shorter on mobile — drop to body-size text */
  .view .lede {
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 8px;
  }

  /* ── KPI Banner: compact 2-column grid with smaller figures ───────────── */
  .gw-kpi-banner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 10px;
    margin-bottom: 16px;
  }
  .gw-kpi-banner-cell {
    padding: 4px 2px;
  }
  .gw-kpi-banner-label {
    font-size: 9px;
    letter-spacing: .05em;
    margin-bottom: 1px;
  }
  .gw-kpi-banner-val {
    font-size: 1.15rem !important; /* override any inline font-size too */
    line-height: 1.15;
  }
  .gw-kpi-banner-sub {
    font-size: 9px;
    margin-top: 1px;
  }

  /* ── Division P&L section header row: stack button below heading ───────── */
  .view div[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
  }

  /* ── Division tiles (grid-3): already collapses to 1-col at 920px,
     but ensure gap is tight on phone ──────────────────────────────────────── */
  .grid.grid-3.mt {
    gap: 10px;
    margin-top: 10px;
  }
  .gw-div-tile {
    padding: 14px;
  }

  /* ── General card padding: breathe less on phone ─────────────────────── */
  .card {
    padding: 14px;
  }
  .card h2 {
    font-size: 15px;
    margin-bottom: 8px;
  }

  /* ── mt spacing: halve the top margin on mobile ─────────────────────── */
  .mt { margin-top: 12px; }

}

/* ── end mobile estimates / inventory / tools ── */

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 38 — Pipeline Full-Width Layout + Drag & Drop (July 2026)
   1) Pipeline view uses the entire screen width (no 1320px cap / side gutters)
   2) Kanban columns are FLUID: they grow to fill wide monitors, with a sane
      minimum so cards never squish; horizontal scroll only when truly needed
   3) Drag & drop visual states for moving leads between stages
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Full-width view when the pipeline board is on screen ── */
.view:has(.kanban),
.view.gw-view--full {
  max-width: none !important;
  width: 100% !important;
}

/* ── 2. Compact fluid columns: min 224px so many stages fit on one screen ── */
.kanban {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  align-items: flex-start !important;
  overflow-x: auto !important;
  padding-bottom: 10px !important;
  scroll-behavior: smooth;
}
.kanban-col {
  /* Thin columns: fluid share of the row, floor at 224px */
  flex: 1 1 224px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 224px !important;
  padding: 10px !important;
}
/* Tighter column headers so narrow columns don't wrap awkwardly */
.kanban-col > h3 {
  font-size: 11px !important;
  letter-spacing: .02em !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}
/* Compact lead cards inside the board */
.kanban .opp-card {
  padding: 10px !important;
  gap: 6px !important;
}
.kanban .opp-card h3 { font-size: 12px !important; }
.kanban .opp-project { font-size: 11px !important; margin-bottom: 5px !important; }
.kanban .opp-meta { gap: 5px !important; font-size: 11px !important; }
.kanban .badge, .kanban .status-chip { font-size: 10px !important; padding: 3px 7px !important; }
.kanban .opp-rep-pill { font-size: 10px !important; padding: 2px 7px !important; }
.kanban .urgency-badge { font-size: 9px !important; }

/* ── 2b. "More stages →" scroll indicator ── */
/* Wrapper so the fade + arrow can overlay the board's right edge */
.gw-kanban-wrap { position: relative; }
.gw-scroll-more {
  position: absolute;
  top: 0; right: 0; bottom: 10px;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding-right: 4px;
  background: linear-gradient(90deg, transparent, var(--gw-bg, #F4FAFD) 78%);
  pointer-events: none;          /* let clicks pass through the fade */
  z-index: 5;
  opacity: 1;
  transition: opacity .25s;
}
.gw-scroll-more.gw-scroll-more--hidden { opacity: 0; }
.gw-scroll-more-btn {
  pointer-events: auto;          /* the button itself IS clickable */
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--gw-ink, #113931);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17,57,49,.30);
  animation: gw-scroll-nudge 2.2s ease-in-out infinite;
}
.gw-scroll-more-btn:hover { background: var(--gw-action, #2D7A55); }
@keyframes gw-scroll-nudge {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(5px); }
}

/* ── 3. Drag & drop states ── */
.opp-card[draggable="true"] { cursor: grab; }
.opp-card.gw-dragging {
  opacity: .45;
  transform: rotate(1.5deg) scale(.98);
  cursor: grabbing;
  box-shadow: 0 12px 30px rgba(31,42,43,.18) !important;
}
.kanban-col.gw-drop-target {
  outline: 2px dashed var(--gw-action, #2D7A55);
  outline-offset: -2px;
  background: rgba(45,122,85,.06) !important;
  transition: background .12s;
}
.kanban-col.gw-drop-target > h3 { color: var(--gw-action, #2D7A55) !important; }
/* Drop hint shown inside the hovered column */
.gw-drop-hint {
  border: 2px dashed rgba(45,122,85,.45);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-action, #2D7A55);
  text-align: center;
  background: rgba(45,122,85,.05);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 39 — MY DAY CUSTOMIZABLE WIDGETS + GLOBAL FLUID LAYOUT
   1) .view max-width caps removed at source (fluid pages, side padding = border)
   2) My Day widget grid: 6-col span system, customize mode, drag reorder
══════════════════════════════════════════════════════════════════════════════ */

/* ── My Day widget grid — PACKED MASONRY ──
   grid-auto-rows: 4px gives fine-grained rows; JS measures each widget's
   content and sets grid-row span so every widget occupies exactly the rows
   it needs. grid-auto-flow dense lets later widgets slot into gaps — tight,
   Squarespace-style packing with no dead vertical space. */
.gw-myday-grid {
  display: grid;
  /* minmax(0,1fr): allow tracks to shrink below content's natural width —
     plain 1fr has an implicit auto minimum that blocks widget shrinking */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 4px;
  /* `row` (NOT `row dense`) — dense reshuffles later widgets backward into
     earlier gaps, which breaks the row-grouping math in _gwMyDayMasonry()
     (it groups widgets into visual rows by summing spans in strict DOM
     order — must match the CSS placement algorithm exactly, see comment
     there). Plain `row` keeps placement 100% predictable: widgets fill
     left-to-right, top-to-bottom, wrapping to a new row only when the next
     widget's span would overflow the remaining 6 columns. */
  grid-auto-flow: row;
  /* column-gap real; row-gap 0 — vertical breathing room is baked into each
     widget's masonry row-span by JS (content height + GAP, see
     _gwMyDayMasonry()) rather than via CSS row-gap, so it stays exact at any
     row-span size. Density pass: 28px → 18px to match JS GAP constant and
     the tighter Command Center rebuild. */
  column-gap: 18px;
  row-gap: 0;
  align-items: stretch;
}
.gw-myday-widget { min-width: 0; }
.gw-myday-widget-body { min-width: 0; overflow-x: auto; }
.gw-myday-widget-body > .card,
.gw-myday-widget-body > section.card { margin-top: 0 !important; height: 100%; }
.gw-myday-widget-body > .gw-today-pipe-strip { margin-bottom: 0; }

/* ── Widget hover-remove "×" — Command Center rebuild: no drag/resize, just
   an Add-Widget popover + a small hover-only remove button per widget. ── */
.gw-myday-widget { position: relative; }
.gw-myday-widget-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--gw-surface, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  color: var(--gw-muted, #5E6E6F);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  z-index: 5;
}
.gw-myday-widget:hover .gw-myday-widget-remove { opacity: 1; }
.gw-myday-widget-remove:hover { background: var(--gw-rose, #8B3A2A); color: #fff; }

/* ── Accordion-expand-in-place — shared pattern for all migrated deep report
   content (pipeline funnel/trend/sources, A/R aging). Collapsed by default;
   toggled via gwMyDayAccordionToggle(id), no separate page/modal. ── */
.gw-accordion-body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gw-line, #E2EAE9);
}
.gw-accordion-body--open { display: block; animation: gwAccordionIn .18s ease; }
@keyframes gwAccordionIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gw-accordion-toggle:after {
  content: '▾';
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  transition: transform .15s;
}
.gw-accordion-toggle--open:after { transform: rotate(180deg); }

/* NOTE: no desktop breakpoint overrides here — the user controls widget
   sizes; forcing spans with !important at <=1100px silently broke resizing.
   Below 768px the JS mobile renderer takes over, this is just a fallback. */
@media (max-width: 768px) {
  .gw-myday-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: 18px !important; }
  .gw-myday-widget { grid-column: span 1 !important; grid-row: auto !important; }
}

/* ── Command Center zone sections ─────────────────────────────────────────
   Groups the flat widget pile into visually distinct sections (Sales &
   Pipeline / Financial / Operations / My Work) so preset day-modes read as
   a hub of the underlying report areas rather than a uniform grid of
   same-weight cards. Each zone is its own titled strip with a colored icon
   chip (--gw-zone-accent, set inline per zone) and, where a report page
   exists, a "Full report" drill-down link. Only used for preset modes in
   view mode — see _gwTodayRender's zone-grouping branch; "My Layout"
   (custom) and edit mode always keep the original flat single-grid. */
.gw-myday-zone { margin-bottom: 30px; }
.gw-myday-zone:last-child { margin-bottom: 0; }
.gw-myday-zone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gw-zone-accent, var(--gw-line, #E2EAE9));
}
.gw-myday-zone-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--gw-zone-accent, var(--gw-sky, #4D8A86));
  color: #fff;
}
.gw-myday-zone-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--gw-ink, #1F2A2B);
  flex: 1;
  letter-spacing: -.01em;
}
.gw-myday-zone-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gw-zone-accent, var(--gw-sky, #4D8A86));
  padding: 4px 2px;
  white-space: nowrap;
}
.gw-myday-zone-link:hover { text-decoration: underline; }
.gw-myday-zone-link-ic { display: inline-flex; }
@media (max-width: 768px) {
  .gw-myday-zone { margin-bottom: 22px; }
}

.gw-myday-placeholder {
  padding: 22px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gw-muted, #6F7E6A);
  background: var(--gw-bg2, #F5F8F7);
  border-radius: 10px;
}
/* Row-height matching can stretch a widget well past its own natural
   content height when a taller sibling shares its row — an empty-state
   placeholder just sitting near the top of that extra space looks like
   dead whitespace. This variant grows to fill the available height and
   centers an icon + message so the extra room reads as an intentional
   "all clear" state instead of a layout gap. */
.gw-myday-placeholder--empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 90px; padding: 28px 20px;
}
.gw-myday-placeholder--empty span { max-width: 240px; line-height: 1.5; }
/* .card is a normal block by default — flex:1 above only expands the
   placeholder to fill leftover row-matched height if its card parent is
   itself a flex column. Not a direct-child :has() since some widgets nest
   the placeholder inside an extra wrapper div (e.g. Today's Jobs' list
   container), so match at any depth. */
.gw-myday-widget-body > .card:has(.gw-myday-placeholder--empty),
.gw-myday-widget-body > section.card:has(.gw-myday-placeholder--empty) {
  display: flex; flex-direction: column;
}
.gw-myday-widget-body > .card:has(.gw-myday-placeholder--empty) > div:has(.gw-myday-placeholder--empty),
.gw-myday-widget-body > section.card:has(.gw-myday-placeholder--empty) > div:has(.gw-myday-placeholder--empty) {
  display: flex; flex-direction: column; flex: 1;
}

/* Very wide screens: keep content readable but fluid — cards inside stretch */

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 40 — MY DAY WIDGETS v2
   1) Bigger breathing room between widgets (never touching)
   2) Widget Library panel (add / remove widgets) — drag/resize removed in the
      Command Center rebuild (single canonical layout, no edit mode)
   3) New widgets: Quick Actions, Scratchpad, Needs Follow-Up, Recent Wins
══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Spacing: column-gap/row-gap now set once on the base .gw-myday-grid
   rule (Section 39) — see comment there. ── */
/* cards inside widgets: kill stray top margins so gap is the only spacing */
.gw-myday-widget-body > .card,
.gw-myday-widget-body > section.card { margin: 0 !important; }
/* fixed-height widgets: let inner card fill and scroll cleanly */
.gw-myday-widget-body[style*="height"] > .card,
.gw-myday-widget-body[style*="height"] > section.card { min-height: 100%; }

/* ── 2. Widget Library panel ── */
.gw-myday-library {
  background: var(--gw-surface, #fff);
  border: 1.5px dashed rgba(77,138,134,.5);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.gw-myday-lib-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.gw-myday-lib-head strong { font-size: 14.5px; color: var(--gw-ink, #1F2A2B); }
.gw-myday-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
}
.gw-myday-lib-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--gw-bg2, #F5F8F7);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 10px;
  padding: 10px 12px;
}
.gw-myday-lib-item--on { background: #EDF5F4; border-color: rgba(77,138,134,.35); }
.gw-myday-lib-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gw-myday-lib-info strong { font-size: 13px; color: var(--gw-ink, #1F2A2B); }
.gw-myday-lib-info span { font-size: 11.5px; color: var(--gw-muted, #6F7E6A); }
.gw-myday-lib-add, .gw-myday-lib-remove {
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .12s;
}
.gw-myday-lib-add { background: var(--gw-pine, #4D8A86); color: #fff; border: 1px solid var(--gw-pine, #4D8A86); }
.gw-myday-lib-add:hover { background: #3E736F; }
.gw-myday-lib-remove { background: #fff; color: #8B3A2A; border: 1px solid #EBD3CC; }
.gw-myday-lib-remove:hover { background: #FAE8E4; }
.gw-myday-lib-btn--open { background: #EDF5F4 !important; border-color: var(--gw-pine, #4D8A86) !important; }

/* ── 4. New widget internals ── */
.gw-myday-qa-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 10px;
}
.gw-myday-qa-grid button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--gw-bg2, #F5F8F7);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 10px; padding: 12px 8px;
  font-size: 12.5px; font-weight: 650; color: var(--gw-ink, #1F2A2B);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.gw-myday-qa-grid button:hover { background: #EDF5F4; border-color: var(--gw-pine, #4D8A86); }
.gw-myday-qa-grid button svg { flex-shrink: 0; color: var(--gw-pine, #4D8A86); }
.gw-myday-scratch {
  width: 100%; min-height: 140px; resize: vertical;
  border: 1px solid var(--gw-line, #E2EAE9); border-radius: 10px;
  padding: 12px; margin-top: 10px;
  font: inherit; font-size: 13.5px; line-height: 1.55; color: var(--gw-ink, #1F2A2B);
  background: #FFFEF8;
}

/* ── My Day day-mode switcher pills ─────────────────────────────────────── */
.gw-myday-modes {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gw-bg2, #F5F8F7);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 12px; padding: 4px; margin-right: 8px;
}
.gw-myday-mode-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 9px; padding: 6px 12px;
  font-size: 12.5px; font-weight: 650; color: var(--gw-muted, #5E6E6F);
  cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.gw-myday-mode-pill:hover { background: #EDF5F4; color: var(--gw-ink, #1F2A2B); }
.gw-myday-mode-pill--on {
  background: #fff; color: var(--gw-pine, #4D8A86);
  border-color: rgba(77,138,134,.35);
  box-shadow: 0 1px 3px rgba(15,36,25,.08);
}
.gw-myday-mode-ic { font-size: 13px; line-height: 1; display: inline-flex; align-items: center; }
.gw-myday-mode-ic svg { display: block; }
@media (max-width: 1100px) {
  .gw-myday-modes { flex-wrap: wrap; }
}

/* ── Time Clock widget ──────────────────────────────────────────────────── */
.gw-myday-clock { text-align: center; padding: 14px 8px 6px; }
.gw-myday-clock-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #2D7A55; margin-bottom: 8px;
}
.gw-myday-clock-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 6px #4ade80aa; animation: tt-pulse 1.5s infinite ease-in-out;
}
@keyframes tt-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.gw-myday-clock-timer {
  font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums;
  letter-spacing: .04em; color: var(--gw-ink, #1F2A2B); line-height: 1.1; margin-bottom: 12px;
}
.gw-myday-clock-timer--idle { color: var(--gw-muted, #9AA8A8); margin-bottom: 0; }
.gw-myday-clock-btn {
  width: 100%; padding: 11px; border: none; border-radius: 10px;
  background: var(--gw-pine, #4D8A86); color: #fff;
  font-size: 13.5px; font-weight: 750; cursor: pointer; transition: filter .12s;
}
.gw-myday-clock-btn:hover { filter: brightness(1.08); }
.gw-myday-clock-btn--out { background: #B3403C; }

/* ── Today's Jobs widget ────────────────────────────────────────────────── */
.gw-myday-job-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.gw-myday-job-row:hover { background: var(--gw-bg2, #F5F8F7); border-color: var(--gw-line, #E2EAE9); }
.gw-myday-job-row--dim { opacity: .72; }
.gw-myday-job-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gw-myday-job-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gw-myday-job-info strong { font-size: 13.5px; color: var(--gw-ink, #1F2A2B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-myday-job-info span { font-size: 11.5px; color: var(--gw-muted, #5E6E6F); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-myday-job-status {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: capitalize;
  padding: 3px 9px; border-radius: 999px; background: var(--gw-bg2, #F5F8F7);
  color: var(--gw-muted, #5E6E6F); flex-shrink: 0;
}
.gw-myday-job-status--in-progress { background: #E3F2EC; color: #2D7A55; }
.gw-myday-job-status--scheduled   { background: #EAF1F8; color: #3B6EA5; }
.gw-myday-job-status--on-hold     { background: #FBF0DC; color: #9A6B15; }
.gw-myday-job-sub {
  font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gw-muted, #8FA0A0); margin: 12px 10px 4px;
}

/* ── Crew Hours widget ──────────────────────────────────────────────────── */
/* Full-row-width (span 6) widget — wraps reps as compact chip-cards (same
   visual language as .gw-myday-ar-cell) instead of a narrow stacked list,
   so the widget stays content-dense at full width regardless of crew size. */
.gw-myday-crew-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.gw-myday-crew-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--gw-bg2, #F5F8F7);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 10px; padding: 9px 12px; font-size: 13px;
  flex: 1 1 160px; min-width: 160px;
}
.gw-myday-crew-chip--live { background: #F0F7F3; border-color: #CBE3D6; }
.gw-myday-crew-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gw-myday-crew-chip-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gw-ink, #1F2A2B); font-weight: 700; }
.gw-myday-crew-live { font-size: 10px; font-weight: 800; color: #2D9F63; }
.gw-myday-crew-hrs { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gw-ink, #1F2A2B); }

/* ── Money Owed (A/R) widget ────────────────────────────────────────────── */
/* 3-across dense grid (matches Financial Pulse's KPI-grid density) instead
   of full-width stacked blocks — full-width rows of small left-aligned text
   left ~85% of each block visually empty next to Financial Pulse's denser
   layout when the two shared a row. */
.gw-myday-ar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.gw-myday-ar-cell {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  background: var(--gw-bg2, #F5F8F7);
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: border-color .12s;
}
.gw-myday-ar-cell:hover { border-color: var(--gw-pine, #4D8A86); }
.gw-myday-ar-cell--bad  { background: #FDF1F0; border-color: #EFC9C6; }
.gw-myday-ar-cell--good { background: #F0F7F3; border-color: #CBE3D6; cursor: default; }
.gw-myday-ar-label { font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--gw-muted, #7B8B8B); }
.gw-myday-ar-val   { font-size: 20px; font-weight: 850; color: var(--gw-ink, #1F2A2B); font-variant-numeric: tabular-nums; }
.gw-myday-ar-cell--bad  .gw-myday-ar-val { color: #A93831; }
.gw-myday-ar-cell--good .gw-myday-ar-val { color: #23724A; }
.gw-myday-ar-sub   { font-size: 11px; color: var(--gw-muted, #7B8B8B); }
.gw-myday-scratch:focus { outline: none; border-color: var(--gw-pine, #4D8A86); box-shadow: 0 0 0 3px rgba(77,138,134,.14); }

/* customize-mode body stays interactive for scratchpad in edit mode? no — keep uniform */

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 41 — RESPONSIVE WIDGET CONTENT
   Inner layouts adapt to the WIDGET's width (not the window's), so content
   stays visible when a widget is resized narrower. Uses auto-fit tracks +
   flex wrapping instead of window media queries.
══════════════════════════════════════════════════════════════════════════════ */

/* Pipeline Snapshot hero tiles: reflow into as many columns as fit (min
   150px each) — each tile is now its own bordered/shadowed card (see the
   hero KPI band rules above), so no divider-border hack is needed here. */
.gw-myday-widget-body .gw-today-pipe-strip {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Generic inner grids (stats, forms, 2/3/4-col cards) reflow inside widgets */
.gw-myday-widget-body .grid-2,
.gw-myday-widget-body .grid-3,
.gw-myday-widget-body .grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.gw-myday-widget-body .dashboard-strip,
.gw-myday-widget-body .stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Section headers: wrap instead of clipping when the widget is narrow */
.gw-myday-widget-body .section-head { flex-wrap: wrap; row-gap: 6px; }
.gw-myday-widget-body .section-head h2 { font-size: clamp(16px, 4cqw, 28px); min-width: 0; }

/* Cards + text: never force horizontal scroll for ordinary content */
.gw-myday-widget-body .card { min-width: 0; }
.gw-myday-widget-body h2, .gw-myday-widget-body h3 { overflow-wrap: anywhere; }
.gw-myday-widget-body .mini-row,
.gw-myday-widget-body .opp-card { min-width: 0; }
.gw-myday-widget-body .mini-row > *,
.gw-myday-widget-body .opp-card > * { min-width: 0; overflow-wrap: anywhere; }

/* Task workspace rows: let long titles wrap inside narrow widgets */
.gw-myday-widget-body .gw-task-workspace { min-width: 0; }
.gw-myday-widget-body .gw-task-workspace * { min-width: 0; }

/* Quick Actions buttons shrink gracefully */
.gw-myday-widget-body .gw-myday-qa-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }

/* Financial Pulse: KPI tiles reflow to 1 column in narrow widgets */
.gw-myday-widget-body .gw-today-fin-kpis {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.gw-myday-widget-body .gw-today-fin-kpi { min-width: 0; }
.gw-myday-widget-body .gw-today-fin-kpi-val { overflow-wrap: anywhere; }
.gw-myday-widget-body .gw-today-fin-card { min-width: 0; }

/* Checklist rows and misc flex rows: allow wrapping */
.gw-myday-widget-body .check-item { flex-wrap: wrap; }
.gw-myday-widget-body .footer-actions,
.gw-myday-widget-body .quick-actions { flex-wrap: wrap; }

/* Enable container-query units for widget bodies (safe no-op on old browsers) */
.gw-myday-widget-body { container-type: inline-size; }

/* Container-width-based tightening for really narrow widgets */
@container (max-width: 260px) {
  .gw-myday-widget-body .card,
  .gw-myday-widget-body .gw-today-fin-card { padding: 12px; }
  .gw-myday-widget-body .gw-today-pipe-cell { padding: 10px 8px; }
  .gw-myday-widget-body .gw-today-pipe-val { font-size: 17px; }
  .gw-myday-widget-body .gw-today-pipe-val--money { font-size: 14px; }
  .gw-myday-widget-body h2 { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 42 — MY DAY: "+N MORE" CAPPING + PIPELINE CHART (curated mode)
   Fixed-height widget cards (My Tasks / Today's Jobs / My Calendar) so a
   light day and a packed day render the exact same card shape — overflow
   past the mode's cap collapses into a quiet "+N more" row that expands the
   same card in place, never a scrollbar or a growing card.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Fixed-height card + capped list body ─────────────────────────────────── */
.w-fixed-h { display: flex; flex-direction: column; }
.w-fixed-h .section-head { flex-shrink: 0; }
.list-cap { flex: 1; min-height: 0; overflow: hidden; }

/* "+N more / Show less" link — sits below the capped list, above the card edge */
.more-link {
  flex-shrink: 0;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--gw-line, #E2EAE9);
  font-size: 12px; font-weight: 700;
  color: var(--gw-pine-muted, #2D7A55);
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: color .12s;
}
.more-link:hover { color: var(--gw-pine, #4D8A86); }
.more-link svg { flex-shrink: 0; }

/* My Tasks / Today's Jobs / My Calendar cards get a calm fixed height when
   capped, so all three sit level with each other in the curated layout —
   auto height (uncapped, e.g. Focus/custom modes) is untouched. */
.gw-myday-widget-body > .w-fixed-h,
.gw-myday-widget-body > section.w-fixed-h { height: 380px; }
.gw-myday-widget-body > .w-fixed-h .gw-cal-md-list.list-cap,
.gw-myday-widget-body > .w-fixed-h .gw-task-workspace.list-cap { padding-bottom: 2px; }

/* ── Pipeline Chart widget: sparkline + stage breakdown, real D1 data ──────── */
.gw-pipe-chart { display: flex; flex-direction: column; }
.pipe-num { font-size: 24px; font-weight: 800; color: var(--gw-ink, #1F2A2B); letter-spacing: -.02em; margin-top: 4px; }
.pipe-lbl { font-size: 11.5px; color: var(--gw-muted, #5E6E6F); font-weight: 600; margin-top: 2px; }
.pipe-spark { display: block; width: 100%; height: 40px; margin: 12px 0 4px; flex-shrink: 0; }
.pipe-spark-foot {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--gw-subtle, #6F7E6A); font-weight: 600;
  margin-top: -2px;
}
.pipe-stage-bar {
  height: 9px; border-radius: 5px; overflow: hidden; display: flex;
  margin: 16px 0 10px;
  background: var(--gw-line-strong, #C8D8D3);
}
.pipe-stage-bar > i { display: block; height: 100%; }
.pipe-legend { display: flex; flex-direction: column; gap: 6px; }
.pipe-legend-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--gw-ink-2, #1E3326); font-weight: 600;
}
.pipe-legend-row .k { display: flex; align-items: center; gap: 6px; }
.pipe-legend-row .k i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pipe-legend-row .v { color: var(--gw-muted, #5E6E6F); font-weight: 700; }
.pipe-mini-row {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--gw-muted, #5E6E6F); font-weight: 600;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--gw-line, #E2EAE9);
}

@container (max-width: 260px) {
  .pipe-num { font-size: 19px; }
  .pipe-legend-row { font-size: 10.5px; }
}

/* ── General Settings tab: organized layout (all viewports) ──────────────── */
.gw-settings-sect {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gw-muted);
}
.gw-settings-sect::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gw-line);
}
.gw-settings-sect:first-of-type { margin-top: 18px; }

/* Accordion panels now work on desktop too (mobile-only rules kept in the
   media query above for back-compat; these unscoped rules extend them). */
.gw-mobile-accordion {
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--gw-surface);
}
.gw-mobile-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--gw-ink);
  background: var(--gw-surface-2);
  gap: 8px;
}
.gw-mobile-accordion-header:hover { background: var(--gw-line); }
.gw-mobile-accordion-chevron {
  font-size: 10px;
  color: var(--gw-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.gw-mobile-accordion-chevron.open { transform: rotate(180deg); }
.gw-mobile-accordion-body { display: none; padding: 14px; overflow-x: auto; }
.gw-mobile-accordion-body.open { display: block; }
.gw-settings-acc-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--gw-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   ASSETS HUB (.ah-*) — unified Equipment / Maintenance / Inventory
   ═══════════════════════════════════════════════════════════════════ */
.ah-shell { width: 100%; max-width: none; margin: 0; padding: 4px 2px 40px; box-sizing: border-box; }
.ah-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ah-header h2 { margin: 0 0 2px; font-size: 22px; color: var(--gw-ink); }
.ah-header-sub { font-size: 13px; color: var(--gw-muted); }
.ah-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Stats strip */
.ah-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ah-stat { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 10px; padding: 12px 14px; }
.ah-stat-num { font-size: 22px; font-weight: 700; color: var(--gw-ink); line-height: 1.1; }
.ah-stat-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gw-muted); margin-top: 3px; }
.ah-stat--warn .ah-stat-num { color: var(--gw-amber); }
.ah-stat--bad .ah-stat-num { color: var(--gw-rose); }

/* Toolbar: search + filter chips */
.ah-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ah-search { flex: 1 1 220px; max-width: 340px; padding: 8px 12px; border: 1px solid var(--gw-line-strong); border-radius: 8px; font-size: 14px; background: var(--gw-surface); color: var(--gw-ink); }
.ah-search:focus { outline: none; border-color: var(--gw-sky); box-shadow: 0 0 0 3px var(--gw-sky-soft); }
.ah-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ah-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gw-line-strong); background: var(--gw-surface); font-size: 12px; font-weight: 600; color: var(--gw-ink-2); cursor: pointer; transition: all .15s; }
.ah-chip:hover { border-color: var(--gw-pine-muted); }
.ah-chip--on { background: var(--gw-pine); border-color: var(--gw-pine); color: #fff; }

/* Table */
.ah-table-wrap { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 12px; overflow-x: auto; }
.ah-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ah-th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gw-muted); padding: 10px 12px; border-bottom: 1px solid var(--gw-line); background: var(--gw-surface-2); white-space: nowrap; }
.ah-td { padding: 11px 12px; font-size: 13.5px; color: var(--gw-ink); border-bottom: 1px solid var(--gw-line); vertical-align: middle; }
.ah-row { cursor: pointer; transition: background .12s; }
.ah-row:hover { background: var(--gw-sky-soft); }
.ah-row:last-child .ah-td { border-bottom: none; }
.ah-row--low { background: #FDF6EC; }
.ah-row--low:hover { background: #FAEEDD; }

/* Tags & small buttons */
.ah-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.ah-btn-sm { padding: 5px 11px; border-radius: 7px; border: 1px solid var(--gw-line-strong); background: var(--gw-surface); font-size: 12px; font-weight: 600; color: var(--gw-ink-2); cursor: pointer; transition: all .15s; white-space: nowrap; }
.ah-btn-sm:hover { border-color: var(--gw-pine-muted); background: var(--gw-surface-2); }
.ah-btn-sm--primary { background: var(--gw-pine); border-color: var(--gw-pine); color: #fff; }
.ah-btn-sm--primary:hover { background: var(--gw-pine-deep); border-color: var(--gw-pine-deep); }
.ah-btn-sm--danger { color: var(--gw-rose); border-color: #E5C9C0; }
.ah-btn-sm--danger:hover { background: #FBF0ED; border-color: var(--gw-rose); }
.ah-qty-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--gw-line-strong); background: var(--gw-surface); font-size: 15px; font-weight: 700; color: var(--gw-ink-2); cursor: pointer; line-height: 1; }
.ah-qty-btn:hover { border-color: var(--gw-pine-muted); background: var(--gw-surface-2); }
.ah-qty-btn:disabled { opacity: .4; cursor: default; }

/* Mobile cards */
.ah-mlist { display: flex; flex-direction: column; gap: 10px; }
.ah-mcard { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 12px; padding: 13px 14px; cursor: pointer; }
.ah-mcard:active { background: var(--gw-sky-soft); }
.ah-mcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ah-mcard-name { font-size: 15px; font-weight: 700; color: var(--gw-ink); }
.ah-mcard-sub { font-size: 12.5px; color: var(--gw-muted); margin-top: 2px; }
.ah-mcard-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Detail page */
.ah-crumb { font-size: 13px; color: var(--gw-muted); margin-bottom: 12px; }
.ah-crumb a { color: var(--gw-sky); text-decoration: none; cursor: pointer; font-weight: 600; }
.ah-crumb a:hover { text-decoration: underline; }
.ah-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .ah-detail-grid { grid-template-columns: 1fr; } }
.ah-card { background: var(--gw-surface); border: 1px solid var(--gw-line); border-radius: 12px; padding: 16px; }
.ah-card h3 { margin: 0 0 12px; font-size: 15px; color: var(--gw-ink); }
.ah-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
@media (max-width: 560px) { .ah-form-grid { grid-template-columns: 1fr; } }
.ah-field { display: flex; flex-direction: column; gap: 4px; }
.ah-field > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gw-muted); }
.ah-field input, .ah-field select, .ah-field textarea { padding: 8px 10px; border: 1px solid var(--gw-line-strong); border-radius: 8px; font-size: 14px; background: var(--gw-surface); color: var(--gw-ink); font-family: inherit; }
.ah-field input:focus, .ah-field select:focus, .ah-field textarea:focus { outline: none; border-color: var(--gw-sky); box-shadow: 0 0 0 3px var(--gw-sky-soft); }
.ah-field input:disabled, .ah-field select:disabled, .ah-field textarea:disabled { background: var(--gw-surface-2); color: var(--gw-subtle); }
.ah-field--full { grid-column: 1 / -1; }

/* Modal */
.ah-modal-bg { position: fixed; inset: 0; background: rgba(15, 28, 20, .45); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ah-modal { background: var(--gw-surface); border-radius: 14px; padding: 20px; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.ah-modal h3 { margin: 0 0 14px; font-size: 16px; color: var(--gw-ink); }

/* Section headings inside maintenance queue */
.ah-sect-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gw-ink-2); margin: 20px 0 8px; }
.ah-sect-h:first-child { margin-top: 0; }
.ah-sect-h .ah-tag { font-size: 10px; }

@media (max-width: 768px) {
  .ah-shell { padding-bottom: 80px; }
  .ah-header h2 { font-size: 19px; }
  .ah-stats { grid-template-columns: repeat(2, 1fr); }
  .ah-search { max-width: none; }
}

/* ============================================================
   Global sub-header tab bar (used by _gwSetSubHeader everywhere:
   Settings, Assets Hub, Comms, etc.) — segmented control style
   ============================================================ */
.gw-sub-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
  padding: 6px;
  background: var(--gw-surface-2, #EDF2F0);
  border: 1px solid var(--gw-line, #E2EBE8);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.gw-sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  background: transparent;
  color: var(--gw-text-muted, var(--gw-muted, #5E6E6A));
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.gw-sub-tab:hover {
  background: rgba(255,255,255,.65);
  color: var(--gw-ink, #1F2A2B);
}
.gw-sub-tab--active,
.gw-sub-tab--active:hover {
  background: var(--gw-card, #fff);
  color: var(--gw-ink, #1F2A2B);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(31,42,43,.10);
}
.gw-sub-tab:focus-visible {
  outline: 2px solid var(--gw-sky, #4D8A86);
  outline-offset: 1px;
}
@media (max-width: 920px) {
  .gw-sub-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: auto;
  }
  .gw-sub-tabs::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GWP — GROUNDWORK PREMIUM PAGE SHELL (approved high-end formatting style)
   Shared vocabulary cloned from the estimates-module design language.
   Used by: Financial Reports, Invoices, Schedule, Dispatch, Recurring,
   Assets, Company Settings, General Settings, Pricing, Client Portal.
   ═══════════════════════════════════════════════════════════════════════════ */

.gwp-shell {
  padding: 24px 28px 60px;
  width: 100%; max-width: none; margin: 0;
  box-sizing: border-box;
}
.gwp-shell--narrow { max-width: none; }

/* ── Page header ── */
.gwp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.gwp-header-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.gwp-title { font-size: 22px; font-weight: 800; color: var(--gw-text, #1C2B22); margin: 0; letter-spacing: -.02em; }
.gwp-subtitle { font-size: 13px; color: var(--gw-text-muted, #64748b); }
.gwp-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

.gwp-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gw-action, #2A6E51); color: #fff; border: 1px solid var(--gw-action, #2A6E51);
  border-radius: 8px; padding: 8px 15px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.gwp-btn-primary:hover { background: var(--gw-pine-600, #1f5640); }
.gwp-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gw-surface, #fff); color: var(--gw-text, #1C2B22);
  border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 8px; padding: 8px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s;
}
.gwp-btn-ghost:hover { background: var(--gw-bark-25, #F8F6F0); border-color: var(--gw-pine-300, #7BB89A); }
.gwp-btn-danger { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.gwp-btn-danger:hover { background: #fecaca; border-color: #f87171; }

/* ── KPI row (est-kpi clone) ── */
.gwp-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
.gwp-kpi-row--5 { grid-template-columns: repeat(5, 1fr); }
.gwp-kpi-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .gwp-kpi-row, .gwp-kpi-row--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .gwp-kpi-row, .gwp-kpi-row--5, .gwp-kpi-row--3 { grid-template-columns: repeat(2, 1fr); } }

.gwp-kpi-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; padding: 14px 16px;
  transition: box-shadow .15s, border-color .15s; position: relative; overflow: hidden;
}
.gwp-kpi-card--click { cursor: pointer; }
.gwp-kpi-card--click:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); border-color: var(--gw-pine-300, #7BB89A); }
.gwp-kpi-card--yellow { border-left: 3px solid #f59e0b; }
.gwp-kpi-card--red    { border-left: 3px solid #ef4444; }
.gwp-kpi-card--green  { border-left: 3px solid #10b981; }
.gwp-kpi-card--blue   { border-left: 3px solid #3b82f6; }
.gwp-kpi-card--muted  { border-left: 3px solid var(--gw-border, #DDD8CE); }

.gwp-kpi-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gwp-kpi-icon--blue  { background: #dbeafe; color: #1d4ed8; }
.gwp-kpi-icon--green { background: #d1fae5; color: #059669; }
.gwp-kpi-icon--yellow{ background: #fef3c7; color: #d97706; }
.gwp-kpi-icon--red   { background: #fee2e2; color: #dc2626; }
.gwp-kpi-icon--purple{ background: #ede9fe; color: #6d28d9; }
.gwp-kpi-icon--muted { background: var(--gw-bark-25, #F8F6F0); color: var(--gw-text-muted, #64748b); }

.gwp-kpi-body { min-width: 0; }
.gwp-kpi-value { font-size: 22px; font-weight: 800; color: var(--gw-text, #1C2B22); line-height: 1; font-variant-numeric: tabular-nums; }
.gwp-kpi-label { font-size: 11.5px; font-weight: 600; color: var(--gw-text-muted, #64748b); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.gwp-kpi-sub   { font-size: 11px; color: var(--gw-text-muted, #64748b); margin-top: 1px; }

/* ── Filter / toolbar bar (est-filter clone) ── */
.gwp-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.gwp-search-wrap {
  display: flex; align-items: center; gap: 7px;
  background: var(--gw-bark-25, #F8F6F0); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 6px; padding: 0 10px; flex: 1; min-width: 180px; max-width: 400px;
}
.gwp-search-icon { color: var(--gw-text-muted, #64748b); flex-shrink: 0; }
.gwp-search-input {
  flex: 1; border: none; background: transparent; padding: 7px 0;
  font-size: 13px; color: var(--gw-text, #1C2B22); font-family: inherit;
}
.gwp-search-input:focus { outline: none; }
.gwp-filter-select {
  padding: 7px 11px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--gw-border, #DDD8CE); background: var(--gw-surface, #fff);
  color: var(--gw-text, #1C2B22); font-family: inherit; cursor: pointer;
}
.gwp-chip {
  padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--gw-border, #DDD8CE); background: var(--gw-surface, #fff);
  color: var(--gw-text-muted, #64748b); cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s; white-space: nowrap;
}
.gwp-chip:hover { border-color: var(--gw-pine-400, #4DA876); color: var(--gw-text, #1C2B22); }
.gwp-chip--active { background: var(--gw-action, #2A6E51); color: #fff; border-color: var(--gw-action, #2A6E51); }

/* ── Table (est-table clone) ── */
.gwp-table-wrap {
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; overflow: hidden; margin-bottom: 18px;
}
.gwp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gwp-table thead th {
  padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--gw-text-muted, #64748b); background: var(--gw-bark-25, #F8F6F0);
  border-bottom: 1px solid var(--gw-border, #DDD8CE); white-space: nowrap;
}
.gwp-table tbody td { padding: 11px 14px; vertical-align: middle; border-bottom: 1px solid var(--gw-border-soft, #F0EEE8); }
.gwp-table tbody tr:last-child td { border-bottom: none; }
.gwp-table tbody tr.gwp-row--click { cursor: pointer; transition: background .1s; }
.gwp-table tbody tr.gwp-row--click:hover { background: var(--gw-bark-25, #F8F6F0); }

/* ── Section card (premium settings-style card) ── */
.gwp-card {
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 12px; margin-bottom: 16px; overflow: hidden;
}
.gwp-card-head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 18px; border-bottom: 1px solid var(--gw-border-soft, #F0EEE8);
  background: var(--gw-bark-25, #F8F6F0);
}
.gwp-card-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #d1fae5; color: #059669;
}
.gwp-card-icon--yellow { background: #fef3c7; color: #d97706; }
.gwp-card-icon--blue   { background: #dbeafe; color: #1d4ed8; }
.gwp-card-icon--red    { background: #fee2e2; color: #dc2626; }
.gwp-card-icon--muted  { background: var(--gw-bark-50, #F2EDE3); color: var(--gw-text-muted, #64748b); }
.gwp-card-title { font-size: 14px; font-weight: 700; color: var(--gw-text, #1C2B22); }
.gwp-card-desc  { font-size: 12px; color: var(--gw-text-muted, #64748b); margin-top: 1px; }
.gwp-card-body  { padding: 16px 18px; }
.gwp-card--danger { border-color: #fca5a5; }
.gwp-card--danger .gwp-card-head { background: #fef2f2; border-bottom-color: #fecaca; }

/* ── Section eyebrow label ── */
.gwp-sect-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gw-text-muted, #64748b); margin: 22px 0 10px 2px;
}
.gwp-sect-label--danger { color: #dc2626; }

/* ── Tab bar (underline style, stmt-tab refined) ── */
.gwp-tab-bar {
  display: flex; align-items: center; gap: 2px;
  background: var(--gw-surface, #fff); border: 1px solid var(--gw-border, #DDD8CE);
  border-radius: 10px; padding: 4px 6px; margin-bottom: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.gwp-tab-bar::-webkit-scrollbar { display: none; }
.gwp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600;
  color: var(--gw-text-muted, #64748b); border: none; background: none;
  border-radius: 7px; cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: background .15s, color .15s;
}
.gwp-tab:hover { color: var(--gw-text, #1C2B22); background: var(--gw-bark-25, #F8F6F0); }
.gwp-tab--active { background: var(--gw-action, #2A6E51); color: #fff; }
.gwp-tab--active:hover { background: var(--gw-pine-600, #1f5640); color: #fff; }

/* ── Empty state (est-empty clone) ── */
.gwp-empty {
  background: var(--gw-surface, #fff); border: 1px dashed var(--gw-border, #DDD8CE);
  border-radius: 12px; padding: 48px 24px; text-align: center; margin-bottom: 18px;
}
.gwp-empty-icon { margin-bottom: 10px; opacity: .8; }
.gwp-empty-title { font-size: 15px; font-weight: 700; color: var(--gw-text, #1C2B22); margin-bottom: 5px; }
.gwp-empty-sub { font-size: 13px; color: var(--gw-text-muted, #64748b); margin-bottom: 16px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.gwp-empty-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ── Info banner ── */
.gwp-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--gw-pine-50, #e8f5ee); border: 1px solid var(--gw-pine-200, #A8D4BC);
  color: var(--gw-pine-700, #1B4A33); border-radius: 10px;
  padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
}

/* ── Responsive shell padding ── */
@media (max-width: 768px) {
  .gwp-shell { padding: 16px 14px 50px; }
  .gwp-title { font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GW CAL — My Day calendar agenda widget (Google Calendar sync)
   ══════════════════════════════════════════════════════════════════════════ */
.gw-cal-md-list { display: flex; flex-direction: column; gap: 2px; }
.gw-cal-md-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; position: relative;
  transition: background .12s;
}
.gw-cal-md-row:hover { background: var(--gw-bark-25, #f9f8f6); }
.gw-cal-md-row--live {
  background: #eefbf4; border: 1px solid #bbf7d0;
}
.gw-cal-md-row--live:hover { background: #e2f8ec; }
.gw-cal-md-time {
  font-size: 11.5px; font-weight: 700; color: var(--gw-text-muted, #64748b);
  min-width: 52px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.gw-cal-md-bar { width: 3.5px; align-self: stretch; border-radius: 3px; flex-shrink: 0; min-height: 28px; }
.gw-cal-md-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.gw-cal-md-title {
  font-size: 13px; font-weight: 700; color: var(--gw-ink, #1F2A2B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gw-cal-md-sub { font-size: 11.5px; color: var(--gw-text-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-cal-md-lead { font-size: 11.5px; color: var(--gw-teal, #4D8A86); font-weight: 700; }
.gw-cal-md-chip {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  background: #dbeafe; color: #1d4ed8; border-radius: 99px; padding: 1px 7px;
  vertical-align: 2px; text-transform: uppercase;
}
.gw-cal-md-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #16a34a; flex-shrink: 0;
  animation: gwCalPulse 1.6s ease-in-out infinite;
}
@keyframes gwCalPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Premium report page shell ─────────────────────────────────────────────── */
.gw-report-shell {
  --gw-report-hero: linear-gradient(135deg, #103c34 0%, #1a5a4f 54%, #2b7568 100%);
  --gw-report-card: #fff;
  --gw-report-border: rgba(26, 71, 64, .12);
  --gw-report-shadow: 0 18px 42px rgba(17, 57, 49, .08);
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 32px 48px !important;
  background: var(--gw-bg-page, #F7F5F2);
}
.gw-report-shell .rp-header {
  background: var(--gw-report-hero);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 24px 52px rgba(17, 57, 49, .18);
  margin: 0 0 24px;
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.gw-report-shell .rp-header::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  pointer-events: none;
}
.gw-report-shell .rp-header-left,
.gw-report-shell .rp-header-actions { position: relative; z-index: 1; }
.gw-report-shell .eyebrow {
  color: rgba(160, 211, 203, .95) !important;
  letter-spacing: .16em;
}
.gw-report-shell .rp-title {
  color: #fff !important;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -.055em;
  margin: 8px 0 6px;
}
.gw-report-shell .rp-subtitle {
  color: rgba(255,255,255,.72) !important;
  font-size: 14px;
}
.gw-report-shell .rp-header-actions .rp-btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.gw-report-shell .rp-header-actions .rp-btn:hover { background: rgba(255,255,255,.18); }
.gw-report-shell .rp-header-actions .rp-btn--primary {
  background: #fff;
  border-color: #fff;
  color: #113931;
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE-WIDE "GREEN HERO" HEADER — promoted from .gw-report-shell-only to the
   default treatment for every .rp-header across the app (My Day, Pipeline,
   Clients, Estimates, Invoices, Assets, Operations, Financial Reports, etc.)
   so every page shares the same premium look instead of a plain white/no
   header on most pages and a green hero on a handful of report pages.
   Opt a specific header out with class="rp-header rp-header--plain".
   ══════════════════════════════════════════════════════════════════════════ */
.rp-header:not(.rp-header--plain) {
  background: var(--gw-report-hero, linear-gradient(135deg, #103c34 0%, #1a5a4f 54%, #2b7568 100%));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 24px 52px rgba(17, 57, 49, .18);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.rp-header:not(.rp-header--plain)::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  pointer-events: none;
}
.rp-header:not(.rp-header--plain) .rp-header-left,
.rp-header:not(.rp-header--plain) .rp-header-actions { position: relative; z-index: 1; }
.rp-header:not(.rp-header--plain) .eyebrow {
  color: rgba(160, 211, 203, .95) !important;
  letter-spacing: .16em;
}
.rp-header:not(.rp-header--plain) .rp-title { color: #fff !important; }
.rp-header:not(.rp-header--plain) .rp-subtitle { color: rgba(255,255,255,.72) !important; }
.rp-header:not(.rp-header--plain) .cd-back-btn,
.rp-header:not(.rp-header--plain) .cl-back-btn { color: rgba(255,255,255,.75) !important; }
.rp-header:not(.rp-header--plain) .rp-header-actions .rp-btn {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.rp-header:not(.rp-header--plain) .rp-header-actions .rp-btn:hover { background: rgba(255,255,255,.18); }
.rp-header:not(.rp-header--plain) .rp-header-actions .rp-btn--primary {
  background: #fff;
  border-color: #fff;
  color: #113931;
}
/* Generic (non-.rp-btn) buttons dropped straight into a green header —
   e.g. plain <button class="primary-btn">/<button class="secondary-btn">
   used on a few older pages — get the same translucent white treatment. */
.rp-header:not(.rp-header--plain) .rp-header-actions button:not(.rp-btn):not(.rp-btn--primary) {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.rp-header:not(.rp-header--plain) .rp-header-actions button:not(.rp-btn):not(.rp-btn--primary):hover {
  background: rgba(255,255,255,.18);
}

/* ── Same "green hero" treatment for the other two header component
   families used on non-report pages: .pl-page-header (My Day, Pipeline,
   Clients) and .gwp-header (Financial Reports Hub). Kept as separate
   selectors (not merged into .rp-header) since their internal class names
   (.pl-title/.gwp-title etc.) differ. ── */
.pl-page-header,
.gwp-header {
  background: var(--gw-report-hero, linear-gradient(135deg, #103c34 0%, #1a5a4f 54%, #2b7568 100%));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 24px 52px rgba(17, 57, 49, .18);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
}
.pl-page-header::after,
.gwp-header::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
  pointer-events: none;
}
.pl-page-header > *,
.gwp-header > * { position: relative; z-index: 1; }
/* Scoped (not bare .pl-title/.gwp-title) so specificity (3 classes) reliably
   beats the older "SECTION 36-B" rule (.view .pl-title { color:#0F1C14
   !important; }, 2 classes) that otherwise forces the title dark/black on
   green .pl-page-header pages like My Day, Pipeline, and Clients. */
.pl-page-header .pl-page-title .pl-title,
.pl-page-header h1.pl-title,
.gwp-header .gwp-header-left .gwp-title,
.gwp-header h1.gwp-title {
  color: #fff !important;
}
.pl-page-header .pl-page-title .pl-subtitle,
.pl-page-header .pl-subtitle,
.gwp-header .gwp-header-left .gwp-subtitle,
.gwp-header .gwp-subtitle {
  color: rgba(255,255,255,.82) !important;
}
.pl-page-header .cl-back-btn { color: rgba(255,255,255,.75) !important; }

/* Buttons + pills inside a .pl-page-header (My Day / Pipeline / Clients) */
.pl-page-header .primary-btn,
.pl-page-header .secondary-btn {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.pl-page-header .primary-btn:hover,
.pl-page-header .secondary-btn:hover { background: rgba(255,255,255,.22) !important; }
.pl-page-header .badge { background: rgba(255,255,255,.16); color:#fff; border-color: rgba(255,255,255,.28); }
.pl-page-header .gw-myday-modes {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
}
.pl-page-header .gw-myday-mode-pill { color: rgba(255,255,255,.75); }
.pl-page-header .gw-myday-mode-pill:hover { background: rgba(255,255,255,.14); color: #fff; }
.pl-page-header .gw-myday-mode-pill--on {
  background: #fff; color: #113931;
  border-color: #fff;
}

/* Buttons inside a .gwp-header (Financial Reports Hub) */
.gwp-header-actions .gwp-btn-ghost {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}
.gwp-header-actions .gwp-btn-ghost:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); }
.gwp-header-actions .gwp-btn-primary {
  background: #fff;
  border-color: #fff;
  color: #113931;
}
.gwp-header-actions .gwp-btn-primary:hover { background: rgba(255,255,255,.88); }

.gw-report-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}
.gw-report-grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gw-report-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gw-report-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gw-report-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gw-report-card,
.gw-report-shell .fr-kpi-card,
.gw-report-shell .gw-admin-panel {
  background: var(--gw-report-card) !important;
  border: 1px solid var(--gw-report-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--gw-report-shadow);
}
.gw-report-card { padding: 18px; }
.gw-report-panel { overflow: hidden; }
.gw-report-panel__head {
  padding: 15px 18px;
  border-bottom: 1px solid var(--gw-report-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gw-report-panel__head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 850;
  color: var(--gw-ink, #1F2A2B);
}
.gw-report-kpi-label {
  color: var(--gw-muted, #6F7E6A);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.gw-report-kpi-value {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}
.gw-report-kpi-sub {
  color: var(--gw-muted, #6F7E6A);
  font-size: 11.5px;
  margin-top: 5px;
}
.gw-report-shell table thead tr { background: #FBFAF7 !important; }
.gw-report-shell table tbody tr:hover { background: #FBFAF7; }
@media (max-width: 1180px) {
  .gw-report-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gw-report-shell { padding: 18px 16px 36px !important; }
  .gw-report-shell .rp-header { padding: 22px; }
  .gw-report-grid--five,
  .gw-report-grid--four,
  .gw-report-grid--three,
  .gw-report-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gw-report-grid--five,
  .gw-report-grid--four,
  .gw-report-grid--three,
  .gw-report-grid--two { grid-template-columns: 1fr; }
}

/* Page taxonomy shells: executive, operational, list, workflow */
.gw-ops-shell,
.gw-list-shell {
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 32px 48px !important;
  background: var(--gw-bg-page, #F7F5F2);
}
.gw-ops-shell > .rp-header,
.gw-list-shell > .rp-header,
.gw-ops-header,
.gw-list-header {
  /* Same green hero as the rest of the site (see the site-wide .rp-header
     rule above) — just re-centered with the ops/list shell's max-width. */
  margin: 0 auto 18px !important;
  max-width: 1200px;
}
.gw-ops-shell .rp-card,
.gw-list-shell > div[style*="border:1px solid"],
.gw-list-shell .rp-empty-state {
  background: #fff !important;
  border-color: rgba(26, 71, 64, .10) !important;
  box-shadow: 0 12px 28px rgba(17, 57, 49, .06);
}
.gw-workflow-cleanup {
  background: var(--gw-bg-page, #F7F5F2);
}
.gw-revenue-admin-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px 48px;
}
.gw-workflow-cleanup .gw-admin-panel,
.gw-workflow-cleanup .gw-div-section,
.gw-workflow-cleanup .gw-ann-field,
.gw-workflow-cleanup .gw-upload-zone,
.gw-workflow-cleanup .gwp-kpi-card,
.gw-workflow-cleanup .sb-grid-wrap,
.gw-workflow-cleanup .sb-crew-bar {
  background-color: #fff;
  border-color: rgba(26, 71, 64, .10);
  box-shadow: 0 10px 24px rgba(17, 57, 49, .05);
}
/* No background here: this class is only ever paired with .gwp-header on the
   Schedule board (.sched-shell), whose header should carry the shared
   dark-hero .gwp-header gradient like the rest of the app, not a plain
   white card. */
.gw-workflow-cleanup .gwp-header {
  border: 1px solid rgba(26, 71, 64, .10);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(17, 57, 49, .07);
  padding: 20px 22px;
}
@media (max-width: 768px) {
  .gw-ops-shell,
  .gw-list-shell,
  .gw-revenue-admin-shell { padding: 16px 14px 36px !important; }
}

/* Multi-day schedule markers and phase planning controls */
.sb-job-card--multiday,
.sbm-job-card--multiday {
  position: relative;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-color) 28%, transparent);
}
.sb-job-card--multiday::before,
.sbm-job-card--multiday::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 4px;
  background: var(--md-color);
  border-radius: 8px 8px 0 0;
}
.sb-card-md-pill {
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 6px;
  background: color-mix(in srgb, var(--md-color) 14%, white);
  color: var(--md-color);
  border: 1px solid color-mix(in srgb, var(--md-color) 32%, transparent);
  white-space: nowrap;
}
.sb-card-md-marker {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gw-text-muted, #6b7280);
  margin: 3px 0;
}
.sb-card-md-marker span {
  width: 28px;
  height: 4px;
  border-radius: 999px;
  display: inline-block;
}
.sb-day-body:has(.sb-job-card--multiday),
.sb-lane-cell:has(.sb-job-card--multiday) {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--gw-green, #2D7A55) 8%, transparent), transparent 42%);
}
.sb-month-dot--multiday {
  outline: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}
.sb-month-chip--multiday {
  background: color-mix(in srgb, var(--md-color) 9%, white);
}
.gw-md-warn {
  border: 1px solid #f1c27d;
  background: #fff7e6;
  color: #7a4b00;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  margin: 8px 0;
}
.gw-md-row {
  display: grid;
  grid-template-columns: 54px minmax(110px,1fr) 126px 92px 92px minmax(150px,1.4fr) minmax(100px,1fr) 76px 62px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.gw-md-row input,
.gw-md-row select {
  font-size: 12px;
}
.gw-md-row-head {
  font-size: 10px;
  font-weight: 800;
  color: var(--gw-text-muted, #7a857f);
  text-transform: uppercase;
  letter-spacing: .05em;
}
@media (max-width: 760px) {
  .gw-md-row {
    grid-template-columns: 1fr 1fr;
  }
  .gw-md-row-head {
    display: none;
  }
}
.sb-card-md-warn {
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 6px;
  color: #7a4b00;
  background: #fff7e6;
  border: 1px solid #f1c27d;
  white-space: nowrap;
}

/* Schedule board density and time-based dispatch timeline */
.sched-shell { min-height:calc(100vh - 72px); min-height:calc(100dvh - 72px); }
.sched-shell .gwp-shell { max-width:none; padding:14px 16px 0; }
/* Its own sticky positioning is superseded by the later "Schedule board layout
   system" block below (position:relative;top:auto) — the background here was
   only ever needed to keep a *sticky* header opaque over scrolling content,
   so it's dropped rather than carried forward as a stale white/light card
   fighting the shared dark-hero .gwp-header rule. */
.sched-shell .gwp-header { position:sticky; top:0; z-index:20; padding:6px 0; }
.sched-shell .sb-grid-wrap { max-width:none; margin:0; padding:8px 12px 24px; overflow:auto; }
/* .sb-crew-bar has its own long-standing max-width:1400px;margin:0 auto base
   rule (line ~9494), separate from anything above — missed the first time
   around since .gwp-shell/.sb-grid-wrap happened to already be covered here
   and this block never included the crew bar too. */
.sched-shell .sb-crew-bar { max-width:none; margin:0; }
.sb-density-select { height:34px; border:1px solid var(--gw-border); border-radius:8px; background:var(--gw-bg-surface); color:var(--gw-text); padding:0 9px; font:600 11px inherit; }
.sb-density-compact .sb-job-card { padding:5px 7px; border-radius:6px; min-height:34px; }
.sb-density-compact .sb-card-top { margin:0; }
.sb-density-compact .sb-card-client { font-size:11px; line-height:1.2; margin:2px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-density-compact .sb-card-crew,
.sb-density-compact .sb-card-meta,
.sb-density-compact .sb-card-status,
.sb-density-compact .sb-card-md-marker { display:none; }
.sb-density-compact .sb-card-md-pill { font-size:8px; padding:1px 4px; }
.sb-density-compact .sb-card-md-warn { width:7px; height:7px; padding:0; border:0; font-size:0; }
.sb-density-compact .sb-lane-cell { min-height:52px; padding:3px; gap:3px; max-height:164px; overflow:auto; }
.sb-density-comfortable .sb-job-card { padding:7px 8px; }
.sb-density-comfortable .sb-card-meta,
.sb-density-comfortable .sb-card-status { display:none; }
.sb-density-detailed .sb-lane-cell { min-height:92px; }
.sb-week-grid { min-width:760px; gap:4px; }
.sb-day-col { min-height:240px; border-radius:7px; }
.sb-day-body { padding:4px; gap:3px; }

.sb-timeline-shell { border:1px solid var(--gw-border); border-radius:10px; overflow:hidden; background:var(--gw-bg-surface); min-height:520px; }
.sb-timeline-toolbar { min-height:42px; display:flex; align-items:center; gap:14px; padding:7px 10px; border-bottom:1px solid var(--gw-border); background:var(--gw-bg-surface-2); position:sticky; left:0; z-index:8; font-size:11px; color:var(--gw-text-muted); }
.sb-timeline-toolbar label { display:flex; align-items:center; gap:5px; font-weight:700; color:var(--gw-text); }
.sb-timeline-toolbar input,.sb-timeline-toolbar select,.sb-timeline-toolbar button { height:28px; border:1px solid var(--gw-border); border-radius:6px; background:var(--gw-bg-surface); color:var(--gw-text); padding:0 7px; font:600 11px inherit; }
.sb-timeline-toolbar span { flex:1; }
.sb-timeline-toolbar button:disabled { opacity:.4; }
.sb-timeline-scroll { overflow:auto; max-height:calc(100vh - 255px); max-height:calc(100dvh - 255px); }
.sb-timeline-grid { display:grid; grid-template-columns:72px repeat(var(--timeline-crews, 1), minmax(170px,1fr)); min-width:max-content; position:relative; }
.sb-time-rail { width:72px; position:sticky; left:0; z-index:6; background:var(--gw-bg-surface-2); border-right:1px solid var(--gw-border); margin-top:37px; }
.sb-time-rail span { position:absolute; right:8px; transform:translateY(-50%); font-size:9px; color:var(--gw-text-muted); white-space:nowrap; }
.sb-timeline-crew { width:clamp(170px,16vw,250px); border-right:1px solid var(--gw-border); }
.sb-timeline-crew-head { height:37px; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:0 8px; position:sticky; top:0; z-index:5; background:var(--gw-bg-surface-2); border-bottom:1px solid var(--gw-border); font-size:11px; font-weight:800; }
.sb-timeline-crew-head > span { width:8px; height:8px; border-radius:50%; background:var(--crew-color); }
.sb-timeline-crew-head small { margin-left:auto; color:var(--gw-text-muted); font-size:9px; font-weight:600; }
.sb-timeline-track { position:relative; background:linear-gradient(90deg,transparent 0,transparent 100%); }
.sb-timeline-track > i { position:absolute; left:0; right:0; height:1px; background:var(--gw-border); pointer-events:none; }
.sb-now-line { position:absolute; left:0; right:0; height:2px; background:#d84b42; z-index:4; pointer-events:none; }
.sb-now-line::before { content:""; position:absolute; left:-4px; top:-3px; width:8px; height:8px; border-radius:50%; background:#d84b42; }
.sb-time-event { position:absolute; left:4px; right:4px; box-sizing:border-box; border:1px solid color-mix(in srgb,var(--event-color) 55%,var(--gw-border)); border-left:4px solid var(--event-color); border-radius:6px; padding:4px 7px 8px; background:color-mix(in srgb,var(--event-color) 10%,white); color:var(--gw-text); overflow:hidden; cursor:grab; z-index:2; box-shadow:0 1px 3px rgba(17,57,49,.12); }
.sb-time-event:hover { z-index:5; box-shadow:0 5px 16px rgba(17,57,49,.18); }
.sb-time-event strong,.sb-time-event small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-time-event strong { font-size:11px; line-height:1.25; }
.sb-time-event small { font-size:9px; color:var(--gw-text-muted); }
.sb-time-event-time { font-size:9px; font-weight:800; margin-bottom:2px; }
.sb-time-event em { display:block; color:#9b3d35; font-size:8px; font-style:normal; font-weight:800; }
.sb-time-event.has-conflict { outline:2px solid #d84b42; outline-offset:-1px; }
.sb-time-event.is-locked { cursor:not-allowed; opacity:.8; }
.sb-time-resize { position:absolute; left:0; right:0; bottom:0; height:8px; cursor:ns-resize; background:linear-gradient(transparent,color-mix(in srgb,var(--event-color) 20%,transparent)); touch-action:none; }

.sb-agenda { max-width:980px; margin:0 auto; display:grid; gap:12px; }
.sb-agenda section { border:1px solid var(--gw-border); border-radius:10px; overflow:hidden; background:var(--gw-bg-surface); }
.sb-agenda section > header { display:flex; justify-content:space-between; padding:9px 12px; background:var(--gw-bg-surface-2); border-bottom:1px solid var(--gw-border); font-size:12px; }
.sb-agenda section > header span { color:var(--gw-text-muted); font-size:10px; }
.sb-agenda section > button { width:100%; display:grid; grid-template-columns:145px 1fr auto; gap:12px; align-items:center; border:0; border-bottom:1px solid var(--gw-border); background:transparent; text-align:left; padding:9px 12px; color:var(--gw-text); cursor:pointer; }
.sb-agenda section > button:last-child { border-bottom:0; }
.sb-agenda section > button:hover { background:color-mix(in srgb,var(--gw-pine-500) 5%,transparent); }
.sb-agenda time { font-size:10px; font-weight:800; }
.sb-agenda button span strong,.sb-agenda button span small { display:block; }
.sb-agenda button span small { color:var(--gw-text-muted); font-size:10px; margin-top:2px; }
.sb-agenda button em { font-size:9px; font-style:normal; color:var(--gw-text-muted); }
.sb-agenda-empty { padding:40px; text-align:center; color:var(--gw-text-muted); }

@media (max-width:900px) {
  .sched-shell .gwp-header { position:static; }
  .sb-timeline-scroll { max-height:calc(100vh - 190px); max-height:calc(100dvh - 190px); }
  .sb-timeline-toolbar span { display:none; }
  .sb-agenda section > button { grid-template-columns:105px 1fr; }
  .sb-agenda section > button > em { display:none; }
}
.sb-timeline-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:8px; }
.sb-backlog { border:1px solid var(--gw-border); border-radius:10px; background:var(--gw-bg-surface); max-height:calc(100vh - 220px); max-height:calc(100dvh - 220px); overflow:auto; }
.sb-backlog > header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; padding:10px; background:var(--gw-bg-surface-2); border-bottom:1px solid var(--gw-border); font-size:11px; }
.sb-backlog > header span { min-width:20px; text-align:center; border-radius:99px; background:var(--gw-pine-500); color:white; }
.sb-backlog > p { margin:8px 9px; font-size:9px; color:var(--gw-text-muted); }
.sb-backlog article { margin:6px; padding:8px; border:1px solid var(--gw-border); border-left:3px solid var(--gw-pine-500); border-radius:6px; cursor:grab; background:var(--gw-bg-surface); }
.sb-backlog article strong,.sb-backlog article small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-backlog article strong { font-size:10px; }
.sb-backlog article small { margin-top:2px; font-size:9px; color:var(--gw-text-muted); }
.sb-backlog-empty { padding:20px 10px; font-size:10px; text-align:center; color:var(--gw-text-muted); }
@media (max-width:1100px) { .sb-timeline-layout { grid-template-columns:1fr; } .sb-backlog { max-height:120px; display:flex; gap:4px; align-items:center; padding:4px; } .sb-backlog > header,.sb-backlog > p { display:none; } .sb-backlog article { min-width:150px; } }
.sb-lane-crew-name small { display:block; margin-top:3px; color:var(--gw-text-muted); font-size:8px; font-weight:600; }
.sb-lane-crew-name i { display:block; width:76px; height:3px; margin-top:3px; overflow:hidden; border-radius:99px; background:var(--gw-border); }
.sb-lane-crew-name i b { display:block; height:100%; background:var(--gw-pine-500); border-radius:inherit; }

/* My Day professional structured dashboard
   (grid-template-columns/gap/align-items now set once on the base .gw-myday-grid
   rule above — this block previously redeclared them with !important and, more
   importantly, forced grid-auto-rows:auto + grid-auto-flow:row, which fought the
   masonry engine's 4px fine-grained rows + dense packing and caused large dead
   vertical gaps between widgets. Removed; base rule is now the single source
   of truth for row sizing.
   IMPORTANT: grid-row must NOT be forced to auto with !important here — the
   masonry JS (_gwMyDayMasonry()) sets each widget's grid-row via inline style
   ("span N") after measuring its real height. An !important CSS rule always
   beats an inline style regardless of specificity, so the previous
   `grid-row: auto !important` silently nullified every widget's computed
   span — with dense packing and no span info, widgets could be placed into
   overlapping cells (the visible widget-overlap bug). No CSS grid-row rule
   at all for .gw-myday-widget → the JS inline style is free to apply. */
.gw-myday-widget {
  align-self: stretch;
  min-width: 0;
}
.gw-myday-widget-body {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
  container-type: inline-size;
}
.gw-myday-widget-body > .card,
.gw-myday-widget-body > section.card,
.gw-myday-widget-body > .gw-today-fin-card,
.gw-myday-widget-body > div > .card {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gw-line, #E2EAE9);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(31,42,43,.055);
  padding: 18px;
}
.gw-myday-widget-body .section-head {
  min-height: 42px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gw-line, #E2EAE9);
}
.gw-myday-widget-body .section-head h2,
.gw-myday-widget-body .gw-today-fin-title {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-transform: none;
}
/* Fallback minimum widths (record-list widgets must never collapse into
   unusable one-character columns). NOT !important: every widget already
   gets its real column span as an inline style from _gwMyDaySpanOf()
   (custom layout choice, or the active day-mode's `spans` config — e.g.
   curated mode's tasks:2/calendar:2/pipeChart:2 side-by-side row). An
   !important rule here would always beat that inline span regardless of
   which mode is active, which is exactly what caused My Tasks to render at
   a fixed span 4 (overlapping Pipeline Chart) instead of curated mode's
   configured span 2. These rules now only apply on the rare path where no
   inline grid-column was set. */
.gw-myday-widget[data-widget-id="recent"],
.gw-myday-widget[data-widget-id="staleLeads"],
.gw-myday-widget[data-widget-id="recentWins"] { grid-column: span 3; }
.gw-myday-widget[data-widget-id="tasks"] { grid-column: span 4; }
.gw-myday-widget[data-widget-id="calendar"] { grid-column: span 2; }
.gw-myday-widget[data-widget-id="pipeStrip"],
.gw-myday-widget[data-widget-id="activity"],
.gw-myday-widget[data-widget-id="reviews"] { grid-column: span 6; }
.gw-myday-widget-body h2,
.gw-myday-widget-body h3,
.gw-myday-widget-body .mini-row > *,
.gw-myday-widget-body .opp-card > * {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}
.gw-myday-widget-body .mini-row strong,
.gw-myday-widget-body .opp-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gw-myday-widget-body .mini-row em,
.gw-myday-widget-body .opp-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Keep lists concise; full records remain available from their destination pages. */
.gw-myday-widget[data-widget-id="recent"] .mini-row:nth-of-type(n+6),
.gw-myday-widget[data-widget-id="staleLeads"] .mini-row:nth-of-type(n+7),
.gw-myday-widget[data-widget-id="recentWins"] .mini-row:nth-of-type(n+7) { display:none; }
/* Arbitrary pixel-height resize caused nested scrollbars and stale empty space. */
.gw-myday-grip--s,
.gw-myday-grip--se { display:none !important; }
.gw-myday-grip--e { top:44px; bottom:12px; }
.gw-myday-edit-banner { position:sticky; top:68px; z-index:8; box-shadow:0 8px 22px rgba(31,42,43,.08); }
.gw-myday-widget--edit { animation:none; }
.gw-myday-placeholder { min-height:72px; display:grid; place-items:center; }
@media (max-width: 1180px) and (min-width: 769px) {
  .gw-myday-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .gw-myday-widget { grid-column:span 1 !important; }
  .gw-myday-widget[data-widget-id="tasks"],
  .gw-myday-widget[data-widget-id="pipeStrip"],
  .gw-myday-widget[data-widget-id="activity"],
  .gw-myday-widget[data-widget-id="reviews"],
  .gw-myday-widget[data-widget-id="jobsToday"] { grid-column:1 / -1 !important; }
}
@media (max-width:768px) {
  .gw-myday-grid { grid-template-columns:1fr !important; gap:14px !important; }
  .gw-myday-widget { grid-column:1 / -1 !important; }
}
@media print {
  .gw-myday-modes,.gw-myday-customize-btn,.gw-myday-edit-banner,.gw-myday-library { display:none !important; }
  .gw-myday-grid { display:block !important; }
  .gw-myday-widget { break-inside:avoid; margin-bottom:16px; }
}
.gw-myday-widget--compact .gw-myday-widget-body > .card,
.gw-myday-widget--compact .gw-myday-widget-body > section.card,
.gw-myday-widget--compact .gw-myday-widget-body > .gw-today-fin-card,
.gw-myday-widget--compact .gw-myday-widget-body > div > .card { padding:13px; }
.gw-myday-widget--compact .mini-row:nth-of-type(n+4),
.gw-myday-widget--compact .opp-card:nth-of-type(n+4),
.gw-myday-widget--compact .gw-myday-job-row:nth-of-type(n+4) { display:none; }
.gw-myday-widget--compact .gw-today-fin-divisions { display:none; }
.gw-myday-widget--expanded { grid-column:1 / -1 !important; }
.gw-myday-widget--expanded .gw-myday-widget-body > .card,
.gw-myday-widget--expanded .gw-myday-widget-body > section.card { padding:22px; }

/* Schedule board layout system: consistent sizing and restrained status color.
   No outer width/max-width cap here (unlike an earlier version of this block) —
   .view (the CRM SPA's own content container) is itself fluid with no cap, and
   these three sections should fill it the same way every other in-SPA page's
   content does, rather than sticking to a fixed frame with dead space around
   it on wide monitors. The grid columns underneath (.sb-week-grid etc.) carry
   their own upper bound instead, so cells don't stretch unboundedly. */
.sched-shell {
  --sb-card-bg: #fff;
  padding: 18px 0 40px;
}
.sched-shell .gwp-shell,
.sched-shell > .sb-crew-bar,
.sched-shell > .sb-grid-wrap {
  box-sizing: border-box;
}
.sched-shell .gwp-shell { padding: 0 !important; }
.sched-shell .gwp-header {
  position: relative;
  top: auto;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  gap: 14px 24px;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
}
.sched-shell .gwp-header-left,
.sched-shell .gwp-header-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sched-shell .gwp-header-left { flex-wrap: wrap; }
.sched-shell .gwp-header-actions { justify-content: flex-end; flex-wrap: nowrap; }
.sched-shell .gwp-title { font-size: clamp(24px, 2.3vw, 34px); line-height: 1; }
.sched-shell .sb-nav-controls { min-width: 0; }
.sched-shell .sb-period-label { min-width: 176px; font-variant-numeric: tabular-nums; }
.sched-shell .sb-view-toggle { flex: 0 0 auto; }
.sched-shell .sb-view-btn,
.sched-shell .sb-density-select,
.sched-shell .gwp-btn-ghost,
.sched-shell .gwp-btn-primary { min-height: 36px; white-space: nowrap; }
.sched-shell .gwp-kpi-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px !important;
}
.sched-shell .gwp-kpi-card {
  min-width: 0;
  min-height: 104px;
  padding: 16px;
  box-sizing: border-box;
}
.sched-shell .gwp-kpi-label { white-space: normal; line-height: 1.2; }
.sched-shell > .sb-crew-bar {
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(26,71,64,.10);
  border-radius: 12px 12px 0 0;
  box-shadow: none;
}
.sb-crew-bar-chips,
.sb-crew-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-shell .sb-crew-toggle,
.sched-shell .sb-crew-manage-btn,
.sched-shell .sb-crew-lane-btn { min-height: 34px; box-sizing: border-box; }
.sched-shell > .sb-grid-wrap {
  padding: 12px 12px 18px;
  border: 1px solid rgba(26,71,64,.10);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(17,57,49,.06);
}

/* Equal calendar columns. Horizontal scrolling is preferable to squeezed days.
   Columns cap their upper width instead of stretching to 1fr now that the
   outer shell has no max-width of its own — otherwise a day column could
   grow past 300px+ on an ultra-wide monitor with mostly empty padding around
   a card sized for ~160-170px. justify-content:center (not margin:auto — a
   grid container doesn't shrink to its tracks' total size on its own) centers
   the columns within any leftover width once they've hit their cap. */
.sched-shell .sb-week-grid {
  grid-template-columns: repeat(7, minmax(160px, 240px));
  min-width: 1120px;
  gap: 6px;
  justify-content: center;
}
.sched-shell .sb-lane-wrap { min-width: 1280px; border-radius: 8px; }
.sched-shell .sb-lane-grid { grid-template-columns: 126px repeat(7, minmax(164px, 240px)); justify-content: center; }
.sched-shell .sb-lane-day-head { min-height: 58px; box-sizing: border-box; }
.sched-shell .sb-lane-label { padding: 10px 9px; align-items: flex-start; }
.sched-shell .sb-lane-cell { min-height: 112px; padding: 7px; gap: 6px; background: #fff; }
.sched-shell .sb-month-grid {
  grid-template-columns: repeat(7, minmax(132px, 200px));
  min-width: 924px;
  gap: 4px;
  justify-content: center;
}
.sched-shell .sb-month-cell { min-height: 112px; padding: 7px; box-sizing: border-box; }
.sched-shell .sb-month-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid var(--gw-border);
  border-left-width: 3px !important;
}
.sched-shell .sb-month-chip--hold,
.sched-shell .sb-month-chip--multiday { background: #fff; }

/* Event surfaces stay neutral. Status is communicated by a dot and small badge. */
.sched-shell .sb-job-card,
.sched-shell .sb-job-card.wo-status--scheduled,
.sched-shell .sb-job-card.wo-status--inprogress,
.sched-shell .sb-job-card.wo-status--completed,
.sched-shell .sb-job-card.wo-status--hold,
.sched-shell .sb-job-card.wo-status--onhold,
.sched-shell .sb-job-card.wo-status--cancelled {
  min-width: 0;
  box-sizing: border-box;
  background: var(--sb-card-bg) !important;
  border: 1px solid var(--gw-border) !important;
  border-left: 4px solid var(--crew-color, #94a3b8) !important;
  outline: none;
  box-shadow: 0 2px 6px rgba(17,57,49,.07);
  color: var(--gw-text);
}
.sched-shell .sb-job-card:hover { border-color: color-mix(in srgb, var(--crew-color, #94a3b8) 55%, var(--gw-border)) !important; }
.sched-shell .sb-card-top { min-width: 0; flex-wrap: nowrap; }
.sched-shell .sb-card-num { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-shell .sb-card-time { font-variant-numeric: tabular-nums; }
.sched-shell .sb-card-client {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: normal;
  word-break: normal;
}
.sched-shell .sb-card-status {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-shell .sb-job-card--multiday { box-shadow: 0 2px 6px rgba(17,57,49,.07), inset 0 0 0 1px color-mix(in srgb,var(--md-color) 18%,transparent); }
.sched-shell .sb-day-body:has(.sb-job-card--multiday),
.sched-shell .sb-lane-cell:has(.sb-job-card--multiday) { background-image: none; }
.sched-shell .sb-time-event {
  background: #fff;
  border-color: var(--gw-border);
  border-left-color: var(--event-color);
  box-shadow: 0 2px 7px rgba(17,57,49,.10);
}
.sched-shell .sb-time-event-time { display: flex; align-items: center; gap: 6px; color: var(--gw-text-muted); font-variant-numeric: tabular-nums; }
.sched-shell .sb-time-event .sb-traffic-dot { width: 7px !important; height: 7px !important; box-shadow: none !important; animation: none !important; }
.sched-shell .sb-time-resize { background: linear-gradient(transparent, rgba(17,57,49,.08)); }

@media (max-width: 1180px) {
  .sched-shell .gwp-header { grid-template-columns: 1fr; }
  .sched-shell .gwp-header-actions { justify-content: flex-start; flex-wrap: wrap; }
  .sched-shell .gwp-kpi-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 768px) {
  .sched-shell { padding-top: 10px; }
  .sched-shell .gwp-shell,
  .sched-shell > .sb-crew-bar,
  .sched-shell > .sb-grid-wrap { width: calc(100% - 20px); }
  .sched-shell .gwp-header { padding: 14px !important; }
  .sched-shell .gwp-header-left { align-items: flex-start; }
  .sched-shell .sb-period-label { min-width: 138px; text-align: left; }
  .sched-shell .gwp-kpi-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .sched-shell .gwp-kpi-card { min-height: 88px; padding: 12px; }
}
/* Normalized sales-process Builder */
.spb-heading,.spb-version,.button-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.spb-tabs{overflow-x:auto;white-space:nowrap}.spb-stage-row,.spb-component-row{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(130px,1fr) minmax(90px,.6fr) minmax(150px,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}.spb-stage-row textarea,.spb-component-row textarea{min-height:72px}.spb-component-row label{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:700;color:var(--muted)}.spb-component-row label input,.spb-component-row label select,.spb-component-row label textarea{font-size:.88rem;font-weight:400;color:var(--ink)}.spb-lifecycle{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;counter-reset:lifecycle}.spb-lifecycle li{padding:8px 12px;border:1px solid var(--line);border-radius:999px}.spb-suggestion pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:10px;border-radius:8px}.spb-ai-interview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;margin-bottom:14px;border:1px solid var(--line);border-radius:10px}.spb-ai-interview label{display:flex;flex-direction:column;gap:5px}.spb-ai-interview button{align-self:end}
@media(max-width:768px){.spb-stage-row,.spb-component-row{grid-template-columns:1fr}.spb-stage-row button,.spb-component-row button{width:100%}.spb-lifecycle{display:grid;grid-template-columns:1fr 1fr}.spb-heading{align-items:flex-start}.spb-tabs{margin-left:-16px;margin-right:-16px;padding:0 16px}}
.spb-restaging-row{display:grid;grid-template-columns:1.2fr 1.3fr minmax(150px,.8fr) minmax(120px,.6fr) auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}.spb-restaging-row p{margin:4px 0;font-size:.8rem}.spb-restaging-row label{font-size:.75rem;font-weight:700}.spb-restaging-row select{display:block;width:100%;margin-top:5px}@media(max-width:768px){.spb-restaging-row,.spb-ai-interview{grid-template-columns:1fr}.spb-restaging-row button,.spb-ai-interview button{width:100%}}
.spb-preview{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px}.spb-preview-heading{display:flex;justify-content:space-between;gap:12px;align-items:start}.spb-preview-heading p{margin:4px 0}.spb-preview-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.spb-preview-grid article{display:flex;flex-direction:column;padding:10px;background:var(--surface);border-radius:8px}.spb-preview-grid article strong{font-size:1.15rem}.spb-preview-grid article span,.spb-preview-stages span{font-size:.75rem;color:var(--muted)}.spb-preview-stages{display:flex;gap:8px;overflow-x:auto;padding:0;list-style:none}.spb-preview-stages li{display:flex;flex-direction:column;min-width:130px;padding:9px;border:1px solid var(--line);border-radius:8px}.spb-gate-list{color:var(--danger)}@media(max-width:768px){.spb-preview-heading{display:block}.spb-preview-grid{grid-template-columns:1fr 1fr}.spb-preview-stages{display:grid;grid-template-columns:1fr}.spb-preview-stages li{min-width:0}}
/* Sales-process builder: start cards and step wizard */
.spb-start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.spb-start-card{display:flex;flex-direction:column;gap:10px;padding:20px}
.spb-start-card h2{margin:0}
.spb-start-card p{margin:0;color:var(--muted)}
.spb-start-card label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:700;color:var(--muted)}
.spb-start-card label input,.spb-start-card label select{font-size:.9rem;font-weight:400;color:var(--ink)}
.spb-start-card button{margin-top:auto;align-self:flex-start}
.spb-heading-badges{display:flex;gap:8px;align-items:center}
.spb-live-note{border-left:4px solid var(--brand,#2563eb);margin:12px 0}
.spb-live-note p{margin:0 0 10px}
.spb-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 14px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.spb-step{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:transparent;font-weight:700;font-size:.85rem;color:var(--muted);cursor:pointer}
.spb-step:hover{border-color:var(--brand,#2563eb);color:var(--ink)}
.spb-step--active{background:var(--brand,#2563eb);border-color:var(--brand,#2563eb);color:#fff}
.spb-step--active .spb-step-num{background:rgba(255,255,255,.25);color:#fff}
.spb-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);font-size:.75rem;font-weight:800}
.spb-adv-select{margin-left:auto;max-width:200px;font-size:.82rem;padding:9px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--surface);font-weight:700;cursor:pointer}
.spb-adv-select:hover{border-color:var(--blue)}
.spb-step-hint{margin:0 0 14px;padding:10px 12px;background:var(--surface);border-radius:8px;color:var(--muted);font-size:.85rem}
@media(max-width:768px){.spb-start-grid{grid-template-columns:1fr}.spb-steps{flex-direction:column;align-items:stretch}.spb-step{justify-content:flex-start}.spb-adv-select{margin-left:0;max-width:none}}
.spb-stage-card{display:flex;flex-direction:column;gap:12px;padding:18px;margin-bottom:14px;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);counter-increment:spbstage;transition:box-shadow .15s,border-color .15s}
.spb-stage-card:focus-within{border-color:var(--blue);box-shadow:0 4px 14px rgba(37,99,235,.1)}
#spb-stage-list{counter-reset:spbstage}
.spb-stage-num::before{content:counter(spbstage)}
.spb-stage-num{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-size:.82rem;font-weight:800;flex:none;margin-top:18px}
.spb-stage-card-head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.spb-stage-toggle{margin-left:auto;margin-top:18px;flex:none;display:inline-flex;align-items:center;gap:2px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s}
.spb-stage-toggle:hover{border-color:var(--blue);color:var(--ink)}
.spb-stage-toggle--open{background:rgba(37,99,235,.08);border-color:var(--blue);color:var(--ink)}
.spb-stage-card-body.gw-accordion-body{margin-top:0}
.spb-stage-list-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.spb-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.spb-field>label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gw-muted,var(--muted))}
.spb-field input,.spb-field select,.spb-field textarea{font-size:.9rem;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);width:100%}
.spb-field input:focus,.spb-field select:focus,.spb-field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.spb-field input:disabled,.spb-field select:disabled,.spb-field textarea:disabled{opacity:.65;background:var(--line);cursor:not-allowed}
.spb-field-grow{flex:2 1 220px}
.spb-stage-card-head .spb-field{flex:1 1 170px}
.spb-stage-card-head .spb-field-narrow{flex:0 1 110px}
.spb-stage-card-guidance{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spb-stage-card-guidance textarea{min-height:74px;resize:vertical}
.spb-stage-card-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px dashed var(--line)}
.spb-stage-card-actions button{font-size:.78rem;padding:7px 12px}
.spb-stage-card-actions .spb-remove-btn{margin-left:auto;color:var(--danger,#b91c1c);border-color:currentColor}
.spb-stage-card-actions .spb-remove-btn:hover{background:rgba(185,28,28,.06)}
.spb-empty{padding:22px;text-align:center;border:1px dashed var(--line);border-radius:12px}
.spb-component-row{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.spb-component-row:focus-within{border-color:var(--blue)}
.spb-component-row label{text-transform:uppercase;letter-spacing:.04em}
.spb-component-row label input,.spb-component-row label select,.spb-component-row label textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.spb-component-row label input:focus,.spb-component-row label select:focus,.spb-component-row label textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.spb-component-row>button{justify-self:start;align-self:end;font-size:.78rem}
@media(max-width:768px){.spb-stage-card{padding:14px}.spb-stage-card-head{flex-direction:column}.spb-stage-card-head .spb-field,.spb-stage-card-head .spb-field-narrow,.spb-field-grow{flex:1 1 auto;width:100%}.spb-stage-card-guidance{grid-template-columns:1fr}.spb-stage-num{margin-top:0}.spb-stage-card-actions button{flex:1 1 auto}.spb-stage-toggle{align-self:flex-end;margin-top:0;width:fit-content}}

/* ══════════════════════════════════════════════════════════════════════════
   GROUNDWORK AI — CLOSE LIKELIHOOD SCORE + TIME-IN-STAGE CLOCK
   ══════════════════════════════════════════════════════════════════════════ */

/* Score pill (pipeline cards + mini rows) */
.gw-score-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:2px 8px;border-radius:20px;
  font-size:11px;font-weight:800;letter-spacing:.02em;flex-shrink:0;
  cursor:help;line-height:1.5;
}
.gw-score-pill.gw-score-sm{min-width:32px;padding:1px 6px;font-size:10px}
.gw-score-high,.gw-score-won{background:#E4F2EA;color:#1E5C3F;border:1px solid #C6E3D2}
.gw-score-mid {background:#FAF6E8;color:#7A5C10;border:1px solid #F5E8C0}
.gw-score-low,.gw-score-lost{background:#FAE8E4;color:#8B3A2A;border:1px solid #F5D5C8}

/* Days-in-stage chip (replaces the OVERDUE badge) */
.stage-clock-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;margin-bottom:6px;
  font-size:10px;font-weight:700;letter-spacing:.03em;
}
.stage-clock-ok   {background:#EEF3EE;color:#4A5C4A;border:1px solid #DDE7DD}
.stage-clock-watch{background:#FAF6E8;color:#7A5C10;border:1px solid #F5E8C0}
.stage-clock-late {background:#FAE8E4;color:#8B3A2A;border:1px solid #F5D5C8}

/* Detail page — Groundwork AI rail card */
.gw-ai-card{border-top:3px solid var(--gw-brand,#113931)}
.gw-ai-body{padding:14px 16px}
.gw-ai-score-row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.gw-ai-score{font-size:1.7rem;font-weight:900;line-height:1}
.gw-ai-score--high,.gw-ai-score--won{color:#1E5C3F}
.gw-ai-score--mid{color:#7A5C10}
.gw-ai-score--low,.gw-ai-score--lost{color:#8B3A2A}
.gw-ai-score-label{font-size:11.5px;font-weight:600;color:var(--gw-text-muted,#6F7E6A)}
.gw-ai-meter{height:6px;border-radius:4px;background:#EDF1ED;overflow:hidden;margin-bottom:10px}
.gw-ai-meter-fill{height:100%;border-radius:4px;transition:width .5s ease}
.gw-ai-meter--high,.gw-ai-meter--won{background:linear-gradient(90deg,#2D7A55,#4D8A86)}
.gw-ai-meter--mid{background:linear-gradient(90deg,#B8860B,#D4A82C)}
.gw-ai-meter--low,.gw-ai-meter--lost{background:linear-gradient(90deg,#8B3A2A,#C97B6A)}
.gw-ai-clock{font-size:11.5px;color:var(--gw-text-muted,#6F7E6A);margin-bottom:10px}
.gw-ai-clock strong{color:var(--gw-ink,#1B2A1B)}
.gw-ai-factors{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--gw-border,#E4EAE4);padding-top:10px}
.gw-ai-factor{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;color:var(--gw-text,#334133)}
.gw-ai-factor em{font-style:normal;font-weight:800;font-size:11px;color:var(--gw-text-muted,#6F7E6A);flex-shrink:0}
.gw-ai-factor em.pos{color:#1E5C3F}
.gw-ai-factor em.neg{color:#8B3A2A}
.gw-ai-factor--base{color:var(--gw-text-muted,#6F7E6A)}
.gw-ai-footnote{margin-top:10px;font-size:10.5px;color:var(--gw-text-subtle,#8A968A);line-height:1.45}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND CENTER VISUAL REFRESH — Option 1 (scoped preview)
   2026-08-04 · Premium-aesthetic pass modeled on the "Groundwork" marketing
   mockups (warm cream bg, wider breathing room, softer/warmer borders,
   near-flat shadows, restrained green-accent usage).

   SCOPE: every rule below is namespaced under `.view.gw-view--cc` — the
   Command Center view container only (class added/removed by
   _gwTodayRender()/show() in app_premium.js). Nothing here touches the
   shared :root design tokens, so every other page in the app is completely
   unaffected. If/when this is approved for a global rollout, these values
   move up into :root and this whole block goes away.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page background: warm cream instead of the app-wide cool mint ── */
.view.gw-view--cc {
  background: #F8F6F1;
}

/* ── Wider breathing room: grid gap + card padding ── */
.view.gw-view--cc .gw-myday-grid {
  column-gap: 24px;
}
.view.gw-view--cc .gw-myday-widget-body > .card,
.view.gw-view--cc .gw-myday-widget-body > section.card,
.view.gw-view--cc .gw-myday-widget-body > .gw-today-fin-card,
.view.gw-view--cc .gw-myday-widget-body > div > .card {
  padding: 22px;
}
.view.gw-view--cc .gw-today-pipe-cell {
  padding: 18px 20px;
}
.view.gw-view--cc .gw-today-pipe-strip {
  gap: 18px;
}

/* ── Softer, warmer card borders + near-flat shadow (mockups use almost no
   shadow — depth comes from whitespace, not elevation) ── */
.view.gw-view--cc .gw-myday-widget-body > .card,
.view.gw-view--cc .gw-myday-widget-body > section.card,
.view.gw-view--cc .gw-myday-widget-body > .gw-today-fin-card,
.view.gw-view--cc .gw-myday-widget-body > div > .card {
  border-color: #E7E3D9;
  box-shadow: 0 1px 3px rgba(31,28,20,.035);
}
.view.gw-view--cc .gw-today-pipe-cell {
  border-color: #E7E3D9;
  box-shadow: none;
}
.view.gw-view--cc .gw-today-pipe-cell:hover {
  box-shadow: 0 4px 12px rgba(31,28,20,.06);
}

/* ── Zone section dividers: warm neutral instead of the cool --gw-line ── */
.view.gw-view--cc .gw-myday-zone-head {
  border-bottom-color: #E7E3D9;
}

/* ── Bolder headline type on the page title, more like the mockups' larger
   display type (Command Center title only — not a global h1 change) ── */
.view.gw-view--cc .pl-title {
  font-size: 30px;
  letter-spacing: -.035em;
}

/* ── Restrained accent color on the hero KPI strip ─────────────────────────
   Neutral tiles (Open Leads / Proposals Out / Pipeline Value): plain ink
   icon chip on a soft warm-gray tint, no colored top edge — informational
   counts don't need a hue. Green stays reserved for genuinely positive/
   active state (Won MTD, and a healthy Avg Close Likelihood via the
   existing --emerald/--amber/--rose score bands, unchanged). */
.view.gw-view--cc .gw-today-pipe-cell--neutral:before,
.view.gw-view--cc .gw-today-pipe-cell--neutral .gw-today-pipe-ic {
  background: #EDEAE2;
}
.view.gw-view--cc .gw-today-pipe-cell--neutral .gw-today-pipe-ic {
  color: #6B6557;
  opacity: 1;
}

/* ── Widget cards: title weight nudged up slightly to match the mockups'
   bolder section headers, still well within existing sizing so nothing
   reflows ── */
.view.gw-view--cc .gw-myday-widget-body .section-head h2,
.view.gw-view--cc .gw-myday-widget-body .gw-today-fin-title {
  font-weight: 800;
}

/* ── Command Center hero — dark frame treatment + embedded placeholder
   KPI tiles ──────────────────────────────────────────────────────────────
   The hero (.pl-page-header, shared with Pipeline/Clients pages) already
   gets the dark green gradient + white text from the generic rule above.
   .gw-cc-hero adds one thing on top, scoped to Command Center only: a row
   of large "configure later" placeholder metric tiles embedded directly
   inside the panel (dashed border, translucent icon chip, "Placeholder"
   tag) — these are NOT wired to real data, purely a future-metrics slot,
   unrelated to the real pipeline snapshot strip that renders below the
   hero. flex-wrap on .pl-page-header already stacks title/actions above
   this row; margin-top separates the KPI row from that line. */
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  /* Force onto its own row below title/actions (both siblings sit in the
     same flex-wrap:wrap header) without touching that header's direction. */
  flex-basis: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}
.hkpi.placeholder {
  border: 1.5px dashed rgba(255,255,255,.28);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color .15s, background .15s;
}
.hkpi.placeholder:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.07);
}
.hkpi-ph-top { display: flex; align-items: center; gap: 9px; }
.hkpi-ph-icon {
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(255,255,255,.11);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
.hkpi-ph-label { font-size: 13px; font-weight: 650; color: #fff; }
.hkpi-ph-hint { font-size: 11.5px; color: rgba(255,255,255,.55); font-style: italic; margin-top: 9px; }
.hkpi-ph-tag {
  display: inline-block; font-size: 9.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  border-radius: 4px; padding: 2px 6px; margin-top: 10px;
}
@media (max-width: 900px) {
  .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-kpis { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SECTION 43 — PIPELINE TOTALS: column money subheads + top KPI band
   The board previously showed counts only. Columns now carry their dollar
   total, and the generic stat row is replaced by a period-scoped KPI band.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Column subhead ── */
/* Sits under .kanban-col > h3, which is nowrap+ellipsis and must stay that way. */
.kanban-col-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin: -4px 0 9px;
  min-width: 0;
}
.kanban-col-money {
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-ink, #1C3A2B);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.kanban-col-flags {
  font-size: 10px;
  font-weight: 600;
  color: var(--gw-muted, #6F7E6A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* .gw-pipe-group-head is space-between with no gap — auto margin pulls the
   total over to the count pill, so it needs its own breathing room. */
.gw-pipe-group-total {
  margin-left: auto;
  margin-right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gw-ink, #1C3A2B);
  white-space: nowrap;
}

/* ── Top KPI band ── */
.gw-kpi-band { margin-top: 12px; padding: 12px 16px; }

.gw-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.gw-kpi-head-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gw-muted, #6F7E6A);
}
.gw-kpi-periods { display: flex; flex-wrap: wrap; gap: 6px; }

.gw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.gw-kpi-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--gw-line, #E4EAE3);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gw-kpi-tile:hover:not(:disabled) {
  background: rgba(77, 138, 134, .06);
  border-color: rgba(77, 138, 134, .34);
}
.gw-kpi-tile--on {
  background: rgba(77, 138, 134, .12);
  border-color: rgba(77, 138, 134, .44);
}
/* Forecast and win rate aren't board filters — no pointer, no hover lift. */
.gw-kpi-tile--static { cursor: default; opacity: 1; }

/* Scoped under .gw-kpi-band: these three class names are reused (with
   different rules) by unrelated older KPI components elsewhere in this file
   — scoping avoids widening that collision while we're already editing here. */
.gw-kpi-band .gw-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gw-muted, #6F7E6A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-kpi-band .gw-kpi-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gw-ink, #1C3A2B);
  white-space: nowrap;
}
.gw-kpi-band .gw-kpi-sub {
  font-size: 11px;
  color: var(--gw-muted, #6F7E6A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed 3-tile variant (e.g. Sales Process "at a glance" band) — placed before
   the responsive overrides below so ≤1180px/≤700px still collapse it same as
   the base 6-tile grid, unlike .gw-kpi-grid--divisions' auto-fit below. */
.gw-kpi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) { .gw-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .gw-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Divider between the Closed Results tiles and the By Division row ── */
.gw-kpi-divider {
  border-top: 1px solid var(--gw-line, #E4EAE3);
  margin: 14px 0 10px;
}

/* Division tile count varies by tenant — auto-fit rather than a fixed split. */
.gw-kpi-grid--divisions {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE COMPONENT PATTERNS  (phone, <=768px)
   Two reusable patterns so individual screens don't each invent their own
   mobile treatment. Kept at the end of the file deliberately: these are meant
   to win over the per-feature rules defined above them.

   1. Tables -> cards. The codebase has ~30 separate table implementations and
      most had no scroll container, so a wide table simply pushed the page
      sideways. Where a table was handled at all, the approach was to *hide*
      columns (.cl-table hid columns 4-5, .wo-row hid 3 of 7) — the data was
      thrown away rather than reflowed. A card per row shows everything.
      data-label is stamped automatically from <thead> by _gwEnhanceTables()
      in app_premium.js, so render functions don't need to change.
      Opt out with data-no-mcards on the table.

   2. Modals -> bottom sheets. There were ~12 independent overlay/card class
      pairs and exactly one (.gw-task-modal) became a sheet on mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Safety net: applies at every width. A table may scroll inside its own
   wrapper, but must never make the document scroll sideways. */
.gw-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 768px) {

  /* ── 1. Tables as cards ─────────────────────────────────────────────────── */
  table.gw-mcards {
    border-collapse: separate;
    border-spacing: 0;
  }
  /* Header is still read by assistive tech, just not painted. */
  table.gw-mcards thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  table.gw-mcards,
  table.gw-mcards tbody,
  table.gw-mcards tr,
  table.gw-mcards td {
    display: block;
    width: 100%;
  }
  table.gw-mcards tr {
    background: var(--gw-surface);
    border: 1px solid var(--gw-line);
    border-radius: var(--gw-r-md, 14px);
    box-shadow: var(--gw-shadow-xs);
    margin-bottom: var(--gw-space-3, 12px);
    padding: 4px 14px;
  }
  table.gw-mcards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gw-space-3, 12px);
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--gw-line);
    text-align: right;
    white-space: normal;
  }
  table.gw-mcards tr td:last-child { border-bottom: 0; }
  table.gw-mcards td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--gw-muted);
    letter-spacing: .01em;
  }
  /* A cell with no label and no content is just noise on a card. */
  table.gw-mcards td:empty { display: none; }
  /* Action cells read better as a full-width row of buttons. */
  table.gw-mcards td.gw-mcards-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--gw-space-2, 8px);
  }
  table.gw-mcards td.gw-mcards-actions::before { flex-basis: 100%; }

  /* Stop hiding data now that rows reflow. These were the two lossy rules. */
  .cl-cell-addr, .cl-cell-contact,
  .cl-table th:nth-child(4), .cl-table th:nth-child(5) { display: revert; }

  /* ── Grid-based pseudo-tables ───────────────────────────────────────────── */
  /* .wo-row and friends are CSS grids pretending to be tables, so they become
     cards by collapsing to a single column instead of dropping columns. */
  .wo-row, .cd-wo-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    background: var(--gw-surface);
    border: 1px solid var(--gw-line);
    border-radius: var(--gw-r-md, 14px);
    margin-bottom: var(--gw-space-3, 12px);
    padding: 12px 14px !important;
  }
  .wo-row > span:nth-child(3),
  .wo-row > span:nth-child(4),
  .wo-row > span:nth-child(5),
  .wo-type, .wo-date { display: revert !important; }
  .wo-actions { justify-content: flex-start; margin-top: 6px; }
  /* The header row of a grid pseudo-table means nothing once rows are cards. */
  .wo-row.wo-head, .wo-head.wo-row, .cd-wo-row.wo-head { display: none !important; }

  /* ── 2. Modals as bottom sheets ─────────────────────────────────────────── */
  .cl-modal-overlay, .gw-modal-overlay, .gw-task-modal-overlay,
  .sold-modal-backdrop, .ah-modal-bg, .sb-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    /* These overlays carry z-indexes as low as 100-300, which put them BELOW
       the bottom nav (8000) and the verify banner — so an open sheet had the
       nav and the banner painted across its content. Lift them onto the modal
       layer of the z-index scale. */
    z-index: var(--gw-z-modal, 9000) !important;
  }
  .cl-modal, .gw-modal, .gw-modal-card, .gw-task-modal,
  .sold-modal, .ah-modal, .sb-modal-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
    border-radius: var(--gw-r-xl, 24px) var(--gw-r-xl, 24px) 0 0 !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    padding-bottom: calc(var(--gw-space-5, 20px) + var(--gw-safe-b, 0px)) !important;
    animation: gw-sheet-in .22s cubic-bezier(.22,.6,.36,1);
  }
  /* Grab affordance so a sheet reads as draggable-looking, like native. */
  .cl-modal::before, .gw-modal::before, .gw-task-modal::before,
  .sold-modal::before, .ah-modal::before, .sb-modal-panel::before {
    content: '';
    display: block;
    width: 38px; height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: var(--gw-line-strong);
    flex: none;
  }

  /* ── 3. Fixed banners ───────────────────────────────────────────────────── */
  /* #gw-verify-banner is built with inline styles (left:50% + translateX(-50%)
     + shrink-to-fit), so on a phone it collapsed to a ~220px column of wrapped
     text sitting underneath the bottom nav. !important is required to beat the
     inline style attribute. */
  #gw-verify-banner {
    left: var(--gw-space-3, 12px) !important;
    right: var(--gw-space-3, 12px) !important;
    width: auto !important;
    transform: none !important;
    bottom: calc(80px + var(--gw-safe-b, 0px)) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    /* Above the bottom nav, below an open sheet. */
    z-index: calc(var(--gw-z-nav, 8000) + 100) !important;
  }
}

@keyframes gw-sheet-in {
  from { transform: translateY(14px); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SCREEN PASSES  (phone, <=768px)
   Per-screen fixes on top of the shared patterns above. Everything here was
   found by measuring scrollWidth vs clientWidth on a real 374px-wide render,
   so each rule corresponds to content that was actually being clipped or
   pushed out of its box rather than a guess about what might be tight.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Pipeline / My Day / Clients hero actions ───────────────────────────── */
  /* Was `flex:1 1 0; min-width:0; white-space:nowrap` — equal-width buttons
     crammed onto one row with text that could not wrap, so labels were clipped
     (a 71px button holding 101px of text). Wrap two-up instead: at 374px that
     is ~164px per button, comfortably wider than the longest label. */
  .pl-page-actions {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  .pl-page-actions .primary-btn,
  .pl-page-actions .secondary-btn,
  .pl-page-actions .primary-btn.small,
  .pl-page-actions .secondary-btn.small {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
  }
  /* Let the title and the action row sit on separate lines. Note: overflow
     stays hidden here on purpose — the hero's decorative ::after glow is a
     260px circle deliberately parked at right:-70px, so unclipping it makes
     the element report a 404px scrollWidth against a 334px box and looks like
     an overflow bug when nothing is actually being cut off. */
  .pl-page-header {
    flex-wrap: wrap !important;
  }

  /* ── Filter / toolbar chip rows ─────────────────────────────────────────── */
  /* These are chip strips that exceed the viewport by design. Scrolling them
     sideways is the right mobile pattern; leaving them `overflow:visible` was
     silently cutting the last filters off. */
  .pl-toolbar, .gw-toolbar, .filter-row, .cl-filter-row, .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .pl-toolbar::-webkit-scrollbar,
  .gw-toolbar::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .pl-toolbar > *, .gw-toolbar > *, .filter-row > *, .tabs > * { flex: 0 0 auto; }

  /* ── KPI tiles ──────────────────────────────────────────────────────────── */
  /* The band truncates labels with an ellipsis, which is fine in a wide tile
     but loses the label entirely in a 117px one ("AVG CLOSE LIKELIHOOD" became
     "AVG CLOSE…"). Let them wrap instead — the tile just gets taller. */
  .gw-kpi-band .gw-kpi-label,
  .gw-kpi-band .gw-kpi-sub,
  .gw-kpi-label, .gw-kpi-sub,
  .gwp-kpi-label, .gwp-kpi-sub, .gwp-kpi-body {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.3;
  }
  .gw-kpi-band .gw-kpi-value, .gw-kpi-value, .gwp-kpi-value {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  /* The card lays its icon and text out side by side, which leaves the label
     roughly 66px inside a 146px tile — not enough for a single word like
     "Outstanding" (90px), and a one-word label cannot wrap. Stacking the icon
     above the text hands the label the full tile width. */
  .gwp-kpi-card {
    overflow: visible !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .gwp-kpi-body { width: 100% !important; }

  /* Grid and flex children default to min-width:auto, which refuses to shrink
     below their content and is the usual reason a KPI row is a few pixels wider
     than its container on a narrow screen. minmax(0,1fr) + min-width:0 lets the
     tracks actually shrink. */
  .gwp-kpi-row, .gwp-kpi-row--3, .gwp-kpi-row--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .gwp-kpi-row > *, .gw-kpi-grid > *, .gw-kpi-band > *,
  .stat-grid > *, .dashboard-strip > *, .metric-strip > * {
    min-width: 0 !important;
  }
  .gwp-shell { min-width: 0 !important; max-width: 100% !important; }

  /* ── Kanban / board columns ─────────────────────────────────────────────── */
  /* A 3-column board with minmax(280px,1fr) tracks needs 840px+. One column per
     row is the only readable option on a phone. */
  .kanban { grid-template-columns: 1fr !important; }
  .kanban-col { min-width: 0 !important; }

  /* ── Detail / split layouts ─────────────────────────────────────────────── */
  .ld-body, .est-detail-shell, .est-builder-shell, .ah-detail-grid,
  .rp-cols, .rp-columns {
    grid-template-columns: 1fr !important;
  }
  .est-rail-card--sticky, .est-builder-rail, .ld-rail {
    position: static !important;
    max-height: none !important;
  }

  /* ── Filter bars built from <select> ────────────────────────────────────── */
  /* .est-filter-bar gives each select `flex:1 1 0; min-width:0`, so four of
     them splitting 310px collapsed to 43px each while needing 105px — the
     dropdowns were unreadable and effectively unusable. Wrap two-up with a
     real minimum instead. */
  .est-filter-bar, .cl-filter-bar, .inv-filter-bar {
    flex-wrap: wrap !important;
    gap: var(--gw-space-2, 8px) !important;
  }
  .est-filter-select, .est-filter-bar select,
  .cl-filter-bar select, .inv-filter-bar select {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }

  /* ── Schedule board mobile header ───────────────────────────────────────── */
  /* "Schedule" + ‹ + the date range + › were competing for 151px, and the date
     range lost completely — it computed to 0px wide, so there was no way to
     tell which week you were looking at. Give the title its own line and let
     the range take the space between the arrows. */
  .sbm-header-row1 { flex-wrap: wrap !important; }
  .sbm-title-nav {
    flex-wrap: wrap !important;
    flex: 1 1 100% !important;
    align-items: center !important;
  }
  .sbm-title { flex: 1 1 100% !important; }
  .sbm-period {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }
  .sbm-nav-btn { flex: 0 0 auto !important; }

  /* ── Truncated row titles ───────────────────────────────────────────────── */
  /* Ellipsised list titles lose the end of the name on a narrow screen; a
     second line costs nothing here. */
  .gw-task-row-title, .gw-myday-row-title, .mini-row strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
  }
}