/* ============================================================================
   DDS Platform — design system + app shell
   Professional SaaS skin: Inter, neutral gray ramp, one red accent, soft shadows.
   ============================================================================ */
:root{
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;
  --bg:#fdfbf6; --surface:#fff; --border:var(--gray-200);
  --text:var(--gray-900); --text-muted:var(--gray-500);
  /* DDS accent (red) */
  --accent-50:#fcecef; --accent-500:#d83a52; --accent-600:#c41e3a; --accent-700:#a3122b;
  --accent-fg:#fff; --ring:color-mix(in srgb,var(--accent-600) 35%,transparent);
  --success-bg:#ecfdf5;--success-fg:#047857;--success-bd:#a7f3d0;
  --warning-bg:#fffbeb;--warning-fg:#b45309;--warning-bd:#fde68a;
  --danger-bg:#fef2f2;--danger-fg:#b91c1c;--danger-bd:#fecaca;
  --info-bg:#eff6ff;--info-fg:#1d4ed8;--info-bd:#bfdbfe;
  --neutral-bg:var(--gray-100);--neutral-fg:var(--gray-600);--neutral-bd:var(--gray-200);
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;
  --text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:14px;--radius-full:9999px;
  --shadow-xs:0 1px 2px 0 rgb(0 0 0/.05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
  --sidebar-w:232px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans);
  font-size:var(--text-sm);
  color:var(--text);
  /* Warm branded wash (a calm echo of the sign-in landing) so white cards/sidebar
     pop instead of flat gray. Subtle on purpose — data stays readable. */
  background:
    radial-gradient(1150px 760px at -4% -8%, rgba(255,205,0,.22), transparent 58%),
    radial-gradient(1000px 720px at 104% 106%, rgba(236,42,142,.13), transparent 56%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}

/* ============================================================================
   APP SHELL: sidebar + main
   ============================================================================ */
.app{display:flex;min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding:var(--space-4) var(--space-3);
  z-index:40;
}
.sidebar-brand{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-2) var(--space-5);
}
.sidebar-brand img{height:30px;width:auto;display:block;}
.sidebar-brand .wordmark{font-weight:700;letter-spacing:-.01em;font-size:var(--text-lg);color:var(--gray-900);}
.sidebar-brand .wordmark span{color:var(--accent-600);}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:var(--space-3);
  padding:9px var(--space-3);
  border-radius:var(--radius-md);
  color:var(--gray-600);font-weight:500;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--gray-100);color:var(--gray-900);}
.nav-item.active{background:var(--accent-50);color:var(--accent-700);}
.nav-item.active .nav-ico{color:var(--accent-600);}
.nav-item.inert{color:var(--gray-400);cursor:default;}
.nav-item.inert:hover{background:transparent;color:var(--gray-400);}
.nav-ico{width:18px;height:18px;flex:0 0 18px;color:var(--gray-400);display:flex;}
.nav-ico svg{width:18px;height:18px;}
.sidebar-foot{
  border-top:1px solid var(--border);
  padding-top:var(--space-3);margin-top:var(--space-3);
  display:flex;flex-direction:column;gap:2px;
}
.sidebar-foot .nav-item{font-size:var(--text-xs);}

/* ---- Main column ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ---- Topbar ---- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:var(--space-3);
  /* iOS standalone draws under the status bar (black-translucent + viewport-fit
     cover) — pad by the safe-area insets so the bar clears the clock/notch. */
  padding:calc(var(--space-3) + env(safe-area-inset-top,0px))
          max(var(--space-5),env(safe-area-inset-right,0px))
          var(--space-3)
          max(var(--space-5),env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.hamburger{
  display:none;border:1px solid var(--border);background:var(--surface);
  width:40px;height:40px;border-radius:var(--radius-md);
  align-items:center;justify-content:center;color:var(--gray-700);flex:0 0 40px;
}
.search{position:relative;flex:1;max-width:520px;}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gray-400);pointer-events:none;}
.search input{
  width:100%;height:40px;
  padding:0 var(--space-3) 0 38px;
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);font-size:var(--text-sm);color:var(--text);
  transition:border-color .12s,box-shadow .12s;
}
.search input::placeholder{color:var(--gray-400);}
.search input:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring);}
.topbar-spacer{flex:1;}
.topbar-right{display:flex;align-items:center;gap:var(--space-3);}
.jobfolder-btn{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;
  color:var(--accent-700,#a01830);text-decoration:none;background:var(--accent-50,#fdecec);
  border:1px solid var(--accent-300,#f0b3b9);border-radius:var(--radius-md);padding:6px 12px;}
.jobfolder-btn:hover{background:var(--accent-100,#fbdcdf);}
.photo-group{margin-bottom:var(--space-4);}
.photo-group .pg-head{font-size:var(--text-sm);font-weight:600;color:var(--gray-700);margin:0 0 6px;
  overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;}
.photo-group .pg-n{font-size:var(--text-xs);font-weight:600;color:var(--text-muted);
  background:var(--neutral-bg,#eef1f4);border-radius:var(--radius-full,999px);padding:1px 8px;}

/* PWA refresh affordances (home-screen / standalone app) — see pwa.js */
#pwa-update-bar{
  position:fixed;left:0;right:0;top:0;z-index:200;
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);
  padding:calc(env(safe-area-inset-top,0px) + 10px) var(--space-4) 10px;
  background:var(--accent-600,#c41e3a);color:#fff;font-size:var(--text-sm);font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
#pwa-update-bar button{
  border:0;border-radius:var(--radius-full,999px);background:#fff;color:var(--accent-700,#a01830);
  font:inherit;font-weight:700;padding:5px 16px;cursor:pointer;
}
#pwa-ptr{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:190;
  transform:translateX(-50%);width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  color:var(--accent-600,#c41e3a);font-size:1.1rem;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .12s;
}
#pwa-refresh{
  border:1px solid var(--border);background:var(--surface);color:var(--gray-700);
  width:34px;height:34px;border-radius:var(--radius-md);font-size:1.05rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
#pwa-refresh:active{background:var(--gray-50,#f6f7f9);}
.coll-callout{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;
  background:var(--danger-bg,#fdecec);border:1px solid var(--danger-fg,#c41e3a);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;}
.coll-callout:hover{box-shadow:var(--shadow-sm);}
.coll-callout .coll-amt{font-size:1.6rem;font-weight:800;color:var(--danger-fg,#c41e3a);white-space:nowrap;}
.coll-callout .coll-txt{flex:1;font-size:var(--text-sm);color:var(--gray-800);line-height:1.4;}
.coll-callout .coll-go{font-weight:700;color:var(--danger-fg,#c41e3a);white-space:nowrap;font-size:var(--text-sm);}
@media(max-width:560px){.coll-callout{flex-wrap:wrap;}.coll-callout .coll-go{flex-basis:100%;}}
.refresh-jobs-btn{margin-top:var(--space-2);border:1px solid var(--border);background:var(--surface);
  color:var(--gray-700);font:inherit;font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-md);
  padding:6px 12px;cursor:pointer;}
.refresh-jobs-btn:hover{border-color:var(--accent-500);color:var(--accent-600);}
.refresh-jobs-btn:disabled{opacity:.6;cursor:default;}
.spin{animation:pwa-spin .7s linear infinite;}
@keyframes pwa-spin{to{transform:rotate(360deg);}}
#pwa-nav-loading{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;gap:var(--space-3);
  align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(2px);}
.pwa-nav-spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--border);
  border-top-color:var(--accent-600,#c41e3a);animation:pwa-spin .7s linear infinite;}
.pwa-nav-label{font-size:var(--text-sm);font-weight:600;color:var(--gray-700);max-width:80vw;text-align:center;overflow-wrap:anywhere;}

/* role preview toggle */
.viewas{display:flex;align-items:center;gap:var(--space-1);}
.viewas-label{font-size:var(--text-xs);color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;margin-right:2px;}
.viewas-link{
  font-size:var(--text-xs);font-weight:500;color:var(--gray-600);
  padding:5px 9px;border-radius:var(--radius-full);border:1px solid transparent;
}
.viewas-link:hover{background:var(--gray-100);}
.viewas-link.on{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-50);}
/* role preview lives in the sidebar (reachable on mobile via the ☰ menu) */
.viewas-side{padding:var(--space-2) var(--space-3) var(--space-3);border-top:1px solid var(--border);margin-bottom:var(--space-2);}
.viewas-side-label{display:block;font-size:var(--text-xs);color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-2);}
.viewas-side-links{display:flex;flex-wrap:wrap;gap:4px;}

.user{display:flex;align-items:center;gap:var(--space-2);}
.avatar{
  width:32px;height:32px;border-radius:var(--radius-full);
  background:var(--accent-600);color:#fff;font-weight:600;font-size:var(--text-xs);
  display:flex;align-items:center;justify-content:center;flex:0 0 32px;text-transform:uppercase;
}
.user-name{font-weight:500;color:var(--gray-700);}
.signout{font-size:var(--text-xs);color:var(--gray-400);}
.signout:hover{color:var(--accent-600);}

/* ---- Content area ---- */
.content{padding:var(--space-5);max-width:1400px;width:100%;}
.page-head{margin-bottom:var(--space-5);}
.page-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;color:var(--gray-900);margin:0;}
.page-sub{color:var(--text-muted);margin-top:var(--space-1);font-size:var(--text-sm);}

.section-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin:var(--space-6) 0 var(--space-3);flex-wrap:wrap;
}
.section-head h2{font-size:var(--text-lg);font-weight:600;margin:0;letter-spacing:-.01em;}
.section-head .count{color:var(--gray-400);font-weight:500;}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:40px;padding:0 var(--space-4);
  border-radius:var(--radius-md);border:1px solid transparent;
  font-size:var(--text-sm);font-weight:500;line-height:1;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;}
.btn-primary{background:var(--accent-600);color:var(--accent-fg);}
.btn-primary:hover{background:var(--accent-700);}
.btn-secondary{background:var(--surface);color:var(--gray-700);border-color:var(--border);}
.btn-secondary:hover{background:var(--gray-50);border-color:var(--gray-300);}
.btn-ghost{background:transparent;color:var(--gray-600);}
.btn-ghost:hover{background:var(--gray-100);}
.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-xs);}
.btn:disabled{opacity:.55;cursor:default;}
.btn-block{width:100%;}

/* segmented toggle (Table / Board, filters) */
.seg{display:inline-flex;background:var(--gray-100);border-radius:var(--radius-md);padding:3px;gap:2px;}
.seg button{
  border:none;background:transparent;color:var(--gray-600);
  height:32px;padding:0 var(--space-3);border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:500;
}
.seg button.on{background:var(--surface);color:var(--gray-900);box-shadow:var(--shadow-xs);}

/* ============================================================================
   KPI TILES
   ============================================================================ */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--space-3);
}
.kpi{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-4);
  box-shadow:var(--shadow-xs);
}
.kpi-num{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;color:var(--gray-900);line-height:1.1;}
.kpi-label{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;margin-top:var(--space-2);font-weight:500;}
.kpi-ar .kpi-num{color:var(--accent-600);}
.kpi-ar{border-color:var(--accent-50);background:linear-gradient(180deg,var(--accent-50),var(--surface) 60%);}
.kpi-flag{border-color:var(--warning-bd);background:linear-gradient(180deg,var(--warning-bg),var(--surface) 60%);}
.kpi-flag .kpi-num{color:var(--warning-fg);}

/* ---- focus / needs-attention cards ---- */
/* Wrapping grid, NOT a horizontal scroller — everything that needs attention is
   visible at a glance (Marcus's rule: if it takes navigation to find, it doesn't exist). */
.focus-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-3);padding-bottom:var(--space-2);}
.focus-card{
  background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent-500);
  border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow-xs);text-align:left;
  transition:box-shadow .12s,transform .06s;
}
.focus-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.focus-card .fc-name{font-weight:600;color:var(--gray-900);display:flex;align-items:center;gap:6px;}
.focus-card .fc-meta{color:var(--text-muted);font-size:var(--text-xs);margin-top:2px;}
.focus-card .fc-sum{color:var(--gray-600);font-size:var(--text-xs);margin-top:var(--space-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.focus-empty{color:var(--text-muted);padding:var(--space-4);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-lg);}

/* ============================================================================
   RECENT ACTIVITY FEED (dashboard)
   ============================================================================ */
.section-head .section-sub{color:var(--text-muted);font-size:var(--text-xs);font-weight:500;}
.feed-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden;
}
.feed{display:flex;flex-direction:column;}
.feed-day{
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-xs);font-weight:600;color:var(--gray-400);
  text-transform:uppercase;letter-spacing:.04em;
  background:var(--gray-50);border-top:1px solid var(--border);
}
.feed-day:first-child{border-top:0;}
.feed-row{
  display:flex;align-items:flex-start;gap:var(--space-3);width:100%;text-align:left;
  padding:var(--space-3) var(--space-4);
  border:0;border-top:1px solid var(--border);background:transparent;
  cursor:pointer;transition:background .12s;font-family:inherit;
}
.feed-day + .feed-row{border-top:0;}
.feed-row:hover{background:var(--accent-50);}
.feed-row.is-hidden{display:none;}
.feed-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:var(--text-xs);margin-top:1px;
}
.feed-body{flex:1;min-width:0;}
.feed-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;}
.feed-person{font-weight:600;color:var(--gray-900);}
.feed-date{color:var(--gray-400);font-size:var(--text-xs);}
.feed-job{
  color:var(--accent-700);font-size:var(--text-xs);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.feed-snippet{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  color:var(--gray-600);font-size:var(--text-sm);margin-top:2px;line-height:1.4;
}
.feed-foot{padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);text-align:center;}
@media (max-width:640px){
  .feed-row{padding:var(--space-3);}
  .feed-job{flex-basis:100%;}
}

/* ============================================================================
   JOBS TABLE
   ============================================================================ */
.toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3);}
.toolbar .spacer{flex:1;}

.table-wrap{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);
}
table.jobs{width:100%;border-collapse:collapse;}
table.jobs thead th{
  text-align:left;font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--gray-400);
  padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
  background:var(--gray-50);
}
table.jobs th.num,table.jobs td.num{text-align:right;font-variant-numeric:tabular-nums;}
table.jobs tbody tr{cursor:pointer;transition:background .1s;}
table.jobs tbody tr:hover{background:var(--gray-50);}
table.jobs tbody td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--gray-100);vertical-align:middle;}
table.jobs tbody tr:last-child td{border-bottom:none;}
.cell-job{display:flex;flex-direction:column;gap:1px;}
.cell-job .j-name{font-weight:600;color:var(--gray-900);display:flex;align-items:center;gap:6px;}
.cell-job .j-meta{color:var(--text-muted);font-size:var(--text-xs);}
.cell-ar{font-weight:600;color:var(--gray-700);}
.cell-ar.pos{color:var(--accent-600);}
.tablefoot{display:flex;justify-content:center;padding:var(--space-4);background:var(--gray-50);border-top:1px solid var(--border);}
.empty-row td{text-align:center;color:var(--text-muted);padding:var(--space-6) var(--space-4);}

/* ---- status pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;line-height:1.4;
  border:1px solid var(--neutral-bd);background:var(--neutral-bg);color:var(--neutral-fg);
  white-space:nowrap;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;}
.pill.estimating{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-bd);}
.pill.sent{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-bd);}
.pill.open_orders{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe;}
.pill.in_progress{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-bd);}
.pill.invoiced{background:var(--accent-50);color:var(--accent-700);border-color:#f6d4da;}
.pill.closed{background:var(--gray-100);color:var(--gray-500);border-color:var(--gray-200);}
.pill .code{font-weight:700;}
.tp{font-size:10px;font-weight:700;color:var(--accent-700);background:var(--accent-50);border:1px solid #f6d4da;border-radius:4px;padding:0 4px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent-600);flex:0 0 8px;}

/* ============================================================================
   BOARD VIEW (optional, scoped)
   ============================================================================ */
.board{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-3);}
.column{
  flex:0 0 280px;display:flex;flex-direction:column;
  background:var(--gray-50);border:1px solid var(--border);border-radius:var(--radius-lg);
  max-height:72vh;
}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-3) var(--space-1);}
.col-title{font-weight:600;font-size:var(--text-sm);color:var(--gray-800);}
.col-count{font-size:var(--text-xs);font-weight:600;color:var(--gray-500);background:var(--gray-200);border-radius:var(--radius-full);padding:1px 8px;}
.col-sub{font-size:var(--text-xs);color:var(--text-muted);padding:0 var(--space-3) var(--space-2);}
.cards{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-3);overflow-y:auto;flex:1;}
.bcard{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3);text-align:left;box-shadow:var(--shadow-xs);transition:box-shadow .12s,transform .06s;width:100%;
}
.bcard:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.col-more{width:100%;background:transparent;border:1px dashed var(--border);border-radius:var(--radius-md);
  padding:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);cursor:pointer;text-align:center;}
.col-more:hover{border-color:var(--accent-500);color:var(--accent-600);}
.bcard .bc-name{font-weight:600;font-size:var(--text-sm);color:var(--gray-900);display:flex;align-items:center;gap:6px;}
.bcard .bc-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
.bcard .bc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-2);}
.bcard .bc-ar{font-weight:600;font-size:var(--text-xs);color:var(--accent-600);}
.card-empty{color:var(--gray-300);text-align:center;padding:var(--space-4);font-size:var(--text-sm);}
.code-inf{opacity:.6;}

/* legend */
.legend{margin-top:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);}
.legend summary{cursor:pointer;font-weight:500;color:var(--gray-700);padding:var(--space-2) 0;font-size:var(--text-sm);}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-2);padding:var(--space-2) 0;}
.legend-row{display:flex;gap:var(--space-2);align-items:baseline;font-size:var(--text-xs);}
.legend-row .code{font-weight:700;color:var(--accent-700);}
.legend-txt{color:var(--gray-600);}
.legend-note{font-size:var(--text-xs);color:var(--text-muted);padding:var(--space-2) 0;border-top:1px solid var(--gray-100);}

.brainline{padding:var(--space-5);color:var(--gray-400);font-size:var(--text-xs);text-align:center;}

/* ============================================================================
   JOB DRAWER (slide-in)
   ============================================================================ */
.drawer-scrim{position:fixed;inset:0;background:rgb(17 24 39/.45);z-index:60;animation:fade .15s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(560px,100vw);
  background:var(--surface);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;
  animation:slidein .2s cubic-bezier(.16,1,.3,1);
}
@keyframes slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}
.drawer-head{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);
}
.drawer-head .dh-main{flex:1;min-width:0;}
.d-name{font-size:var(--text-xl);font-weight:700;margin:0;letter-spacing:-.01em;color:var(--gray-900);}
.d-headmeta{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;}
.d-ar{font-weight:700;color:var(--accent-600);font-variant-numeric:tabular-nums;}
.drawer-close{
  width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--surface);color:var(--gray-500);display:flex;align-items:center;justify-content:center;flex:0 0 36px;
}
.drawer-close:hover{background:var(--gray-100);color:var(--gray-900);}
.drawer-body{flex:1;overflow-y:auto;padding:var(--space-5);}
.d-block{margin-bottom:var(--space-6);}
.d-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:var(--space-3);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);}
.d-label .d-action{text-transform:none;letter-spacing:0;}
.d-muted{color:var(--text-muted);font-size:var(--text-sm);}
/* Job tools — launch tiles to Dillon's deployed web apps */
.d-tools{display:flex;flex-direction:column;gap:var(--space-2);}
.d-tool{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);text-decoration:none;color:inherit;transition:box-shadow .12s,border-color .12s,transform .06s;}
.d-tool:hover{box-shadow:var(--shadow-sm);border-color:var(--accent-300,var(--accent-500));transform:translateY(-1px);}
.d-tool.disabled{opacity:.55;cursor:default;}
.d-tool-ic{font-size:1.25rem;line-height:1;flex:none;}
.d-tool-txt{display:flex;flex-direction:column;min-width:0;}
.d-tool-label{font-size:var(--text-sm);font-weight:600;color:var(--gray-800);}
.d-tool-note{font-size:var(--text-xs);color:var(--text-muted);}
.d-summary{color:var(--gray-700);font-size:var(--text-sm);line-height:1.55;}
.d-threep{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--accent-700);background:var(--accent-50);border:1px solid #f6d4da;border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);}

/* set-status control */
.d-setstatus{margin-top:var(--space-3);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.d-setstatus label{font-size:var(--text-xs);color:var(--gray-500);font-weight:500;}
.d-setstatus select{
  height:36px;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:0 var(--space-2);background:var(--surface);font-size:var(--text-sm);color:var(--text);max-width:100%;
}
.d-setstatus select:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring);}
.d-code-msg{font-size:var(--text-xs);color:var(--success-fg);}
.d-code-src{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1);}

/* photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--space-2);}
.photo-grid .thumb{
  position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border);cursor:pointer;padding:0;
  background:var(--gray-100);animation:skel 1.4s ease-in-out infinite;
}
.photo-grid .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s;
  position:relative;z-index:1;background:var(--gray-100);}
.photo-grid .thumb:hover img{transform:scale(1.04);}
@keyframes skel{0%,100%{background-color:var(--gray-100);}50%{background-color:var(--gray-200);}}

/* Instant loading overlay shown the moment a job is clicked. The job page is a
   full-page navigation, so without this the screen looks frozen for a second
   and people click repeatedly (which used to pile up heavy requests). */
.nav-loading{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);}
.nav-loading-card{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-4) var(--space-5);font-weight:600;color:var(--gray-800);max-width:80vw;}
.spinner{width:20px;height:20px;border:3px solid var(--gray-200);border-top-color:var(--accent-500);border-radius:var(--radius-full);animation:spin .7s linear infinite;flex:0 0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}
.upload-line{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3);}
.upload-prog{font-size:var(--text-xs);color:var(--text-muted);}
.up-preview{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-3);}
.up-preview img{width:56px;height:56px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);}

/* documents */
.doc-list{display:flex;flex-direction:column;gap:var(--space-1);}
.doc-list a{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
  color:var(--gray-700);transition:background .1s;
}
.doc-list a:hover{background:var(--gray-100);}
.doc-list .fi{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--accent-50);color:var(--accent-700);display:flex;align-items:center;justify-content:center;flex:0 0 28px;font-size:11px;font-weight:700;text-transform:uppercase;}
.doc-list .dn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);}
.doc-list .dm{font-size:var(--text-xs);color:var(--gray-400);}

/* activity feed */
.feed{display:flex;flex-direction:column;gap:var(--space-3);}
.feed .log{padding-left:var(--space-4);border-left:2px solid var(--gray-200);position:relative;}
.feed .log::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent-500);}
.feed .meta{font-size:var(--text-xs);color:var(--text-muted);font-weight:500;}
.feed .subj{font-weight:600;color:var(--gray-900);margin-top:2px;}
.feed .body{font-size:var(--text-sm);color:var(--gray-600);margin-top:2px;white-space:pre-wrap;}

.d-ask{
  width:100%;background:var(--gray-50);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:var(--space-3);color:var(--gray-600);
  font-size:var(--text-sm);font-weight:500;transition:background .1s;
}
.d-ask:hover{background:var(--gray-100);color:var(--gray-900);}

/* ============================================================================
   LIGHTBOX
   ============================================================================ */
.lightbox{position:fixed;inset:0;z-index:80;background:rgb(0 0 0/.9);display:flex;align-items:center;justify-content:center;animation:fade .15s;}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:var(--radius-sm);box-shadow:var(--shadow-xl);}
.lb-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:var(--radius-full);border:none;
  background:rgb(255 255 255/.12);color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;
}
.lb-btn:hover{background:rgb(255 255 255/.22);}
.lb-prev{left:var(--space-5);}
.lb-next{right:var(--space-5);}
.lb-close{position:absolute;top:var(--space-5);right:var(--space-5);width:44px;height:44px;border-radius:var(--radius-full);border:none;background:rgb(255 255 255/.12);color:#fff;font-size:20px;}
.lb-close:hover{background:rgb(255 255 255/.22);}
.lb-count{position:absolute;bottom:var(--space-5);left:50%;transform:translateX(-50%);color:rgb(255 255 255/.8);font-size:var(--text-sm);}

/* ============================================================================
   CHAT POPUP
   ============================================================================ */
.chat-fab{
  position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:50;
  display:flex;align-items:center;gap:var(--space-2);
  height:48px;padding:0 var(--space-5);border:none;border-radius:var(--radius-full);
  background:var(--accent-600);color:#fff;font-weight:600;box-shadow:var(--shadow-lg);
}
.chat-fab:hover{background:var(--accent-700);}
.chat-fab svg{width:18px;height:18px;}
.chat-panel{
  position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:51;
  width:min(380px,calc(100vw - 32px));height:min(540px,80vh);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);display:flex;flex-direction:column;overflow:hidden;
  animation:popin .18s cubic-bezier(.16,1,.3,1);
}
@keyframes popin{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);font-weight:600;background:var(--gray-50);}
.chat-close{border:none;background:transparent;color:var(--gray-400);font-size:18px;width:28px;height:28px;border-radius:var(--radius-sm);}
.chat-close:hover{background:var(--gray-200);color:var(--gray-900);}
.chat{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2);}
.bubble{max-width:85%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.45;white-space:pre-wrap;}
.bubble.user{align-self:flex-end;background:var(--accent-600);color:#fff;border-bottom-right-radius:var(--radius-sm);}
.bubble.ai{align-self:flex-start;background:var(--gray-100);color:var(--gray-800);border-bottom-left-radius:var(--radius-sm);}
.bubble.seed{background:var(--accent-50);color:var(--accent-700);}
.bubble.typing{color:var(--gray-400);}
.composer{display:flex;gap:var(--space-2);padding:var(--space-3);border-top:1px solid var(--border);}
.composer input{flex:1;height:40px;border:1px solid var(--border);border-radius:var(--radius-md);padding:0 var(--space-3);font-size:var(--text-sm);}
.composer input:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring);}
.composer button{width:40px;height:40px;border:none;border-radius:var(--radius-md);background:var(--accent-600);color:#fff;font-size:16px;}
.composer button:hover{background:var(--accent-700);}

.ios-install{position:fixed;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:55;background:var(--gray-900);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);box-shadow:var(--shadow-lg);}
.ios-install .dismiss{float:right;cursor:pointer;color:var(--gray-400);margin-left:var(--space-3);}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
.scrim-nav{display:none;}
@media (max-width:900px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:var(--shadow-xl);
  }
  body.nav-open .sidebar{transform:translateX(0);}
  body.nav-open .scrim-nav{display:block;position:fixed;inset:0;background:rgb(17 24 39/.45);z-index:39;}
  .hamburger{display:flex;}
  .content{padding:var(--space-4);}
}
@media (max-width:640px){
  .topbar{padding:calc(var(--space-3) + env(safe-area-inset-top,0px))
                  max(var(--space-3),env(safe-area-inset-right,0px))
                  var(--space-3)
                  max(var(--space-3),env(safe-area-inset-left,0px));}
  /* On a phone the empty spacer + search both grabbing flex crammed the row;
     drop the spacer so search fills and the right-side actions sit at the end. */
  .topbar-spacer{display:none;}
  .search{max-width:none;}
  .viewas-label{display:none;}
  .user-name{display:none;}
  .content{padding:var(--space-3);}
  .page-title{font-size:var(--text-xl);}
  /* table → cards */
  table.jobs thead{display:none;}
  table.jobs,table.jobs tbody,table.jobs tr,table.jobs td{display:block;width:100%;}
  table.jobs tbody tr{
    border:1px solid var(--border);border-radius:var(--radius-md);
    margin-bottom:var(--space-2);padding:var(--space-2);box-shadow:var(--shadow-xs);
  }
  table.jobs tbody td{border:none;padding:var(--space-1) var(--space-2);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);}
  table.jobs tbody td.num{text-align:left;}
  table.jobs td[data-th]::before{content:attr(data-th);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-400);font-weight:600;}
  table.jobs td.cell-job-wrap::before{display:none;}
  .cell-job{width:100%;}
  .drawer{width:100vw;}
  .focus-card{flex-basis:240px;}
}

/* ============================================================================
   SECTION NAV — show/hide one section at a time
   ============================================================================ */
.content > section{display:block;}

/* ============================================================================
   CLICKABLE KPI TILES
   ============================================================================ */
.kpi-click{cursor:pointer;transition:box-shadow .12s,transform .06s,border-color .12s;}
.kpi-click:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.kpi-click:focus-visible{outline:2px solid var(--ring);outline-offset:2px;}

/* ============================================================================
   SORTABLE TABLE HEADERS
   ============================================================================ */
table.jobs thead th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
table.jobs thead th.sortable:hover{color:var(--gray-600);}
table.jobs thead th .caret{display:inline-block;width:0;height:0;margin-left:5px;vertical-align:middle;opacity:0;}
table.jobs thead th.sort-asc .caret{opacity:1;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;}
table.jobs thead th.sort-desc .caret{opacity:1;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;}
table.jobs thead th.sort-asc,table.jobs thead th.sort-desc{color:var(--accent-600);}

/* ============================================================================
   FILTER CHIP (active Jobs filter)
   ============================================================================ */
.filter-chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:32px;padding:0 var(--space-2) 0 var(--space-3);
  background:var(--accent-50);color:var(--accent-700);
  border:1px solid #f6d4da;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;
}
.filter-chip button{
  border:none;background:transparent;color:var(--accent-700);
  width:20px;height:20px;border-radius:var(--radius-full);
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
}
.filter-chip button:hover{background:#f6d4da;}

/* ============================================================================
   CUSTOMERS TABLE
   ============================================================================ */
.customers-table tbody td .c-name{font-weight:600;color:var(--gray-900);}
.customers-table tbody td.cell-ar.pos{color:var(--accent-600);font-weight:600;}

/* ============================================================================
   REPORTS — CSS bar lists
   ============================================================================ */
.bars{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);
}
.bar-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr auto;align-items:center;gap:var(--space-3);}
.bar-label{font-size:var(--text-sm);color:var(--gray-700);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{position:relative;height:10px;background:var(--gray-100);border-radius:var(--radius-full);overflow:hidden;}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-500);border-radius:var(--radius-full);min-width:2px;transition:width .3s ease;}
.bar-fill.alt{background:var(--gray-400);}
.bar-val{font-size:var(--text-sm);font-weight:600;color:var(--gray-800);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;}
@media (max-width:640px){
  .bar-row{grid-template-columns:1fr;gap:var(--space-1);}
  .bar-row .bar-val{text-align:left;}
}

/* ============================================================================
   OWNER DASHBOARD — QuickBooks-powered Reports
   ============================================================================ */
.empty-state{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;color:var(--text-muted);}
.rep-kpis{margin-bottom:var(--space-4);}
/* owner watch list — plain-English read of the numbers, attention-first */
.rep-watch{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:var(--space-4);margin-bottom:var(--space-4);}
.rep-watch-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3);gap:var(--space-3);}
.rep-watch-head h2{font-size:var(--text-base);font-weight:600;margin:0;letter-spacing:-.01em;}
.watch-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);}
.watch-item{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--gray-50);}
.watch-item.bad{border-color:var(--danger-bd);background:var(--danger-bg);}
.watch-item.warn{border-color:var(--warning-bd);background:var(--warning-bg);}
.watch-item.good{border-color:var(--success-bd);background:var(--success-bg);}
.watch-dot{flex:0 0 8px;width:8px;height:8px;border-radius:var(--radius-full);margin-top:6px;background:var(--text-muted);}
.watch-item.bad .watch-dot{background:var(--danger-fg);}
.watch-item.warn .watch-dot{background:var(--warning-fg);}
.watch-item.good .watch-dot{background:var(--success-fg);}
.watch-head{font-weight:600;font-size:var(--text-sm);color:var(--gray-900);margin-bottom:2px;}
.watch-detail{font-size:var(--text-xs);color:var(--gray-700);line-height:1.5;}
.kpi-bad{border-color:var(--danger-bd);background:linear-gradient(180deg,var(--danger-bg),var(--surface) 60%);}
.kpi-bad .kpi-num{color:var(--danger-fg);}
.kpi-good .kpi-num{color:var(--success-fg);}
.rep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
.rep-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:var(--space-4);}
.rep-card.span2{grid-column:1 / -1;}
.rep-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-3);gap:var(--space-3);}
.rep-card-head h2{font-size:var(--text-base);font-weight:600;margin:0;letter-spacing:-.01em;}
.rep-note{color:var(--text-muted);font-size:var(--text-xs);font-weight:500;white-space:nowrap;}
/* nested bar lists sit inside a card already, so flatten their own box */
.rep-card .bars{background:none;border:0;box-shadow:none;padding:0;}
.bar-fill.danger{background:var(--danger-fg);}
/* monthly revenue/net columns */
.trend{display:flex;align-items:flex-end;gap:var(--space-3);height:200px;padding-top:var(--space-2);}
.trend-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;}
.trend-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0;}
.trend-bar{width:60%;max-width:46px;background:var(--accent-500);border-radius:var(--radius-sm) var(--radius-sm) 0 0;min-height:2px;transition:height .3s ease;}
.trend-net{font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums;margin-top:var(--space-2);}
.trend-net.neg{color:var(--danger-fg);}
.trend-net.pos{color:var(--success-fg);}
.trend-mon{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
/* cash flow walk */
.wfall{display:flex;flex-direction:column;gap:var(--space-2);}
.wfall-row{display:flex;justify-content:space-between;font-size:var(--text-sm);font-variant-numeric:tabular-nums;}
.wfall-row span:first-child{color:var(--gray-700);}
.wfall-row span:last-child{font-weight:600;color:var(--gray-800);}
.wfall-row.delta{padding-left:var(--space-3);}
.wfall-row.delta span:first-child{color:var(--text-muted);}
.wfall-row .neg{color:var(--danger-fg);}
.wfall-row.total{border-top:1px solid var(--border);margin-top:var(--space-1);padding-top:var(--space-2);}
.wfall-row.total span{font-weight:700;}
/* P&L / balance-sheet key-value lists */
.kvs{display:flex;flex-direction:column;gap:var(--space-2);}
.kv{display:flex;justify-content:space-between;font-size:var(--text-sm);font-variant-numeric:tabular-nums;}
.kv span:first-child{color:var(--gray-700);}
.kv span:last-child{font-weight:600;color:var(--gray-800);}
.kv.neg span:last-child{color:var(--danger-fg);}
.kv.sub{border-top:1px dashed var(--border);padding-top:var(--space-2);}
.kv.sub span{font-weight:700;}
.kv.total{border-top:1px solid var(--border);margin-top:var(--space-1);padding-top:var(--space-2);}
.kv.total span{font-weight:700;font-size:var(--text-base);}
.rep-foot{margin-top:var(--space-4);color:var(--text-muted);font-size:var(--text-xs);}
.rep-foot code{background:var(--gray-100);padding:1px 5px;border-radius:var(--radius-sm);font-size:.92em;}
@media (max-width:760px){.rep-grid{grid-template-columns:1fr;}}

/* ============================================================================
   SCHEDULING CALENDAR (Schedule section)
   ============================================================================ */
.sched-controls{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.sched-weeknav{display:inline-flex;gap:var(--space-2);}
.sched-range{font-size:var(--text-base);font-weight:600;color:var(--gray-800);margin-bottom:var(--space-3);letter-spacing:-.01em;}
.sched-readonly{
  font-size:var(--text-xs);color:var(--info-fg);background:var(--info-bg);
  border:1px solid var(--info-bd);border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);margin-bottom:var(--space-3);
}
.sched-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs);}

/* Grid: a sticky "person" column + 7 day columns. */
.sched-grid{display:grid;grid-template-columns:160px repeat(7,minmax(120px,1fr));min-width:760px;}
.sched-cell{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:var(--space-2);min-height:54px;}

/* Header row */
.sched-corner{background:var(--gray-50);position:sticky;left:0;z-index:3;}
.sched-dayhead{background:var(--gray-50);text-align:center;}
.sched-dayhead .dow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);font-weight:600;}
.sched-dayhead .dnum{font-size:var(--text-lg);font-weight:700;color:var(--gray-900);line-height:1.1;}
.sched-dayhead.today{background:var(--accent-50);}
.sched-dayhead.today .dnum{color:var(--accent-700);}
.sched-dayhead.weekend{background:var(--gray-100);}

/* Person (row label) cell — sticky on horizontal scroll */
.sched-person{
  position:sticky;left:0;z-index:2;background:var(--surface);
  display:flex;align-items:center;font-weight:600;color:var(--gray-800);
  font-size:var(--text-sm);
}
.sched-row-me .sched-person{background:var(--accent-50);color:var(--accent-700);}
.sched-row-me .sched-daycell{background:color-mix(in srgb,var(--accent-50) 35%,transparent);}

/* Day cells (assignable) */
.sched-daycell{display:flex;flex-direction:column;gap:4px;align-content:flex-start;}
.sched-daycell.today{background:color-mix(in srgb,var(--accent-50) 55%,transparent);}
.sched-daycell.weekend{background:var(--gray-50);}
.sched-daycell.clickable{cursor:pointer;transition:background .1s;}
.sched-daycell.clickable:hover{background:var(--accent-50);}

/* Assignment chips */
.sched-chip{
  display:flex;align-items:flex-start;gap:4px;
  background:var(--success-bg);border:1px solid var(--success-bd);
  border-radius:var(--radius-sm);padding:4px 6px;
  font-size:var(--text-xs);color:var(--gray-800);text-align:left;line-height:1.3;
}
.sched-chip .chip-task{font-weight:600;}
.sched-chip .chip-job{display:block;color:var(--gray-500);font-weight:500;}
.sched-chip-body{flex:1;min-width:0;border:none;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;}
.sched-chip-del{
  border:none;background:transparent;color:var(--gray-400);
  width:16px;height:16px;line-height:1;border-radius:var(--radius-full);
  font-size:13px;flex:0 0 16px;padding:0;
}
.sched-chip-del:hover{background:var(--danger-bd);color:var(--danger-fg);}
.sched-empty-hint{color:var(--gray-300);font-size:18px;line-height:1;align-self:center;margin:auto;pointer-events:none;}

/* ============================================================================
   MODAL (Assign work) — reuses drawer scrim look
   ============================================================================ */
.modal-scrim{position:fixed;inset:0;background:rgb(17 24 39/.45);z-index:70;animation:fade .15s ease;}
.modal{
  position:fixed;z-index:71;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;
  background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);
  animation:modalin .18s cubic-bezier(.16,1,.3,1);
}
@keyframes modalin{from{transform:translate(-50%,-46%);opacity:0;}to{transform:translate(-50%,-50%);opacity:1;}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);}
.modal-head h2{font-size:var(--text-lg);font-weight:700;margin:0;letter-spacing:-.01em;}
.modal-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);}
.modal-field{display:flex;flex-direction:column;gap:var(--space-2);}
.modal-field > span{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);}
.modal-field > span em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--gray-400);font-weight:500;}
.modal-field select,.modal-field input{
  height:40px;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:0 var(--space-3);background:var(--surface);font-size:var(--text-sm);
  color:var(--text);font-family:inherit;width:100%;
}
.modal-field select:focus,.modal-field input:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--ring);}
.modal-msg{font-size:var(--text-xs);color:var(--danger-fg);min-height:1em;}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-2);}

@media (max-width:640px){
  /* Phone: the week grid stays a grid but scrolls horizontally inside its
     bordered container, so each day column is still tappable on a phone. */
  .sched-grid{grid-template-columns:120px repeat(7,minmax(108px,1fr));min-width:880px;}
  .sched-controls{width:100%;}
  .sched-assign-mobile{margin-left:auto;}
}

/* ============================================================================
   JOB PAGE — the full, shareable "bible" view (/job/<name>)
   ============================================================================ */
.jobpage{min-height:100vh;background:var(--bg);}
.jobtop{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-5);
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
.jobtop .back{font-size:var(--text-sm);font-weight:600;color:var(--accent-600);text-decoration:none;white-space:nowrap;}
.jobtop .back:hover{text-decoration:underline;}
.jobtop-brand{display:flex;align-items:center;text-decoration:none;}
.jobtop-brand img{height:26px;width:auto;display:block;}
.jobtop-right{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);}
.jobwrap{max-width:1100px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-8);}
.job-head{margin-bottom:var(--space-4);}
.job-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--space-2);}
.job-headmeta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.job-ar{font-weight:700;color:var(--accent-700);font-variant-numeric:tabular-nums;}
.job-status{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);}
.job-status-src{font-size:var(--text-sm);color:var(--text-muted);}
.job-status-set{font-size:var(--text-sm);font-weight:600;display:flex;align-items:center;gap:var(--space-2);}
.job-status-set select{font:inherit;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);}
.job-status-msg{font-size:var(--text-xs);color:var(--text-muted);}
.job-tools{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5);}
.job-tools .d-tool{flex:1 1 240px;}
.job-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--space-5);align-items:start;}
.job-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);padding:var(--space-4);margin-bottom:var(--space-4);}
.job-block-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);}
.job-block-head h2{font-size:var(--text-base);font-weight:600;margin:0;letter-spacing:-.01em;}
.job-summary{font-size:var(--text-sm);color:var(--gray-700);line-height:1.5;}
.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
.doc-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--text-sm);}
.doc-list a{color:var(--accent-700);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-list a:hover{text-decoration:underline;}
.doc-date{color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap;}
@media (max-width:820px){
  .job-grid{grid-template-columns:1fr;}
  .jobwrap{padding:var(--space-5) var(--space-4) var(--space-8);}
  .jobtop{padding:var(--space-3) var(--space-4);}
}

/* ============================================================================
   FIELD-CREW HOME — mobile-first (field.html)
   ============================================================================ */
.field{min-height:100vh;background:var(--bg);}
.field-top{display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--space-3) + env(safe-area-inset-top,0px))
          max(var(--space-4),env(safe-area-inset-right,0px))
          var(--space-3)
          max(var(--space-4),env(safe-area-inset-left,0px));
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;}
.field-top .jobtop-brand img{height:26px;}
.field-wrap{max-width:640px;margin:0 auto;padding:var(--space-4) var(--space-4) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-5);}
.field-hello h1{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin:0;}
.field-hello p{color:var(--text-muted);margin:var(--space-1) 0 0;}
.field-h{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gray-500);margin-bottom:var(--space-3);}
.field-h .muted{text-transform:none;letter-spacing:0;font-weight:500;color:var(--gray-400);margin-left:6px;}
.muted{color:var(--text-muted);font-size:var(--text-xs);}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);padding:var(--space-4);}
.fcard-eyebrow,.clock-eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--accent-600);font-weight:600;margin-bottom:var(--space-1);}
.fcard-title{font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-2);letter-spacing:-.01em;}
/* clock */
.clock-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);}
.clock-state{font-size:var(--text-lg);font-weight:700;}
.clock-btn{font-size:var(--text-base);padding:12px 22px;}
/* next stop + schedule */
.field-addr{display:inline-block;color:var(--accent-700);text-decoration:none;font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-2);}
.field-addr:hover{text-decoration:underline;}
.field-task{font-size:var(--text-sm);color:var(--gray-700);line-height:1.5;margin:0 0 var(--space-3);}
.nextstop{border-left:3px solid var(--accent-500);}
.sched-list{display:flex;flex-direction:column;gap:var(--space-2);}
.sched-item{display:grid;grid-template-columns:56px 1fr;gap:var(--space-3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);}
.sched-item.is-flag{border-left:3px solid var(--warning-fg);}
.si-time{font-size:var(--text-xs);font-weight:700;color:var(--gray-500);font-variant-numeric:tabular-nums;}
.si-title{font-size:var(--text-sm);font-weight:600;color:var(--gray-900);}
.si-addr{display:inline-block;font-size:var(--text-xs);color:var(--accent-700);text-decoration:none;margin:2px 0;}
.si-task{font-size:var(--text-xs);color:var(--gray-600);line-height:1.45;margin-top:2px;}
.sched-unassigned{margin:var(--space-3) 0;}
.sched-un-head{font-size:var(--text-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--danger-fg);margin-bottom:6px;}
.sched-un-list{display:flex;flex-direction:column;gap:6px;}
.sched-un-item{background:var(--danger-bg);border:1px solid var(--danger-bd);border-radius:var(--radius-md);padding:7px 11px;font-size:var(--text-sm);}
.sched-un-when{color:var(--danger-fg);font-weight:700;font-variant-numeric:tabular-nums;}
.sched-un-title{font-weight:600;color:var(--gray-900);}
.sched-un-job{color:var(--gray-600);font-size:var(--text-xs);}
.ext-link{color:var(--accent-600);font-weight:600;text-decoration:none;white-space:nowrap;}
.ext-link:hover{text-decoration:underline;}
.chip-note{display:block;font-size:var(--text-xs);color:var(--gray-500);margin-top:1px;}
.si-project{font-size:var(--text-xs);color:var(--gray-700);font-weight:600;margin-top:1px;overflow-wrap:anywhere;}
.field-project{font-size:var(--text-sm);color:var(--gray-700);font-weight:600;margin:2px 0 4px;overflow-wrap:anywhere;}
.si-job{display:inline-block;font-size:var(--text-xs);font-weight:600;color:var(--accent-600);text-decoration:none;margin-top:var(--space-2);}
.sched-empty{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);
  padding:var(--space-4);font-size:var(--text-sm);color:var(--gray-600);line-height:1.5;text-align:center;}
/* week strip */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.wday{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-2) 2px;text-align:center;}
.wday.is-today{border-color:var(--accent-500);background:var(--accent-50);}
.wday.is-weekend{background:var(--gray-50);}
.wday-lbl{font-size:10px;text-transform:uppercase;color:var(--gray-400);font-weight:600;}
.wday-num{font-size:var(--text-base);font-weight:700;color:var(--gray-800);}
.wday-cnt{font-size:9px;color:var(--text-muted);margin-top:2px;}
@media(max-width:400px){
  .week-strip{gap:2px;}
  .wday{padding:var(--space-1) 1px;}
  .wday-lbl{font-size:9px;}
  .wday-num{font-size:var(--text-sm);}
  .clock-card{flex-wrap:wrap;gap:var(--space-2);}
  .clock-btn{width:100%;}
}
/* my jobs */
.myjobs{display:flex;flex-direction:column;gap:var(--space-2);}
.myjob{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3);text-decoration:none;}
.myjob:hover{border-color:var(--accent-300,var(--accent-500));box-shadow:var(--shadow-sm);}
.mj-name{font-size:var(--text-sm);font-weight:600;color:var(--gray-900);}
.mj-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;}
/* quick actions */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);}
.qa{display:flex;align-items:center;gap:var(--space-2);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-3);font:inherit;font-size:var(--text-sm);font-weight:600;
  color:var(--gray-800);text-decoration:none;cursor:pointer;text-align:left;}
.qa:hover{border-color:var(--accent-300,var(--accent-500));box-shadow:var(--shadow-sm);}
.qa-ic{font-size:1.15rem;line-height:1;flex:none;}
/* toolbox + announcements */
.tb-points{margin:var(--space-2) 0 var(--space-3);padding-left:var(--space-4);display:flex;flex-direction:column;gap:6px;}
.tb-points li{font-size:var(--text-sm);color:var(--gray-700);line-height:1.45;}
.tb-ack{display:flex;align-items:center;gap:var(--space-3);}
.ann{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-3);margin-bottom:var(--space-2);}
.ann-title{font-size:var(--text-sm);font-weight:600;color:var(--gray-900);}
.ann-body{font-size:var(--text-sm);color:var(--gray-600);margin-top:2px;line-height:1.45;}
.field-viewback{text-align:center;font-size:var(--text-xs);color:var(--text-muted);padding-top:var(--space-2);}
.field-viewback a{color:var(--accent-600);font-weight:600;}
/* daily-log / issue modal */
.fmodal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;z-index:60;}
.fmodal-card{background:var(--surface);width:100%;max-width:520px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow-xl);}
.fmodal-head{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-lg);font-weight:600;}
.fmodal-head button{background:none;border:0;font-size:var(--text-xl);color:var(--gray-400);cursor:pointer;line-height:1;}
.fmodal-lbl{font-size:var(--text-sm);font-weight:600;display:flex;flex-direction:column;gap:6px;}
.fmodal-card select,.fmodal-card textarea{font:inherit;width:100%;padding:10px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);}
.fmodal-issue{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--gray-700);}
@media (min-width:560px){ .fmodal{align-items:center;} .fmodal-card{border-radius:var(--radius-xl);} }

/* punch list */
#punch-add-text{font:inherit;padding:10px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);box-sizing:border-box;}
.punch-counts{font-size:var(--text-xs);color:var(--gray-500);font-weight:500;margin-left:var(--space-2);}
.punch-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) 0;
  border-bottom:1px solid var(--border);}
.punch-item:last-child{border-bottom:0;}
.punch-check{width:24px;height:24px;border:2px solid var(--gray-300);border-radius:50%;
  background:var(--surface);cursor:pointer;flex-shrink:0;font-size:14px;color:var(--gray-100);
  display:flex;align-items:center;justify-content:center;line-height:1;}
.punch-done .punch-check{background:var(--accent-600);border-color:var(--accent-600);color:#fff;}
/* 360px overflow guard (applies to every punch-item list — incl. the job page field crews
   open on a phone): flex children default to min-width:auto, so a long unbreakable token /
   job slug refuses to shrink and forces a horizontal scrollbar. min-width:0 lets it shrink;
   overflow-wrap breaks the token. */
.punch-text{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--text-sm);line-height:1.5;}
.punch-done .punch-text{text-decoration:line-through;color:var(--gray-400);}
.punch-meta{font-size:var(--text-xs);color:var(--gray-400);white-space:nowrap;}
.todo-overdue{color:var(--accent-600);font-weight:600;}
/* field "My to-dos" + "My schedule": the .punch-meta carries the job-name link (a long,
   unbreakable slug), so on a phone let it wrap AND break long tokens. min-width:0 comes from
   the base .punch-text guard above; overflow-wrap here covers the wrapped meta. */
#field-todos .punch-meta,#field-sched .punch-meta{white-space:normal;overflow-wrap:anywhere;min-width:0;}
#field-todos .si-job,#field-sched .si-job{margin:0;}
#field-sched .sched-critical{color:#b81d23;font-weight:600;}

/* warranty */
.warranty-card{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3);}
.warranty-row{display:flex;justify-content:space-between;font-size:var(--text-sm);}
.warranty-row span{color:var(--gray-500);}
.warranty-notes{font-size:var(--text-sm);color:var(--gray-700);margin-top:4px;}
.warranty-subhead{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--gray-500);font-weight:600;margin:var(--space-2) 0;}

/* per-job messaging thread */
#msg-thread{display:flex;flex-direction:column;gap:var(--space-2);max-height:340px;overflow-y:auto;}
.msg-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);background:var(--surface);}
.msg-head{display:flex;justify-content:space-between;gap:var(--space-2);align-items:baseline;margin-bottom:2px;flex-wrap:wrap;}
.msg-who{font-size:var(--text-xs);font-weight:600;color:var(--gray-700);}
.msg-when{font-size:var(--text-xs);color:var(--gray-400);}
.msg-text{font-size:var(--text-sm);line-height:1.5;color:var(--text);overflow-wrap:anywhere;}
.msg-compose{display:flex;gap:6px;align-items:flex-end;margin-top:var(--space-3);}
.msg-compose textarea{flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text);font-size:var(--text-sm);font-family:inherit;
  padding:var(--space-2) var(--space-3);resize:vertical;}
.msg-compose .btn{flex:0 0 auto;}

/* RFIs — per-job Requests For Information */
#rfi-list{display:flex;flex-direction:column;gap:var(--space-2);}
.rfi-item{border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);background:var(--surface);}
.rfi-open{border-left-color:var(--warning,#d97706);}
.rfi-answered{border-left-color:var(--info,#2563eb);}
.rfi-closed{border-left-color:var(--gray-400);opacity:.85;}
.rfi-head{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:2px;}
.rfi-num{font-size:var(--text-xs);font-weight:700;color:var(--gray-700);}
.rfi-badge{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  padding:1px 8px;border-radius:999px;}
.rfi-badge-open{background:#fef3c7;color:#92400e;}
.rfi-badge-answered{background:#dbeafe;color:#1e40af;}
.rfi-badge-closed{background:var(--gray-100,#f3f4f6);color:var(--gray-600,#4b5563);}
.rfi-need-by{font-size:var(--text-xs);color:var(--warning,#d97706);margin-left:auto;}
.rfi-subject{font-size:var(--text-sm);font-weight:600;color:var(--text);overflow-wrap:anywhere;}
.rfi-question,.rfi-sugg{font-size:var(--text-sm);line-height:1.5;color:var(--text);overflow-wrap:anywhere;margin-top:2px;}
.rfi-ref{font-size:var(--text-xs);color:var(--gray-500);margin-top:2px;overflow-wrap:anywhere;}
.rfi-answer{margin-top:var(--space-2);padding:var(--space-2);border-radius:var(--radius-md);
  background:var(--gray-50,#f9fafb);font-size:var(--text-sm);overflow-wrap:anywhere;}
.rfi-meta{font-size:var(--text-xs);color:var(--gray-400);margin-top:4px;}
.rfi-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--space-2);}
.rfi-add{margin-top:var(--space-3);}
.rfi-add summary{cursor:pointer;font-size:var(--text-sm);font-weight:600;color:var(--accent,#2563eb);}
.rfi-add-body{display:flex;flex-direction:column;gap:6px;margin-top:var(--space-2);}
.rfi-add-body input,.rfi-add-body textarea{width:100%;min-width:0;box-sizing:border-box;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);
  font-size:var(--text-sm);font-family:inherit;padding:var(--space-2) var(--space-3);resize:vertical;}
.rfi-need{font-size:var(--text-xs);color:var(--gray-600);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rfi-add-body .btn{align-self:flex-start;}
/* full-width selects in the New-RFI / New-submittal form (date+select labels) */
.rfi-add-body select{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);color:var(--text);
  font-size:var(--text-sm);font-family:inherit;padding:var(--space-2) var(--space-3);}
.rfi-need select{flex:1 1 auto;}

/* Submittals register — per-job (reuses .rfi-item / .rfi-badge base styling) */
.sub-spec{font-size:var(--text-xs);font-weight:600;color:var(--gray-500);overflow-wrap:anywhere;}
.sub-ball{font-size:var(--text-xs);font-weight:600;color:var(--gray-600);
  background:var(--gray-100,#f3f4f6);border-radius:var(--radius-sm,4px);padding:1px 6px;}
.sub-pending{border-left-color:var(--warning,#d97706);}
.sub-revise-resubmit{border-left-color:#dc2626;}
.sub-approved,.sub-approved-as-noted{border-left-color:var(--success,#16a34a);}
.sub-rejected{border-left-color:var(--gray-500);opacity:.85;}
.sub-badge-pending{background:#fef3c7;color:#92400e;}
.sub-badge-approved,.sub-badge-approved-as-noted{background:#dcfce7;color:#166534;}
.sub-badge-revise-resubmit{background:#fee2e2;color:#991b1b;}
.sub-badge-rejected{background:var(--gray-100,#f3f4f6);color:var(--gray-600,#4b5563);}
.sub-review{align-items:center;}
.sub-review label{font-size:var(--text-xs);color:var(--gray-600);display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.sub-review select{font-size:var(--text-xs);padding:2px 4px;min-width:0;max-width:100%;
  border:1px solid var(--border);border-radius:var(--radius-sm,4px);background:var(--surface);color:var(--text);}

/* Ensure the hidden attribute always wins over component display rules */
[hidden]{display:none !important}

/* --- Schedule Gantt (office job page only; D-002 step-3) --- */
#job-gantt{overflow-x:auto;max-width:100%;}
.gantt .bar-critical .bar{fill:#e5484d;}
.gantt .bar-critical .bar-progress{fill:#b81d23;}
.sched-summary{cursor:pointer;font-weight:600;color:var(--accent);}
.sched-wrap{margin-top:var(--space-3);}
.sched-warn{color:#b81d23;font-size:var(--text-sm);margin:var(--space-2) 0;}
.sched-unsched-title{font-weight:600;margin:var(--space-3) 0 var(--space-2);}
.sched-unsched-row{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid var(--border);font-size:var(--text-sm);}
.sched-unsched-why{color:var(--text-muted);}

/* ============================================================
   Standalone pages: Playbook + Roadmap header & content.
   Restored 2026-06-17 — these classes were missing from app.css,
   so both pages rendered as unstyled walls of text + a giant logo.
   The office shell uses a sidebar (not these), so this is additive.
   ============================================================ */
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--text);}
.brand-logo{height:30px;width:auto;display:block;}
/* The logo/brand is a link home on every page — kill link styling, keep the layout. */
.brand-home{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:inherit;cursor:pointer;}
.nav-link{font-size:var(--text-sm);font-weight:600;color:var(--gray-600);text-decoration:none;padding:6px 10px;border-radius:var(--radius-md);}
.nav-link:hover{background:var(--gray-100);color:var(--text);}
.logout{font-size:var(--text-sm);color:var(--text-muted);text-decoration:none;}
.logout:hover{color:var(--accent-600);}
.hello{font-size:var(--text-sm);color:var(--text-muted);}

/* ---- Playbook ---- */
.playbook{max-width:820px;margin:0 auto;padding:var(--space-6) var(--space-5) 64px;}
.pb-head{margin-bottom:var(--space-5);}
.pb-head h1{font-size:var(--text-3xl);font-weight:700;letter-spacing:-.02em;margin:0 0 var(--space-2);}
.pb-sub{color:var(--text-muted);font-size:var(--text-sm);margin:0;}
.pb-sub a{color:var(--accent-600);text-decoration:none;}
.pb-body{color:var(--gray-700);line-height:1.65;}
.pb-h{font-weight:700;color:var(--text);letter-spacing:-.01em;}
.pb-h1{font-size:var(--text-2xl);margin:var(--space-6) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border);}
.pb-h2{font-size:var(--text-xl);margin:var(--space-5) 0 var(--space-2);}
.pb-h3{font-size:var(--text-lg);margin:var(--space-4) 0 var(--space-2);}
.pb-p{margin:0 0 var(--space-3);}
.pb-li{position:relative;margin:0 0 var(--space-2) var(--space-4);}
.pb-li::before{content:"";position:absolute;left:calc(-1 * var(--space-4));top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent-500);}
.pb-empty{color:var(--text-muted);padding:var(--space-5);background:var(--gray-50);border:1px solid var(--border);border-radius:var(--radius-lg);}
.pb-table-wrap{overflow-x:auto;margin:var(--space-3) 0 var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);}
.pb-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);}
.pb-table th,.pb-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;}
.pb-table th{background:var(--gray-50);font-weight:600;color:var(--gray-700);white-space:nowrap;}
.pb-table tr:last-child td{border-bottom:none;}

/* ---- Roadmap (kanban — wrapping grid, never a sideways scroller) ---- */
.welcome{max-width:1180px;margin:0 auto;padding:var(--space-5) var(--space-5) 0;}
.welcome-greet{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;}
.welcome-sub{color:var(--text-muted);font-size:var(--text-sm);margin-top:4px;}
.kanban{max-width:1180px;margin:var(--space-4) auto;padding:0 var(--space-5) 64px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--space-4);align-items:start;}
.kcol{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);overflow:hidden;}
.kcol-head{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);border-top:3px solid var(--border);}
.kdot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;}
.kcol-title{font-weight:700;font-size:var(--text-sm);flex:1;}
.kcol-count{font-size:var(--text-xs);font-weight:600;color:var(--text-muted);background:var(--gray-100);border-radius:var(--radius-full);padding:2px 8px;}
.kcol-blurb{font-size:var(--text-xs);color:var(--text-muted);padding:0 var(--space-3) var(--space-3);line-height:1.5;}
.kcards{display:flex;flex-direction:column;gap:var(--space-2);padding:0 var(--space-3) var(--space-3);}
.kcard{background:var(--gray-50);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius-md);padding:var(--space-3);}
.kcard-title{font-weight:600;font-size:var(--text-sm);color:var(--text);}
.kcard-note{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px;line-height:1.5;}
.brainline{max-width:1180px;margin:0 auto;padding:var(--space-4) var(--space-5) 64px;color:var(--text-muted);font-size:var(--text-xs);}
.brainline code{background:var(--gray-100);border-radius:4px;padding:1px 5px;}

/* ---- Change Orders (Phase B Module 04, office-only job-page section) ---- */
.co-rollup{margin:var(--space-2) 0 var(--space-3);}
.co-roll-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2);}
.co-roll-cell{background:var(--gray-50);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);display:flex;flex-direction:column;gap:2px;}
.co-roll-v{font-size:var(--text-lg);font-weight:700;color:var(--text);}
.co-roll-v.co-up{color:var(--success-fg);}
.co-roll-v.co-down{color:var(--danger-fg);}
.co-roll-k{font-size:var(--text-xs);color:var(--text-muted);}
.co-form{background:var(--gray-50);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);}
.co-form-row{display:flex;gap:var(--space-3);flex-wrap:wrap;}
.co-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--text-sm);font-weight:600;flex:1;min-width:140px;}
.co-form input,.co-form select,.co-form textarea{padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-weight:400;}
.co-actions{display:flex;align-items:center;gap:var(--space-3);}
.co-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3);margin-bottom:var(--space-2);border-left:3px solid var(--gray-300);}
.co-item.co-st-approved{border-left-color:var(--success-fg);}
.co-item.co-st-rejected{border-left-color:var(--danger-fg);}
.co-item.co-st-submitted,.co-item.co-st-pending{border-left-color:var(--warning-fg);}
.co-item-top{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.co-id{font-weight:700;font-size:var(--text-sm);}
.co-kind{font-size:var(--text-xs);color:var(--text-muted);}
.co-amt{margin-left:auto;font-weight:700;}
.co-amt.co-down{color:var(--danger-fg);}
.co-badge{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 7px;border-radius:var(--radius-full);background:var(--neutral-bg);color:var(--neutral-fg);}
.co-b-approved{background:var(--success-bg);color:var(--success-fg);}
.co-b-rejected{background:var(--danger-bg);color:var(--danger-fg);}
.co-b-submitted,.co-b-pending{background:var(--warning-bg);color:var(--warning-fg);}
.co-title{font-size:var(--text-sm);color:var(--gray-700);margin:4px 0;}
.co-acts{display:flex;gap:6px;flex-wrap:wrap;}


/* ---- 02a-budget ---- */
/* Module 02a — per-job budget input */
.budget-cta { background: var(--warn-bg, #fff8e1); border: 1px solid var(--warn-border, #f0d27a);
  border-radius: var(--radius, 8px); padding: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); }
.budget-form { background: var(--surface-2, #f7f7f8); border: 1px solid var(--border, #e2e2e6);
  border-radius: var(--radius, 8px); padding: var(--space-3, 12px); margin-bottom: var(--space-3, 12px); }
.budget-form-row { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.budget-form-row label, .budget-form label { display: flex; flex-direction: column; gap: 4px;
  flex: 1 1 220px; font-size: 0.9rem; }
.budget-form input { width: 100%; box-sizing: border-box; }
.budget-req { color: var(--accent, #2b6cb0); font-size: 0.8rem; }
.budget-codes-head { display: flex; align-items: center; justify-content: space-between;
  margin: var(--space-3, 12px) 0 var(--space-2, 8px); gap: var(--space-2, 8px); }
.budget-code-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) auto;
  gap: var(--space-2, 8px); margin-bottom: var(--space-2, 8px); align-items: center; }
.budget-code-row input { width: 100%; box-sizing: border-box; }
.budget-warn { background: var(--warn-bg, #fff8e1); border: 1px solid var(--warn-border, #f0d27a);
  color: var(--warn-text, #7a5c00); border-radius: var(--radius, 8px); padding: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px); font-size: 0.85rem; }
.budget-actions { display: flex; align-items: center; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.budget-figs { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); margin-bottom: var(--space-2, 8px); }
.budget-fig { display: flex; flex-direction: column; min-width: 140px; }
.budget-fig span { font-size: 0.8rem; color: var(--text-muted, #6b6b72); }
.budget-codes-tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.budget-codes-tbl th, .budget-codes-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border, #e2e2e6); }
.budget-codes-tbl .ta-r, .budget-fig .ta-r { text-align: right; }
.budget-meta { margin-top: var(--space-2, 8px); font-size: 0.8rem; }
@media (max-width: 480px) {
  .budget-code-row { grid-template-columns: 1fr 1fr; }
  .budget-code-row .bc-name { grid-column: 1 / -1; }
}

/* ---- AI job summary (right column) ---- */
.job-ai-summary{font-size:var(--text-sm);line-height:1.6;color:var(--gray-700);}
.job-ai-summary .d-muted{font-style:italic;}


/* ---- rfi/submittal attachments ---- */
/* RFI / Submittal attachments — chips + "+ Attach" control. Mobile-safe
   (360–390px): chips wrap, long filenames break, file label full-width.
   Mirrors the proven .rfi-* / .sub-* conventions. */
.att-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 100%; }
.att-chip {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; background: var(--surface-2, #f1f3f5);
  border: 1px solid var(--border, #d7dbe0); border-radius: 14px;
  padding: 2px 6px 2px 8px; font-size: 0.82rem; line-height: 1.3;
}
.att-link { display: inline-flex; align-items: center; gap: 5px; min-width: 0; text-decoration: none; color: var(--link, #2563eb); }
.att-link.att-nolink { color: var(--text-muted, #6b7280); cursor: default; }
.att-name { overflow-wrap: anywhere; word-break: break-word; }
.att-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.att-x {
  border: none; background: transparent; color: var(--text-muted, #6b7280);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; flex: 0 0 auto;
}
.att-x:hover { color: var(--danger, #dc2626); }
.att-add { cursor: pointer; flex: 0 0 auto; }
.att-status { font-size: 0.8rem; flex: 0 0 auto; }
.att-full { font-size: 0.8rem; }
@media (max-width: 420px) {
  .att-add { flex: 1 1 100%; min-width: 0; box-sizing: border-box; text-align: center; }
}


/* ---- 03-committed-costs ---- */
/* Committed costs & budget-vs-actual panel (Phase B Module 03). Append to
   static/app.css. Uses existing tokens (--space-*, --color-*, --radius). No
   sideways scroll at 360px — card-per-code. */
#job-committed .cc-summary { cursor: pointer; font-weight: 600; padding: var(--space-2) 0; }
#job-committed .cc-attention {
  background: var(--color-warn-bg, #fff7ed); border: 1px solid var(--color-warn, #f59e0b);
  border-radius: var(--radius, 8px); padding: var(--space-3); margin: var(--space-2) 0;
}
#job-committed .cc-attention ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
#job-committed .cc-empty { color: var(--color-muted, #6b7280); padding: var(--space-3); }
#job-committed .cc-totals {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3); background: var(--color-surface-2, #f9fafb);
  border-radius: var(--radius, 8px);
}
#job-committed .cc-totals div { display: flex; flex-direction: column; min-width: 90px; }
#job-committed .cc-totals span { font-size: 0.75rem; color: var(--color-muted, #6b7280); }
#job-committed .cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); }
#job-committed .cc-card { border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius, 8px); padding: var(--space-2) var(--space-3); }
#job-committed .cc-card-h { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
#job-committed .cc-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); font-size: 0.85rem; }
#job-committed .cc-grid span:nth-child(odd) { color: var(--color-muted, #6b7280); }
#job-committed .cc-grid span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
#job-committed .cc-over { color: var(--color-danger, #dc2626); font-weight: 600; }
#job-committed .cc-under { color: var(--color-success, #059669); }
#job-committed .cc-uncoded { border-color: var(--color-warn, #f59e0b); background: var(--color-warn-bg, #fff7ed); }
#job-committed .cc-meta { font-size: 0.75rem; color: var(--color-muted, #6b7280); margin-top: var(--space-1); }
#job-committed .cc-flag { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: var(--color-surface-2, #f3f4f6); white-space: nowrap; }
#job-committed .cc-flag-already-over-budget,
#job-committed .cc-flag-projected-over-budget { background: #fee2e2; color: var(--color-danger, #dc2626); }
#job-committed .cc-map-body { padding: var(--space-2) 0; }
@media (max-width: 380px) {
  #job-committed .cc-cards { grid-template-columns: 1fr; }
  #job-committed .cc-totals { gap: var(--space-2); }
}


/* ---- ar-collections ---- */
/* AR Collections panel (Reports area). Uses the app's existing tokens where
   present; falls back to literal DDS values so it renders standalone too. */
.ar-collections-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 12px);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.ar-collections-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap;
}
.ar-collections-head h3 { margin: 0; font-size: 1.05rem; }
.ar-collections-asof { color: var(--muted, #6b7280); font-size: .82rem; }
.ar-collections-totals {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: .75rem 0;
}
.ar-collections-stat { display: flex; flex-direction: column; }
.ar-collections-stat-k { color: var(--muted, #6b7280); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .03em; }
.ar-collections-stat-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.ar-collections-buckets {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem;
}
.ar-collections-bucket {
  display: inline-flex; gap: .35rem; align-items: baseline;
  background: var(--chip-bg, #f3f4f6); border-radius: 999px;
  padding: .2rem .6rem; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.ar-collections-bucket strong { color: var(--accent, #c41e3a); }
.ar-collections-list { list-style: none; margin: 0; padding: 0; }
.ar-collections-row {
  display: grid; grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border, #e5e7eb);
}
.ar-collections-row:last-child { border-bottom: none; }
.ar-collections-rank { color: var(--muted, #6b7280); font-size: .8rem;
  font-variant-numeric: tabular-nums; }
.ar-collections-name { font-weight: 500; word-break: break-word; }
.ar-collections-amt { font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; }
.ar-collections-row--rest { color: var(--muted, #6b7280); font-style: italic; }
.ar-collections-row--rest .ar-collections-amt { font-style: normal; }
.ar-collections-note { color: var(--muted, #6b7280); font-size: .8rem;
  margin: .6rem 0 0; }
.ar-collections-empty { color: var(--muted, #6b7280); font-size: .85rem;
  margin: .5rem 0 0; }

/* ---- Grouped, collapsible sidebar (shared _sidebar.html) ---- */
.nav-group{display:flex;flex-direction:column;}
.nav-group-h{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:0;cursor:pointer;font:inherit;font-weight:700;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400,#9aa0a6);
  padding:10px 12px 4px;}
.nav-group-h .nav-chev{transition:transform .15s ease;font-size:.65rem;}
.nav-group:not(.open) .nav-chev{transform:rotate(-90deg);}
.nav-group:not(.open) .nav-group-items{display:none;}
.nav-group .nav-item{padding-left:20px;}
.nav-burger{display:none;}
@media (max-width:900px){
  .nav-burger{display:flex;align-items:center;justify-content:center;position:fixed;top:10px;left:10px;
    z-index:50;width:40px;height:40px;border:1px solid var(--border,#e3e6ea);border-radius:10px;
    background:var(--surface,#fff);font-size:1.2rem;cursor:pointer;box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.1));}
  /* The burger is position:fixed at the top-left — reserve its footprint in the
     topbar so it never sits on top of the left-edge back link (e.g. "‹ Jobs" on
     the job page). Scoped to pages that actually render the burger; the dashboard
     uses an in-flow .hamburger and is unaffected. */
  .nav-burger ~ .main .topbar{padding-left:calc(58px + env(safe-area-inset-left,0px));}
}