/* Extracted verbatim from the original frontend/app.html — the real Oasis look. */

/* ── Apple-light professional theme ───────────────────── */
:root{
  --bg:#f5f5f7;
  --surface:#ffffff;
  --card:#fbfbfd;
  --card-2:#f5f5f7;
  --border:rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.14);
  --text:#1d1d1f;
  --muted:#86868b;
  --soft:#6e6e73;
  --orange:#ff6b1a;
  --orange-d:#e85d10;
  --orange-light:#ff8a4d;
  --purple:#af52de;
  --green:#34c759;
  --green-d:#1e8e3e;
  --red:#ff3b30;
  --red-d:#c0271d;
  --yellow:#ff9500;
  --yellow-d:#9a5b00;
  --blue:#007aff;
  --blue-d:#0a5fc7;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.85);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 10px 24px -8px rgba(0,0,0,.08);
  --shadow-lg:0 20px 50px -16px rgba(0,0,0,.14);
  --hero-grad:linear-gradient(180deg,#ffffff 0%, #fafafa 100%);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
header{
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  color:var(--text);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:sticky;top:0;z-index:100;
}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%, rgba(255,107,26,.35) 40%, rgba(255,107,26,.35) 60%, transparent 100%);
}
.brand-lockup{display:flex;align-items:center;text-decoration:none;color:inherit;}
.brand-lockup:hover{color:inherit;}
.brand-logo{height:34px;width:auto;display:block;flex-shrink:0;}
header h1{font-size:17px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
header p{font-size:11px;color:var(--muted);margin-top:1px;letter-spacing:.4px;text-transform:uppercase;font-weight:600;}
.hbtns{display:flex;gap:8px;align-items:center;}
nav{background:var(--surface);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;flex-shrink:0;position:relative;}
nav button, nav .nav-item{flex:1;padding:13px 10px;background:none;border:none;border-bottom:2px solid transparent;color:var(--soft);font-size:13px;font-weight:500;cursor:pointer;transition:color .15s, background .15s, border-color .15s;letter-spacing:-.1px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;}
nav button:hover, nav .nav-item:hover{color:var(--text);background:rgba(255,107,26,.04);}
nav button.active, nav .nav-item.active{color:var(--orange);border-bottom-color:var(--orange);background:rgba(255,107,26,.06);font-weight:600;}

/* Routines hover dropdown */
.nav-dropdown{position:relative;flex:1;}
.nav-dropdown > .nav-item{width:100%;}
.nav-dropdown .nav-menu{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;box-shadow:var(--shadow-lg);display:none;z-index:60;min-width:280px;overflow:hidden;}
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu{display:block;}
.nav-menu a{display:block;padding:12px 16px;font-size:13px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.nav-menu a:last-child{border-bottom:none;}
.nav-menu a:hover{background:rgba(255,107,26,.06);color:var(--orange);}
.nav-menu a .nm-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400;}
main{flex:1;overflow:hidden;}
.tab{display:none;height:100%;overflow-y:auto;padding:24px;}
.tab.active{display:block;}
#chat-tab.active{display:flex;flex-direction:column;padding:0;}
button{cursor:pointer;border:none;border-radius:8px;font-family:inherit;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;padding:8px 14px;font-size:12.5px;font-weight:600;letter-spacing:-.1px;transition:background .15s, transform .08s, box-shadow .15s;border-radius:8px;}
.btn:active{transform:scale(.985);}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(255,107,26,.45);}
.btn-orange:hover:not(:disabled){background:var(--orange-d);box-shadow:0 1px 2px rgba(0,0,0,.06), 0 6px 18px -4px rgba(255,107,26,.55);}
.btn-purple{background:var(--purple);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(175,82,222,.4);}
.btn-purple:hover:not(:disabled){background:#9540c9;}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn-ghost:hover{background:var(--card);}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
/* Button loading spinner */
@keyframes btn-spin{to{transform:rotate(360deg);}}
.btn.loading{cursor:not-allowed;}
.btn.loading::after{content:'';display:inline-block;width:11px;height:11px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:btn-spin .55s linear infinite;margin-left:8px;vertical-align:middle;}
/* Ingestion loading note — shown next to a submit button while a blocking
   OCR/vision/LLM call or a background job is in flight (see base.html's
   shared [data-loading-text] submit handler). */
.form-processing-note{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:8px 10px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:520px;}
.form-processing-note::before{content:'ℹ️';flex:0 0 auto;}
/* Global busy bar. Fades in only after a ~300ms grace period: a navigation
   that lands quickly (cached page, prefetched link, fast fragment swap) never
   flashes the bar at all — the flash itself read as "the whole page reloaded". */
#busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:linear-gradient(90deg,transparent 0%,var(--orange) 40%,var(--orange) 60%,transparent 100%);background-size:300% 100%;opacity:0;pointer-events:none;transition:opacity .15s ease;}
#busy-bar.show{opacity:1;transition-delay:.3s;animation:busy-slide 1.4s linear infinite;}
@keyframes busy-slide{0%{background-position:100% 0;}100%{background-position:-200% 0;}}

/* ── Smooth page-to-page navigation (cross-document view transitions) ──────
   Same-origin navigations crossfade instead of hard-cutting through a blank
   frame, so moving between sections stops feeling like a full reload. The
   sticky chrome (header + sidebar) gets its own named transition group with
   the animation zeroed out, so it visually stays put like an app shell while
   only the content area fades. Browsers without the feature (or users with
   reduced motion) simply keep the classic instant swap. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation: auto; }
  ::view-transition-old(root){ animation-duration:.16s; }
  ::view-transition-new(root){ animation-duration:.16s; }
  /* body > header only: inner card/section <header>s (e.g. the tasks board's
     post-its) must NOT get the name — a duplicate view-transition-name makes
     the browser skip the whole transition on that page. */
  body > header{ view-transition-name: oasis-header; }
  nav.sidebar{ view-transition-name: oasis-sidebar; }
  ::view-transition-group(oasis-header),
  ::view-transition-group(oasis-sidebar){ animation-duration:0s; }
  ::view-transition-old(oasis-header),
  ::view-transition-new(oasis-header),
  ::view-transition-old(oasis-sidebar),
  ::view-transition-new(oasis-sidebar){ animation:none; mix-blend-mode:normal; }
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.card h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);letter-spacing:-.2px;}
.card h4{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;}

/* "Under construction" tag */
.uc-tag{display:inline-block;background:rgba(255,149,0,.12);color:var(--yellow-d);border:1px solid rgba(255,149,0,.35);padding:2px 8px;border-radius:99px;font-size:9.5px;font-weight:700;letter-spacing:.4px;margin-left:6px;vertical-align:middle;}
/* Chat power badges — tell the user what each chat can actually do */
.chat-power{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;border:1px solid;vertical-align:middle;}
.chat-power-read   {background:rgba(52,199,89,.10); color:var(--green-d); border-color:rgba(52,199,89,.35);}
.chat-power-suggest{background:rgba(255,107,26,.10);color:var(--orange); border-color:rgba(255,107,26,.35);}
.chat-power-edit   {background:rgba(255,59,48,.10); color:var(--red-d); border-color:rgba(255,59,48,.40);}
.chat-power-help{font-size:11px;color:var(--muted);margin-top:4px;}

/* ── How-to note ──────────────────────────────────────────────────────
   Friendly, plain-English "instructions by the function" box. Blue accent
   = "this is a guide, not a button." Built on <details> so it's open by
   default (visible before you touch the tool) but collapsible once learned;
   collapse state is remembered per-id in localStorage (see initHowtos()). */
.howto{border:1px solid rgba(0,122,255,.28);border-left:3px solid var(--blue);border-radius:10px;background:linear-gradient(135deg,rgba(0,122,255,.05),transparent);margin-bottom:16px;overflow:hidden;}
.howto>summary{cursor:pointer;list-style:none;padding:11px 15px;font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;user-select:none;}
.howto>summary::-webkit-details-marker{display:none;}
/* To-do tab dropdowns (Team-notes composer, All-tasks-at-a-glance, My tasks) —
   plain <details>, not .howto, so hide the default disclosure triangle here too. */
#bc-composer>summary::-webkit-details-marker,#task-stack-card>summary::-webkit-details-marker,#my-tasks-d>summary::-webkit-details-marker{display:none;}
#task-stack-card>summary:hover,#my-tasks-d>summary:hover{opacity:.85;}
.howto>summary:hover{background:rgba(0,122,255,.05);}
.howto>summary .howto-chev{margin-left:auto;color:var(--muted);font-size:11px;font-weight:400;transition:transform .15s;}
.howto[open]>summary .howto-chev{transform:rotate(180deg);}
.howto-body{padding:3px 16px 15px;font-size:12.5px;line-height:1.65;color:var(--text);}
.howto-body p{margin:0 0 9px;}
.howto-body p:last-child{margin-bottom:0;}
.howto-body b{color:var(--text);}
.howto-meta{color:var(--muted);font-style:italic;}
.howto-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0;}
@media(max-width:680px){.howto-cols{grid-template-columns:1fr;}}
.howto-box{border-radius:8px;padding:9px 12px;}
.howto-box.good{background:rgba(52,199,89,.08);border:1px solid rgba(52,199,89,.28);}
.howto-box.bad{background:rgba(255,59,48,.06);border:1px solid rgba(255,59,48,.22);}
.howto-box .hb-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;}
.howto-box.good .hb-h{color:var(--green-d);}
.howto-box.bad .hb-h{color:var(--red-d);}
.howto-box ul{margin:0;padding-left:17px;}
.howto-box li{margin-bottom:4px;}
.howto-eg{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:8px 11px;margin:9px 0;font-size:12px;line-height:1.55;}
.howto-eg b{color:var(--orange);}

/* SOP reading view — a polished, formatted render of the markdown body
   (with inline pictures). Two containers share the typography below: .sop-doc
   (the viewer POPUP — capped height, scrolls inside the modal) and .sop-body
   (the DETAIL PAGE — flows with normal page scroll, so no max-height). */
.sop-doc{font-size:14px;line-height:1.7;color:var(--text);max-height:62vh;overflow:auto;padding:2px 2px 6px;}
.sop-body{font-size:14.5px;line-height:1.75;color:var(--text);margin:6px 0 0;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:26px 30px 30px;box-shadow:var(--shadow-sm);}
/* Extra visual breakup for the full-page document: more air before each new
   section than the compact popup needs. */
.sop-body h2{margin-top:1.8em;}
.sop-body p{margin:.75em 0;}
.sop-body li{margin:.4em 0;}
.sop-doc>:first-child,.sop-body>:first-child{margin-top:0;}
.sop-doc h1,.sop-doc h2,.sop-doc h3,.sop-doc h4,.sop-body h1,.sop-body h2,.sop-body h3,.sop-body h4{color:var(--text);margin:1.3em 0 .5em;line-height:1.3;font-weight:700;}
.sop-doc h1,.sop-body h1{font-size:22px;border-bottom:2px solid var(--orange);padding-bottom:6px;}
.sop-doc h2,.sop-body h2{font-size:18px;border-bottom:1px solid var(--border);padding-bottom:4px;}
.sop-doc h3,.sop-body h3{font-size:15.5px;}
.sop-doc h4,.sop-body h4{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.sop-doc p,.sop-body p{margin:.6em 0;}
.sop-doc img,.sop-body img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--border);margin:12px 0;display:block;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.sop-doc ul,.sop-doc ol,.sop-body ul,.sop-body ol{padding-left:22px;margin:.5em 0;}
.sop-doc li,.sop-body li{margin:.3em 0;}
.sop-doc blockquote,.sop-body blockquote{border-left:3px solid var(--orange);background:rgba(249,115,22,.07);margin:.8em 0;padding:8px 14px;border-radius:0 6px 6px 0;}
.sop-doc blockquote p,.sop-body blockquote p{margin:.2em 0;}
.sop-doc code,.sop-body code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:12.5px;font-family:ui-monospace,Menlo,monospace;}
.sop-doc pre,.sop-body pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow:auto;margin:.7em 0;}
.sop-doc pre code,.sop-body pre code{border:none;padding:0;background:none;}
.sop-doc table,.sop-body table{border-collapse:collapse;width:100%;margin:1em 0;font-size:13px;}
.sop-doc th,.sop-doc td,.sop-body th,.sop-body td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top;}
.sop-doc th,.sop-body th{background:var(--card);font-weight:650;}
.sop-doc a,.sop-body a{color:var(--orange);}
.sop-doc hr,.sop-body hr{border:none;border-top:1px solid var(--border);margin:1.2em 0;}
.sop-edit-ta{width:100%;min-height:380px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.6;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);box-sizing:border-box;}
/* Pictures attached in the SOP word editor render inline in the viewer. */
.sop-body img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px;margin:8px 0;display:block;}
/* SOP word editor (EasyMDE) — keep the toolbar/preview on-brand and bounded. */
.EasyMDEContainer .CodeMirror{border-color:var(--border);border-radius:0 0 8px 8px;background:var(--surface);color:var(--text);min-height:340px;}
.EasyMDEContainer .editor-toolbar{border-color:var(--border);border-top-left-radius:8px;border-top-right-radius:8px;}
.EasyMDEContainer .editor-preview img,.EasyMDEContainer .CodeMirror img{max-width:100%;height:auto;}
/* Standardized SOP letterhead — the same on every SOP (viewer chrome). */
.sop-brandbar{text-align:center;border-bottom:2px solid var(--orange);padding-bottom:9px;margin-bottom:12px;}
.sop-brandbar .sb-co{font-size:12.5px;font-weight:800;letter-spacing:1.4px;color:var(--orange);text-transform:uppercase;}
.sop-brandbar .sb-cf{font-size:10px;font-style:italic;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:2px;}
.sop-reviewbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(249,115,22,.08);border:1px solid rgba(249,115,22,.3);border-radius:7px;padding:8px 12px;margin-bottom:12px;font-size:12px;color:var(--text);}

/* Dashboard widgets */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px;}
.dash-w{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s, box-shadow .15s;}
.dash-w:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.dash-w::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange);}
.dash-w.red::before{background:var(--red);}
.dash-w.green::before{background:var(--green);}
.dash-w.blue::before{background:var(--blue);}
.dash-w-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.dash-w-value{font-size:32px;font-weight:600;color:var(--text);letter-spacing:-.6px;line-height:1;margin-bottom:6px;}
.dash-w-detail{font-size:11.5px;color:var(--muted);max-height:90px;overflow-y:auto;}
.dash-w-detail li{padding:3px 0;border-bottom:1px dashed var(--border);font-size:11px;}
.dash-w-detail li:last-child{border-bottom:none;}

/* Index status bar */
.index-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);}
.index-bar-track{flex:1;background:rgba(0,0,0,.06);border-radius:99px;height:7px;overflow:hidden;}
.index-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--blue));border-radius:99px;transition:width .5s;}
.index-bar-label{font-size:11.5px;color:var(--muted);white-space:nowrap;}

/* Toggle switch */
#mode-toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--muted);border-radius:50%;transition:all .2s;}
#mode-toggle:checked{background:var(--purple);border-color:var(--purple);}
#mode-toggle:checked::after{left:18px;background:#fff;}

/* Complex modal */
#cx-modal{position:fixed;inset:0;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:200;}
#cx-modal.show{display:flex;}
#cx-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:640px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
#cx-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
#cx-body{padding:16px 20px;overflow-y:auto;flex:1;}
.cand-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:7px;cursor:pointer;transition:border-color .12s, background .12s, box-shadow .12s;}
.cand-card:hover{border-color:var(--orange);background:#fff;box-shadow:var(--shadow-sm);}
.cand-name{font-weight:600;font-size:13px;color:var(--text);}
.cand-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.q-row{margin-bottom:10px;}
.q-q{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;}

/* Email history modal */
#hist-modal{position:fixed;inset:0;background:rgba(0,0,0,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:200;}
#hist-modal.show{display:flex;}
#hist-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:760px;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
#hist-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
#hist-body{padding:16px 20px;overflow-y:auto;flex:1;}
.hist-row{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:8px;font-size:12px;}
.hist-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:3px;}
.hist-subj{font-weight:600;color:var(--text);margin-bottom:5px;}
.hist-text{color:var(--soft);font-size:11.5px;line-height:1.5;max-height:140px;overflow:hidden;position:relative;}
.hist-text.expanded{max-height:none;}
.hist-text.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(transparent,var(--card));}

/* Prior-email card with hover tooltip */
.prior-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:6px;position:relative;cursor:help;}
.prior-card .prior-full{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:10;background:var(--surface);border:1px solid var(--orange);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;white-space:pre-wrap;font-size:11.5px;line-height:1.5;color:var(--text);}
.prior-card:hover .prior-full{display:block;}

/* Floating progress pill (non-blocking) */
.taskpill{position:fixed;bottom:18px;right:18px;background:var(--glass-strong);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--border);border-radius:14px;padding:14px 16px;width:320px;max-width:calc(100vw - 36px);z-index:50;box-shadow:var(--shadow-lg);display:none;}
.taskpill.show{display:block;}
.taskpill h3{font-size:13px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;}
.taskpill .tp-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1;}
.taskpill .tp-close:hover{color:var(--text);}
.ptrack{background:rgba(0,0,0,.06);border-radius:99px;height:7px;overflow:hidden;margin:6px 0 5px;}
.pfill{height:100%;background:linear-gradient(90deg,var(--orange),var(--purple));border-radius:99px;transition:width .35s;}
.plabel{font-size:11.5px;color:var(--muted);line-height:1.4;}
.plabel-sub{font-size:10.5px;color:var(--muted);margin-top:3px;}

/* Stats */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
.scard{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center;box-shadow:var(--shadow-sm);}
.snum{font-size:26px;font-weight:600;line-height:1;letter-spacing:-.4px;}
.slbl{font-size:10.5px;color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.scard.p .snum{color:var(--orange);}
.scard.n .snum{color:var(--blue);}
.scard.s .snum{color:var(--muted);}

/* Tasks — light tinted status tiles */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.tc{border-radius:12px;padding:12px;text-align:center;border:1px solid;}
.tc.tod{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.25);}
.tc.tod .tcn{color:var(--red-d);}
.tc.ov{background:rgba(255,149,0,.08);border-color:rgba(255,149,0,.25);}
.tc.ov .tcn{color:var(--yellow-d);}
.tc.li{background:rgba(255,107,26,.08);border-color:rgba(255,107,26,.25);}
.tc.li .tcn{color:var(--orange-d);}
.tc.ok{background:var(--card);border-color:var(--border);}
.tcn{font-size:22px;font-weight:600;letter-spacing:-.4px;}
.tcl{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:500;}

/* Filters */
/* .fbar/.fbtn removed — they styled the dashboard's cut legacy "📬 Emails" filter bar. */

/* Activity rows */
.actrow{display:grid;grid-template-columns:140px 1fr 200px 80px;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:11.5px;align-items:center;}
.actrow:last-child{border-bottom:none;}
.actrow .ad{color:var(--muted);font-variant-numeric:tabular-nums;}
.actrow .asub{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.actrow .afrom{color:var(--orange);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.actrow .afold{color:var(--muted);font-size:10px;text-align:right;}

/* Emails */
.sg{background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;box-shadow:var(--shadow-sm);}
.sh{padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .12s;}
.sh:hover{background:var(--card);}
.sn{font-size:12.5px;font-weight:600;color:var(--orange);}
.sc{font-size:10px;color:var(--muted);background:var(--card-2);padding:2px 8px;border-radius:99px;}
.se{border-top:1px solid var(--border);}
.er{padding:10px 14px;border-bottom:1px solid var(--border);font-size:11.5px;}
.er:last-child{border-bottom:none;}
.esub{color:var(--text);font-weight:500;margin-bottom:2px;}
.emeta{color:var(--muted);font-size:10px;}
.pb{display:inline-block;padding:1px 7px;border-radius:99px;font-size:9.5px;font-weight:600;margin-left:5px;}
.pbp{background:rgba(255,107,26,.12);color:var(--orange);}
.pbn{background:rgba(0,122,255,.10);color:var(--blue);}

/* Chat */
.cmsgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.cempty{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%;padding:26px 16px 16px;color:var(--muted);gap:6px;}
.cempty h2{font-size:16px;color:var(--text);font-weight:600;letter-spacing:-.2px;}
/* Sorted inbox — the landing view inside "Search your email". Real mail
   bucketed by the smart classifier (invoices / work orders / important
   people); junk is left out and only counted. */
.ibx{width:100%;max-width:620px;margin:2px auto 20px;text-align:left;}
.ibx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px;}
.ibx-title{font-size:15px;font-weight:700;color:var(--text);}
.ibx-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.ibx-refresh{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:4px 9px;font-size:13px;line-height:1;cursor:pointer;}
.ibx-refresh:hover{color:var(--text);border-color:var(--orange);}
.ibx-group{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:var(--card);overflow:hidden;}
.ibx-ghead{display:flex;align-items:center;gap:9px;padding:10px 13px;cursor:pointer;user-select:none;}
.ibx-ghead:hover{background:rgba(0,0,0,.03);}
.ibx-gicon{font-size:15px;}
.ibx-glabel{font-weight:700;font-size:13px;color:var(--text);}
.ibx-gcount{font-size:11px;font-weight:700;color:var(--muted);background:rgba(0,0,0,.06);border-radius:99px;padding:1px 8px;}
.ibx-gchev{margin-left:auto;color:var(--muted);font-size:11px;transition:transform .15s;}
.ibx-group.open .ibx-gchev{transform:rotate(180deg);}
.ibx-glist{display:none;border-top:1px solid var(--border);max-height:300px;overflow-y:auto;}
.ibx-group.open .ibx-glist{display:block;}
.ibx-row{padding:9px 13px;border-bottom:1px solid var(--border);cursor:pointer;}
.ibx-row:last-child{border-bottom:none;}
.ibx-row:hover{background:rgba(0,0,0,.03);}
.ibx-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.ibx-from{font-weight:600;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-date{font-size:10.5px;color:var(--muted);white-space:nowrap;}
.ibx-subj{font-size:12px;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-snip{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ibx-empty{padding:11px 13px;font-size:12px;color:var(--muted);}
.ibx-more{padding:8px 13px;font-size:11px;color:var(--muted);text-align:center;}
.ibx-junk{font-size:11px;color:var(--muted);text-align:center;margin-top:6px;}
.suggs{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.sug{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:12px;color:var(--soft);cursor:pointer;text-align:left;transition:border-color .12s, color .12s, box-shadow .12s;}
.sug:hover{border-color:var(--orange);color:var(--text);box-shadow:var(--shadow-sm);}
.msg{display:flex;gap:8px;max-width:84%;}
.msg.u{align-self:flex-end;flex-direction:row-reverse;}
.mb{padding:11px 15px;border-radius:14px;font-size:13.5px;line-height:1.6;}
.msg.u .mb{background:var(--orange);color:#fff;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 14px -4px rgba(255,107,26,.35);}
.msg.a .mb{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.msg.a .mb p{margin:0 0 8px 0;}
.msg.a .mb p:last-child{margin-bottom:0;}
.msg.a .mb strong{color:var(--text);font-weight:600;}
.msg.a .mb em{color:var(--text);font-style:italic;}
.msg.a .mb code{background:var(--card);border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--blue-d);}
.msg.a .mb h3{font-size:13.5px;margin:10px 0 5px 0;color:var(--text);font-weight:600;}
.msg.a .mb ul,.msg.a .mb ol{margin:4px 0 8px 0;padding-left:22px;}
.msg.a .mb li{margin-bottom:3px;}
.msg.a .mb blockquote{margin:6px 0;padding:8px 12px;border-left:3px solid var(--orange);background:var(--card);color:var(--soft);border-radius:0 8px 8px 0;font-style:italic;}
.msg.a .mb blockquote p{margin:0;}
.msg.a .mb hr{border:none;border-top:1px solid var(--border);margin:8px 0;}
.mav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:3px;background:var(--card);border:1px solid var(--border);}
.typ{display:flex;gap:4px;padding:12px 14px;}
.typ span{width:6px;height:6px;background:var(--muted);border-radius:50%;animation:bop .9s infinite;}
.typ span:nth-child(2){animation-delay:.15s;}.typ span:nth-child(3){animation-delay:.3s;}
@keyframes bop{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}}

/* Orange pulsing indicator for the general chat ("Digital Ivan is thinking…"). */
.thinking{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--soft);font-size:12.5px;align-self:flex-start;box-shadow:var(--shadow-sm);}
.thinking-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:thinkpulse 1.1s ease-in-out infinite;box-shadow:0 0 8px rgba(255,107,26,.55);}
@keyframes thinkpulse{0%,100%{transform:scale(.7);opacity:.55;}50%{transform:scale(1.15);opacity:1;}}
@keyframes freshPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.7);}50%{box-shadow:0 0 0 4px rgba(251,191,36,0);}}
@keyframes remSlideIn{from{transform:translateY(-100%);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* Composer states — focus glow + drag-over highlight. */
#gen-composer:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
#gen-composer.dragover{border-color:var(--orange);background:rgba(255,107,26,.04);}
.gen-attach-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);padding:4px 10px;border-radius:8px;font-size:11.5px;color:var(--text);max-width:240px;}
.gen-attach-chip .x{cursor:pointer;color:var(--muted);font-weight:600;padding:0 2px;}
.gen-attach-chip .x:hover{color:var(--orange);}
.gen-followup{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;align-self:stretch;}
.gen-followup .chip{background:transparent;border:1px solid var(--border);color:var(--muted);padding:3px 9px;border-radius:99px;font-size:11px;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.gen-followup .chip:hover{border-color:var(--orange);color:var(--text);background:rgba(255,107,26,.04);}

/* Digital Ivan chat — uses the same .msg / .mav / .mb bubble formatting
   as the email chat (defined above) so both chat surfaces look identical.
   The lead-paragraph emphasis stays — first paragraph of an assistant
   turn is the direct answer, rendered slightly heavier than supporting
   context. Scoped to .msg.a .mb p:first-child so it applies in both
   chats (email + Digital Ivan) symmetrically. */
.msg.a .mb p:first-child {
  font-size: 15.5px; font-weight: 500; color: var(--text); margin-top: 0; line-height: 1.5;
}
/* "Next:" line — a one-liner action suggestion the model can drop at
   the end. Rendered as a subtle hint, not a heading. */
.msg.a .mb p.next-step { color: var(--muted); font-size: 12.5px; font-style: italic; margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border); }
/* Digital Ivan #gen-msgs is a flex column like email .cmsgs — keep the
   stretched widths for the "What I checked" panel + followup chips that
   sit between bubbles. */
#gen-msgs { gap: 10px !important; }

/* Digital Ivan tab — make the chat use the full available vertical
   space. The tab is a flex column; the chat card grows to fill, with
   the "More tools" details tucked at the bottom as a thin handle. */
#general-tab.active { display: flex; flex-direction: column; padding: 14px 24px 10px; gap: 8px; }
#general-tab > .card:first-child {
  display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
  margin-bottom: 0;
}
#general-tab #gen-msgs {
  max-height: none !important;
  flex: 1 1 auto;
  min-height: 0;
}
.cinput{padding:14px 20px;background:var(--surface);border-top:1px solid var(--border);display:flex;gap:8px;}
.cinput input{flex:1;background:var(--card);border:1px solid var(--border-strong);color:var(--text);padding:10px 14px;border-radius:10px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;}
.cinput input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
.cinput input::placeholder{color:#b1b1b6;}

/* Compose */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fg{margin-bottom:12px;}
label{display:block;font-size:11.5px;color:var(--text);font-weight:500;margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=tel],input[type=url],input[type=date],textarea{width:100%;background:var(--surface);border:1px solid var(--border-strong);color:var(--text);padding:10px 12px;border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color .15s, box-shadow .15s;}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=search]:focus,input[type=number]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=date]:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,107,26,.14);}
input[type=text]::placeholder,input[type=email]::placeholder,input[type=password]::placeholder,input[type=search]::placeholder,input[type=number]::placeholder,input[type=tel]::placeholder,input[type=url]::placeholder,textarea::placeholder{color:#b1b1b6;}
textarea{resize:vertical;min-height:80px;line-height:1.5;}
.dp{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;min-height:100px;color:var(--text);}
.dm{font-size:11.5px;color:var(--muted);margin-bottom:8px;}
.dm span{font-weight:600;color:var(--text);}

/* Toast */
#toast{position:fixed;bottom:20px;right:20px;background:var(--green);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none;z-index:999;box-shadow:0 6px 20px -4px rgba(52,199,89,.45);}
#toast.show{opacity:1;}

::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);}
@media(max-width:700px){.sgrid{grid-template-columns:repeat(2,1fr);}.cgrid{grid-template-columns:1fr;}}

/* ── Admin dashboard — sectioned, uniform, calm ───────────── */
#admin-tab{max-width:1180px;margin:0 auto;}
.admin-sec{padding:18px 2px 8px;margin:18px 0 10px;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.admin-sec:first-child{margin-top:0;padding-top:0;}
.admin-sec .as-h{font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.8px;}
.admin-sec .as-sub{font-size:11.5px;color:var(--muted);font-weight:500;}

.acard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.acard.attn{border-color:rgba(255,107,26,.28);background:linear-gradient(180deg,rgba(255,107,26,.035),transparent 40%);}
.acard.warn{border-color:rgba(255,149,0,.32);background:linear-gradient(180deg,rgba(255,149,0,.04),transparent 40%);}

.ahead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.ahead h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
.ahead .actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.asub{font-size:12px;color:var(--muted);line-height:1.55;margin:2px 0 14px 0;}
.asub code{background:var(--card-2);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--blue-d);}

.btn-mini{padding:5px 11px;font-size:11px;font-weight:600;border-radius:7px;}

/* Stat tiles — used for counts in documents/vector-db */
.statg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px;}
.stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:11px 13px;}
.stat .sl{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:3px;}
.stat .sv{font-size:19px;font-weight:600;color:var(--text);letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.15;}
.stat .sv.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:600;}
.stat.accent{background:linear-gradient(180deg,rgba(255,107,26,.06),transparent);border-color:rgba(255,107,26,.20);}
.stat.accent .sv{color:var(--orange);}

/* Hero counter — big number with right-aligned meta */
.hero-cnt{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;}
.hero-cnt .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700;}
.hero-cnt .num{font-size:30px;font-weight:600;color:var(--text);letter-spacing:-.6px;line-height:1.1;margin-top:2px;}
.hero-cnt .meta{text-align:right;font-size:11.5px;color:var(--muted);line-height:1.6;}
.hero-cnt .meta b{color:var(--text);font-weight:600;}

/* 5-stage pipeline cards */
.pipe-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;}
.pipe-stage{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:11px 13px;position:relative;overflow:hidden;}
.pipe-stage::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--orange);}
.pipe-stage .ps-step{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:2px;}
.pipe-stage .ps-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.1px;}
.pipe-stage .ps-cnt{font-size:14px;font-weight:700;color:var(--orange);margin:5px 0 7px 0;font-variant-numeric:tabular-nums;}
.pipe-stage ul{list-style:none;padding:0;margin:0;}
.pipe-stage li{font-size:10.5px;line-height:1.55;color:var(--muted);padding:1px 0;}
.pipe-stage li code{background:var(--card-2);padding:0 4px;border-radius:3px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--text);}

/* Quick-jump tiles */
.qjg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.qj{background:var(--card);border:1px solid var(--border);border-radius:11px;padding:14px;text-align:left;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:3px;transition:border-color .15s, background .15s, transform .08s, box-shadow .15s;}
.qj:hover{border-color:var(--orange);background:var(--surface);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.qj .qj-t{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.15px;}
.qj .qj-s{font-size:11px;color:var(--muted);line-height:1.4;}

/* Inline toolbar (search box + filters within a card) */
.atool{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.atool input[type=text], .atool select, .atool input[type=file]{background:var(--surface);border:1px solid var(--border-strong);color:var(--text);padding:8px 12px;border-radius:8px;font-size:12px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.atool input[type=text]:focus, .atool select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.12);}
.atool input[type=text]{flex:1;min-width:200px;}
.atool input[type=file]{padding:6px 8px;}

/* Pill / badge — used for chips, state indicators */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:10.5px;font-weight:700;letter-spacing:.2px;border:1px solid var(--border);background:var(--card);color:var(--soft);}
.pill.green{background:rgba(52,199,89,.10);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.pill.orange{background:rgba(255,107,26,.10);color:var(--orange);border-color:rgba(255,107,26,.30);}
.pill.purple{background:rgba(175,82,222,.10);color:var(--purple);border-color:rgba(175,82,222,.30);}
.pill.red{background:rgba(255,59,48,.10);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.pill.muted{background:var(--card);color:var(--muted);border-color:var(--border);}

/* Big "currently processing" card — calmer than the old purple-orange blast */
.proc-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.proc-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.proc-title{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.15px;display:flex;align-items:center;gap:8px;}
.proc-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 0 rgba(175,82,222,.5);animation:thinkpulse 1.1s ease-in-out infinite;}
.proc-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.proc-headline{font-size:28px;font-weight:600;color:var(--purple);letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;}
.proc-bar{background:rgba(0,0,0,.06);border-radius:99px;height:8px;overflow:hidden;}
.proc-bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--orange));border-radius:99px;transition:width .4s ease;}

/* Stage tile within proc-card */
.proc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px;}
.proc-tile{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 11px;}
.proc-tile .pt-l{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.proc-tile .pt-v{font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px;}

/* Reconciliation row (on-disk vs in-index) */
.rec-tbl{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;font-size:12px;}
.rec-tbl .rec-head{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:700;background:var(--card-2);padding:8px 12px;border-bottom:1px solid var(--border);}
.rec-tbl .rec-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;padding:7px 12px;border-bottom:1px solid var(--border);align-items:center;}
.rec-tbl .rec-row:last-child{border-bottom:none;}
.rec-tbl .rec-row .num{text-align:right;font-family:ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;}

/* List row used in: namespaces, sources, recent */
.lrow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px dashed var(--border);font-size:11.5px;}
.lrow:last-child{border-bottom:none;}
.lrow code{background:var(--card-2);padding:1px 6px;border-radius:4px;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--text);}

.sub-h{font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-bottom:6px;}

/* ─── PDF SPLIT-VIEW PREVIEW ───────────────────────────────────────────
   Opens when a PDF is dropped on an invoice routine drop zone. Takes the
   LEFT half of the viewport. The rest of the page (header + main) shifts
   to the right half. A floating button on the right edge of the panel
   toggles full-screen. */
#pdf-preview-panel{position:fixed;top:0;left:0;width:50vw;height:100vh;background:var(--bg);border-right:1px solid var(--border);box-shadow:4px 0 24px rgba(0,0,0,.18);z-index:180;display:none;flex-direction:column;transition:width .25s ease;}
#pdf-preview-panel.open{display:flex;}
#pdf-preview-panel.fullscreen{width:100vw;border-right:none;}
#pdf-preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--card);flex-shrink:0;gap:10px;}
#pdf-preview-title{font-size:12px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
#pdf-preview-actions{display:flex;gap:6px;align-items:center;}
.pdf-prev-btn{background:var(--card);border:1px solid var(--border);color:var(--text);padding:5px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;line-height:1;}
.pdf-prev-btn:hover{background:var(--card-2);border-color:var(--orange);}
#pdf-preview-loading{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(168,85,247,.15);overflow:hidden;display:none;pointer-events:none;}
#pdf-preview-loading.on{display:block;}
#pdf-preview-loading::after{content:"";display:block;height:100%;width:30%;background:linear-gradient(90deg,#f97316,#a855f7);animation:pdf-prev-bar 1.1s infinite ease-in-out;}
@keyframes pdf-prev-bar{0%{transform:translateX(-100%);}100%{transform:translateX(400%);}}
#pdf-preview-frame{flex:1;width:100%;border:none;background:#fff;}
#pdf-preview-fullscreen-btn{position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:32px;height:72px;background:var(--orange);color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:182;font-size:18px;display:flex;align-items:center;justify-content:center;}
#pdf-preview-fullscreen-btn:hover{background:#ea580c;}
body.pdf-preview-fullscreen #pdf-preview-fullscreen-btn{right:12px;transform:translate(0,-50%);}

/* Shift the rest of the page right when the preview is open */
body.pdf-preview-open > header,
body.pdf-preview-open > main{margin-left:50vw;transition:margin-left .25s ease;}
body.pdf-preview-fullscreen > header,
body.pdf-preview-fullscreen > main{margin-left:0;filter:blur(1.5px);opacity:.35;pointer-events:none;}

/* Loading bar inside the original drop zone — shown briefly after drop */
.dropzone-loading{position:relative;overflow:hidden;pointer-events:none;opacity:.75;}
.dropzone-loading::after{content:"";position:absolute;left:0;bottom:0;height:4px;background:linear-gradient(90deg,#f97316,#a855f7);width:30%;border-radius:4px;animation:pdf-prev-bar 1.1s infinite ease-in-out;}

/* ─────────────────────────────────────── */

@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ─────────────────────────────────────── */

#calendar-tab { max-width: 1100px; margin: 0 auto; }
.cal-header { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.cal-title   { font-size:20px; font-weight:700; letter-spacing:-.4px; flex:1; }
.cal-nav-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:5px 12px; cursor:pointer; font-size:14px; color:var(--text); font-weight:600; }
.cal-nav-btn:hover { background:var(--card); }
.cal-month-label { font-size:16px; font-weight:700; min-width:140px; text-align:center; }
.cal-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.cal-filter-btn { padding:4px 11px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); font-size:11.5px; font-weight:600; cursor:pointer; color:var(--soft); transition:all .13s; }
.cal-filter-btn:hover { border-color:#aaa; color:var(--text); }
.cal-filter-btn.active { color:#fff; border-color:transparent; }
.cal-filter-btn[data-type="all"].active     { background:#374151; }
.cal-filter-btn[data-type="inspection"].active { background:#1d4ed8; }
.cal-filter-btn[data-type="follow-up"].active  { background:#c2410c; }
.cal-filter-btn[data-type="meeting"].active    { background:#6d28d9; }
.cal-filter-btn[data-type="deadline"].active   { background:#b91c1c; }
.cal-filter-btn[data-type="other"].active      { background:#4b5563; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-dow  { background:var(--card); padding:7px 4px; text-align:center; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); }
.cal-cell { min-height:90px; padding:6px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); cursor:pointer; transition:background .1s; position:relative; vertical-align:top; background:var(--surface); }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell:hover { background:rgba(255,107,26,.04); }
.cal-cell.other-month { background:var(--card); opacity:.5; }
.cal-cell.today { background:rgba(255,107,26,.07); }
.cal-cell.today .cal-day-num { background:var(--orange); color:#fff; }
.cal-day-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:600; color:var(--text); margin-bottom:4px; }
.cal-chip { display:block; font-size:10.5px; font-weight:600; border-radius:4px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; line-height:1.4; }
.cal-chip:hover { filter:brightness(.93); }
.cal-chip-inspection { background:#dbeafe; color:#1d4ed8; }
.cal-chip-follow-up  { background:#ffedd5; color:#c2410c; }
.cal-chip-meeting    { background:#ede9fe; color:#6d28d9; }
.cal-chip-deadline   { background:#fee2e2; color:#b91c1c; }
.cal-chip-other      { background:#f3f4f6; color:#374151; }
.cal-chip-task       { background:#f5f3ff; color:#6d28d9; border:1px dashed #c4b5fd; }
.cal-chip-task:hover { background:#ede9fe; }
.cal-task-link { font-size:9px; opacity:.7; margin-left:3px; }
.cal-more { font-size:10px; color:var(--muted); font-weight:600; cursor:pointer; margin-top:1px; }
.cal-body { display:grid; grid-template-columns:1fr 260px; gap:18px; align-items:start; }
@media (max-width:760px) { .cal-body { grid-template-columns:1fr; } }
.cal-upcoming-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; position:sticky; top:12px; }
.cal-upcoming-card h4 { margin:0 0 10px 0; font-size:13px; font-weight:700; }
.cal-upcoming-item { padding:8px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.cal-upcoming-item:last-child { border-bottom:none; }
.cal-upcoming-item:hover .cal-upcoming-title { color:var(--orange); }
.cal-upcoming-title { font-size:13px; font-weight:600; }
.cal-upcoming-meta  { font-size:11px; color:var(--muted); margin-top:2px; }
.cal-upcoming-dot   { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; flex-shrink:0; }
#cal-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
#cal-modal.open { display:flex; }
#cal-modal-box { background:var(--surface); border-radius:16px; padding:24px; width:480px; max-width:95vw; max-height:90vh; overflow-y:auto; box-shadow:0 8px 40px rgba(0,0,0,.22); }
#cal-modal-box h3 { margin:0 0 16px 0; font-size:16px; font-weight:700; }
.cal-form-row { margin-bottom:12px; }
.cal-form-row label { display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.cal-form-row input, .cal-form-row select, .cal-form-row textarea { width:100%; font-size:13px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-family:inherit; box-sizing:border-box; }
.cal-form-row textarea { resize:vertical; min-height:60px; }
.cal-form-row input:focus, .cal-form-row select:focus, .cal-form-row textarea:focus { outline:none; border-color:var(--orange); }
.cal-form-row-half { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cal-modal-btns { display:flex; gap:8px; margin-top:18px; justify-content:flex-end; }

/* ── 10-day view ── */
.cal-view-toggle { display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.cal-view-toggle button { padding:5px 14px; background:none; border:none; font-size:12px; font-weight:600; color:var(--soft); cursor:pointer; transition:all .12s; }
.cal-view-toggle button:hover { color:var(--text); background:var(--card); }
.cal-view-toggle button.active { background:var(--orange); color:#fff; }
.cal-10day-grid { display:grid; grid-template-columns:repeat(10,1fr); gap:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cal-10day-col { border-right:1px solid var(--border); min-height:300px; }
.cal-10day-col:last-child { border-right:none; }
.cal-10day-hdr { padding:8px 6px 6px; border-bottom:1px solid var(--border); background:var(--card); text-align:center; }
.cal-10day-hdr .c10-dow { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.cal-10day-hdr .c10-date { font-size:15px; font-weight:700; color:var(--text); margin-top:2px; }
.cal-10day-col.today-col .c10-date { background:var(--orange); color:#fff; border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; }
.cal-10day-events { padding:5px 4px; display:flex; flex-direction:column; gap:3px; }
.cal-10day-chip { font-size:10.5px; font-weight:600; border-radius:5px; padding:4px 6px; cursor:pointer; line-height:1.4; word-break:break-word; }
.cal-10day-chip:hover { filter:brightness(.93); }
.cal-10day-chip .c10-time { display:block; font-size:9.5px; opacity:.8; margin-bottom:1px; }
.cal-10day-empty { font-size:10px; color:var(--muted); padding:6px 5px; text-align:center; }

/* ─────────────────────────────────────── */

/* Layout */
    .wb-wrap { padding: 24px 28px; max-width: 1400px; margin: 0 auto; background:#f7f7f9; min-height: calc(100vh - 100px); }
    .wb-header { background:#fff; border:1px solid #e2e2e7; border-radius:12px; padding:20px 24px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
    .wb-title-row { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
    .wb-title { margin:0; font-size:26px; font-weight:700; letter-spacing:-0.4px; color:#1a1a1f; }
    .wb-subtitle { color:#888; font-size:13px; padding:4px 10px; background:#fff4cc; border-radius:5px; }
    .wb-summary { color:#555; font-size:13px; margin-bottom:14px; }
    .wb-toolbar { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
    .wb-search { padding:11px 16px; border:1.5px solid #d8d8de; border-radius:10px; font-size:14px; min-width:340px; flex:1; transition:border-color .15s; }
    .wb-search:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,107,26,0.1); }
    .wb-ai-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
    .wb-ai-tag { background:linear-gradient(135deg,var(--orange),#ff9a4d); color:#fff; font-weight:700; font-size:11px; padding:2px 9px; border-radius:999px; white-space:nowrap; }
    .wb-ai-scope { font-size:11px; color:#8a6d3b; background:#fff6e9; border:1px solid #f0d9b5; padding:1px 8px; border-radius:999px; white-space:nowrap; }
    .wb-ai-clear { font-size:12px; color:var(--orange); cursor:pointer; font-weight:600; }
    .wb-ai-clear:hover { text-decoration:underline; }
    .wb-ai-answer { flex-basis:100%; margin-top:7px; padding:9px 12px; background:#fff6e9; border-left:3px solid var(--orange); border-radius:8px; font-size:13.5px; line-height:1.5; color:var(--text,#222); }

    /* Stage chips — bigger, clearer */
    .wb-stage-chips { display:flex; gap:8px; flex-wrap:wrap; }
    .wb-chip { padding:10px 18px; border:1.5px solid #d8d8de; border-radius:24px; background:#fff; cursor:pointer; font-size:13px; font-weight:500; user-select:none; transition:all .12s; display:inline-flex; align-items:center; gap:8px; }
    .wb-chip:hover { border-color:#a8a8b0; background:#f5f5f7; }
    .wb-chip.active { background:var(--orange); color:#fff; border-color:var(--orange); box-shadow:0 2px 6px rgba(255,107,26,0.25); }
    .wb-chip-count { background:rgba(0,0,0,0.08); padding:2px 9px; border-radius:11px; font-size:11px; font-weight:700; min-width:20px; text-align:center; }
    .wb-chip.active .wb-chip-count { background:rgba(255,255,255,0.25); color:#fff; }

    /* Kanban — Label → Follow up → Bill → Done. Done is collapsed; the
       three actionable stages get equal width. */
    .wb-list { display:block; }
    .wb-col { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; max-height: calc(100vh - 290px); }
    .wb-col-head { padding:14px 18px; border-bottom:2px solid; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    /* Fork board: To Be Confirmed (amber) → Simple (blue) | Complex (orange) → Done (green) */
    .wb-col-label      { border-top:4px solid #c77a00; } .wb-col-label .wb-col-head      { background:#fff4e0; border-bottom-color:#f0c070; }
    .wb-col-simple     { border-top:4px solid #2a8ad6; } .wb-col-simple .wb-col-head     { background:#e6f1fb; border-bottom-color:#7fb3df; }
    .wb-col-complex    { border-top:4px solid #e07b00; } .wb-col-complex .wb-col-head    { background:#fdeede; border-bottom-color:#f0b070; }
    .wb-col-done       { border-top:4px solid #0c5132; } .wb-col-done .wb-col-head       { background:#dff0e3; border-bottom-color:#5ac08a; }
    /* legacy classes kept so any un-remapped row still styles */
    .wb-col-follow-up  { border-top:4px solid #2a8ad6; } .wb-col-follow-up .wb-col-head  { background:#e6f1fb; border-bottom-color:#7fb3df; }
    .wb-col-bill       { border-top:4px solid #6a3eb0; } .wb-col-bill .wb-col-head       { background:#efeafa; border-bottom-color:#a98fd4; }
    .wb-col-title { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:#3a3a45; }
    .wb-col-count { background:rgba(0,0,0,0.08); padding:3px 10px; border-radius:10px; font-size:12px; font-weight:700; color:#3a3a45; }
    .wb-col-body { padding:12px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:10px; }
    .wb-col-empty { padding:30px 14px; text-align:center; color:#aaa; font-size:13px; font-style:italic; }

    /* Compact kanban card */
    .wb-list-flat { display:flex; flex-direction:column; gap:14px; }
    .wb-card { border:1px solid #e2e2e7; border-radius:10px; padding:0; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.05); overflow:hidden; transition:box-shadow .15s,border-color .15s; }
    .wb-card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.10); border-color:#d0d0d8; }
    .wb-card-top { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid #f0f0f3; flex-wrap:wrap; }
    .wb-card-body { padding:12px 14px; }
    .wb-card-foot { padding:10px 14px; border-top:1px solid #f0f0f3; background:#fafafc; }

    /* Inline data-entry fields */
    .wb-fields { display:flex; flex-direction:column; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-field { display:flex; flex-direction:column; gap:3px; }
    .wb-field-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; }
    .wb-input { padding:6px 10px; border:1px solid #d8d8de; border-radius:6px; font-size:12px; font-family:inherit; background:#fff; transition:border-color .12s, background .12s; }
    .wb-input:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    .wb-input.wb-dirty { border-color:#f0a020; background:#fff8e8; }
    .wb-textarea { padding:6px 10px; border:1px solid #d8d8de; border-radius:6px; font-size:12px; font-family:inherit; resize:vertical; min-height:44px; background:#fff; transition:border-color .12s, background .12s; }
    .wb-textarea:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    .wb-textarea.wb-dirty { border-color:#f0a020; background:#fff8e8; }
    .wb-save-hint { font-size:10px; color:#f0a020; font-weight:600; margin-left:auto; }

    /* Stage pill — bigger */
    .wb-stage { padding:6px 12px; border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
    .wb-stage-label     { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-stage-follow-up { background:#e6f1fb; color:#0c4b78; border:1px solid #7fb3df; }
    .wb-stage-bill      { background:#efeafa; color:#3a2070; border:1px solid #a98fd4; }
    .wb-stage-done      { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }
    /* Action buttons — per-stage colors */
    .wb-act-label     { background:#dc2626; color:#fff; border-color:#dc2626; font-weight:700; box-shadow:0 0 0 2px rgba(220,38,38,0.25); }
    .wb-act-label:hover { background:#b91c1c; border-color:#b91c1c; }
    .wb-act-follow-up { background:#2a8ad6; color:#fff; border-color:#2a8ad6; }
    .wb-act-follow-up:hover { background:#1f6fb0; }
    /* Label Focus primary CTA — green = "confirm, advance to follow-up". Made
       visually loud so it's obviously THE action on the page. */
    .lf-confirm-cta { background:#16a34a; color:#fff; border-color:#16a34a; box-shadow:0 2px 9px rgba(22,163,74,.38); }
    .lf-confirm-cta:hover { background:#15803d; border-color:#15803d; box-shadow:0 3px 13px rgba(22,163,74,.5); }
    .lf-confirm-cta:active { transform:translateY(1px); box-shadow:0 1px 5px rgba(22,163,74,.4); }
    .lf-confirm-cta:disabled { background:#9ad3ad; border-color:#9ad3ad; box-shadow:none; cursor:default; }
    /* Label-Focus confirm button forced red w/ white text for legibility. Scoped to the
       id (not .lf-confirm-cta) so the shared green confirm buttons elsewhere stay green. */
    #lf-confirm-btn { background:#dc2626; color:#fff; border-color:#dc2626; box-shadow:0 2px 9px rgba(220,38,38,.38); }
    #lf-confirm-btn:hover { background:#b91c1c; border-color:#b91c1c; box-shadow:0 3px 13px rgba(220,38,38,.5); }
    #lf-confirm-btn:active { transform:translateY(1px); box-shadow:0 1px 5px rgba(220,38,38,.4); }
    #lf-confirm-btn:disabled { background:#e05252; border-color:#e05252; color:#fff; box-shadow:none; cursor:default; }
    /* Compound selectors (.wb-btn.X) so the colored background beats the base
       .wb-btn white — without this, white text lands on a white bg. */
    .wb-btn.wb-act-bill      { background:#6a3eb0; color:#fff; border-color:#6a3eb0; }
    .wb-btn.wb-act-bill:hover { background:#522e8c; }
    .wb-btn.wb-act-done      { background:#0c5132; color:#fff; border-color:#0c5132; }
    .wb-btn.wb-act-done:hover { background:#093d26; }

    .wb-kind-badge { font-size:10px; padding:3px 9px; border-radius:4px; background:#eee; text-transform:uppercase; font-weight:700; letter-spacing:0.3px; }
    .wb-kind-email { background:#fff2d4; color:#8a5a00; }
    .wb-kind-wo    { background:#d8efd8; color:#0a5a0a; }
    /* Origin-lane badge — shows whether a downstream WO was tagged Simple or
       Complex back at the fork, so Ready/Generated/Done still carry that. */
    .wb-lane-badge { font-size:10px; padding:3px 9px; border-radius:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:4px; }
    .wb-lane-simple  { background:#e6f1fb; color:#0c4b78; border:1px solid #7fb3df; }
    .wb-lane-complex { background:#fdeede; color:#9a4a00; border:1px solid #f0b070; }
    /* Bill tier (1–3) — the surfaced classification that replaces Simple/Complex. */
    .wb-tier-badge { font-size:10px; padding:3px 9px; border-radius:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.3px; display:inline-flex; align-items:center; gap:4px; }
    .wb-tier1 { background:#e7f5ec; color:#0f7a3d; border:1px solid #86cfa4; }
    .wb-tier2 { background:#fdeede; color:#9a4a00; border:1px solid #f0b070; }
    .wb-tier3 { background:#fbe7e7; color:#9b1c1c; border:1px solid #e79b9b; }
    /* Job-completion gate — a Simple/Complex WO can't be billed until done. */
    .wb-complete-row { display:flex; align-items:center; gap:8px; margin:10px 0 0; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-complete-flag { font-size:11px; font-weight:700; padding:4px 10px; border-radius:12px; display:inline-flex; align-items:center; gap:5px; }
    .wb-complete-yes { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }
    .wb-complete-no  { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-btn.wb-act-complete { background:#16a34a; color:#fff; border-color:#16a34a; }
    .wb-btn.wb-act-complete:hover { background:#15803d; border-color:#15803d; }
    /* Named piles: new-pile (light) + generate-pile (solid purple, white text on color — never white-on-white) */
    .wb-btn.wb-act-new-pile { background:#efe9fb; color:#5b3aa0; border-color:#d9cef0; }
    .wb-btn.wb-act-new-pile:hover { background:#e4daf6; border-color:#c9b9ec; }
    .wb-btn.wb-act-gen-pile { background:#6a3eb0; color:#fff; border-color:#6a3eb0; }
    .wb-btn.wb-act-gen-pile:hover { background:#522e8c; border-color:#522e8c; }
    .wb-btn.wb-act-gen-pile[disabled] { background:#ece9f3; color:#b3a9cb; border-color:#ddd7ea; cursor:not-allowed; }
    .ready-pile.drag-over { outline:2px dashed #6a3eb0; outline-offset:2px; background:#f3effb !important; }
    /* Invoice AI-match: suggest (light indigo) + confirm (green, white on color) */
    .wb-btn.wb-act-suggest { background:#eef0ff; color:#3730a3; border-color:#c7cbf5; }
    .wb-btn.wb-act-suggest:hover { background:#e3e6fd; border-color:#b3b8f0; }
    .wb-btn.wb-act-confirm-match { background:#16a34a; color:#fff; border-color:#16a34a; }
    .wb-btn.wb-act-confirm-match:hover { background:#15803d; border-color:#15803d; }
    /* Ready "build your shards" interactivity */
    .ready-pg { transition:transform .08s ease, box-shadow .12s ease; }
    .ready-pg:hover { transform:translateY(-2px); box-shadow:0 5px 16px rgba(0,0,0,.13); }
    .ready-pg:active { transform:translateY(0); }
    .ready-lane { transition:border-color .12s ease, box-shadow .12s ease; }
    .ready-lane:hover { border-color:#b9b9c2; }
    .ready-zoombtn { background:rgba(255,255,255,.92); border:1px solid #d8d8de; border-radius:6px; cursor:zoom-in; font-size:12px; padding:2px 7px; line-height:1.4; }
    .ready-zoombtn:hover { background:#fff; border-color:#a8a8b0; }
    .wb-act-uncomplete { color:#0c5132; border-color:#9ad3ad; background:#fff; }
    .wb-act-uncomplete:hover { background:#f0faf3; }
    /* Solid blue action (Mark complete + Ready to bill) — solid even when the
       Ready button is disabled, so it reads as a real button, not a ghost.
       Compound selector so it wins over the base .wb-btn white. */
    .wb-btn.wb-act-blue { background:#2a8ad6; color:#fff; border:1.5px solid #2a8ad6; font-weight:700; }
    .wb-btn.wb-act-blue:hover { background:#1f6fb0; border-color:#1f6fb0; }
    .wb-btn.wb-act-blue:disabled { background:#5e93c4; border-color:#5e93c4; color:#fff; cursor:default; box-shadow:none; }
    /* Lane re-route (→ Complex / → Simple) — a SECONDARY choice, so it's a soft
       outlined button, not a third loud filled color competing with the primaries. */
    .wb-btn.wb-act-purple { background:#f4f0fb; color:#5b3aa0; border:1.5px solid #ddd0f2; font-weight:600; }
    .wb-btn.wb-act-purple:hover { background:#ece3f8; border-color:#cbb9ec; }
    /* Send-back-one-stage — a quiet neutral "go back" control. */
    .wb-btn.wb-act-back { background:#f6f6f8; color:#555; border:1.5px solid #e2e2e8; font-weight:600; }
    .wb-btn.wb-act-back:hover { background:#ededf1; color:#333; border-color:#cfcfd6; }

    /* Due-date traffic light — colored left edge + badge by "completed by" date. */
    .wb-card.wb-due-red    { border-left:5px solid #dc2626; }
    .wb-card.wb-due-yellow { border-left:5px solid #f0a020; }
    .wb-card.wb-due-green  { border-left:5px solid #16a34a; }
    .wb-due-badge { font-size:10px; font-weight:800; padding:3px 9px; border-radius:11px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
    .wb-due-badge.red    { background:#fde5e5; color:#a01818; border:1px solid #f0a0a0; }
    .wb-due-badge.yellow { background:#fff4e0; color:#7a4500; border:1px solid #f0c070; }
    .wb-due-badge.green  { background:#cfead9; color:#0c5132; border:1px solid #5ac08a; }

    /* WO reference photos (not used by the AI — storage only). */
    .wb-photos { margin-top:10px; padding-top:10px; border-top:1px dashed #e2e2e7; }
    .wb-photos-h { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#888; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
    .wb-photos-h .hint { font-weight:600; text-transform:none; letter-spacing:0; color:#b0b0b8; font-size:10px; }
    .wb-photo-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .wb-photo { position:relative; width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid #e2e2e7; background:#f3f3f7; }
    .wb-photo img { width:100%; height:100%; object-fit:cover; cursor:pointer; display:block; }
    .wb-photo .del { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; opacity:0; transition:opacity .12s; }
    .wb-photo:hover .del { opacity:1; }
    .wb-photo-add { width:64px; height:64px; border-radius:8px; border:1.5px dashed #c8c8d0; background:#fafafc; cursor:pointer; display:grid; place-items:center; color:#999; font-size:11px; font-weight:600; text-align:center; line-height:1.2; transition:all .12s; }
    .wb-photo-add:hover { border-color:var(--orange); color:var(--orange); background:#fffaf5; }

    .wb-wo-num { font-weight:700; font-size:14px; font-family:ui-monospace,SF Mono,Menlo,monospace; color:#1a1a1f; letter-spacing:-0.2px; }
    .wb-addr { color:#666; font-size:12px; flex-basis:100%; }
    .wb-addr-icon { color:#999; margin-right:4px; }

    /* Body — invoice block */
    .wb-inv-block { }
    .wb-inv-headline { display:flex; align-items:center; gap:14px; margin-bottom:10px; flex-wrap:wrap; }
    .wb-confidence { font-size:11px; padding:4px 10px; border-radius:5px; font-weight:700; letter-spacing:0.3px; }
    .wb-conf-SAFE     { background:#cfead9; color:#0c5132; }
    .wb-conf-PROBABLE { background:#fff4cc; color:#7a5a00; }
    .wb-conf-LOW      { background:#fde5d4; color:#a13d00; }
    .wb-total { font-weight:700; font-size:22px; color:#1a1a1f; }
    .wb-date { color:#888; font-size:13px; }
    .wb-items { font-size:13px; color:#3a3a45; margin:6px 0 10px; line-height:1.6; }
    .wb-just { color:#555; font-size:13px; line-height:1.55; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; margin-top:8px; }

    /* Body — email block */
    .wb-email-block { font-size:14px; line-height:1.55; }
    .wb-email-row { display:flex; gap:8px; margin-bottom:5px; align-items:baseline; }
    .wb-email-label { font-weight:600; color:#666; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; min-width:70px; }
    .wb-email-val { color:#1a1a1f; }
    .wb-email-text { color:#555; font-size:13px; line-height:1.6; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; margin-top:10px; }
    .wb-cls-yes { color:#0a5a0a; font-size:12px; margin-top:8px; font-weight:600; }
    .wb-cls-no  { color:#888; font-size:12px; margin-top:8px; }

    /* Labels + actions */
    .wb-labels { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .wb-label { background:#e8e8ee; color:#3a3a45; padding:4px 11px; border-radius:14px; font-size:12px; display:inline-flex; align-items:center; font-weight:500; }
    .wb-label .x { margin-left:7px; cursor:pointer; opacity:0.5; font-size:14px; line-height:1; }
    .wb-label .x:hover { opacity:1; color:#a00; }
    .wb-label-input { padding:4px 11px; border:1px dashed #b8b8c0; border-radius:14px; font-size:12px; width:120px; background:transparent; outline:none; transition:border-color .15s; }
    .wb-label-input:focus { border-color:var(--orange); background:#fff; }

    .wb-actions { display:flex; gap:7px; margin-top:12px; flex-wrap:wrap; }
    .wb-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px;
      font-size:12.5px; line-height:1; padding:8px 13px; cursor:pointer; border-radius:8px;
      border:1px solid #dcdce3; background:#fff; color:#33333b; font-weight:600;
      transition:transform .1s, box-shadow .12s, background .12s, border-color .12s; }
    .wb-btn:hover { background:#f6f6f8; border-color:#c2c2cc; }
    .wb-btn:active { transform:translateY(1px); }
    /* Filled actions get a touch of depth so the row reads as real buttons. */
    .wb-btn.wb-act-complete, .wb-btn.wb-act-blue, .wb-btn.wb-act-done,
    .wb-btn.wb-act-bill, .wb-btn.wb-act-uncomplete { box-shadow:0 1px 2px rgba(0,0,0,.12); }
    .wb-btn-primary { background:var(--orange); color:#fff; border-color:var(--orange); }
    .wb-btn-primary:hover { background:#e85c0e; border-color:#e85c0e; }
    .wb-btn-danger { color:#b42318; border-color:#f3c6c1; background:#fff; }
    .wb-btn-danger:hover { background:#fef3f2; border-color:#eda29b; color:#7a1810; }

    .wb-empty { text-align:center; padding:60px 20px; color:#888; background:#fff; border-radius:12px; border:1px dashed #d8d8de; }
    .wb-empty-icon { font-size:48px; opacity:0.4; margin-bottom:12px; }

    /* ─── View toggle (Accounting | Operational) ─── */
    .wbv-toggle { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    .wbv-tab { padding:10px 22px; border:1.5px solid #d8d8de; border-radius:24px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; color:#3a3a45; transition:all .12s; }
    .wbv-tab:hover { border-color:#a8a8b0; background:#f5f5f7; }
    .wbv-tab.active { background:#1a1a1f; color:#fff; border-color:#1a1a1f; box-shadow:0 2px 8px rgba(0,0,0,0.18); }
    .wbv-hint { font-size:12px; color:#888; }

    /* ─── Operational weekly calendar ─── */
    .wbo-layout { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
    .wbo-pool { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; max-height:calc(100vh - 250px); position:sticky; top:12px; }
    .wbo-pool-head { padding:13px 16px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#7a4500; background:#fff4e0; border-bottom:2px solid #f0c070; display:flex; align-items:center; gap:8px; }
    .wbo-pool-count { background:rgba(0,0,0,0.08); padding:2px 9px; border-radius:11px; font-size:11px; font-weight:700; }
    .wbo-pool-body { padding:10px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:8px; min-height:120px; }
    .wbo-week { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
    .wbo-day { background:#fff; border:1px solid #e2e2e7; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:180px; }
    .wbo-day.wbo-today { border-color:var(--orange); box-shadow:0 0 0 2px rgba(255,107,26,0.18); }
    .wbo-day.wbo-dragover { border-color:#2a8ad6; background:#eef6fd; }
    .wbo-day-head { padding:9px 12px; border-bottom:1px solid #f0f0f3; display:flex; align-items:baseline; justify-content:space-between; background:#fafafc; }
    .wbo-day-name { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#3a3a45; }
    .wbo-day-date { font-size:11px; color:#999; }
    .wbo-day.wbo-today .wbo-day-name { color:var(--orange); }
    .wbo-day-body { padding:8px; flex:1; display:flex; flex-direction:column; gap:8px; }
    .wbo-day-empty { color:#c4c4cc; font-size:11px; font-style:italic; text-align:center; padding:14px 4px; }

    /* Operational job card */
    .wbo-card { border:1px solid #e2e2e7; border-left:4px solid #c77a00; border-radius:8px; background:#fff; padding:9px 10px; box-shadow:0 1px 2px rgba(0,0,0,0.04); cursor:grab; }
    .wbo-card:active { cursor:grabbing; }
    .wbo-card.wbo-dragging { opacity:0.45; }
    .wbo-card-wo { font-weight:700; font-size:12px; font-family:ui-monospace,Menlo,monospace; color:#1a1a1f; }
    .wbo-card-addr { font-size:11px; color:#666; margin:2px 0 6px; line-height:1.35; }
    .wbo-card-type { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:9px; background:#eef1f6; color:#3a4a5a; margin-bottom:6px; }
    .wbo-who { display:flex; align-items:center; gap:5px; }
    .wbo-who-sel { flex:1; padding:5px 7px; border:1px solid #d8d8de; border-radius:6px; font-size:11px; font-family:inherit; background:#fff; }
    .wbo-who-sel.wbo-ok { border-color:#5ac08a; background:#f3fbf6; }
    .wbo-who-sel.wbo-warn { border-color:#f0a020; background:#fff8e8; }
    .wbo-skills { margin-top:6px; display:flex; flex-wrap:wrap; gap:3px; }
    .wbo-skill { font-size:9px; padding:1px 6px; border-radius:8px; background:#eef1f6; color:#566; }
    .wbo-warn-msg { font-size:10px; color:#9a5a00; margin-top:4px; }
    /* Duration + auto/locked state */
    .wbo-card-meta { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
    .wbo-dur { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; color:#3a4a5a; background:#eef1f6; border-radius:9px; padding:2px 7px; }
    .wbo-dur input { width:30px; border:none; background:transparent; font-size:10px; font-weight:700; color:#3a4a5a; text-align:right; font-family:inherit; padding:0; }
    .wbo-dur input:focus { outline:none; }
    .wbo-card.wbo-auto { border-left-style:dashed; }
    .wbo-tag-auto   { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; background:#eef6fd; color:#1f6fb0; }
    .wbo-tag-locked { font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; background:#fff4e0; color:#7a4500; }
    /* Day capacity / overtime */
    .wbo-day-load { font-size:10px; font-weight:700; color:#16a34a; }
    .wbo-day.wbo-over .wbo-day-load { color:#dc2626; }
    .wbo-over-msg { font-size:10px; color:#a01818; background:#fde5e5; border-top:1px solid #f0a0a0; padding:5px 8px; font-weight:600; }

    /* ───────────────────────────────────────────────────────────────
       GRAPH VIEW — the pipeline drawn as a left→right directed graph.
       To Be Confirmed ─┬─ Simple ─┐
                        └─ Complex ┴─ Ready ── Generated ── Done
       Nodes are clickable; clicking one drills its work orders into the
       panel below. Edges are an SVG layer measured from the live layout.
       ─────────────────────────────────────────────────────────────── */
    .wb-graph-card { background:#fff; border:1px solid #e2e2e7; border-radius:16px; padding:8px 12px 4px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,0.04); overflow-x:auto; }
    .wb-cleanse-btn { position:absolute; top:12px; right:14px; z-index:3; cursor:pointer;
      font-size:12px; font-weight:600; color:#b8456b; background:#fff;
      border:1px solid #e6c2cf; border-radius:8px; padding:6px 11px; line-height:1;
      box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background .12s,border-color .12s; }
    .wb-cleanse-btn:hover { background:#fdf2f6; border-color:#d98bab; }
    .wb-cleanse-btn:disabled { opacity:.55; cursor:default; }
    .wb-review-btn { position:absolute; top:12px; right:160px; z-index:3; cursor:pointer;
      font-size:12px; font-weight:600; color:#2a6fb0; background:#fff;
      border:1px solid #c2d8ec; border-radius:8px; padding:6px 11px; line-height:1;
      box-shadow:0 1px 2px rgba(0,0,0,.04); transition:background .12s,border-color .12s; }
    .wb-review-btn:hover { background:#f2f8fd; border-color:#8bb6d9; }
    /* ── Review carousel ─────────────────────────────────────────────── */
    .rev-overlay { position:fixed; inset:0; z-index:9000; background:rgba(20,22,28,.55);
      display:none; align-items:stretch; justify-content:center; }
    .rev-overlay.open { display:flex; }
    .rev-shell { background:#f6f7f9; width:100%; max-width:1500px; margin:18px; border-radius:14px;
      display:flex; flex-direction:column; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.35); }
    .rev-head { display:flex; align-items:center; gap:14px; padding:12px 18px; background:#fff;
      border-bottom:1px solid #e7e9ee; flex:0 0 auto; }
    .rev-head .rev-counter { font-weight:700; font-size:14px; color:#1b2330; min-width:90px; }
    .rev-head select, .rev-head input { font-size:13px; padding:5px 8px; border:1px solid #d6d9e0;
      border-radius:7px; background:#fff; }
    .rev-nav-btn { cursor:pointer; border:1px solid #d6d9e0; background:#fff; border-radius:7px;
      width:34px; height:30px; font-size:15px; line-height:1; }
    .rev-nav-btn:hover { background:#f0f2f6; }
    .rev-nav-btn:disabled { opacity:.4; cursor:default; }
    .rev-spacer { flex:1 1 auto; }
    .rev-close { cursor:pointer; border:none; background:#eef0f4; border-radius:7px; width:32px; height:30px; font-size:16px; }
    .rev-body { display:grid; grid-template-columns:1fr 1fr; gap:0; flex:1 1 auto; min-height:0; }
    .rev-pane { overflow:auto; padding:18px; }
    .rev-pane.rev-left { background:#2b2f3a; }
    .rev-pane.rev-right { background:#f6f7f9; border-left:1px solid #e2e4ea; }
    .rev-pane-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
      margin:0 0 12px; }
    .rev-left .rev-pane-title { color:#9aa3b2; }
    .rev-right .rev-pane-title { color:#7a8290; }
    .rev-img { width:100%; border-radius:8px; margin-bottom:12px; box-shadow:0 2px 10px rgba(0,0,0,.3);
      background:#fff; display:block; }
    .rev-pagewrap { position:relative; margin-bottom:12px; }
    .rev-pageno { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.6); color:#fff;
      font-size:11px; padding:2px 7px; border-radius:5px; }
    .rev-card { background:#fff; border-radius:10px; padding:16px 18px; color:#1b2330; line-height:1.55; }
    .rev-card .rev-meta { font-size:12.5px; color:#3a4150; margin-bottom:4px; }
    .rev-card .rev-meta b { color:#1b2330; }
    .rev-card .rev-bodytext { margin-top:12px; padding-top:12px; border-top:1px solid #eceef2;
      white-space:pre-wrap; font-size:13px; color:#2a3140; }
    .rev-card mark { background:#fff2a8; padding:0 2px; border-radius:3px; }
    .rev-field { margin-bottom:12px; }
    .rev-field label { display:block; font-size:11px; font-weight:700; color:#6a7280; margin-bottom:4px; }
    .rev-field input, .rev-field textarea, .rev-field select { width:100%; box-sizing:border-box;
      font-size:13px; padding:7px 9px; border:1px solid #d6d9e0; border-radius:7px; background:#fff; font-family:inherit; }
    .rev-field textarea { min-height:64px; resize:vertical; }
    .rev-field input[readonly] { background:#eef0f4; color:#6a7280; }
    .rev-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .rev-savebar { display:flex; align-items:center; gap:10px; margin:6px 0 18px; }
    .rev-save-btn { cursor:pointer; background:#2a8ad6; color:#fff; border:none; border-radius:8px;
      padding:8px 16px; font-weight:600; font-size:13px; }
    .rev-save-btn:disabled { opacity:.5; cursor:default; }
    .rev-saved { font-size:12px; color:#1a8a4a; font-weight:600; }
    .rev-ai { background:#fff; border:1px solid #e2e4ea; border-radius:10px; padding:14px; }
    .rev-ai h4 { margin:0 0 8px; font-size:12px; color:#3a4150; font-weight:700; }
    .rev-ai-row { display:flex; gap:8px; }
    .rev-ai-row input { flex:1; font-size:13px; padding:8px 10px; border:1px solid #d6d9e0; border-radius:7px; }
    .rev-ai-btn { cursor:pointer; background:#6a3eb0; color:#fff; border:none; border-radius:7px; padding:8px 14px; font-weight:600; font-size:13px; }
    .rev-ai-btn:disabled { opacity:.5; cursor:default; }
    .rev-ai-hint { font-size:11px; color:#9aa3b2; margin-top:7px; }
    .rev-diff { margin-top:12px; border-top:1px solid #eceef2; padding-top:12px; }
    .rev-diff-row { font-size:12.5px; margin-bottom:7px; }
    .rev-diff-row .rev-df-field { font-weight:700; color:#3a4150; }
    .rev-diff-row .rev-df-from { color:#b8456b; text-decoration:line-through; }
    .rev-diff-row .rev-df-to { color:#1a8a4a; font-weight:600; }
    .rev-diff-note { font-size:12px; color:#6a7280; font-style:italic; margin:6px 0 12px; }
    .rev-diff-actions { display:flex; gap:8px; }
    .rev-apply-btn { cursor:pointer; background:#1a8a4a; color:#fff; border:none; border-radius:7px; padding:7px 14px; font-weight:600; font-size:13px; }
    .rev-reject-btn { cursor:pointer; background:#eef0f4; color:#3a4150; border:none; border-radius:7px; padding:7px 14px; font-weight:600; font-size:13px; }
    .rev-loading { color:#9aa3b2; font-size:13px; padding:20px 0; }
    .wb-graph-wrap { position:relative; min-width:920px; }
    .wb-graph-edges { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; overflow:visible; }
    .wb-edge { fill:none; stroke:#c9ccd6; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:7 7; animation:wb-flow 1.1s linear infinite; }
    @keyframes wb-flow { to { stroke-dashoffset:-14; } }
    .wb-graph-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:1fr 1fr; column-gap:48px; row-gap:24px; padding:34px 26px; align-items:center; }

    /* A node = one stage. Accent color comes from --nc / --nc2 set inline. */
    .wb-node { --nc:#888; --nc2:#aaa; position:relative; cursor:pointer; background:#fff;
      border:1.5px solid #e6e6ec; border-radius:14px; padding:16px 18px 15px; min-width:150px;
      box-shadow:0 2px 6px rgba(0,0,0,0.05); transition:transform .14s, box-shadow .14s, border-color .14s;
      display:flex; flex-direction:column; gap:7px; }
    .wb-node::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:14px 0 0 14px; background:linear-gradient(180deg,var(--nc),var(--nc2)); }
    .wb-node:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,0.12); border-color:var(--nc); }
    .wb-node.active { border-color:var(--nc); box-shadow:0 0 0 3px color-mix(in srgb, var(--nc) 22%, transparent), 0 8px 22px rgba(0,0,0,0.12); }
    .wb-node-top { display:flex; align-items:center; gap:9px; }
    .wb-node-ico { width:30px; height:30px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; font-size:16px; background:linear-gradient(135deg,var(--nc),var(--nc2)); color:#fff; box-shadow:0 2px 5px color-mix(in srgb, var(--nc) 40%, transparent); }
    .wb-node-name { font-size:13.5px; font-weight:800; letter-spacing:-0.2px; color:#23232b; line-height:1.15; }
    .wb-node-bottom { display:flex; align-items:baseline; gap:7px; }
    .wb-node-count { font-size:30px; font-weight:800; line-height:1; color:var(--nc); letter-spacing:-1px; }
    .wb-node-unit { font-size:11px; color:#9a9aa4; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
    .wb-node-act { margin-top:1px; font-size:10.5px; font-weight:700; color:var(--nc); opacity:.85; }
    /* the fork node spans both rows so it sits centered between Simple/Complex */
    .wb-node-span { grid-row:1 / 3; }

    /* Detail panel below the graph — cards for the selected stage. */
    .wb-panel { background:#fff; border:1px solid #e2e2e7; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
    .wb-panel-head { padding:15px 20px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:12px; }
    .wb-panel-dot { width:14px; height:14px; border-radius:5px; flex-shrink:0; }
    .wb-panel-title { font-size:16px; font-weight:800; color:#1a1a1f; }
    .wb-panel-sub { font-size:13px; color:#888; margin-left:auto; }
    .wb-panel-link { font-size:12px; font-weight:700; color:#c77a00; cursor:pointer; padding:6px 12px; border-radius:8px; background:#fff8e1; border:1px solid #f0c070; }
    .wb-panel-link:hover { background:#fdefc2; }
    .wb-panel-body { padding:16px; display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; align-items:start; }
    .wb-panel-empty { padding:48px 20px; text-align:center; color:#aaa; font-style:italic; grid-column:1/-1; }

    /* Stage-history popup — click a WO to see its journey + the view it had at
       each earlier stage (defaults to the previous stage). */
    .wbsm-overlay { position:fixed; inset:0; background:rgba(20,20,28,0.5); backdrop-filter:blur(2px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:28px; }
    .wbsm-modal { background:#fff; border-radius:16px; width:min(820px,100%); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 24px 60px rgba(0,0,0,0.35); overflow:hidden; }
    .wbsm-head { padding:18px 22px; border-bottom:1px solid #eee; display:flex; align-items:center; gap:12px; }
    .wbsm-title { font-size:17px; font-weight:800; color:#1a1a1f; display:flex; align-items:center; gap:10px; }
    .wbsm-close { margin-left:auto; cursor:pointer; border:none; background:#f0f0f3; width:32px; height:32px; border-radius:9px; font-size:18px; color:#666; line-height:1; }
    .wbsm-close:hover { background:#e2e2e7; color:#000; }
    /* Timeline rail of stages the WO passed through. */
    .wbsm-rail { display:flex; align-items:stretch; gap:0; padding:16px 22px; border-bottom:1px solid #f0f0f3; overflow-x:auto; }
    .wbsm-step { display:flex; align-items:center; gap:0; flex-shrink:0; }
    .wbsm-chip { cursor:pointer; border:1.5px solid #e2e2e7; background:#fff; border-radius:11px; padding:8px 13px; display:flex; flex-direction:column; gap:2px; min-width:96px; transition:all .12s; }
    .wbsm-chip:hover { border-color:var(--cc,#aaa); background:#fafafc; }
    .wbsm-chip.sel { border-color:var(--cc,#888); box-shadow:0 0 0 3px color-mix(in srgb, var(--cc,#888) 20%, transparent); }
    .wbsm-chip.cur { background:color-mix(in srgb, var(--cc,#888) 8%, #fff); }
    .wbsm-chip-name { font-size:12px; font-weight:800; color:#23232b; display:flex; align-items:center; gap:5px; }
    .wbsm-chip-when { font-size:10px; color:#9a9aa4; font-weight:600; }
    .wbsm-arrow { color:#c9ccd6; font-size:18px; padding:0 6px; align-self:center; }
    .wbsm-body { padding:20px 22px; overflow-y:auto; }
    .wbsm-stage-banner { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#666; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
    .wbsm-note { margin-top:14px; font-size:12px; color:#777; padding:10px 14px; background:#fafafa; border-left:3px solid #d8d8de; border-radius:4px; }
    .wbsm-foot { padding:12px 22px; border-top:1px solid #f0f0f3; display:flex; align-items:center; gap:14px; font-size:12px; color:#999; }
    .wbsm-raw { cursor:pointer; color:#888; text-decoration:underline; }
    .wbsm-raw:hover { color:#444; }
    /* Email Tool — clickable source-email cards under each answer, + the
       mini email-reader popup they open (work-order Label-Focus styling). */
    .et-src-wrap { align-self:stretch; margin:2px 0 6px 38px; }
    .et-src-label { font-size:11px; color:var(--muted); margin-bottom:6px; }
    .et-src-row { display:flex; flex-wrap:wrap; gap:8px; }
    .et-src-card { text-align:left; cursor:pointer; border:1px solid var(--border); background:var(--card); border-radius:10px; padding:8px 11px; max-width:280px; min-width:170px; font:inherit; color:var(--text); transition:border-color .12s, box-shadow .12s, transform .06s; }
    .et-src-card:hover { border-color:var(--orange); box-shadow:0 3px 12px rgba(0,0,0,0.10); }
    .et-src-card:active { transform:translateY(1px); }
    .et-src-from { font-size:11px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .et-src-subj { font-size:12px; color:var(--text); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .et-src-date { font-size:10px; color:var(--muted); margin-top:2px; }
    .et-src-why { font-size:10.5px; color:var(--orange); margin-top:5px; line-height:1.35; white-space:normal; }
    .et-rd-modal { width:min(680px,100%); }
    .et-rd-meta { font-size:12px; color:#444; line-height:1.6; padding-bottom:8px; border-bottom:1px solid #eee; margin-bottom:10px; }
    .et-rd-meta b { color:#1a1a1f; }
    .et-rd-meta-row { margin-bottom:2px; }
    .et-rd-why { font-size:12.5px; color:#7a4500; background:#fff8e1; border:1px solid #f0c070; border-radius:8px; padding:8px 11px; margin-bottom:8px; line-height:1.45; }
    .et-rd-quote { font-size:12.5px; color:#333; border-left:3px solid #fbbf24; background:#fffdf3; padding:6px 11px; margin-bottom:12px; border-radius:0 6px 6px 0; font-style:italic; }
    .et-rd-body { font-size:13px; line-height:1.6; color:#222; max-height:60vh; overflow-y:auto; }
    .et-rd-body p { margin:0 0 12px 0; }
    .et-rd-body blockquote { margin:0 0 12px 0; padding-left:12px; border-left:3px solid #ddd; color:#555; }
    /* Details modal — clean, formatted alternative to the raw JSON dump. */
    .wbd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px 20px; }
    .wbd-field { display:flex; flex-direction:column; gap:3px; }
    .wbd-k { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#9a9aa4; }
    .wbd-v { font-size:13.5px; color:#1a1a1f; font-weight:500; }
    .wbd-sec { margin-top:18px; padding-top:16px; border-top:1px solid #f0f0f3; }
    .wbd-sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#888; margin-bottom:10px; }
    .wbd-email-meta { font-size:13px; line-height:1.7; color:#3a3a45; padding-bottom:12px; border-bottom:1px solid #eee; }
    .wbd-email-meta b { color:#888; font-weight:700; }
    /* The Details modal renders the SAME body / portal-card markup the labeling
       carousel does (lf-email-body, rp-portal). Those styles are scoped to
       #label-focus-tab, so re-declare them here (scoped to .wbsm-modal) or the
       plain-text + portal views would come out as raw, unstyled text. */
    .wbsm-modal .lf-email-body { font-family:-apple-system,"Segoe UI",Tahoma,sans-serif; font-size:14px; line-height:1.55; color:#1a1a1f; background:#fffaf0; padding:16px 18px; border:1px solid #f0d9a8; border-left:4px solid #e0a000; border-radius:6px; margin-top:4px; }
    .wbsm-modal .lf-email-body p { margin:0 0 12px 0; }
    .wbsm-modal .lf-email-body p:last-child { margin-bottom:0; }
    .wbsm-modal .lf-email-body blockquote { margin:8px 0 12px 0; padding:4px 12px; border-left:3px solid #c7d2e0; color:#5a6678; font-size:13px; }
    .wbsm-modal .rp-portal { font-family:-apple-system,"Segoe UI",Tahoma,sans-serif; color:#1a1a1f; background:#fff; border:1px solid #e2e2e7; border-radius:8px; padding:4px 0 10px; margin-top:4px; overflow:hidden; }
    .wbsm-modal .rp-hdr { font-size:14px; font-weight:700; color:#14213d; background:#f5f7fb; padding:12px 18px; border-bottom:1px solid #e8ebf2; }
    .wbsm-modal .rp-sec { font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#6a3eb0; margin:14px 18px 4px; padding-bottom:4px; border-bottom:1px solid #ede8f7; }
    .wbsm-modal .rp-row { display:grid; grid-template-columns:190px 1fr; gap:4px 14px; padding:5px 18px; font-size:13px; line-height:1.5; }
    .wbsm-modal .rp-row:nth-child(even) { background:#fcfcfe; }
    .wbsm-modal .rp-row-wide { grid-template-columns:1fr; }
    .wbsm-modal .rp-row-wide .rp-v { background:#fffbe9; border:1px solid #f0e3b8; border-radius:6px; padding:8px 10px; margin-top:2px; white-space:pre-wrap; }
    .wbsm-modal .rp-k { font-weight:600; color:#5a6678; }
    .wbsm-modal .rp-v { color:#1a1a1f; }
    .wb-card-top.wbsm-clickable { cursor:pointer; }
    .wb-card-top.wbsm-clickable:hover { background:#f7f7fb; }
    .wbsm-openhint { margin-left:auto; font-size:11px; color:#b8b8c0; font-weight:600; }

    /* "How this works" explainer — the human process + what the stages mean. */
    .wb-explain { margin-top:16px; border:1px solid #e8e8ee; border-radius:12px; background:#fbfbfd; overflow:hidden; }
    .wb-explain > summary { cursor:pointer; list-style:none; padding:13px 18px; font-weight:700; font-size:14px; color:#2a2a33; display:flex; align-items:center; gap:9px; user-select:none; }
    .wb-explain > summary::-webkit-details-marker { display:none; }
    .wb-explain > summary::after { content:'▾'; margin-left:auto; color:#aaa; transition:transform .15s; }
    .wb-explain[open] > summary::after { transform:rotate(180deg); }
    .wb-explain > summary:hover { background:#f3f3f7; }
    .wb-explain-body { padding:4px 20px 20px; }
    .wb-explain-lead { font-size:13.5px; line-height:1.6; color:#444; margin:4px 0 18px; }
    .wb-explain-lead b { color:#1a1a1f; }
    .wb-explain-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:26px; align-items:start; }
    @media (max-width:900px){ .wb-explain-grid { grid-template-columns:1fr; } }
    .wb-explain-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.6px; color:#999; margin:0 0 12px; }
    .wb-steps { margin:0; padding:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:11px; }
    .wb-steps li { position:relative; padding-left:36px; font-size:13px; line-height:1.5; color:#3a3a45; counter-increment:step; }
    .wb-steps li::before { content:counter(step); position:absolute; left:0; top:-1px; width:23px; height:23px; border-radius:7px; background:var(--orange); color:#fff; font-size:11px; font-weight:800; display:grid; place-items:center; }
    .wb-steps li b { color:#1a1a1f; }
    .wb-steps li i { color:#7a7a85; }
    .wb-legend { display:flex; flex-direction:column; gap:15px; }
    .wb-legend-item { border-left:3px solid var(--lc,#ccc); padding:2px 0 2px 13px; }
    .wb-legend-name { font-weight:800; font-size:13px; color:#23232b; display:flex; align-items:center; gap:7px; }
    .wb-legend-desc { font-size:12px; color:#666; line-height:1.5; margin-top:4px; }
    .wb-egtags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
    .wb-egtag { font-size:11px; padding:3px 10px; border-radius:11px; background:#fff; border:1px solid var(--lc,#ddd); color:#444; font-weight:600; }

/* ─────────────────────────────────────── */

#ajr-launch { position:fixed; bottom:20px; right:20px; z-index:60; background:var(--orange); color:#fff; border:none; border-radius:26px; padding:13px 20px; font-size:13px; font-weight:700; cursor:pointer; box-shadow:0 6px 20px -4px rgba(255,107,26,.5); display:flex; align-items:center; gap:8px; }
    #ajr-launch:hover { filter:brightness(1.05); }
    #ajr-panel { position:fixed; bottom:20px; right:20px; z-index:61; width:440px; max-width:calc(100vw - 36px); max-height:calc(100vh - 120px); background:#fff; border:1px solid #e2e2e7; border-radius:14px; box-shadow:0 12px 40px -8px rgba(0,0,0,.28); display:none; flex-direction:column; overflow:hidden; }
    #ajr-panel.open { display:flex; }
    .ajr-head { background:var(--orange); color:#fff; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
    .ajr-head b { font-size:13.5px; }
    .ajr-x { background:rgba(255,255,255,.2); border:none; color:#fff; width:26px; height:26px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; }
    .ajr-body { padding:14px 16px; overflow-y:auto; }
    .ajr-drop { border:1.5px dashed #d8d8de; border-radius:10px; padding:14px; text-align:center; font-size:12px; color:#888; cursor:pointer; }
    .ajr-drop:hover { border-color:var(--orange); color:var(--orange); }
    .ajr-row { border:1px solid #e2e2e7; border-radius:9px; padding:10px; margin-top:8px; background:#fafafb; }
    .ajr-row label { font-size:9px; color:#999; text-transform:uppercase; letter-spacing:.4px; font-weight:700; display:block; margin-bottom:2px; }
    .ajr-row input, .ajr-row select { width:100%; font-size:12px; padding:5px 7px; border:1px solid #d8d8de; border-radius:6px; margin-bottom:6px; box-sizing:border-box; }
    .ajr-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .ajr-rangewarn { font-size:10px; color:#c77a00; background:#fff4e0; border:1px solid #f0c070; border-radius:5px; padding:4px 7px; margin-bottom:6px; }
    .ajr-status-parked    { color:#888; }
    .ajr-status-linked    { color:#1f9d4d; }
    .ajr-status-dismissed { color:#c0392b; }

/* ─────────────────────────────────────── */

.ma-wrap{max-width:1280px;margin:0 auto;}
    .ma-head h2{margin:0 0 4px;font-size:20px;}
    .ma-head p{margin:0 0 12px;color:var(--soft);font-size:13px;line-height:1.55;max-width:880px;}
    .ma-toolbar{display:flex;align-items:center;gap:14px;margin:14px 0 18px;flex-wrap:wrap;}
    .ma-status{font-size:12px;color:var(--soft);}
    .ma-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
    .ma-col{border:1px solid var(--line,#e3e3e3);border-radius:10px;overflow:hidden;background:var(--card,#fff);}
    .ma-col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line,#e3e3e3);background:rgba(0,0,0,.02);}
    .ma-col-head h3{margin:0;font-size:13px;font-weight:700;letter-spacing:.2px;}
    .ma-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:#eef;color:#335;margin-left:6px;}
    .ma-badge.new{background:#e6f5ec;color:#1d7a43;}
    .ma-doc{margin:0;padding:14px;max-height:540px;overflow:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;white-space:pre-wrap;word-break:break-word;}
    .ma-empty{padding:40px 18px;text-align:center;color:var(--soft);font-size:13px;}
    .ma-changes{margin-top:22px;}
    .ma-change{border:1px solid var(--line,#e3e3e3);border-left-width:4px;border-radius:8px;padding:11px 14px;margin-bottom:10px;background:var(--card,#fff);}
    .ma-change.adjust{border-left-color:#e0a000;} .ma-change.split{border-left-color:#7a3fb0;} .ma-change.add{border-left-color:#1d7a43;}
    .ma-change-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:6px;}
    .ma-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:9px;color:#fff;}
    .ma-tag.adjust{background:#e0a000;} .ma-tag.split{background:#7a3fb0;} .ma-tag.add{background:#1d7a43;}
    .ma-code{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:12px;}
    .ma-conf{font-size:10px;color:var(--soft);}
    .ma-ev{font-size:11px;color:#335;background:#eef;border-radius:6px;padding:1px 7px;}
    .ma-diff{font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;margin:4px 0;}
    .ma-diff .del{color:#b3261e;} .ma-diff .add{color:#1d7a43;}
    .ma-why{font-size:12px;color:var(--text);margin-top:4px;line-height:1.5;}
    .ma-ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
    .ma-card{border:1px solid var(--line,#e3e3e3);border-radius:8px;padding:10px 12px;background:var(--card,#fff);font-size:12px;}
    .ma-card h4{margin:0 0 4px;font-size:13px;}
    .ma-card .ma-line{color:var(--soft);font-size:11px;line-height:1.5;}
    .ma-knobs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
    .ma-knob{font-size:10px;padding:2px 7px;border-radius:9px;background:rgba(0,0,0,.05);}
    .ma-knob.good{background:#e6f5ec;color:#1d7a43;} .ma-knob.warn{background:#fdeede;color:#9a4a00;}
    .ma-sec-h{font-size:15px;margin:24px 0 10px;}
    @media(max-width:900px){.ma-cols{grid-template-columns:1fr;}}
    /* Editable pricing sources */
    .ps-panel{border:1px solid var(--line,#e3e3e3);border-radius:10px;margin-bottom:10px;background:var(--card,#fff);overflow:hidden;}
    .ps-panel>summary{cursor:pointer;padding:11px 14px;font-weight:700;font-size:13px;list-style:none;}
    .ps-panel>summary::-webkit-details-marker{display:none;}
    .ps-meta{font-weight:500;color:var(--soft);font-size:11px;margin-left:8px;}
    .ps-body{padding:12px 14px;border-top:1px solid var(--line,#e3e3e3);}
    .ps-table{width:100%;border-collapse:collapse;font-size:12px;}
    .ps-table th{position:sticky;top:0;background:var(--card,#fff);text-align:left;padding:7px 8px;border-bottom:1px solid var(--line,#e3e3e3);font-size:11px;color:var(--soft);}
    .ps-table td{padding:3px 6px;border-bottom:1px solid rgba(0,0,0,.05);}
    .ps-table input{width:100%;box-sizing:border-box;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:6px;font-size:12px;color:var(--text);}
    .ps-table input:focus{border-color:var(--orange);outline:none;background:rgba(0,0,0,.03);}
    .ps-table input.ps-price{text-align:right;font-family:ui-monospace,Menlo,monospace;}
    .ps-del{cursor:pointer;color:#b3261e;border:none;background:none;font-size:13px;padding:2px 6px;}
    .ps-area{width:100%;min-height:300px;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;padding:10px;border:1px solid var(--line,#e3e3e3);border-radius:8px;resize:vertical;box-sizing:border-box;color:var(--text);background:var(--bg,#fff);white-space:pre;}
    .ps-actions{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
    .ps-status{font-size:12px;color:var(--soft);}

/* ─────────────────────────────────────── */

#match-invoices-tab .mi-wrap   { padding:18px 22px; max-width:1500px; margin:0 auto; }
    #match-invoices-tab .mi-header { background:#fff; border:1px solid #e2e2e7; border-radius:10px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    #match-invoices-tab .mi-title  { margin:0; font-size:18px; font-weight:700; color:#3a2070; letter-spacing:-.2px; }
    #match-invoices-tab .mi-counter{ color:#666; font-size:13px; }
    #match-invoices-tab .mi-nav    { margin-left:auto; display:flex; gap:6px; align-items:center; }
    #match-invoices-tab .mi-nav button { padding:7px 12px; font-size:12px; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    #match-invoices-tab .mi-nav button:hover  { background:#efeafa; border-color:#6a3eb0; }
    #match-invoices-tab .mi-nav button:disabled { opacity:.4; cursor:not-allowed; }
    #match-invoices-tab .mi-panes  { display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:stretch; min-height:calc(100vh - 220px); }
    /* Large ledgers (HW Foote) — give the editable table the dominant width. */
    #match-invoices-tab .mi-panes.mi-wide-table { grid-template-columns: 0.78fr 1.6fr; }
    @media (max-width:1100px) { #match-invoices-tab .mi-panes, #match-invoices-tab .mi-panes.mi-wide-table { grid-template-columns: 1fr; } }
    #match-invoices-tab .mi-pane   { background:#fff; border:1px solid #e2e2e7; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
    #match-invoices-tab .mi-pane-head { padding:11px 16px; background:#fafafa; border-bottom:1px solid #e2e2e7; font-size:11.5px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
    #match-invoices-tab .mi-pane-body { padding:14px 18px; overflow-y:auto; flex:1; }
    #match-invoices-tab .mi-row    { display:grid; grid-template-columns: 130px 1fr; gap:8px 12px; align-items:start; margin-bottom:10px; }
    #match-invoices-tab .mi-row label { font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.4px; padding-top:7px; }
    #match-invoices-tab .mi-row input { padding:7px 10px; border:1px solid #d8d8de; border-radius:5px; font-size:12.5px; font-family:inherit; background:#fff; width:100%; }
    #match-invoices-tab .mi-row input:focus { outline:none; border-color:#6a3eb0; background:#faf8ff; }
    #match-invoices-tab .mi-actions { padding:12px 18px; border-top:1px solid #e2e2e7; display:flex; gap:8px; justify-content:flex-end; background:#fafafa; }
    #match-invoices-tab .mi-meta   { font-size:12px; color:#444; margin-bottom:4px; line-height:1.5; }
    #match-invoices-tab .mi-meta b { color:#1a1a1f; }
    #match-invoices-tab .mi-empty  { text-align:center; padding:80px 20px; color:#888; font-size:14px; }
    #match-invoices-tab .mi-status { font-size:11.5px; color:#666; padding:6px 14px; background:#fff; border-top:1px solid #e2e2e7; }

/* ─────────────────────────────────────── */

#hw-foote-tab { padding:0; }
  #hw-foote-tab .hwf-wrap { padding:18px 22px; max-width:1400px; margin:0 auto; }
  #hw-foote-tab .hwf-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
  #hw-foote-tab .hwf-header h2 { margin:0; font-size:18px; font-weight:700; color:#3a2070; flex:1; }
  #hw-foote-tab .hwf-balance-chip { background:#3a2070; color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:20px; white-space:nowrap; }
  #hw-foote-tab .hwf-balance-chip.zero { background:#1a7a3a; }
  #hw-foote-tab .hwf-panes { display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start; min-height:calc(100vh - 220px); }
  @media (max-width:900px) { #hw-foote-tab .hwf-panes { grid-template-columns:1fr; } }
  #hw-foote-tab .hwf-list-pane { background:#fff; border:1px solid var(--line,#e2e2e7); border-radius:10px; overflow:hidden; }
  #hw-foote-tab .hwf-pane-head { padding:10px 14px; background:#fafafa; border-bottom:1px solid var(--line,#e2e2e7); font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
  #hw-foote-tab .hwf-email-item { padding:10px 14px; border-bottom:1px solid #f2f2f5; cursor:pointer; transition:background .12s; }
  #hw-foote-tab .hwf-email-item:hover { background:#f5f2ff; }
  #hw-foote-tab .hwf-email-item.active { background:#ede8fa; border-left:3px solid #6a3eb0; }
  #hw-foote-tab .hwf-email-item .hwf-subj { font-size:13px; font-weight:600; color:#1a1a1f; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #hw-foote-tab .hwf-email-item .hwf-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  #hw-foote-tab .hwf-email-item .hwf-date { font-size:11px; color:#888; }
  #hw-foote-tab .hwf-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; white-space:nowrap; }
  #hw-foote-tab .hwf-badge.statement { background:#e8f4ea; color:#1a7a3a; }
  #hw-foote-tab .hwf-badge.payment-thread { background:#e8f0ff; color:#2a5ab0; }
  #hw-foote-tab .hwf-badge.other { background:#f0f0f5; color:#666; }
  #hw-foote-tab .hwf-scan-status { font-size:10.5px; color:#888; margin-top:3px; }
  #hw-foote-tab .hwf-scan-status.done { color:#1a7a3a; }
  #hw-foote-tab .hwf-detail-pane { background:#fff; border:1px solid var(--line,#e2e2e7); border-radius:10px; overflow:hidden; }
  #hw-foote-tab .hwf-detail-body { padding:18px 20px; }
  #hw-foote-tab .hwf-detail-empty { display:flex; align-items:center; justify-content:center; min-height:260px; color:#aaa; font-size:14px; }
  #hw-foote-tab .hwf-summary-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px; }
  #hw-foote-tab .hwf-summary-cell { background:#f8f6ff; border:1px solid #e0d8f8; border-radius:8px; padding:10px 14px; }
  #hw-foote-tab .hwf-summary-cell .sc-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#888; margin-bottom:4px; }
  #hw-foote-tab .hwf-summary-cell .sc-val { font-size:16px; font-weight:700; color:#3a2070; }
  #hw-foote-tab .hwf-summary-cell .sc-val.green { color:#1a7a3a; }
  #hw-foote-tab .hwf-line-table { width:100%; border-collapse:collapse; font-size:12.5px; }
  #hw-foote-tab .hwf-line-table th { text-align:left; padding:7px 10px; background:#f5f2ff; border-bottom:2px solid #d8d0f0; font-size:11px; text-transform:uppercase; letter-spacing:.3px; color:#3a2070; }
  #hw-foote-tab .hwf-line-table td { padding:6px 10px; border-bottom:1px solid #f0f0f5; vertical-align:top; }
  #hw-foote-tab .hwf-line-table tr:hover td { background:#faf8ff; }
  #hw-foote-tab .hwf-amt-invoice { color:#1a1a1f; }
  #hw-foote-tab .hwf-amt-payment { color:#1a7a3a; font-weight:600; }
  #hw-foote-tab .hwf-amt-credit  { color:#b05000; font-weight:600; }
  #hw-foote-tab .hwf-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
  #hw-foote-tab .hwf-empty-email { color:#888; font-size:13px; font-style:italic; padding:12px 0; }

/* ─────────────────────────────────────── */

#label-focus-tab .lf-wrap     { padding:18px 22px; max-width:1500px; margin:0 auto; }
    #label-focus-tab .lf-header   { background:#fff; border:1px solid #e2e2e7; border-radius:10px; padding:14px 18px; margin-bottom:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
    #label-focus-tab .lf-title    { margin:0; font-size:18px; font-weight:700; color:#7a4500; letter-spacing:-.2px; }
    #label-focus-tab .lf-counter  { color:#666; font-size:13px; }
    #label-focus-tab .lf-nav      { margin-left:auto; display:flex; gap:6px; align-items:center; }
    #label-focus-tab .lf-nav button { padding:7px 12px; font-size:12px; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    #label-focus-tab .lf-nav button:hover  { background:#fff8e1; border-color:#c77a00; }
    #label-focus-tab .lf-nav button:disabled { opacity:.4; cursor:not-allowed; }
    #label-focus-tab .lf-panes    { display:grid; grid-template-columns: 1.1fr 1fr; gap:14px; align-items:stretch; min-height:calc(100vh - 220px); }
    @media (max-width:1100px) { #label-focus-tab .lf-panes { grid-template-columns: 1fr; } }
    #label-focus-tab .lf-pane     { background:#fff; border:1px solid #e2e2e7; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
    #label-focus-tab .lf-pane-head{ padding:11px 16px; background:#fafafa; border-bottom:1px solid #e2e2e7; font-size:11.5px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.5px; }
    #label-focus-tab .lf-pane-body{ padding:14px 18px; overflow-y:auto; flex:1; }
    #label-focus-tab .lf-meta-row { font-size:12px; color:#444; margin-bottom:3px; line-height:1.5; }
    #label-focus-tab .lf-meta-row b { color:#1a1a1f; }
    /* Match-Invoices renders the SAME body / portal-card markup (lf-email-body,
       rp-portal) as the labeling carousel — see miRenderCurrent()'s no-attachment
       fallback. Share the scope with #match-invoices-tab or that preview comes
       out as raw, unstyled text. (cf. the .wbsm-modal re-declarations above.) */
    #label-focus-tab .lf-email-body,
    #match-invoices-tab .lf-email-body {
      font-family: -apple-system, "Segoe UI", Tahoma, sans-serif;
      font-size: 14px; line-height: 1.55; color: #1a1a1f;
      background: #fffaf0; padding: 16px 18px; border: 1px solid #f0d9a8; border-left: 4px solid #e0a000; border-radius: 6px;
      margin-top: 12px; max-width: 720px;
    }
    #label-focus-tab .lf-email-body p,
    #match-invoices-tab .lf-email-body p { margin: 0 0 12px 0; }
    #label-focus-tab .lf-email-body p:last-child,
    #match-invoices-tab .lf-email-body p:last-child { margin-bottom: 0; }
    #label-focus-tab .lf-email-body blockquote,
    #match-invoices-tab .lf-email-body blockquote {
      margin: 8px 0 12px 0; padding: 4px 12px; border-left: 3px solid #c7d2e0;
      color: #5a6678; font-size: 13px;
    }
    /* RealPage portal SR — clean sectioned key/value card (the "HTML view" look) */
    #label-focus-tab .rp-portal,
    #match-invoices-tab .rp-portal {
      font-family: -apple-system, "Segoe UI", Tahoma, sans-serif; color: #1a1a1f;
      background: #fff; border: 1px solid #e2e2e7; border-radius: 8px;
      padding: 4px 0 10px; margin-top: 12px; max-width: 760px; overflow: hidden;
    }
    #label-focus-tab .rp-hdr,
    #match-invoices-tab .rp-hdr { font-size: 14px; font-weight: 700; color: #14213d;
      background: #f5f7fb; padding: 12px 18px; border-bottom: 1px solid #e8ebf2; }
    #label-focus-tab .rp-sec,
    #match-invoices-tab .rp-sec { font-size: 11px; font-weight: 800; letter-spacing: .6px;
      text-transform: uppercase; color: #6a3eb0; margin: 14px 18px 4px; padding-bottom: 4px;
      border-bottom: 1px solid #ede8f7; }
    #label-focus-tab .rp-row,
    #match-invoices-tab .rp-row { display: grid; grid-template-columns: 190px 1fr; gap: 4px 14px;
      padding: 5px 18px; font-size: 13px; line-height: 1.5; }
    #label-focus-tab .rp-row:nth-child(even),
    #match-invoices-tab .rp-row:nth-child(even) { background: #fcfcfe; }
    #label-focus-tab .rp-row-wide,
    #match-invoices-tab .rp-row-wide { grid-template-columns: 1fr; }
    #label-focus-tab .rp-row-wide .rp-v,
    #match-invoices-tab .rp-row-wide .rp-v { background: #fffbe9; border: 1px solid #f0e3b8;
      border-radius: 6px; padding: 8px 10px; margin-top: 2px; white-space: pre-wrap; }
    #label-focus-tab .rp-k,
    #match-invoices-tab .rp-k { font-weight: 600; color: #5a6678; }
    #label-focus-tab .rp-v,
    #match-invoices-tab .rp-v { color: #1a1a1f; }
    #label-focus-tab .lf-row      { display:grid; grid-template-columns: 130px 1fr; gap:8px 12px; align-items:start; margin-bottom:8px; }
    #label-focus-tab .lf-row label{ font-size:11px; font-weight:700; color:#3a3a45; text-transform:uppercase; letter-spacing:.4px; padding-top:7px; }
    #label-focus-tab .lf-row input, #label-focus-tab .lf-row textarea, #label-focus-tab .lf-row select {
      padding:7px 10px; border:1px solid #d8d8de; border-radius:5px; font-size:12.5px; font-family:inherit; background:#fff;
    }
    #label-focus-tab .lf-row input:focus, #label-focus-tab .lf-row textarea:focus, #label-focus-tab .lf-row select:focus { outline:none; border-color:var(--orange); background:#fffaf5; }
    #label-focus-tab .lf-row textarea { min-height:60px; resize:vertical; }
    #label-focus-tab .lf-actions  { padding:12px 18px; border-top:1px solid #e2e2e7; display:flex; gap:8px; justify-content:flex-end; background:#fafafa; }
    #label-focus-tab .lf-status   { font-size:11.5px; color:#666; padding:6px 14px; background:#fff; border-top:1px solid #e2e2e7; }
    #label-focus-tab .lf-empty    { text-align:center; padding:80px 20px; color:#888; font-size:14px; }
    /* Labeling guide */
    .lf-guide { margin:0 0 16px; border:1px solid #e0e0e8; border-radius:10px; background:#f7f9fc; overflow:hidden; }
    .lf-guide > summary { cursor:pointer; list-style:none; padding:10px 14px; font-weight:700; font-size:12.5px; color:#2a2a33; display:flex; align-items:center; gap:8px; }
    .lf-guide > summary::-webkit-details-marker { display:none; }
    .lf-guide > summary::after { content:'▾'; margin-left:auto; color:#aaa; }
    .lf-guide[open] > summary::after { content:'▴'; }
    .lf-guide ol { margin:0; padding:2px 18px 14px 34px; display:flex; flex-direction:column; gap:8px; }
    .lf-guide li { font-size:12px; line-height:1.5; color:#3a3a45; }
    .lf-guide li b { color:#1a1a1f; }
    /* Copyable email message block */
    .lf-emailmsg-head { display:flex; align-items:center; gap:10px; }
    .lf-copy-btn { padding:4px 11px; font-size:11px; font-weight:600; border:1px solid #d8d8de; background:#fff; border-radius:6px; cursor:pointer; }
    .lf-copy-btn:hover { background:#f0f0f3; border-color:#a8a8b0; }
    .lf-emailmsg { font-size:12px; line-height:1.55; color:#444; white-space:pre-wrap; background:#fafafa; border:1px solid #eee; border-left:3px solid #d8d8de; border-radius:6px; padding:10px 12px; max-height:160px; overflow-y:auto; margin-top:4px; }

/* ─────────────────────────────────────── */

@keyframes ip-think-pulse { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-2px); } }
          .ip-chip {
            font-size:10px; font-family:ui-monospace,Menlo,monospace;
            padding:3px 7px; border-radius:4px; border:1px solid var(--border);
            color:var(--muted); background:var(--bg); white-space:nowrap;
          }
          .ip-chip.pending    { color:var(--muted); }
          .ip-chip.extracting { color:#a855f7; border-color:#a855f7; background:rgba(168,85,247,.10); }
          .ip-chip.drafting   { color:var(--orange); border-color:var(--orange); background:rgba(249,115,22,.10); }
          .ip-chip.done       { color:var(--green); border-color:var(--green); background:rgba(34,197,94,.10); }
          .ip-chip.error,
          .ip-chip.parse-error{ color:var(--red); border-color:var(--red); background:rgba(239,68,68,.10); }

/* ─────────────────────────────────────── */

#oasis-info-tab { padding:0; }
    #oasis-info-tab .oi-wrap { padding:20px 24px; max-width:1500px; margin:0 auto; }

    /* Header bar */
    #oasis-info-tab .oi-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
    #oasis-info-tab .oi-header h2 { margin:0; font-size:19px; font-weight:700; flex:1; letter-spacing:-.3px; }
    #oasis-info-tab .oi-search { padding:8px 13px; border:1.5px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; min-width:220px; outline:none; transition:border-color .15s; }
    #oasis-info-tab .oi-search:focus { border-color:var(--orange); }
    #oasis-info-tab .oi-add-btn { padding:8px 16px; border-radius:8px; background:var(--orange); color:#fff; border:none; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; transition:opacity .12s; }
    #oasis-info-tab .oi-add-btn:hover { opacity:.88; }
    #oasis-info-tab .oi-row-count { font-size:11.5px; color:var(--muted); white-space:nowrap; }

    /* Sheet pill tabs */
    #oasis-info-tab .oi-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
    #oasis-info-tab .oi-tab-btn { padding:7px 17px; border:1.5px solid var(--border); border-radius:20px; background:var(--surface); font-size:13px; font-weight:600; cursor:pointer; color:var(--text); transition:all .13s; }
    #oasis-info-tab .oi-tab-btn:hover { border-color:#999; background:var(--card); }
    #oasis-info-tab .oi-tab-btn.active { background:var(--orange); color:#fff; border-color:var(--orange); }

    /* Table shell */
    #oasis-info-tab .oi-table-wrap { overflow-x:auto; background:var(--card); border:1.5px solid var(--border); border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); }
    #oasis-info-tab .oi-table { width:100%; border-collapse:collapse; font-size:13.5px; }
    #oasis-info-tab .oi-table thead tr { background:var(--surface); }
    #oasis-info-tab .oi-table th { position:sticky; top:0; z-index:2; background:var(--surface); text-align:left; padding:11px 14px; border-bottom:2px solid var(--border); font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; user-select:none; }
    #oasis-info-tab .oi-table th:first-child { border-radius:12px 0 0 0; }
    #oasis-info-tab .oi-table th:last-child  { border-radius:0 12px 0 0; }

    /* Body rows */
    #oasis-info-tab .oi-table tbody tr { transition:background .1s; }
    #oasis-info-tab .oi-table tbody tr:hover td { background:rgba(249,115,22,.04); }
    #oasis-info-tab .oi-table td { padding:0; border-bottom:1px solid var(--border); vertical-align:middle; }
    #oasis-info-tab .oi-table tbody tr:last-child td { border-bottom:none; }

    /* Cell: read mode */
    #oasis-info-tab .oi-cell { display:block; padding:9px 14px; min-height:38px; cursor:text; position:relative; transition:background .1s; border-radius:0; }
    #oasis-info-tab .oi-cell:hover { background:rgba(249,115,22,.07); }
    #oasis-info-tab .oi-cell:hover::after { content:'✏'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--orange); opacity:.7; }
    #oasis-info-tab .oi-cell.editing { padding:0; background:transparent; }
    #oasis-info-tab .oi-cell.editing::after { display:none; }

    /* Cell: edit mode input */
    #oasis-info-tab .oi-cell input {
      width:100%; box-sizing:border-box; border:none; outline:none;
      padding:9px 14px; font-size:13.5px; font-family:inherit;
      background:#fffbf5; border-bottom:2px solid var(--orange);
      border-radius:0; color:var(--text);
    }

    /* Save flash animations */
    @keyframes oi-flash-ok  { 0%{background:#d1fae5} 100%{background:transparent} }
    @keyframes oi-flash-err { 0%{background:#fee2e2} 100%{background:transparent} }
    #oasis-info-tab td.oi-saved { animation:oi-flash-ok .9s ease-out forwards; }
    #oasis-info-tab td.oi-error { animation:oi-flash-err .9s ease-out forwards; }

    /* Add-row form */
    #oasis-info-tab .oi-add-row-tr td { background:#f0fdf4; border-top:2px dashed #86efac; padding:0; }
    #oasis-info-tab .oi-add-row-tr input { border:none; outline:none; background:transparent; padding:9px 14px; font-size:13.5px; font-family:inherit; width:100%; box-sizing:border-box; color:var(--text); }
    #oasis-info-tab .oi-add-row-tr input::placeholder { color:#9ca3af; }
    #oasis-info-tab .oi-add-actions { display:flex; gap:8px; padding:10px 14px; background:#f0fdf4; border-top:1px solid #bbf7d0; border-radius:0 0 12px 12px; }
    #oasis-info-tab .oi-save-row-btn { padding:7px 18px; background:#16a34a; color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
    #oasis-info-tab .oi-save-row-btn:hover { background:#15803d; }
    #oasis-info-tab .oi-cancel-row-btn { padding:7px 14px; background:transparent; color:var(--muted); border:1.5px solid var(--border); border-radius:7px; font-size:13px; cursor:pointer; }
    #oasis-info-tab .oi-cancel-row-btn:hover { color:var(--text); border-color:#999; }

    #oasis-info-tab .oi-empty   { padding:60px 20px; text-align:center; color:var(--muted); font-size:13px; }
    #oasis-info-tab .oi-loading { padding:60px 20px; text-align:center; color:var(--muted); font-size:13px; }

/* ─────────────────────────────────────── */

#properties-tab .re-muted{color:#888;font-size:12px;}
#properties-tab .re-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0;}
#properties-tab .re-card{text-align:left;background:var(--surface,#fff);border:1px solid var(--border,#e2e2e7);border-radius:12px;padding:14px;cursor:pointer;transition:.12s;display:flex;flex-direction:column;gap:8px;color:var(--text,#222);}
#properties-tab .re-card:hover{border-color:var(--orange,#ff6b1a);box-shadow:0 2px 10px rgba(0,0,0,.06);}
#properties-tab .re-card-active{border-color:var(--orange,#ff6b1a);box-shadow:0 0 0 2px rgba(255,107,26,.18);}
#properties-tab .re-card-addr{font-weight:700;font-size:15px;}
#properties-tab .re-card-stat{font-size:12px;color:#666;}
#properties-tab .re-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid;width:fit-content;}
#properties-tab #re-detail{background:var(--surface,#fff);border:1px solid var(--border,#e2e2e7);border-radius:14px;padding:18px 20px;margin-bottom:30px;}
#properties-tab .re-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border,#eee);padding-bottom:12px;margin-bottom:12px;}
#properties-tab .re-detail-addr{font-size:22px;font-weight:800;}
#properties-tab .re-statusswitch{display:flex;gap:6px;flex-wrap:wrap;}
#properties-tab .re-stbtn{padding:7px 12px;border:1.5px solid #d8d8de;border-radius:9px;background:#fff;cursor:pointer;font-size:12.5px;font-weight:600;color:#444;}
#properties-tab .re-stbtn:hover{border-color:#aaa;}
#properties-tab .re-section{padding:14px 0;border-top:1px solid #f0f0f3;}
#properties-tab .re-section h4{margin:0 0 8px;font-size:14px;}
#properties-tab .re-section-h{display:flex;justify-content:space-between;align-items:center;gap:10px;}
#properties-tab .re-fieldrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
#properties-tab .re-fieldrow+.re-fieldrow{margin-top:6px;}
#properties-tab .re-in{padding:7px 10px;border:1px solid #d8d8de;border-radius:8px;font-size:13px;flex:1;min-width:110px;background:#fff;color:#222;}
#properties-tab .re-in:focus{outline:none;border-color:var(--orange,#ff6b1a);}
#properties-tab .re-in-num{max-width:120px;flex:0 0 auto;}
#properties-tab .re-wrow{display:flex;gap:6px;align-items:center;margin-bottom:6px;}
#properties-tab .re-btn{padding:7px 14px;border:1px solid #d8d8de;border-radius:8px;background:#f7f7f9;cursor:pointer;font-size:12.5px;font-weight:600;color:#333;text-decoration:none;display:inline-block;}
#properties-tab .re-btn:hover{background:#eee;}
#properties-tab .re-btn-primary{background:var(--orange,#ff6b1a);color:#fff;border-color:var(--orange,#ff6b1a);}
#properties-tab .re-mini{font-size:11.5px;padding:3px 8px;border:1px solid #d8d8de;border-radius:6px;background:#fff;cursor:pointer;color:#555;display:inline-block;}
#properties-tab .re-mini:hover{border-color:#aaa;}
#properties-tab .re-del{color:#c0392b;}
#properties-tab .re-x{border:none;background:none;color:#c0392b;cursor:pointer;font-size:13px;padding:2px 6px;}
#properties-tab .re-link{border:none;background:none;color:var(--orange,#ff6b1a);cursor:pointer;font-weight:600;font-size:12.5px;}
#properties-tab .re-filebox{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
#properties-tab .re-fchip{display:inline-flex;align-items:center;gap:4px;background:#eef2f8;border:1px solid #d6e0ef;border-radius:7px;padding:3px 8px;font-size:11.5px;}
#properties-tab .re-fchip a{color:#2a6fd6;text-decoration:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#properties-tab .re-fchip button{border:none;background:none;color:#999;cursor:pointer;}
#properties-tab .re-drop{border:1.6px dashed #cdd2dd;border-radius:10px;padding:16px;text-align:center;color:#888;cursor:pointer;font-size:12.5px;margin-top:4px;}
#properties-tab .re-drop:hover,#properties-tab .re-drop-over{border-color:var(--orange,#ff6b1a);color:var(--orange,#ff6b1a);background:rgba(255,107,26,.04);}
#properties-tab .re-twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
#properties-tab .re-kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
#properties-tab .re-kpi{background:#f8f9fb;border:1px solid #e8e8ee;border-radius:10px;padding:10px 12px;}
#properties-tab .re-kpi-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:#999;font-weight:700;}
#properties-tab .re-kpi-v{font-size:18px;font-weight:800;margin-top:2px;}
#properties-tab .re-kpi-s{font-size:11px;color:#888;margin-top:1px;}
#properties-tab .re-gantt{position:relative;margin-bottom:14px;}
#properties-tab .re-grow{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
#properties-tab .re-glabel{width:200px;flex:0 0 200px;font-size:12px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#properties-tab .re-gtrack{position:relative;flex:1;height:22px;background:#f2f3f6;border-radius:5px;}
#properties-tab .re-gbar{position:absolute;top:2px;height:18px;border-radius:4px;color:#fff;font-size:10px;overflow:hidden;display:flex;align-items:center;}
#properties-tab .re-gprog{position:absolute;left:0;top:0;height:100%;background:rgba(0,0,0,.22);}
#properties-tab .re-gbar-txt{position:relative;padding-left:5px;z-index:1;white-space:nowrap;}
#properties-tab .re-mile{position:absolute;top:1px;transform:translateX(-50%);color:#d9822b;font-size:14px;}
#properties-tab .re-gtoday{position:absolute;top:0;bottom:0;width:2px;background:#c0392b;z-index:3;}
#properties-tab .re-gtoday span{position:absolute;top:-13px;left:-12px;font-size:9px;color:#c0392b;font-weight:700;}
#properties-tab .re-gtbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px;}
#properties-tab .re-gtbl th{text-align:left;font-size:10px;text-transform:uppercase;color:#999;padding:3px;}
#properties-tab .re-gtbl td{padding:2px 3px;}
#properties-tab .re-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
#properties-tab .re-vcol,#properties-tab .re-tcol{background:#f6f7f9;border:1px solid #e8e8ee;border-radius:10px;padding:8px;min-height:80px;}
#properties-tab .re-vcol-over{border-color:var(--orange,#ff6b1a);background:rgba(255,107,26,.05);}
#properties-tab .re-vcol-h,#properties-tab .re-tcol-h{font-size:11.5px;font-weight:700;color:#555;margin-bottom:7px;display:flex;justify-content:space-between;}
#properties-tab .re-count{background:rgba(0,0,0,.08);border-radius:8px;padding:0 7px;font-size:10.5px;}
#properties-tab .re-vcard{background:#fff;border:1px solid #e2e2e7;border-radius:9px;padding:8px;margin-bottom:7px;cursor:grab;}
#properties-tab .re-vcard.re-dragging{opacity:.4;}
#properties-tab .re-vc-name{font-weight:700;border:none;width:100%;font-size:13px;padding:2px 0;background:none;color:#222;}
#properties-tab .re-vc-scope{border:none;width:100%;font-size:11.5px;color:#666;padding:1px 0;background:none;}
#properties-tab .re-vc-money{display:flex;gap:6px;margin:4px 0;}
#properties-tab .re-vc-money input{width:72px;border:1px solid #e2e2e7;border-radius:5px;font-size:11px;padding:2px 4px;}
#properties-tab .re-vc-money label{font-size:10px;color:#999;}
#properties-tab .re-vc-notes{width:100%;border:1px solid #eee;border-radius:5px;font-size:11px;padding:3px;resize:vertical;min-height:26px;font-family:inherit;}
#properties-tab .re-vc-actions{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap;align-items:center;}
#properties-tab .re-budget{font-size:12.5px;color:#444;margin-bottom:8px;}
#properties-tab .re-addvendor,#properties-tab .re-addtask{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center;}
#properties-tab .re-taskboard{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
#properties-tab .re-tcard{background:#fff;border:1px solid #e2e2e7;border-radius:9px;padding:8px;margin-bottom:7px;}
#properties-tab .re-tc-title{font-size:12.5px;font-weight:600;margin-bottom:4px;}
#properties-tab .re-tc-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10.5px;color:#777;align-items:center;}
#properties-tab .re-urg{background:#fff3e0;color:#b9690f;border-radius:5px;padding:0 6px;}
#properties-tab .re-due{background:#eef2f8;border-radius:5px;padding:0 6px;}
#properties-tab .re-overdue{background:#fde9e7;color:#c0392b;font-weight:700;}
#properties-tab .re-ptag{background:#eef7ee;color:#2a8a4a;border-radius:5px;padding:0 6px;}
#properties-tab .re-rb{font-size:11px;color:#c0392b;margin:4px 0;}
#properties-tab .re-tc-status{margin-top:6px;width:100%;font-size:11.5px;padding:3px;border:1px solid #e2e2e7;border-radius:6px;}
#properties-tab .re-tenant{background:#fafbfc;border:1px solid #ececf1;border-radius:9px;padding:10px;margin-bottom:8px;}
#properties-tab .re-tenant-prev{opacity:.78;}
#properties-tab .re-tenant-actions{display:flex;gap:8px;margin-top:7px;align-items:center;flex-wrap:wrap;}
#properties-tab .re-prev{margin-top:10px;}
#properties-tab .re-prev summary{cursor:pointer;font-size:12.5px;color:#666;}
#properties-tab .re-act{font-size:12px;padding:4px 0;border-bottom:1px solid #f3f3f6;}
#properties-tab .re-act-d{color:#999;font-size:11px;margin-right:6px;}
#properties-tab .re-permitbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.re-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#222;color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;opacity:0;transition:.25s;z-index:9999;pointer-events:none;}
.re-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
#properties-tab .re-superview{background:linear-gradient(135deg,rgba(0,122,255,.05),transparent);border:1px solid rgba(0,122,255,.22);margin-bottom:14px;}
#properties-tab .re-sv-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px;}
#properties-tab .re-sv-cols h4{margin:0 0 8px;font-size:13px;}
#properties-tab .re-att{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid #ececf1;border-radius:8px;padding:7px 10px;margin-bottom:6px;cursor:pointer;font-size:12px;color:#333;}
#properties-tab .re-att:hover{border-color:var(--orange,#ff6b1a);}
#properties-tab .re-att-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
#properties-tab .re-sv-row{display:block;width:100%;text-align:left;background:#fff;border:1px solid #ececf1;border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;color:#333;}
#properties-tab .re-sv-row:hover{border-color:var(--orange,#ff6b1a);}
#properties-tab .re-sv-row-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
#properties-tab .re-sv-bar{height:6px;background:#eef0f4;border-radius:4px;overflow:hidden;margin:3px 0;}
#properties-tab .re-sv-bar>div{height:100%;border-radius:4px;}
#properties-tab .re-rentrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 9px;border:1px solid #ececf1;border-radius:7px;margin-bottom:5px;font-size:12px;}
#properties-tab .re-rr-date{color:#666;min-width:78px;}
#properties-tab .re-rr-amt{font-weight:700;}
#properties-tab .re-rr-bank{color:#2a6fd6;}
#properties-tab .re-thread{border:1px solid #ececf1;border-radius:9px;padding:10px;margin-bottom:8px;background:#fafbfc;}
#properties-tab .re-thread-closed{opacity:.68;}
#properties-tab .re-thread-h{display:flex;justify-content:space-between;align-items:center;gap:8px;}
#properties-tab .re-thread-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;}
#properties-tab .re-updates,#properties-tab .re-msgs{margin:6px 0;display:flex;flex-direction:column;gap:4px;}
#properties-tab .re-update{font-size:12px;padding:4px 8px;background:#fff;border-left:3px solid #c0392b;border-radius:4px;}
#properties-tab .re-msg{font-size:12px;padding:5px 8px;background:#fff;border:1px solid #eee;border-radius:6px;}
#properties-tab .re-msg b{font-size:11.5px;}
#properties-tab .re-badge{background:#c0392b;color:#fff;border-radius:8px;padding:1px 7px;font-size:10.5px;font-weight:700;vertical-align:middle;}
@media(max-width:900px){#properties-tab .re-kanban,#properties-tab .re-taskboard{grid-template-columns:1fr 1fr;}#properties-tab .re-twocol,#properties-tab .re-sv-cols{grid-template-columns:1fr;}}

/* ─────────────────────────────────────── */

#hl-grid-table .dg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
#hl-grid-table .dg-filter{font-size:12.5px;padding:7px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);min-width:200px;color:var(--text);}
#hl-grid-table .dg-filter:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.15);}
#hl-grid-table .dg-legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
#hl-grid-table .dg-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle;}
#hl-grid-table .dg-wrap{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:560px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.04);}
#hl-grid-table table.dg{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;font-size:12.5px;}
#hl-grid-table .dg thead th{position:sticky;top:0;z-index:3;background:var(--card-2);border-bottom:2px solid var(--border-strong);padding:8px 4px;color:var(--soft);font-weight:600;text-align:center;}
#hl-grid-table .dg th.dg-name-h{left:0;z-index:4;text-align:left;padding-left:15px;min-width:148px;}
#hl-grid-table .dg .dg-wd{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.2px;}
#hl-grid-table .dg .dg-dt{font-size:10px;color:var(--muted);font-weight:400;margin-top:1px;}
#hl-grid-table .dg th.dg-weekend{background:#eceef3;}
#hl-grid-table .dg th.dg-today{background:rgba(255,107,26,.16);}
#hl-grid-table .dg th.dg-today .dg-wd{color:var(--orange-d);}
#hl-grid-table .dg th.dg-total-h{border-left:2px solid var(--border-strong);min-width:54px;}
#hl-grid-table .dg tbody td{border-bottom:1px solid var(--border);height:40px;}
#hl-grid-table .dg td.dg-name{position:sticky;left:0;z-index:1;background:var(--surface);border-right:2px solid var(--border-strong);padding:4px 15px;text-align:left;white-space:nowrap;}
#hl-grid-table .dg .dg-nm{font-weight:600;color:var(--text);font-size:12.5px;line-height:1.2;}
#hl-grid-table .dg .dg-adp{font-size:10px;color:var(--muted);font-weight:400;line-height:1.2;}
#hl-grid-table .dg tbody tr:nth-child(even) td{background:var(--card);}
#hl-grid-table .dg tbody tr:nth-child(even) td.dg-name{background:#f3f3f6;}
#hl-grid-table .dg tbody tr:hover td{background:rgba(255,107,26,.07);}
#hl-grid-table .dg tbody tr:hover td.dg-name{background:rgba(255,107,26,.10);}
#hl-grid-table .dg td.dg-cell{text-align:center;padding:0;}
#hl-grid-table .dg td.dg-weekend{background:rgba(0,0,0,.022);}
#hl-grid-table .dg td.dg-today{background:rgba(255,107,26,.05);}
#hl-grid-table .dg .dg-cellwrap{position:relative;display:flex;align-items:center;justify-content:center;}
#hl-grid-table .dg input.dg-in{width:50px;height:31px;text-align:center;font-size:13px;border:1.5px solid transparent;border-radius:7px;background:transparent;color:var(--text);-moz-appearance:textfield;appearance:textfield;}
#hl-grid-table .dg input.dg-in::-webkit-outer-spin-button,#hl-grid-table .dg input.dg-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#hl-grid-table .dg input.dg-in::placeholder{color:rgba(0,0,0,.17);}
#hl-grid-table .dg input.dg-in:hover{border-color:var(--border-strong);}
#hl-grid-table .dg input.dg-in:focus{outline:none;border-color:var(--orange);background:var(--surface);box-shadow:0 0 0 3px rgba(255,107,26,.18);}
#hl-grid-table .dg input.dg-in.has{background:rgba(0,0,0,.05);font-weight:700;}
#hl-grid-table .dg input.dg-in.dg-leave{background:rgba(175,82,222,.12)!important;color:var(--purple)!important;font-weight:700;}
#hl-grid-table .dg input.dg-in.dg-assumed{background:rgba(255,149,0,.10);color:#9a5b00;font-style:italic;font-weight:600;}
#hl-grid-table .dg .dg-tag{position:absolute;top:3px;right:4px;font-size:8px;font-weight:800;color:var(--purple);pointer-events:none;}
#hl-grid-table .dg.dg-haslocs th.dg-day{min-width:94px;}
#hl-grid-table .dg.dg-haslocs tbody td{height:auto;}
#hl-grid-table .dg .dg-loc{font-size:9px;line-height:1.15;color:var(--muted);max-width:88px;margin:0 auto 3px;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
#hl-grid-table .dg .dg-loc.present{color:var(--green-d);}
#hl-grid-table .dg .dg-loc.office{color:var(--yellow-d);font-weight:600;}
#hl-grid-table .dg td.dg-total{text-align:center;font-weight:800;border-left:2px solid var(--border-strong);background:var(--card-2);color:var(--text);font-size:13px;}
#hl-grid-table .dg td.dg-total.full{color:var(--green-d);}
#hl-grid-table .dg td.dg-total.zero{color:rgba(0,0,0,.25);font-weight:600;}
#hl-grid-table .dg tfoot td{position:sticky;bottom:0;z-index:3;background:#eef0f4;border-top:2px solid var(--border-strong);font-weight:800;text-align:center;padding:9px 4px;color:var(--text);font-size:13px;}
#hl-grid-table .dg tfoot td.dg-name{left:0;z-index:4;text-align:left;padding-left:15px;color:var(--soft);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;}
#hl-grid-table .dg tfoot td.dg-foot-grand{border-left:2px solid var(--border-strong);color:var(--orange-d);}

/* ─────────────────────────────────────── */

.ip-card { display:flex; flex-direction:column; gap:4px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg); transition:border-color .25s ease, box-shadow .25s ease; }
      .ip-card .ip-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
      .ip-card .ip-card-title { font-size:12.5px; font-weight:700; color:var(--text); }
      .ip-card .ip-card-sub   { font-size:10.5px; color:var(--muted); }
      .ip-card .ip-card-pill  { font-size:9.5px; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.4px; font-weight:700; }
      .ip-card .ip-card-meta  { font-size:10.5px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; }
      .ip-card.pending    { opacity:.55; }
      .ip-card.extracting { border-color:#a855f7; box-shadow:0 0 0 1px rgba(168,85,247,.18); }
      .ip-card.drafting   { border-color:var(--orange); box-shadow:0 0 0 1px rgba(249,115,22,.18); }
      .ip-card.done       { border-color:var(--green); }
      .ip-card.error,
      .ip-card.parse-error{ border-color:var(--red); background:rgba(239,68,68,.04); }
      .ip-card .pill-pending    { background:var(--card); color:var(--muted); }
      .ip-card .pill-extracting { background:rgba(168,85,247,.15); color:#a855f7; }
      .ip-card .pill-drafting   { background:rgba(249,115,22,.15); color:var(--orange); }
      .ip-card .pill-done       { background:rgba(34,197,94,.15); color:var(--green); }
      .ip-card .pill-error,
      .ip-card .pill-parse-error{ background:rgba(239,68,68,.15); color:var(--red); }
      .ip-card .pill-group-HIGH   { background:rgba(34,197,94,.15);  color:var(--green); }
      .ip-card .pill-group-LOW    { background:rgba(245,158,11,.18); color:#f59e0b; }
      .ip-card .pill-group-INSANE { background:rgba(239,68,68,.18);  color:var(--red); }

/* ─────────────────────────────────────── */

.pl2-row{padding:14px 0;border-top:1px solid var(--border);}
        .pl2-row:first-child{border-top:none;padding-top:2px;}
        .pl2-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px;}
        .pl2-name{font-size:14px;font-weight:650;color:var(--text);}
        .pl2-ns{font-size:10.5px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,monospace;margin-left:7px;}
        .pl2-bar{display:flex;height:8px;border-radius:99px;overflow:hidden;background:var(--card-2);border:1px solid var(--border);}
        .pl2-bar-emb{background:var(--green);}
        .pl2-bar-pen{background:var(--orange);opacity:.5;}
        .pl2-blurb{font-size:11px;color:var(--muted);margin-top:8px;}
        .pl2-note{font-size:11.5px;color:var(--soft);background:var(--card-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;margin-top:12px;}

/* ─────────────────────────────────────── */

.pl-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
        .pl-section:last-child { border-bottom: 0; }
        .pl-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
        .pl-big { font-size: 28px; font-weight: 700; line-height: 1.1; }
        .pl-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
        .pl-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .pl-file { font-size: 13px; font-weight: 500; color: var(--text); word-break: break-all; }
        .pl-meta { font-size: 11px; color: var(--muted); white-space: nowrap; }
        .pl-empty { font-size: 12px; color: var(--muted); font-style: italic; }
        .pl-list { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
        .pl-list-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
        .pl-list-row:last-child { border-bottom: 0; }
        .pl-sublabel { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
        .pl-bar-row { display: grid; grid-template-columns: 110px 1fr 50px; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; }
        .pl-bar-label { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .pl-bar-track { height: 6px; background: rgba(0,0,0,.08); border-radius: 99px; overflow: hidden; }
        .pl-bar-fill { display: block; height: 100%; background: var(--orange); border-radius: 99px; transition: width .3s ease; }
        .pl-bar-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }

/* ─────────────────────────────────────── */

@keyframes flightPulse { 0%,100%{background:rgba(255,107,26,.04);} 50%{background:rgba(255,107,26,.12);} }
        @keyframes justDonePulse { 0%{background:rgba(34,197,94,.35);} 100%{background:rgba(34,197,94,.10);} }

/* ═══════════════════════════════════════════════════════════════════════════
   BRIDGE — styles the Django templates' utility classes in the Oasis palette.
   (card / btn / btn-ghost / pill / msg / howto / nav-item already come from the
   original app.html CSS above; the classes below are the ones the Django pages
   add, defined here with your --orange / --card / --border / etc. variables.)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn--primary{background:var(--orange);color:#fff;border:1px solid var(--orange-d);}
.btn--primary:hover{background:var(--orange-d);}
.btn--success{background:var(--green);color:#fff;border:1px solid var(--green-d);}
.btn--success:hover{background:var(--green-d);}
.btn--danger{background:var(--red);color:#fff;border:1px solid var(--red-d);}
.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn--sm{padding:4px 9px;font-size:12px;}
.card--narrow{max-width:400px;margin:40px auto;}

.table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
.table th,.table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top;}
.table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);background:var(--card-2);}
.table tbody tr:hover{background:var(--card);}
/* Wrap a wide .table in this so it scrolls horizontally on mobile instead of
   blowing out the page. Was previously copy-pasted as a local <style> block
   in 2 templates (projects/list.html, projects/detail.html) — promoted here
   so new templates don't have to redefine it (or silently no-op the class,
   which is what happened until this fix). */
.table-scroll{overflow-x:auto;}
.table tr:last-child td{border-bottom:0;}
.row-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}

.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--card-2);color:var(--soft);}
.badge--green{background:rgba(52,199,89,.14);color:var(--green-d);}
.badge--amber,.badge--yellow{background:rgba(255,149,0,.16);color:var(--yellow-d);}
.badge--red{background:rgba(255,59,48,.13);color:var(--red-d);}
.badge--blue{background:rgba(0,122,255,.12);color:var(--blue-d);}
.badge--purple{background:rgba(175,82,222,.14);color:#7a3aa0;}
.badge--gray{background:var(--card-2);color:var(--soft);}

.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
.page-head h1{margin:0;font-size:22px;}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 16px;}

.kv{display:grid;grid-template-columns:180px 1fr;gap:6px 16px;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);}
.kv dt{color:var(--muted);font-size:13px;}.kv dd{margin:0;overflow-wrap:anywhere;}
@media(max-width:520px){.kv{grid-template-columns:1fr;}.kv dt{margin-top:8px;}.kv dt:first-child{margin-top:0;}}

.empty{text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--border-strong);border-radius:12px;padding:40px 16px;}

.field{display:block;margin-bottom:14px;}
.field>label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;}
.field input,.field select,.field textarea,.searchbar input{padding:8px 10px;border:1px solid var(--border-strong);border-radius:9px;font-size:14px;background:var(--surface);color:var(--text);}
.searchbar{max-width:320px;}.searchbar input{width:100%;}

.tiles{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0;}
.tile{flex:1 1 150px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;text-decoration:none;color:var(--text);box-shadow:var(--shadow-sm);display:block;}
a.tile:hover{border-color:var(--orange);}
.tile__num{font-size:30px;font-weight:700;}.tile__label{color:var(--muted);font-size:13px;}

.pager{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--muted);}
.msg--success{background:rgba(52,199,89,.14);color:var(--green-d);padding:8px 12px;border-radius:9px;margin:6px 0;}
.msg--error{background:rgba(255,59,48,.13);color:var(--red-d);padding:8px 12px;border-radius:9px;margin:6px 0;}
.msg--info{background:rgba(0,122,255,.12);color:var(--blue-d);padding:8px 12px;border-radius:9px;margin:6px 0;}
.msg--warning{background:rgba(255,149,0,.16);color:var(--yellow-d);padding:8px 12px;border-radius:9px;margin:6px 0;}
.muted{color:var(--muted);}.inline{display:inline;}.stack>*+*{margin-top:14px;}

/* ── Shell + grouped sidebar navigation (UI revamp) ───────────────────────
   The nav was a single cramped row of 16 equal-width tabs. This reorganizes it
   into a clear, grouped LEFT SIDEBAR so the app's sections are scannable at a
   glance. The brand header stays full-width on top; the sidebar is sticky while
   content scrolls, and collapses to a horizontal scrollable bar on narrow
   screens (no JS). Only the sidebar's own rules are overridden here — every
   design token, button, card, table and the .nav-item active color are reused
   unchanged. */
.shell{display:flex;align-items:flex-start;}
.shell > main{flex:1;min-width:0;}

nav.sidebar{
  display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;
  width:214px;flex-shrink:0;
  background:var(--surface);
  border-bottom:none;border-right:1px solid var(--border);
  padding:14px 10px;
  position:sticky;top:var(--header-h,0px);align-self:flex-start;
  max-height:calc(100vh - var(--header-h, 0px));overflow-y:auto;overflow-x:hidden;
}
nav.sidebar .nav-group{display:flex;flex-direction:column;gap:1px;margin-bottom:6px;}
nav.sidebar .nav-group:last-child{margin-bottom:0;}
/* Group labels double as collapse toggles: click to fold the group (▾/▸). */
nav.sidebar .nav-group-label{
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);padding:5px 11px 3px;
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  border-radius:7px;transition:color .12s,background .12s;
}
nav.sidebar .nav-group-label:hover{color:var(--text);background:rgba(255,107,26,.05);}
nav.sidebar .nav-group-label::before{
  content:"▾";font-size:9px;line-height:1;color:var(--muted);
  transition:transform .15s;display:inline-block;
}
nav.sidebar .nav-group.collapsed .nav-group-label::before{transform:rotate(-90deg);}
nav.sidebar .nav-group.collapsed .nav-item{display:none;}
/* While the live filter is active, matching items show even in a folded group. */
nav.sidebar.nav-filtering .nav-group.collapsed .nav-item{display:flex;}
/* Vertical, left-aligned items (override the legacy horizontal flex:1 tab). */
nav.sidebar .nav-item{
  flex:none;justify-content:flex-start;text-align:left;
  padding:7px 11px;border:none;border-bottom:none;border-radius:9px;
  font-size:13px;line-height:1.25;color:var(--soft);gap:9px;
}
nav.sidebar .nav-item:hover{background:rgba(255,107,26,.06);color:var(--text);}
nav.sidebar .nav-item.active{
  background:rgba(255,107,26,.10);color:var(--orange);font-weight:600;
  border-bottom:none;box-shadow:inset 3px 0 0 var(--orange);
}

/* Collapsible sidebar: the header ☰ toggles html.sb-collapsed (persisted in JS). */
#sb-toggle{
  flex-shrink:0;width:34px;height:34px;border:1px solid var(--border);
  border-radius:8px;background:var(--surface);color:var(--soft);
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .12s,color .12s;
}
#sb-toggle:hover{background:rgba(255,107,26,.08);color:var(--orange);}
html.sb-collapsed nav.sidebar{display:none;}

/* ── App-wide modal popup (WO card / Ground Truth) ──────────────── */
.oasis-modal{position:fixed;inset:0;z-index:1000;display:none;}
.oasis-modal.open{display:block;}
.oasis-modal__backdrop{position:absolute;inset:0;background:rgba(20,20,28,.45);backdrop-filter:blur(1px);}
.oasis-modal__panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(720px,94vw);max-height:90vh;overflow:auto;background:var(--surface,#fff);
  border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:18px;}
.oasis-modal__x{position:absolute;top:10px;right:12px;width:30px;height:30px;border:none;
  border-radius:8px;background:rgba(0,0,0,.05);color:#555;font-size:15px;cursor:pointer;z-index:2;}
.oasis-modal__x:hover{background:rgba(0,0,0,.10);color:#000;}
/* Instant-open modal spinner (shown the moment a modal fragment is requested). */
.modal-loading{display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:120px;color:var(--muted,#667);font-size:14px;}
.modal-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.15);
  border-top-color:var(--orange,#e07b39);animation:modal-spin .7s linear infinite;}
@keyframes modal-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.modal-spinner{animation-duration:1.6s;}}

/* ── Ground Truth panel (shared: Details card + Print Queue preview + AR matchers) ── */
.sed{border:1px solid var(--border,rgba(0,0,0,.12));border-radius:12px;padding:14px;background:var(--card,#fafafc);}
.sed-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.sed-title{font-size:14px;font-weight:800;}
.sed-kind{font-size:11px;font-weight:700;color:#5b3aa0;background:#f1ecfb;border:1px solid #ddd0f2;border-radius:999px;padding:2px 9px;}
.sed-meta{font-size:12px;color:var(--soft,#555);line-height:1.5;margin-bottom:10px;}
.sed-pages{display:flex;flex-direction:column;gap:10px;max-height:70vh;overflow:auto;}
.sed-pagewrap{position:relative;display:block;line-height:0;}
.sed-page{width:100%;height:auto;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
/* Overlay boxes: bigger (3px border) + a different color per kind of field. The
   matched text rides in title=; the legend above the pages spells out the colors. */
.sed-box{position:absolute;border:3px solid #ff3b30;background:rgba(255,59,48,.10);border-radius:3px;pointer-events:none;box-shadow:0 0 0 1px rgba(255,255,255,.6) inset;}
.sed-box--wo{border-color:#ff3b30;background:rgba(255,59,48,.12);}
.sed-box--address{border-color:#0a84ff;background:rgba(10,132,255,.12);}
.sed-box--issue{border-color:#8e44ad;background:rgba(142,68,173,.15);}
.sed-box--service{border-color:#13a05a;background:rgba(19,160,90,.15);}
.sed-box--meta{border-color:#ff9500;background:rgba(255,149,0,.13);}
.sed-box--field{border-color:#ff3b30;background:rgba(255,59,48,.10);}
.sed-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;font-weight:700;color:#444;margin:0 2px 8px;}
.sed-legend span{display:inline-flex;align-items:center;gap:5px;}
.sed-legend i{width:13px;height:13px;border-radius:3px;border:2px solid;box-sizing:border-box;}
.sed-legend .lg-wo{border-color:#ff3b30;background:rgba(255,59,48,.2);}
.sed-legend .lg-address{border-color:#0a84ff;background:rgba(10,132,255,.2);}
.sed-legend .lg-issue{border-color:#8e44ad;background:rgba(142,68,173,.22);}
.sed-legend .lg-service{border-color:#13a05a;background:rgba(19,160,90,.22);}
.sed-legend .lg-meta{border-color:#ff9500;background:rgba(255,149,0,.22);}
/* ── Scope spotlight (Ground Truth opened while linking a bill) ───────────────
   The reviewer's question is "is this the same JOB", so the SCOPE boxes (Issue
   description / Service comments) burn bright and the identifier boxes drop back
   — right building + right unit + wrong work is the mistake that pays the wrong
   invoice, and it hides in a page of equally-weighted boxes. */
.sed-legend__lit{color:#6d28d9;background:#f5f0ff;border:1px solid #ddd0f2;border-radius:999px;padding:1px 9px;}
.sed--scopelit .sed-box{opacity:.22;border-width:2px;}
.sed--scopelit .sed-box--issue,.sed--scopelit .sed-box--service{opacity:1;border-width:4px;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px 4px rgba(142,68,173,.45);
  animation:sed-scope-pulse 2.2s ease-in-out 3;}
@keyframes sed-scope-pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px 4px rgba(142,68,173,.45);}
  50%{box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 26px 9px rgba(142,68,173,.65);}}
@media (prefers-reduced-motion:reduce){.sed--scopelit .sed-box--issue,.sed--scopelit .sed-box--service{animation:none;}}
/* The strip: the two scopes as each document words them, shared words marked. */
.sed-scope{border:1px solid #ddd0f2;border-left:4px solid #8e44ad;border-radius:10px;
  background:#faf7ff;padding:11px 14px;margin:0 0 11px;}
.sed-scope--strong{border-color:#a7dcbc;border-left-color:#13a05a;background:#f4fdf7;}
.sed-scope--none{border-color:#f3c9c9;border-left-color:#d65a5a;background:#fff7f7;}
.sed-scope__hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px;}
.sed-scope__title{font-size:13.5px;font-weight:800;color:#2c2c33;}
.sed-scope__pill{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#5b3aa0;background:#fff;border:1px solid #ddd0f2;border-radius:999px;padding:2px 9px;white-space:nowrap;}
.sed-scope--strong .sed-scope__pill{color:#0c5132;border-color:#9ad3ad;}
.sed-scope--none .sed-scope__pill{color:#8a2b2b;border-color:#e9b4b4;}
.sed-scope__row{display:grid;grid-template-columns:9.5rem 1fr;gap:4px 12px;align-items:baseline;margin:0 0 5px;}
.sed-scope__lbl{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8b8b96;}
.sed-scope__txt{font-size:13px;line-height:1.45;color:#1a1a1f;}
.sed-scope__verdict{font-size:12.5px;line-height:1.45;color:#4a4a55;margin:8px 0 0;}
/* A shared scope word, marked in the document text — distinct from the plain
   yellow field-value <mark> so "the job" reads apart from "the identifiers". */
.sed mark.mk-scope{background:#e9d5ff;box-shadow:0 0 0 1px #c4a4e8 inset;}
/* Honest banner: the source PDF wasn't captured, so we're showing the text instead. */
.sed-warn{font-size:12.5px;line-height:1.45;color:#7a4500;background:#fff3cd;border:1px solid #e0a800;
  border-radius:8px;padding:9px 12px;margin:0 0 10px;}
.sed-body{white-space:pre-wrap;word-break:break-word;font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#fff;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;padding:12px;margin:0;max-height:50vh;overflow:auto;}
.sed-body mark,.sed mark{background:#fff3a3;color:inherit;padding:0 1px;border-radius:2px;}
.sed-frame{width:100%;height:60vh;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;background:#fff;}
/* The email body rendered as a human reads it: a readable sans-serif block (NOT a
   monospace dump, NOT a blank iframe), line breaks preserved, field values <mark>ed. */
.sed-email{white-space:pre-wrap;word-break:break-word;
  font:13.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#1a1a1f;background:#fff;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:8px;
  padding:16px 18px;margin:0;max-height:60vh;overflow:auto;}

/* ── Print-queue work-order mini cards ───────────────────────────────────── */
.pq-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;}
.pq-card{border:1px solid var(--border,rgba(0,0,0,.12));border-left:4px solid var(--brand,#ff6b1a);
  border-radius:11px;background:var(--surface,#fff);padding:12px 14px;display:flex;flex-direction:column;gap:7px;box-shadow:0 1px 3px rgba(0,0,0,.05);}
.pq-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.pq-card__wo{font-size:14px;font-weight:800;text-decoration:none;color:var(--orange,#ff6b1a);cursor:pointer;background:none;border:none;padding:0;font-family:inherit;}
.pq-card__wo:hover{text-decoration:underline;}
.pq-card__addr{font-size:13px;font-weight:600;color:var(--text,#222);}
.pq-card__scope{font-size:12px;color:var(--soft,#555);line-height:1.4;}
.pq-card__foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.pq-card__time{font-size:11px;color:var(--muted,#9a9aa4);margin-left:auto;}
.pq-unmatched{border-left-color:#d65a5a;}
.pq-card--other{border-left-color:#9a9aa4;}
/* Pending states — a job that hasn't physically printed yet gets an amber
   (queued) or blue, gently-pulsing (printing) left rail so it reads as "not
   done" at a glance inside the same unified list as already-printed jobs. */
.pq-card--queued{border-left-color:#ff9500;}
.pq-card--printing{border-left-color:#007aff;position:relative;animation:pq-card-pulse 1.8s ease-out infinite;}
@keyframes pq-card-pulse{0%{box-shadow:0 0 0 0 rgba(0,122,255,.28);}70%{box-shadow:0 0 0 6px rgba(0,122,255,0);}100%{box-shadow:0 0 0 0 rgba(0,122,255,0);}}

/* ── Print-log filter bar ── uses the shared .filters convention (base.html).
   A global reset forces input[type=date/search] to width:100% (oasis.css's
   text-input rule) which, inside a flex row, forces every control onto its
   own line — so this page scopes each control back to a sane intrinsic width.
   Only the search input should stretch (it's the wide element in the row). */
#print-queue-body .filters select{width:auto;min-width:150px;}
#print-queue-body .filters input[type="date"]{width:auto;}
#print-queue-body .filters .pq-search{flex:1 1 220px;min-width:160px;width:auto;}
.pq-pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:1rem;}
.pq-pagination__label{font-size:12.5px;color:var(--muted,#9a9aa4);}

/* ── Manager assignment board (assign work orders to employees) ─────────── */
/* ── Assign board: toolbar (search • view toggle • expand/collapse) ─────── */
.assign-sub{margin-top:.2rem;max-width:60ch;}
.assign-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.assign-toolbar__search{max-width:300px;flex:1 1 220px;}
.assign-toolbar__actions{display:flex;gap:4px;}
.assign-toolbar__count{margin-left:auto;font-size:12.5px;color:var(--muted,#86868b);white-space:nowrap;}
/* Hide the list-only controls while the map is showing (toggled via JS). */
.assign-toolbar.is-map [data-list-only]{display:none;}

.seg__btn{border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);
  color:var(--soft,#6e6e73);font:inherit;font-size:13px;font-weight:600;padding:6px 14px;cursor:pointer;}
.seg__btn:first-child{border-radius:9px 0 0 9px;}
.seg__btn:last-child{border-radius:0 9px 9px 0;margin-left:-1px;}
.seg__btn.is-active{background:var(--orange,#ff6b1a);border-color:var(--orange,#ff6b1a);color:#fff;}
.btn-quiet{border:none;background:none;color:var(--soft,#6e6e73);font:inherit;font-size:12.5px;
  font-weight:600;padding:6px 8px;border-radius:8px;cursor:pointer;}
.btn-quiet:hover{background:var(--card-2,#f5f5f7);color:var(--text,#222);}

/* Show exactly one view at a time. */
#assign-shell[data-view="list"] .assign-map-view{display:none;}
#assign-shell[data-view="map"] .assign-list-view{display:none;}

/* ── Region (proximity) sections ───────────────────────────────────────── */
.region{margin-bottom:22px;}
.region__head{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:6px 2px 10px;border-bottom:1px solid var(--border,rgba(0,0,0,.08));margin-bottom:14px;}
.region__head::-webkit-details-marker{display:none;}
.region__name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text,#222);}
.region__pin{color:var(--orange,#ff6b1a);font-size:15px;}
.region__meta{font-size:12px;color:var(--muted,#86868b);}
.region__head::before{content:"▸";color:var(--muted,#9a9aa4);font-size:11px;
  transition:transform .15s ease;margin-right:-4px;}
.region[open]>.region__head::before{transform:rotate(90deg);}

/* ── Compact, collapsible property cards ───────────────────────────────── */
.assign-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start;}
.prop-card{border:1px solid var(--border,rgba(0,0,0,.10));border-left:3px solid var(--muted,#c8c8cf);
  border-radius:11px;background:var(--surface,#fff);overflow:hidden;transition:box-shadow .15s,border-color .15s;}
.prop-card:hover{box-shadow:0 1px 8px rgba(0,0,0,.06);}
.prop-card--green{border-left-color:var(--green,#34c759);}
.prop-card--red{border-left-color:var(--red,#ff3b30);}
.prop-card--amber{border-left-color:var(--orange,#ff6b1a);}
.prop-card__head{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;padding:11px 13px;}
.prop-card__head::-webkit-details-marker{display:none;}
.prop-card__chev{color:var(--muted,#9a9aa4);font-size:15px;font-weight:700;line-height:1;
  transition:transform .15s ease;flex:0 0 auto;}
.prop-card[open]>.prop-card__head .prop-card__chev{transform:rotate(90deg);}
.prop-card__title{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.prop-card__addr-line{font-size:13.5px;font-weight:700;color:var(--text,#222);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.prop-card__count{font-size:11px;color:var(--muted,#86868b);font-weight:500;}
.prop-card__body{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow-y:auto;
  padding:2px 13px 13px;border-top:1px solid var(--border,rgba(0,0,0,.06));}
.prop-card--flash{box-shadow:0 0 0 2px var(--orange,#ff6b1a);border-color:var(--orange,#ff6b1a);}

.prop-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;
  padding:.28rem .55rem;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.prop-badge--green{background:rgba(52,199,89,.14);color:var(--green-d);}
.prop-badge--red{background:rgba(255,59,48,.13);color:var(--red-d);}
.prop-badge--amber{background:rgba(255,149,0,.16);color:var(--yellow-d);}

/* ── Map view (a real Leaflet + OpenStreetMap map) ───────────────────────── */
.assign-map-view{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;}
.assign-map{position:relative;}
.assign-leaflet-map{height:600px;border-radius:14px;overflow:hidden;
  border:1px solid var(--border,rgba(0,0,0,.10));background:var(--card-2,#f5f5f7);}
/* Town name tooltip — a permanent Leaflet tooltip anchored at the town's true
   centroid (pins themselves sit nearby, jittered), on a faint chip so it
   stays legible over the tiles. */
.assign-map__town-tooltip{background:rgba(255,255,255,.82);border:none;box-shadow:none;
  font-size:10px;font-weight:700;color:var(--soft,#6e6e73);letter-spacing:.4px;
  text-transform:uppercase;padding:1px 6px;border-radius:6px;}
.assign-map__town-tooltip::before{display:none;}

/* Custom marker: a Leaflet divIcon whose innerHTML is this dot + tooltip. */
.map-pin{cursor:pointer;transition:transform .1s;}
.map-pin__dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;color:#fff;font-size:12px;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.28);
  border:2px solid #fff;}
.map-pin--green .map-pin__dot{background:var(--green,#34c759);}
.map-pin--red .map-pin__dot{background:var(--red,#ff3b30);}
.map-pin--amber .map-pin__dot{background:var(--orange,#ff6b1a);}
.map-pin:hover{transform:scale(1.12);z-index:1000!important;}
.map-pin.is-active .map-pin__dot{box-shadow:0 0 0 4px rgba(255,107,26,.35),0 1px 4px rgba(0,0,0,.28);}
.map-pin.is-dim{opacity:.2;}
.map-pin__tip{background:#1c1c1e;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;
  border-radius:6px;white-space:nowrap;border:none;box-shadow:none;}
.map-pin__tip::before{display:none;}

.assign-map__panel{position:sticky;top:12px;border:1px solid var(--border,rgba(0,0,0,.10));
  border-radius:14px;background:var(--surface,#fff);padding:16px;min-height:200px;max-height:600px;overflow-y:auto;}
.assign-map__panel-empty{display:flex;flex-direction:column;gap:6px;text-align:center;
  color:var(--muted,#86868b);padding:40px 8px;}
/* `display:flex` above beats the plain `hidden` attribute — restore hiding. */
.assign-map__panel-empty[hidden]{display:none;}
.assign-map__panel-empty strong{color:var(--soft,#6e6e73);font-size:14px;}
.assign-map__panel-empty span{font-size:12.5px;}
.map-detail__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.map-detail__addr{font-size:14px;font-weight:700;color:var(--text,#222);line-height:1.3;}
.map-detail__town{font-size:11.5px;color:var(--muted,#86868b);font-weight:600;margin-top:2px;}
.map-detail__wos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.map-detail__wo{border-top:1px solid var(--border,rgba(0,0,0,.07));padding-top:10px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.map-detail__wo:first-child{border-top:none;padding-top:0;}
.map-detail__wonum{font-size:13px;font-weight:800;color:var(--orange,#ff6b1a);text-decoration:none;}
.map-detail__wonum:hover{text-decoration:underline;}
.map-detail__assigned{font-size:10.5px;font-weight:700;color:var(--green-d);background:rgba(52,199,89,.14);
  padding:2px 7px;border-radius:999px;}
.map-detail__unassigned{font-size:10.5px;font-weight:700;color:var(--yellow-d);background:rgba(255,149,0,.16);
  padding:2px 7px;border-radius:999px;}
.map-detail__unit{flex-basis:100%;font-size:12px;font-weight:600;color:var(--soft,#555);}
.map-detail__scope{flex-basis:100%;font-size:12px;color:var(--soft,#555);line-height:1.4;}
.map-detail__open{margin-top:14px;padding:8px 10px;background:var(--card-2,#f5f5f7);width:100%;}

.assign-map__unmapped{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-strong,rgba(0,0,0,.14));}
.assign-map__unmapped-h{font-size:12px;font-weight:700;color:var(--muted,#86868b);}
.chip--ghost{border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);
  color:var(--soft,#6e6e73);font:inherit;font-size:12px;font-weight:600;padding:5px 11px;
  border-radius:999px;cursor:pointer;}
.chip--ghost:hover{border-color:var(--orange,#ff6b1a);color:var(--orange,#ff6b1a);}
@media (max-width:900px){.assign-map-view{grid-template-columns:1fr;}}

.assign-wo-card{gap:8px;}
/* One flex-wrap row: chips prefer to sit side by side, and only wrap to a
   new line when they run out of horizontal room. The chips live in a
   display:contents wrapper (purely so assignment_add has a stable element to
   swap by id) so they — and the + "chip" — are direct flex items of the same
   row and wrap together exactly like ordinary chips would. */
.assign-widget{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.assign-widget__chips{display:contents;}
.worker-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  border:1px solid var(--border-strong,rgba(0,0,0,.14));border-radius:999px;background:var(--card-2,#f5f5f7);
  color:var(--text,#222);padding:.3rem .65rem .3rem .5rem;cursor:pointer;font-family:inherit;}
.worker-chip:hover{border-color:var(--soft,#6e6e73);}
.worker-chip__light{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:#9a9aa4;}
.worker-chip--grey .worker-chip__light{background:#9a9aa4;}
.worker-chip--yellow .worker-chip__light{background:var(--yellow,#ff9500);}
.worker-chip--red .worker-chip__light{background:var(--red,#ff3b30);}
.worker-chip--green .worker-chip__light{background:var(--green,#34c759);}

/* Job Schedule board — one row per assigned worker: their status chip + an
   inline, auto-saving date picker for "when". */
.schedule-rows{display:flex;flex-direction:column;gap:6px;}
.schedule-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.schedule-row__date{font:inherit;font-size:12.5px;padding:.28rem .5rem;border-radius:8px;
  border:1px solid var(--border-strong,rgba(0,0,0,.14));background:var(--surface,#fff);color:var(--text,#222);}

.assign-dropdown{position:relative;display:inline-block;}
/* Every .assign-dropdown's trigger is a <summary> — the "+" button AND each
   assigned-worker chip (View employee / Unassign) — so hide the native
   disclosure marker generically here rather than per-variant. */
.assign-dropdown>summary{list-style:none;user-select:none;}
.assign-dropdown>summary::-webkit-details-marker{display:none;}
.assign-dropdown[open]>summary{border-color:var(--soft,#6e6e73);}
/* The + button IS a worker-chip (see .assign-widget__chips comment above) —
   same pill, just centered "+" text instead of a name, so it flows and wraps
   in the row exactly like the chips next to it. */
.assign-add-btn{justify-content:center;font-size:14px;font-weight:700;}
.assign-dropdown[open] .assign-add-btn{background:var(--card-2,#f5f5f7);border-color:var(--soft,#6e6e73);}
/* Default position (relative to .assign-dropdown) is only a fallback for the
   instant it's revealed — assignment_board.html's toggle listener immediately
   switches this to position:fixed with JS-computed coordinates, so it renders
   at the top level and isn't clipped by a scrollable/clamped .prop-card__body
   (see the height-clamp comment on .prop-card__body above). z-index sits
   above the sticky header (100) but below modals (200). */
.assign-dropdown__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:150;min-width:180px;
  max-height:240px;overflow-y:auto;background:var(--surface,#fff);border:1px solid var(--border-strong,rgba(0,0,0,.14));
  border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.14);padding:4px;display:flex;flex-direction:column;gap:1px;}
.assign-dropdown__item{display:block;width:100%;text-align:left;background:none;border:none;border-radius:6px;
  padding:.4rem .6rem;font-size:13px;font-family:inherit;color:var(--text,#222);cursor:pointer;text-decoration:none;}
.assign-dropdown__item:hover{background:var(--card-2,#f5f5f7);}
/* Unassign, on a worker chip's View employee / Unassign menu — a subtle red
   hint since it's destructive (the hx-confirm is the real guard). */
.assign-dropdown__item--danger{color:var(--red,#ff3b30);}
.assign-dropdown__empty{padding:.4rem .6rem;font-size:12.5px;}
/* Type-ahead box at the top of the "+" menu — see focusAssignFilter() in
   assignment_board.html. Sits inside the same scrollable/padded menu box,
   just pinned visually by being the first flex child. */
.assign-dropdown__filter{width:100%;box-sizing:border-box;margin-bottom:3px;padding:.4rem .6rem;
  font-size:13px;font-family:inherit;border:1px solid var(--border-strong,rgba(0,0,0,.14));
  border-radius:6px;background:var(--surface,#fff);color:var(--text,#222);}
.assign-dropdown__filter:focus{outline:2px solid var(--orange,#ff6b1a);outline-offset:-1px;}
/* Enter-key target while typing in the filter box above. */
.assign-dropdown__item.is-highlighted{background:var(--card-2,#f5f5f7);outline:1px solid var(--border-strong,rgba(0,0,0,.14));}
/* Instant feedback the MOMENT a name is clicked — htmx adds "htmx-request" to
   the clicked button itself as soon as the request starts (no JS of ours
   needed), well before the ~50-150ms round trip completes. The new chip
   lands behind this same open menu (expected — an open dropdown overlaying
   what's behind it is normal), so this spinner is what tells the user their
   click registered without needing to see the chip appear. */
.assign-dropdown__item.htmx-request{opacity:.55;pointer-events:none;display:flex;align-items:center;gap:6px;}
.assign-dropdown__item.htmx-request::after{content:"";width:11px;height:11px;flex:0 0 auto;
  border:2px solid var(--border-strong,rgba(0,0,0,.14));border-top-color:var(--orange,#ff6b1a);
  border-radius:50%;animation:assign-item-spin .6s linear infinite;}
@keyframes assign-item-spin{to{transform:rotate(360deg);}}

/* Per-job "how to do it" note (WorkOrder.entry_notes) shown on the assign board. */
.instructions-note{background:rgba(255,149,0,.09);border:1px solid rgba(255,149,0,.3);border-radius:8px;
  padding:8px 10px;font-size:13px;margin:8px 0;}
.instructions-note strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--yellow-d,#9a5b00);margin-bottom:3px;}

/* Narrow screens: sidebar stays VERTICAL (scrolls up/down), just slimmer. */
@media (max-width:900px){
  nav.sidebar{
    width:170px;
    padding:10px 8px;
  }
}

/* ── Interaction & update feedback (UI revamp — front-end only) ────────────
   Makes every interaction and in-place update unmistakable, app-wide, with no
   backend or per-screen changes. The existing #busy-bar is now driven on
   navigation + HTMX requests (wired in base.html); here we (1) flash swapped-in
   content so an update is obvious, (2) dim+lock the control that's mid-request,
   and (3) give every interactive element a clear keyboard-focus + hover state. */

/* HTMX: dim + lock the control that fired the in-flight request. */
.htmx-request{opacity:.55;pointer-events:none;transition:opacity .1s;}
/* HTMX: freshly swapped-in content briefly highlights so the change is seen. */
@keyframes oasis-flash-in{from{background:rgba(255,107,26,.16);}to{background:transparent;}}
.htmx-added,.htmx-settling{animation:oasis-flash-in .85s ease-out;}

/* Clear keyboard focus everywhere (accessibility + "what am I on"). */
a:focus-visible,button:focus-visible,.btn:focus-visible,.nav-item:focus-visible,
summary:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;
}
/* Obvious row interaction on data tables. */
.table tbody tr{transition:background .12s;}
.table tbody tr:hover{background:rgba(255,107,26,.045);}
/* Everything clickable reads as clickable. */
.btn,.nav-item,[role="button"]{cursor:pointer;}
/* Flash messages slide in so a result/update is noticed. */
@keyframes oasis-msg-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.msg--success,.msg--error,.msg--info,.msg--warning{animation:oasis-msg-in .2s ease-out;}

/* Sidebar quick-switcher: a compact "Jump to…" filter above the nav groups. */
.nav-search{padding:2px 4px 9px;}
.nav-search input{
  width:100%;padding:7px 11px;font-size:12.5px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--card);color:var(--text);outline:none;
}
.nav-search input::placeholder{color:var(--muted);}
.nav-search input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.12);}
/* On the narrow-screen horizontal strip, drop the filter to save room. */
@media (max-width:900px){.nav-search{display:none;}}

/* ── Dismissible flash messages (× to close; injected by base.html) ──────── */
.msg--success,.msg--error,.msg--info,.msg--warning{display:flex;align-items:center;gap:8px;}
.msg-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:18px;
  line-height:1;color:inherit;opacity:.55;padding:0 2px;border-radius:6px;flex-shrink:0;}
.msg-close:hover{opacity:1;}

/* ── Click-to-sort data tables (enhanced by base.html; opt out via data-no-sort) ── */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
th.th-sort:hover{color:var(--orange);}
th.th-sort::after{content:'↕';opacity:.3;font-size:10px;margin-left:6px;}
th.th-sort-asc::after{content:'↑';opacity:1;color:var(--orange);}
th.th-sort-desc::after{content:'↓';opacity:1;color:var(--orange);}

/* ── Back-to-top button (appears after scrolling; wired in base.html) ────── */
#to-top{position:fixed;right:18px;bottom:18px;z-index:45;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-size:17px;line-height:1;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .15s, transform .15s, border-color .15s, color .15s;}
#to-top.show{opacity:1;pointer-events:auto;transform:none;}
#to-top:hover{border-color:var(--orange);color:var(--orange);}

/* ── Show/hide password toggle (wired in base.html) ───────────────────────────
   The wrapper is injected around every input[type=password] by script, so every
   password field on the site gets this without its template knowing. Toggling
   the input to type=text keeps the same styling — the base input rule covers
   text and password identically — so the field doesn't jump when revealed. */
.pw-wrap{position:relative;display:block;}
.pw-wrap > input{padding-right:62px;}
.pw-toggle{position:absolute;top:0;right:1px;height:100%;padding:0 12px;
  border:0;background:none;color:var(--muted);font:inherit;font-size:11.5px;
  font-weight:650;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;
  border-radius:0 10px 10px 0;transition:color .12s;}
.pw-toggle:hover{color:var(--orange);}
.pw-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;color:var(--orange);}

/* ── WO AI search bar ─────────────────────────────────────────────────────── */
.wo-search-form{margin:14px 0 6px;}
.wo-search-row{display:flex;gap:8px;align-items:center;}
.wo-search-input{flex:1;padding:11px 14px;border:1.5px solid var(--border-strong);border-radius:10px;font-size:14px;background:var(--surface);color:var(--text);min-width:0;transition:border-color .15s;}
.wo-search-input:focus{outline:none;border-color:var(--orange);}
.wo-search-hint{font-size:12px;color:var(--muted);margin-top:5px;}
.wo-search-loading{display:none;font-size:12px;color:var(--muted);margin-top:6px;}
.htmx-request .wo-search-loading{display:block;}
.wo-search-interp{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px;margin-bottom:12px;}
.wo-search-interp strong{color:var(--text);}
.wo-search-answer{margin-top:5px;color:var(--text);font-style:italic;}

/* ── Invoices: unified accounts-payable board ───────────────────────────── */
/* Overflow "More" menu for the board header — keeps the primary 1-2 actions
   visible and tucks less-frequent / admin-only actions behind a click. */
.inv-more-menu{position:relative;display:inline-block;}
.inv-more-menu>summary{list-style:none;cursor:pointer;user-select:none;}
.inv-more-menu>summary::-webkit-details-marker{display:none;}
.inv-more-menu__panel{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;
  min-width:220px;max-width:min(280px,calc(100vw - 32px));
  background:var(--card,#fff);border:1px solid var(--border-strong);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;gap:2px;}
@media(min-width:640px){.inv-more-menu__panel{left:auto;right:0;}}
.inv-more-menu__panel a,.inv-more-menu__panel button{
  display:block;width:100%;text-align:left;background:none;border:none;border-radius:7px;
  padding:8px 10px;font-size:13px;color:var(--text);cursor:pointer;text-decoration:none;}
.inv-more-menu__panel a:hover,.inv-more-menu__panel button:hover{background:var(--surface,#f5f5f7);}
.inv-more-menu__sep{height:1px;background:var(--border);margin:4px 2px;}
.inv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0;}
.inv-tiles .tile{padding:12px 10px;}
.tile__num{font-size:22px;font-weight:700;line-height:1.1;}
.tile__lbl{font-size:11.5px;color:var(--muted);margin-top:4px;font-weight:600;}
.tile.is-active{border-color:var(--orange);box-shadow:0 2px 8px rgba(255,107,26,.18);}
.inv-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;margin-bottom:18px;}
.inv-card-amt{font-size:18px;font-weight:700;}
.inv-card-meta{font-size:12.5px;color:var(--muted);margin:2px 0;word-break:break-word;}
.inv-card-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.inv-verify{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media(max-width:900px){.inv-verify{grid-template-columns:1fr;}}
.inv-verify iframe{width:100%;height:78vh;border:1px solid var(--border);border-radius:10px;background:#fff;}
.inv-doc-empty{height:78vh;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-strong);border-radius:10px;color:var(--muted);}
.inv-warn{color:var(--red-d);font-weight:600;}
.badge--purple{background:#f3e8ff;color:#7c3aed;}

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMALIST UI REFRESH (2026-06-27)
   Appended last so it overrides the originals. Class names are unchanged, so the
   whole site picks this up with no template edits. Goal: calmer palette, flat
   surfaces, quiet chrome, more whitespace, fewer loud accents.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f6f6f7;
  --border:rgba(17,17,26,.08);
  --border-strong:rgba(17,17,26,.14);
  --muted:#8a8a91;
  --soft:#56565e;
  --accent:var(--orange);
  --accent-weak:rgba(255,107,26,.10);
  --shadow-sm:0 1px 2px rgba(17,17,26,.05);
  --shadow:0 1px 2px rgba(17,17,26,.05), 0 8px 22px -14px rgba(17,17,26,.18);
  --shadow-lg:0 16px 44px -18px rgba(17,17,26,.22);
}

/* Links read as text, accent on hover — kills the underline noise everywhere. */
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);text-decoration:none;}
.btn,.btn:hover,.nav-item,.nav-item:hover,.pill,.howto>summary{text-decoration:none;}

/* Header: drop the glass blur + gradient underline → one quiet hairline. */
header{padding:12px 22px;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;}
header::after{display:none;}
header h1{font-size:15px;font-weight:600;letter-spacing:-.2px;}

/* Sidebar: neutral hovers, subtle active row with a thin accent rail. */
nav.sidebar{width:224px;padding:14px 12px;background:var(--surface);}
nav.sidebar .nav-item{color:var(--soft);font-size:13px;padding:7px 10px;border-radius:8px;font-weight:500;}
nav.sidebar .nav-item:hover{background:rgba(17,17,26,.05);color:var(--text);}
nav.sidebar .nav-item.active{background:rgba(17,17,26,.055);color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--accent);}
nav.sidebar .nav-group{margin-bottom:10px;}
nav.sidebar .nav-group-label{color:var(--muted);font-size:9.5px;letter-spacing:.7px;padding:6px 11px 4px;}
nav.sidebar .nav-group-label:hover{background:rgba(17,17,26,.04);color:var(--soft);}
.nav-search input{border-radius:8px;}
.nav-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
#sb-toggle:hover{background:rgba(17,17,26,.05);color:var(--text);}

/* Buttons: flat + consistent. One accent for primary, hairline for ghost. */
.btn{font-weight:600;border-radius:8px;padding:8px 13px;box-shadow:none;}
.btn-orange,.btn--primary{background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:none;}
.btn-orange:hover:not(:disabled),.btn--primary:hover:not(:disabled){background:var(--orange-d);box-shadow:none;}
.btn-ghost,.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);box-shadow:none;}
.btn-ghost:hover:not(:disabled),.btn--ghost:hover:not(:disabled){background:rgba(17,17,26,.045);}

/* Cards + tables: lighter borders, no heavy shadow, neutral hover, airy headers. */
.card{border:1px solid var(--border);border-radius:12px;box-shadow:none;}
.table{border:1px solid var(--border);border-radius:12px;box-shadow:none;}
.table th{background:transparent;color:var(--muted);font-size:10.5px;letter-spacing:.06em;border-bottom:1px solid var(--border);padding:10px 12px;}
.table td{border-bottom:1px solid var(--border);padding:10px 12px;}
.table tbody tr:hover{background:rgba(17,17,26,.025);}

/* "What is this screen?" guides: quiet neutral instead of loud blue. */
.howto{border:1px solid var(--border);border-left:3px solid var(--border-strong);background:var(--card);border-radius:10px;}
.howto>summary{color:var(--soft);font-weight:600;}
.howto>summary:hover{background:rgba(17,17,26,.025);}

/* Pills/badges: soft, neutral by default. */
.pill{border-radius:7px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--soft);}

/* Page headers: a touch larger + more breathing room. */
.page-head{margin-bottom:16px;}
.page-head h1{font-size:20px;font-weight:600;letter-spacing:-.3px;}
.tab{padding:26px 28px;}

/* ── Bootstrap-compat shim ───────────────────────────────────────────────────
   Several templates (the vendor pages, a couple of shared cards) were authored
   with Bootstrap class names, but Bootstrap isn't loaded — so they rendered
   unstyled. Map the handful of classes they actually use onto the oasis tokens
   so those pages match the rest of the site. (Lightweight; not full Bootstrap.) */
.container,.container-fluid{width:100%;max-width:1100px;}
.container-fluid{max-width:none;}
.row{display:flex;flex-wrap:wrap;gap:16px;}
.row.g-4{gap:20px;}
.col,.flex-grow-1{flex:1 1 0;min-width:0;}
.col-auto{flex:0 0 auto;}
.col-md-6{flex:1 1 320px;}
.col-lg-4{flex:1 1 300px;}
.col-lg-8{flex:1 1 560px;}
.d-flex{display:flex;}
.d-grid{display:grid;gap:8px;}
.gap-2{gap:8px;}
.justify-content-between{justify-content:space-between;}
.align-items-center{align-items:center;}
.w-100{width:100%;}
.h-100{height:100%;}
.text-center{text-align:center;}
.text-muted{color:var(--muted)!important;}
.text-dark{color:var(--text)!important;}
.small,small{font-size:12px;}
.mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:18px;}.mt-5{margin-top:26px;}
.mb-0{margin-bottom:0;}.mb-2{margin-bottom:8px;}.mb-3{margin-bottom:12px;}.mb-4{margin-bottom:18px;}
.pb-3{padding-bottom:12px;}.me-2{margin-right:8px;}
.border-0{border:0!important;}
.border-top{border-top:1px solid var(--border);}
.border-bottom{border-bottom:1px solid var(--border);}
.bg-white{background:var(--surface);}
.bg-light{background:var(--card);}

/* Bootstrap buttons → oasis buttons */
.btn-primary{background:var(--accent);color:#fff;border:1px solid var(--accent);}
.btn-primary:hover{background:var(--orange-d);}
.btn-outline-primary{background:var(--surface);color:var(--accent);border:1px solid var(--accent);}
.btn-outline-primary:hover{background:var(--accent-weak);}
.btn-outline-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border-strong);}
.btn-outline-secondary:hover{background:rgba(17,17,26,.045);}
.btn-outline-success{background:var(--surface);color:var(--green-d);border:1px solid rgba(52,199,89,.5);}
.btn-outline-success:hover{background:rgba(52,199,89,.08);}
.btn-lg{padding:9px 16px;font-size:13px;}
.btn-sm{padding:6px 11px;font-size:11.5px;}

/* Bootstrap cards: oasis .card already provides the shell, so drop its padding
   when it hosts card-header/body/footer (those bring their own). */
.card:has(> .card-body),.card:has(> .card-header),.card:has(> .card-footer){padding:0;overflow:hidden;}
.card-header{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--card);}
.card-body{padding:16px;}
.card-footer{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface);}
.card-title{font-size:15px;font-weight:600;margin-bottom:4px;letter-spacing:-.2px;}
.card-text{color:var(--soft);}
.shadow-sm{box-shadow:none;}

/* Bootstrap badges → oasis pills */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:600;letter-spacing:.2px;border:1px solid var(--border);background:var(--card);color:var(--soft);}
.badge.bg-success{background:rgba(52,199,89,.12);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.badge.bg-warning{background:rgba(255,149,0,.14);color:var(--yellow-d);border-color:rgba(255,149,0,.35);}
.badge.bg-danger{background:rgba(255,59,48,.10);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.badge.bg-info{background:rgba(0,122,255,.10);color:var(--blue-d);border-color:rgba(0,122,255,.28);}
.badge.bg-secondary{background:var(--card);color:var(--muted);border-color:var(--border);}
.badge.bg-light{background:var(--card);color:var(--soft);border-color:var(--border);}
/* The plain .badge rule above ties .badge--green/--red/etc (line ~1697) at equal
   CSS specificity and comes later in the file, so it was silently winning the
   cascade and washing every color-coded badge sitewide out to gray. Doubling the
   selector here restores the intended color without touching the 74 templates
   that already use these classes. */
.badge.badge--green{background:rgba(52,199,89,.14);color:var(--green-d);border-color:rgba(52,199,89,.30);}
.badge.badge--amber,.badge.badge--yellow{background:rgba(255,149,0,.16);color:var(--yellow-d);border-color:rgba(255,149,0,.35);}
.badge.badge--red{background:rgba(255,59,48,.13);color:var(--red-d);border-color:rgba(255,59,48,.30);}
.badge.badge--blue{background:rgba(0,122,255,.12);color:var(--blue-d);border-color:rgba(0,122,255,.28);}
.badge.badge--purple{background:rgba(175,82,222,.14);color:#7a3aa0;border-color:rgba(175,82,222,.30);}
.badge.badge--gray{background:var(--card-2);color:var(--soft);border-color:var(--border);}

/* Bootstrap form controls → oasis inputs */
.form-control,.form-select{width:100%;font:inherit;padding:8px 11px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);}
.form-control-lg{padding:10px 13px;}
.form-control:focus,.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak);}
.form-label{display:block;font-size:12px;font-weight:600;color:var(--soft);margin-bottom:5px;}

/* Bootstrap alerts → quiet note cards */
.alert{padding:11px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);margin-bottom:14px;color:var(--text);}
.alert-info{border-left:3px solid var(--border-strong);}
.alert-success{border-left:3px solid var(--green);}
.alert-warning{border-left:3px solid var(--yellow);}
.alert-danger{border-left:3px solid var(--red);}

/* Bare element fallbacks for any page not using a component class. Low specificity
   so .btn/.input/.table/.form-control always win where present. */
main h1{font-size:20px;font-weight:600;letter-spacing:-.3px;}
main h2{font-size:16px;font-weight:600;letter-spacing:-.2px;}

/* ── Life360 report — Locations cards (cleaned address + property link + map) ── */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:12px;}
.loc-card{display:flex;border:1px solid var(--border,#e3e5e8);border-radius:10px;overflow:hidden;background:var(--surface,#fff);}
.loc-card--todo{border-color:#f0c36d;background:#fffaf0;}
.loc-card__body{flex:1 1 auto;padding:12px 14px;min-width:0;}
.loc-card__addr{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:15px;}
.loc-card__meta{font-size:12px;margin-top:3px;}
.loc-card__meta code{font-size:11px;background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;}
.loc-card__label{display:flex;gap:6px;margin-top:9px;}
.loc-card__label .input{flex:1 1 auto;min-width:0;padding:5px 8px;font-size:13px;}
.loc-card__edit{margin-top:9px;}
.loc-card__edit>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;
  font-size:12px;color:var(--muted,#6b7280);user-select:none;}
.loc-card__edit>summary::-webkit-details-marker{display:none;}
.loc-card__edit>summary:hover{color:var(--orange-d,#b3541e);text-decoration:underline;}
.loc-card__edit[open]>summary{margin-bottom:2px;}
.loc-card__edit .loc-card__label{margin-top:0;}
.loc-card__ruling{margin-top:10px;}
.loc-card__map{position:relative;flex:0 0 120px;display:flex;align-items:center;justify-content:center;
  background:#eef1f4;color:#5b6470;text-decoration:none;text-align:center;font-size:12px;line-height:1.35;border-left:1px solid var(--border,#e3e5e8);}
.loc-card__map img{width:120px;height:100%;object-fit:cover;display:block;}
.loc-card__mapfallback{padding:8px;}
.loc-card__far{position:absolute;top:5px;left:5px;background:#fff3cd;color:#8a6d1a;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;}
@media (prefers-color-scheme:dark){
  .loc-card--todo{background:#2a2416;border-color:#6d571f;}
  .loc-card__map{background:#2a2d31;color:#aab2bd;}
}
:root[data-theme="dark"] .loc-card--todo{background:#2a2416;border-color:#6d571f;}
:root[data-theme="dark"] .loc-card__map{background:#2a2d31;color:#aab2bd;}

/* ── Life360 receipts — debug: original screenshot next to what we read ──────── */
.l360-debug{display:flex;flex-direction:column;gap:14px;margin-top:12px;}
.l360-debug-row{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border,#e3e5e8);border-radius:10px;padding:10px;}
.l360-debug-img{flex:0 0 160px;text-decoration:none;color:inherit;}
.l360-debug-img img{width:160px;border-radius:8px;border:1px solid var(--border,#e3e5e8);display:block;}
.l360-debug-img .cap{display:block;font-size:11px;color:var(--muted,#6b7280);margin-top:4px;}
.l360-debug-read{flex:1 1 auto;min-width:0;}
.l360-debug-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--muted,#6b7280);margin-bottom:6px;}
.l360-debug-line{font-size:13px;padding:2px 0;border-bottom:1px dashed var(--border,#eee);}
.l360-debug-ocr{margin-top:8px;}
.l360-debug-ocr summary{font-size:12px;color:var(--muted,#6b7280);cursor:pointer;}
.l360-debug-ocr pre{font-size:11px;white-space:pre-wrap;background:rgba(0,0,0,.04);padding:8px;border-radius:6px;max-height:200px;overflow:auto;margin-top:6px;}
@media (prefers-color-scheme:dark){ .l360-debug-ocr pre{background:rgba(255,255,255,.06);} }

/* Life360 location context map (worker among our sites + supply stores) */
.loc-card__ctxmap{display:block;text-decoration:none;border-top:1px solid var(--border,#e3e5e8);}
.loc-card__ctxmap img{width:100%;display:block;max-height:180px;object-fit:cover;}
.loc-card__ctxlegend{display:block;font-size:11px;color:var(--muted,#6b7280);padding:4px 8px;}

/* ── Phone off-canvas sidebar (≤700px) — additive (UI polish pass) ─────────
   Below ~700px the old rule only slimmed the in-flow sidebar to 170px, which
   left the content column ~166px wide (unusable). Make the sidebar an
   off-canvas drawer instead: hidden by default so content gets the full
   viewport, sliding in over the page via the header ☰ toggle base.html
   already has (html.sb-collapsed). On phones the persisted "collapsed" class
   therefore means "drawer open" — first paint is always content-first. */
@media (max-width:700px){
  nav.sidebar{
    position:fixed;left:0;top:var(--header-h,56px);bottom:0;z-index:80;
    width:min(78vw,270px);max-height:none;
    transform:translateX(-102%);transition:transform .18s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.18);
    border-right:1px solid var(--border);
  }
  html.sb-collapsed nav.sidebar{display:flex;transform:none;}
}

/* ══════════════════════════════════════════════════════════════════════════
   PUBLIC LANDING / SALES PAGE (core/landing.html) — shown to anonymous
   (non-employee) visitors at "/". The father-&-son construction story, the
   services, and a permits/construction showcase. Minimal and warm on the site's
   flat light palette; the one accent is the brand orange. Every image is a
   durable STATIC asset with a graceful placeholder, so nothing ever renders as
   a broken-image icon (the old landing's images died on ephemeral upload disk).
   ══════════════════════════════════════════════════════════════════════════ */
.brand-palm{font-size:.95em;}

/* Full-bleed landing: break out of the .tab scroll-container padding, then let
   each band paint edge to edge with a centered inner wrap (.lpw). */
.lp{margin:-24px -24px -24px;background:#f7f3ec;color:var(--text);}
.lpb{position:relative;scroll-margin-top:80px;}
.lpb--pad{padding:66px 0;}
.lpb--cream{background:#f7f3ec;}
.lpb--cream2{background:#efe8dc;}
.lpb--dark{background:#1a1712;color:#f3ede2;}
.lpw{max-width:1120px;margin:0 auto;padding:0 32px;}
.lp-cta--center{justify-content:center;}

/* Marketing nav bar — replaces the default console header on the public
   landing page (see core/landing.html's header block). Dark, always-solid
   (not transparent-over-hero) so it reads cleanly against both the photo
   hero and, once scrolled, the cream bands below. About/Portfolio open a
   plain-CSS hover/focus dropdown onto anchors further down this same page. */
.lp-nav{position:sticky;top:0;z-index:100;background:#161310;border-bottom:1px solid rgba(255,255,255,.08);}
.lp-nav__inner{max-width:1120px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;gap:28px;}
.lp-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;}
.lp-nav__logo{display:block;height:40px;width:auto;flex-shrink:0;}
.lp-nav__word{font-size:14.5px;font-weight:700;letter-spacing:.3px;color:#fff;white-space:nowrap;}
.lp-nav__links{display:flex;align-items:center;gap:6px;height:100%;background:transparent;border-bottom:none;flex-wrap:nowrap;position:static;}
.lp-nav__item{position:relative;height:100%;display:flex;align-items:center;}
.lp-nav__link{display:flex;align-items:center;gap:4px;height:100%;padding:0 14px;font-size:12.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:rgba(243,237,226,.86);text-decoration:none;transition:color .15s;white-space:nowrap;}
.lp-nav__link:hover{color:#fff;}
.lp-nav__caret{font-size:9px;opacity:.7;}
.lp-nav__menu{position:absolute;top:100%;left:14px;min-width:220px;background:#211d17;border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:60;}
.lp-nav__item:hover .lp-nav__menu, .lp-nav__item:focus-within .lp-nav__menu{display:block;}
.lp-nav__menu a{display:block;padding:10px 12px;border-radius:7px;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(243,237,226,.86);text-decoration:none;transition:background .12s,color .12s;}
.lp-nav__menu a:hover{background:rgba(255,138,77,.12);color:var(--orange-light);}
.lp-nav__cta{margin-left:6px;flex-shrink:0;}

/* Portfolio — service sub-tabs, one panel visible at a time */
.lp-portfolio-split{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.lp-portfolio-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px 28px;scroll-margin-top:80px;}
.lp-portfolio-card__t{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin:0 0 10px;}
.lp-portfolio-card__b{font-size:14.5px;line-height:1.62;color:var(--soft);margin:0 0 18px;}
.lp-portfolio-card__list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;}
.lp-portfolio-card__list li{font-size:13.5px;font-weight:500;color:var(--text);padding-left:20px;position:relative;}
.lp-portfolio-card__list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;background:var(--orange);}

.lp-ptabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;}
.lp-ptabs__tab{font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:var(--soft);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.lp-ptabs__tab:hover{color:var(--text);border-color:var(--orange);}
.lp-ptabs__tab.is-active{color:#fff;background:var(--orange);border-color:var(--orange);}
.lp-ptabs__panel{display:none;}
.lp-ptabs__panel.is-active{display:block;}

/* Cinematic photo hero */
.lp-hero2{min-height:min(84vh,650px);display:flex;align-items:center;overflow:hidden;background:#1a1712;}
.lp-hero2__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.lp-hero2--nobg .lp-hero2__bg{display:none;}
.lp-hero2__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,10,.9) 0%,rgba(16,13,10,.68) 42%,rgba(16,13,10,.34) 80%,rgba(16,13,10,.52) 100%),linear-gradient(0deg,rgba(16,13,10,.68) 0%,rgba(16,13,10,0) 46%);}
.lp-hero2__inner{position:relative;z-index:2;width:100%;padding:98px 32px;color:#f3ede2;}
.lp-hero2__title{font-size:clamp(40px,6vw,70px);font-weight:700;letter-spacing:-1.4px;line-height:1.01;margin:0 0 20px;color:#fff;text-wrap:balance;}
.lp-hero2__logo{margin:0 0 24px;}
.lp-hero2__logo img{display:block;height:clamp(84px,11vw,150px);width:auto;max-width:100%;}
.lp-hero2__lede{font-size:clamp(16px,1.5vw,20px);line-height:1.62;color:rgba(243,237,226,.9);max-width:56ch;margin:0 0 30px;text-wrap:pretty;}
.lp-hero2__lede strong{color:#fff;font-weight:700;}
.lp-eyebrow--light{color:var(--orange-light);}
.btn--onphoto{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn--onphoto:hover{background:rgba(255,255,255,.24);border-color:#fff;}
.lp-statsband{padding:32px 0;}

/* Shared image slot — durable static asset + branded placeholder fallback.
   The <img>'s onerror adds .lp-img--fallback to swap in the .lp-img__ph block. */
.lp-img{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--card);}
.lp-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;}
.lp-img__ph{display:none;}
.lp-img--fallback img{display:none;}
.lp-img--fallback .lp-img__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:22px;text-align:center;
  background:linear-gradient(160deg,#fff7f0 0%,#ffe7d0 100%);
}
.lp-img__ph .t{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.lp-img__ph .s{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--orange);}

/* Shared eyebrow + CTA (hero photo + contact band) */
.lp-eyebrow{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--orange);margin:0 0 14px;}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;}
.btn--lg{padding:13px 24px;font-size:14px;border-radius:11px;}

/* Stats — on the dark strip under the hero */
.lp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lp-stat{text-align:center;}
.lp-stat__num{font-size:clamp(30px,3.8vw,42px);font-weight:700;color:var(--orange-light);letter-spacing:-.6px;}
.lp-stat__label{font-size:12.5px;color:rgba(243,237,226,.66);margin-top:5px;letter-spacing:.2px;}

/* Section heading */
.lp-kicker{font-size:12px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--orange);margin:0 0 10px;}
.lp-title{font-size:clamp(27px,3.6vw,40px);font-weight:700;letter-spacing:-.8px;color:var(--text);margin:0 0 12px;text-wrap:balance;}
.lp-sub{font-size:16px;line-height:1.62;color:var(--soft);max-width:64ch;margin:0 0 30px;text-wrap:pretty;}
.lp-sub--fine{font-size:14px;margin-top:-18px;color:var(--soft);opacity:.85;}
.lp-fine-link{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:2px;}
.lp-fine-link:hover{color:var(--orange);}

/* Services */
.lp-services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.lp-services--quick{grid-template-columns:repeat(4,1fr);}
.lp-service{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;}
.lp-service__t{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin:0 0 8px;}
.lp-service__b{font-size:14px;line-height:1.6;color:var(--soft);margin:0;}

/* Permits & construction */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px;}
.lp-step{border-top:2px solid var(--orange);padding:16px 0 0;}
.lp-step__n{font-size:13px;font-weight:700;color:var(--orange);letter-spacing:1px;}
.lp-step__t{font-size:16px;font-weight:700;color:var(--text);margin:6px 0 8px;letter-spacing:-.2px;}
.lp-step__b{font-size:14px;line-height:1.6;color:var(--soft);margin:0;}
/* Flagship build — "from empty lot to finished home" progression */
.lp-portfolio{margin:6px 0 42px;}
.lp-portfolio__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.lp-portfolio__t{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin:0;}
.lp-portfolio__addr{font-size:13px;color:var(--soft);margin:4px 0 0;}
.lp-portfolio__links{display:flex;gap:16px;flex-wrap:wrap;}
.lp-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.lp-progress__item{margin:0;}
.lp-progress__item .lp-img{aspect-ratio:4/3;}
.lp-progress__cap{font-size:13px;font-weight:600;color:var(--text);margin-top:9px;text-align:center;}

/* 82 Lexington — before / after core visual */
.lp-showcase{margin:2px 0 6px;}
.lp-ba{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.lp-ba__side{margin:0;}
.lp-ba__img{aspect-ratio:4/3;}
.lp-ba__tag{position:absolute;top:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.lp-ba__tag--before{background:rgba(24,24,27,.78);}
.lp-ba__tag--after{background:var(--orange);}
.lp-ba__cap{font-size:13.5px;font-weight:600;color:var(--text);margin-top:11px;text-align:center;}
.lp-showcase__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;}
.lp-showcase__addr{font-size:13px;font-weight:600;color:var(--soft);margin:0;}
.lp-showcase__more{font-size:11.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:30px 0 13px;text-align:center;}
.lp-progress--duo{grid-template-columns:repeat(2,1fr);max-width:680px;margin:0 auto;}
.lp-during{margin:26px 0 0;}
.lp-during__img{aspect-ratio:16/9;}
.lp-during__cap{font-size:13px;font-weight:600;color:var(--text);margin-top:11px;text-align:center;}

/* ── Selected work — dark band: interactive before/after + best-work gallery ──
   Same type system as the rest of the landing (system font, orange kicker,
   .lp-title weights); headings go light because the band is dark. */
.lp-selected .lp-kicker{color:var(--orange-light);}
.lp-selected .lp-title{color:#fff;}
.lp-selected .lp-sub{color:rgba(243,237,226,.82);}

/* Drag-to-compare before/after tiles (2-up) */
.lp-compares{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:0 0 8px;}
.lp-compare-block{margin:0;}
.lp-compare-label{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;}
.lp-compare-label .n{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--orange-light);}
.lp-compare-label .t{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.lp-compare-label .h{font-size:11px;color:rgba(243,237,226,.5);margin-left:auto;text-transform:uppercase;letter-spacing:.5px;}
.lp-compare{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.12);cursor:ew-resize;user-select:none;background:#000;box-shadow:var(--shadow-lg);}
.lp-compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
.lp-compare .lp-compare__after{clip-path:inset(0 0 0 50%);}
.lp-compare__handle{position:absolute;top:0;bottom:0;left:50%;width:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none;}
.lp-compare__handle .ln{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:50%;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2);}
.lp-compare__handle .gr{position:relative;width:44px;height:44px;border-radius:50%;background:var(--orange);border:3px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;line-height:1;}
.lp-compare__tag{position:absolute;top:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25);}
.lp-compare__tag--before{left:12px;background:rgba(24,24,27,.8);}
.lp-compare__tag--after{right:12px;background:var(--orange);}

/* Property grid — one card per job, hover reveals corner brackets + a zoom */
.lp-jobs{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:2px 0 8px;}
.lp-job{position:relative;display:block;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:#000;text-decoration:none;box-shadow:var(--shadow-lg);}
.lp-job__photo{position:relative;aspect-ratio:4/3;overflow:hidden;}
.lp-job__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.lp-job:hover .lp-job__photo img{transform:scale(1.06);}
.lp-job__bracket{position:absolute;inset:12px;pointer-events:none;opacity:0;transition:opacity .3s ease;}
.lp-job:hover .lp-job__bracket{opacity:1;}
.lp-job__bracket span{position:absolute;width:20px;height:20px;border:2px solid var(--orange);}
.lp-job__bracket .tl{top:0;left:0;border-right:none;border-bottom:none;}
.lp-job__bracket .tr{top:0;right:0;border-left:none;border-bottom:none;}
.lp-job__bracket .bl{bottom:0;left:0;border-right:none;border-top:none;}
.lp-job__bracket .br{bottom:0;right:0;border-left:none;border-top:none;}
.lp-job__meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:rgba(24,22,18,.72);}
.lp-job__addr{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px;}
.lp-job__tag{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(243,237,226,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 9px;white-space:nowrap;}
.lp-job__tag--done{color:var(--orange-light);border-color:rgba(255,138,77,.4);}

/* Portfolio filter tabs — pill row; active pill is solid orange */
.lp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 22px;}
.lp-filter__tab{font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.2px;color:rgba(243,237,226,.72);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.lp-filter__tab:hover{color:#fff;background:rgba(255,255,255,.12);}
.lp-filter__tab.is-active{color:#fff;background:var(--orange);border-color:var(--orange);}

/* Best-work gallery — uniform tiles so it reflows cleanly under the filter */
.lp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px;}
.lp-gallery figure{position:relative;margin:0;overflow:hidden;border-radius:16px;background:#000;border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;}
.lp-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.lp-gallery figure:hover img{transform:scale(1.06);}
.lp-gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);}

/* Filter mechanics — hidden items + collapsed empty groups */
.lp-filterable.is-hidden{display:none;}
.lp-selected .is-group-empty{display:none;}
@media (max-width:900px){.lp-jobs{grid-template-columns:1fr 1fr;}.lp-services--quick{grid-template-columns:1fr 1fr;}}
@media (max-width:820px){
  .lp-compares{grid-template-columns:1fr;}
  .lp-gallery{grid-template-columns:1fr 1fr;}
}

/* Permit / external links — quiet orange text link */
.lp-permit-link{font-size:13px;font-weight:600;color:var(--orange);white-space:nowrap;}
.lp-permit-link:hover{color:var(--orange-d);text-decoration:underline;}
.lp-permit-link--muted{color:var(--soft);}
.lp-permit-link--muted:hover{color:var(--text);}

/* "Houses we're building right now" — one row per permitted job */
.lp-permits__title{font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.2px;margin:8px 0 6px;}
.lp-permits__sub{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0 0 18px;}
.lp-permits{display:flex;flex-direction:column;gap:10px;}
.lp-permit-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;}
.lp-permit-row__main{min-width:165px;}
.lp-permit-row__addr{display:block;font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.lp-permit-row__city{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;}
.lp-permit-row__what{font-size:13.5px;color:var(--soft);flex:1;min-width:120px;}
.lp-permit-row__links{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;}
.perm-badge{font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--green-d);background:rgba(52,199,89,.12);border:1px solid rgba(52,199,89,.28);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.lp-permits__note{font-size:12px;color:var(--muted);margin-top:14px;font-style:italic;}

/* About / founders */
.lp-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;}
.lp-about__figure{margin:0;position:sticky;top:24px;}
.lp-about__photo{aspect-ratio:4/5;width:100%;max-width:380px;box-shadow:var(--shadow-lg);}

/* Our team — full-width whole-crew photo band */
.lp-team__figure{margin:0;}
.lp-team__photo{aspect-ratio:21/9;width:100%;box-shadow:var(--shadow-lg);}

/* Contact — dark closing band */
.lp-contact2{padding:76px 0;}
.lp-contact2__inner{max-width:720px;margin:0 auto;text-align:center;}
.lp-contact2__title{font-size:clamp(28px,3.8vw,44px);font-weight:700;letter-spacing:-.9px;color:#fff;margin:4px 0 14px;text-wrap:balance;}
.lp-contact2__sub{font-size:16px;line-height:1.62;color:rgba(243,237,226,.82);margin:0 auto 28px;max-width:54ch;}
.lp-contact2__email{font-size:14px;color:rgba(243,237,226,.66);margin:22px 0 0;}
.lp-contact2__email a{color:var(--orange-light);font-weight:600;text-decoration:none;}
.lp-contact2__email a:hover{text-decoration:underline;}
.lp-footer2{border-top:1px solid rgba(255,255,255,.09);padding:30px 0 34px;text-align:center;}
.lp-footer2__logo{height:74px;width:auto;opacity:.9;margin-bottom:16px;}
.lp-footer2 p{margin:0;font-size:12.5px;color:rgba(243,237,226,.6);}

/* Bios — a quiet accent rail per person, no boxes, lots of air. */
.bio{border-left:3px solid var(--border);padding:1px 0 1px 18px;margin:0 0 24px;}
.bio--founder{border-left-color:var(--orange);}
.bio--coo{border-left-color:var(--blue);}
.bio:last-child{margin-bottom:0;}
.bio__head{margin-bottom:8px;}
.bio__name{font-size:20px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin:0;}
.bio__title{font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--orange);margin:3px 0 0;}
.bio--coo .bio__title{color:var(--blue);}
.bio__body{font-size:14.5px;line-height:1.66;color:var(--soft);margin:0;max-width:64ch;}
.bio__body strong{color:var(--text);font-weight:600;}

/* Responsive */
@media (max-width:820px){
  .lp-hero2__inner{padding:74px 24px;}
  .lp-about{grid-template-columns:1fr;gap:26px;}
  .lp-about__figure{position:static;max-width:320px;margin:0 auto;}
  .lp-about__photo{max-width:320px;margin:0 auto;}
  .lp-services,.lp-services--quick,.lp-steps,.lp-ba,.lp-portfolio-split{grid-template-columns:1fr;}
  .lp-team__photo{aspect-ratio:4/3;}
  .lp-stats{gap:8px;}
  .lp-permit-row__links{margin-left:0;width:100%;}
  .lpw{padding:0 22px;}
  .lp-nav__links{display:none;}
  .lp-nav__inner{padding:0 20px;}
}

@media (prefers-color-scheme:dark){
  .lp-img--fallback .lp-img__ph{background:linear-gradient(160deg,#2a2116,#3a2a17);}
}
:root[data-theme="dark"] .lp-img--fallback .lp-img__ph{background:linear-gradient(160deg,#2a2116,#3a2a17);}