/* =====================================================================
   bexit Employee Dashboard - Phase 1 layout
   Visual direction: "subtle glass + topography"
   Jarvis-inspired but grounded. Backlit glass, depth, gold as light.
   Selective glow = triage: only cards needing attention glow.
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------- */
:root {
  /* Backgrounds - layered smoky charcoal gray (lifted off pure black) */
  --bg-base:      #101114;
  --bg-deep:      #0a0a0c;
  --panel:        rgba(22, 24, 28, 0.66);
  --panel-solid:  #16181c;
  --panel-inner:  rgba(255, 255, 255, 0.015);

  /* Gold - used as light, not fill */
  --gold:         #4a57ff;
  --gold-bright:  #7b85ff;
  --gold-dim:     #3039b8;
  --gold-line:    rgba(74, 87, 255, 0.55);
  --gold-glow:    rgba(74, 87, 255, 0.40);
  --gold-faint:   rgba(74, 87, 255, 0.14);

  /* Status */
  --green:        #6fb185;
  --green-dim:    rgba(111, 177, 133, 0.65);
  --amber:        #5e69ff;

  /* Text - cool grays / off-white for data */
  --text-hi:      #f1f2f4;
  --text:         #c9ccd2;
  --text-mid:     #9aa0a8;
  --text-dim:     #6b7178;

  /* Structure */
  --hair:         rgba(255, 255, 255, 0.07);
  --hair-soft:    rgba(255, 255, 255, 0.045);
  --radius:       3px;
  --radius-sm:    2px;

  --rail-w:       248px;
  --rail-w-collapsed: 84px;

  --font: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-brand: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg-base);
  /* smoky gray ground (lighter top → deeper bottom) with a warm bottom-left wash */
  background-image:
    radial-gradient(1100px 720px at 8% 98%, rgba(74, 87, 255, 0.13), transparent 60%),
    radial-gradient(1200px 800px at 92% 2%, rgba(150, 160, 178, 0.06), transparent 55%),
    linear-gradient(180deg, #2c2f35 0%, #101114 52%, #1c1e22 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Faint golden glow hugging the screen edges - the ambient "backlit" frame.
   Sits BEHIND the app content (z-index below .app) so the tiles and the
   left rail occlude it: the glow reads as light spilling from behind them
   and diffusing softly through the glass, never washing over their faces. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    inset 0 0 260px 26px rgba(74, 87, 255, 0.22),
    inset 0 0 100px rgba(74, 87, 255, 0.13);
  border: 1px solid rgba(74, 87, 255, 0.28);
}

/* Kingsland, TX topographic quad (recolored to gold) sits above the base
   wash, behind everything. Cropped to the map neatline - no collar/scale. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Two WebP sizes so the map is always scaled DOWN, never up (upscaling
     is what made it blurry on large or high-DPI screens): 1900px for 1x
     displays, 3040px for 2x displays and very wide 1x screens (below).
     The original PNG only for anything too old to understand image-set(). */
  background-image: none;
  background-image: image-set(
    none type("image/webp") 1x,
    none type("image/webp") 2x
  );
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  /* ease the map back toward the center so it never fights the data cards */
  -webkit-mask-image: radial-gradient(135% 135% at 50% 42%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.72) 42%, #000 82%);
          mask-image: radial-gradient(135% 135% at 50% 42%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.72) 42%, #000 82%);
}
/* very wide 1x monitors (2K / 4K at 100%) also get the large map so cover
   never has to stretch the 1900px asset */
@media (min-width: 1900px) {
  body::before { background-image: none; }
}

/* ---------------------------- App shell ----------------------------- */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.28s ease;
}
.app.collapsed { grid-template-columns: var(--rail-w-collapsed) 1fr; }

/* ============================ Left rail ============================= */
.rail {
  position: sticky;
  top: 0;
  z-index: 2;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;               /* the menu outgrew short screens */
  overflow-x: hidden;
  scrollbar-width: thin;
  padding: 30px 20px 22px;
  border-right: 1px solid var(--hair-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    rgba(9, 10, 12, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Logo */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 30px;
}
.brand-stacked { width: 80%; max-width: 176px; height: auto; display: block; }
.brand-icon { width: 40px; height: auto; display: none; }
.app.collapsed .brand-stacked { display: none; }
.app.collapsed .brand-icon { display: block; }
.app.collapsed .brand { padding-bottom: 22px; }

/* Sign-in page */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--panel); border: 1px solid var(--hair); border-top: 4px solid var(--gold);
  border-radius: 18px; padding: 34px 26px; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8);
}
.login-logo { width: 150px; height: auto; margin: 0 auto 18px; display: block; }
.login-h { font-size: 22px; color: var(--text-hi); margin-bottom: 6px; }
.login-sub { font-size: 13.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 22px; }
#loginForm label, #codeForm label { display: block; text-align: left; font-size: 12.5px; color: var(--text-mid); font-weight: 600; margin-bottom: 6px; }
#loginForm input, #codeForm input {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none;
}
#codeForm input { letter-spacing: 6px; text-align: center; font-size: 20px; font-weight: 700; }
#loginForm input:focus, #codeForm input:focus { border-color: var(--gold-line); }
#loginBtn, #codeBtn {
  width: 100%; margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--gold-line);
  background: var(--gold); color: #101114; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
#loginBtn:hover, #codeBtn:hover { background: var(--gold-bright); }
#loginBtn:disabled, #codeBtn:disabled { opacity: .6; cursor: default; }
.login-msg { margin-top: 16px; font-size: 13.5px; line-height: 1.5; min-height: 1em; }
.login-msg.err { color: #e88b86; }
.login-msg.ok { color: #8fd8a2; }
.login-card .site-foot { margin-top: 26px; }

/* Signed-in chip in the topbar */
.auth-chip { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 12px; font-size: 12.5px; color: var(--text-mid); white-space: nowrap; }
.auth-chip .auth-name { color: var(--text-hi); font-weight: 600; }
.auth-chip .auth-out { color: var(--gold-bright); text-decoration: none; border: 1px solid var(--gold-faint); padding: 4px 10px; border-radius: 8px; }
.auth-chip .auth-out:hover { background: rgba(74, 87, 255, 0.12); }

/* Notification bell dropdown + gear link */
a.bell { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.notif-panel {
  position: fixed; top: 74px; right: 18px; z-index: 70;
  width: 340px; max-width: calc(100vw - 24px); max-height: 62vh; overflow-y: auto;
  display: none; background: var(--panel-solid); border: 1px solid var(--hair);
  border-top: 3px solid var(--gold); border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
}
.notif-panel.show { display: block; }
.notif-item { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--hair-soft); text-decoration: none; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: rgba(74, 87, 255, 0.06); }
.notif-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--gold); }
.nd-tasks { background: #78a0e0; }
.nd-daily_logs { background: #8fd8a2; }
.nd-change_orders { background: #5e69ff; }
.nd-selections { background: #d8a0c8; }
.nd-wip { background: #c7b1f0; }
.nd-invoices { background: #a9c8e3; }
.nd-purchase_orders { background: #6470ff; }
.notif-title { display: block; font-size: 13px; color: var(--text-hi); line-height: 1.45; }
.notif-time { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--text-dim); font-size: 13px; }

/* "What's New" update tracker (next to the bell) */
.upd-btn .upd-dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--bg);
}
.upd-panel { width: 380px; }
.upd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--hair);
}
.upd-title { font-size: 13px; font-weight: 700; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .07em; }
.upd-ver { font-size: 12px; font-weight: 700; color: var(--text-mid); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 10px; }
.upd-entry { padding: 13px 16px; border-bottom: 1px solid var(--hair-soft); }
.upd-entry:last-of-type { border-bottom: 0; }
.upd-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.upd-badge {
  font-size: 11px; font-weight: 700; color: #101114; background: var(--gold);
  border-radius: 999px; padding: 2px 9px;
}
.upd-date { font-size: 11px; color: var(--text-dim); }
.upd-entry-title { font-size: 13px; font-weight: 600; color: var(--text-hi); margin-bottom: 6px; line-height: 1.4; }
.upd-list { margin: 0; padding-left: 17px; }
.upd-list li { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; margin-bottom: 5px; }
.upd-list li:last-child { margin-bottom: 0; }
.upd-list li::marker { color: var(--gold); }
.upd-foot { padding: 9px 16px 12px; text-align: center; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--hair-soft); }

/* Settings page */
.set-wrap { max-width: none; }
/* ---- info tips: feature descriptions live behind an (i) you hover (per Dillon: declutter) ----
   Markup: <span class="info" data-tip="text" tabindex="0" role="img" aria-label="text">i</span>
   nav.js positions one shared .gtip bubble on hover / focus / tap. */
.info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold-bright); background: rgba(74, 87, 255, 0.10); font: 700 10px/1 Georgia, "Times New Roman", serif; font-style: italic; margin-left: 6px; vertical-align: 1px; cursor: help; user-select: none; flex: none; text-transform: none; letter-spacing: 0; }
.info:hover, .info:focus-visible, .info.on { background: var(--gold); color: #101114; border-color: var(--gold); outline: none; }
h2 .info, h3 .info, .nc-sec-h .info, .set-lab .info, label .info, .bid-lbl .info { margin-left: 7px; }
.gtip { position: fixed; z-index: 12000; max-width: 340px; padding: 10px 12px; border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--gold-line); color: var(--text); font: 400 12.5px/1.5 Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.85); pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.gtip.show { opacity: 1; }
.gtip b { color: var(--text-hi); }
@media print { .info, .gtip { display: none !important; } }

/* Settings hub + sections (settings.js routes on location.hash) */
.set-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 4px 0 24px; }
.set-tile { position: relative; display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 18px 18px 16px; color: var(--text-mid); min-height: 128px; transition: border-color .15s ease, transform .15s ease; }
.set-tile:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.set-tile .st-ico { font-size: 22px; line-height: 1; }
.set-tile .st-name { font-size: 15px; font-weight: 700; color: var(--text-hi); margin-top: 4px; }
.set-tile .st-sub { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.set-tile .st-badge { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid var(--gold-faint); border-radius: 8px; padding: 2px 7px; }
body.role-admin .set-tile.adminonly { display: flex !important; }
.set-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gold-bright); text-decoration: none; margin: -6px 0 16px; }
.set-back:hover { color: var(--gold); }
/* section view: only the chosen category's cards show; the hub hides */
.set-wrap .set-card.set-off, body.role-admin .set-wrap .set-card.set-off, .set-wrap .sec-banner.set-off { display: none !important; }
.set-wrap[data-view="section"] .set-hub { display: none; }
.set-crumb { color: var(--text-dim); font-weight: 400; }
/* Settings cards and tiles sit near-solid over the topo map so the wording reads (per Dillon) */
.set-card { background: rgba(19, 21, 25, 0.96); border: 1px solid var(--hair); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.set-wrap .set-tile { background: rgba(19, 21, 25, 0.94); }
.set-card h2 { font-size: 13px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 12px; font-weight: 700; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hair-soft); }
.set-row:last-child { border-bottom: 0; }
.set-lab { font-size: 14px; color: var(--text-hi); }
.set-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.set-row input[type=checkbox] { width: 20px; height: 20px; accent-color: #4a57ff; flex: none; cursor: pointer; }
.set-save {
  font: inherit; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--gold-line); background: var(--gold); color: #101114; cursor: pointer; margin-top: 4px;
}
.set-save:hover { background: var(--gold-bright); }
.set-text {
  display: block; width: 100%; box-sizing: border-box; margin: 10px 0 12px; padding: 10px 12px;
  font: inherit; font-size: 13px; line-height: 1.55; color: var(--text); background: rgba(255,255,255,.04);
  border: 1px solid var(--hair); border-radius: 10px; resize: vertical; min-height: 140px;
}
.set-text:focus { outline: none; border-color: var(--gold-line); }
.set-msg { margin-top: 10px; font-size: 13px; min-height: 1em; }
.set-msg.ok { color: #8fd8a2; }
.set-msg.err { color: #e88b86; }

/* Shared site footer (signature + updated-on), consistent across pages */
.site-foot {
  margin-top: 40px; padding: 18px 4px 6px;
  border-top: 1px solid var(--hair-soft);
  text-align: center; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim);
}
.site-foot .foot-sig { color: var(--gold-bright); font-weight: 600; letter-spacing: .01em; }
.site-foot .foot-sep { opacity: .6; }
.site-foot .foot-updated { color: var(--text-mid); }
@media (max-width: 560px) { .site-foot .foot-sep { display: none; } .site-foot .foot-updated { display: block; margin-top: 3px; } }

/* Loading quote under the pulsing logo */
.q-line { max-width: 340px; margin: 6px auto 0; }
.q-text { display: block; font-style: italic; color: var(--text-mid); line-height: 1.5; }
.q-by { display: block; margin-top: 6px; font-size: 12px; color: var(--gold-bright); font-weight: 600; letter-spacing: .02em; }

/* Branded loading indicator (the icon, gently pulsing) */
.bexit-loader { width: 46px; height: auto; display: block; margin: 0 auto 14px; animation: gl-pulse 1.3s ease-in-out infinite; }
@keyframes gl-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bexit-loader { animation: none; opacity: 0.85; } }

/* Nav */
.nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
/* Admin-only entries stay hidden until auth.js stamps body.role-admin.
   (Visibility only - the pages/API behind them enforce it server-side.) */
.nav .nav-admin, .adminonly { display: none !important; }
body.role-admin .nav a.nav-admin { display: flex !important; }
body.role-admin .nav .nav-group.nav-admin, body.role-admin .adminonly { display: block !important; }
body.role-admin .nav .nav-soonitem.nav-admin { display: flex !important; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text-mid);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.nav a .ico { width: 22px; height: 22px; flex: none; color: currentColor; }
.nav a .nav-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: #fff; background: #a12b25; border-radius: 10px; padding: 1px 7px; line-height: 1.5; }
.app.collapsed .nav a .nav-badge { display: none; }
.nav a:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.nav a.active {
  color: var(--gold-bright);
  background:
    linear-gradient(90deg, rgba(74, 87, 255, 0.16), rgba(74, 87, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(74, 87, 255, 0.22);
}
.nav a.active::before {
  content: "";
  position: absolute;
  left: -20px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; border-radius: 0 3px 3px 0;
  background: var(--gold);
  box-shadow: 0 0 12px 1px var(--gold-glow);
}
.app.collapsed .nav a { justify-content: center; padding: 12px 0; }
.app.collapsed .nav a .label { display: none; }

/* Nav action button (e.g. New Client) - a gold call-to-action in the rail */
.nav-action {
  display: flex; align-items: center; gap: 15px;
  width: 100%; margin: 0 0 8px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--gold-line);
  background: rgba(74, 87, 255, 0.12);
  color: var(--gold-bright);
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap; text-align: left;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav-action .ico { width: 22px; height: 22px; flex: none; color: currentColor; }
.nav-action:hover { background: rgba(74, 87, 255, 0.22); }
.app.collapsed .nav-action { justify-content: center; padding: 12px 0; }
.app.collapsed .nav-action .label { display: none; }

/* New client / opportunity modal (shared across pages via new-client.js) */
.nc-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
}
.nc-overlay.show { display: flex; }
.nc-modal {
  width: 100%; max-width: 440px; border-radius: 16px; padding: 22px;
  background: var(--panel-solid); border: 1px solid var(--hair);
  border-top: 4px solid var(--gold); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.8);
}
.nc-modal h3 { font-size: 18px; color: var(--text-hi); margin-bottom: 6px; }
.nc-modal .nc-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.nc-modal label { display: block; font-size: 12.5px; color: var(--text-mid); font-weight: 600; margin: 14px 0 4px; }
.nc-modal input {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none;
}
.nc-modal input:focus { border-color: var(--gold-line); }
.nc-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.nc-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px;
  border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.14); color: var(--gold-bright);
  transition: background .15s ease;
}
.nc-btn:hover { background: rgba(74, 87, 255, 0.24); }
.nc-btn.ghost { border-color: var(--hair); background: none; color: var(--text-mid); font-weight: 500; }
.nc-btn:disabled { opacity: .6; cursor: default; }
.nc-msg { margin-top: 12px; font-size: 13px; min-height: 1em; line-height: 1.4; }
.nc-msg.err { color: #e88b86; }
.nc-msg.ok { color: #8fd8a2; }

/* Large intake modal (client / opportunity / project) */
.nc-modal-lg { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.nc-seg { display: flex; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; margin: 8px 0 6px; }
.nc-seg button { flex: 1; border: 0; background: rgba(18,20,24,0.6); color: var(--text-mid); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 0; cursor: pointer; border-right: 1px solid var(--hair); }
.nc-seg button:last-child { border-right: 0; }
.nc-seg button.active { background: var(--gold); color: #101114; }
.nc-sec-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-bright); font-weight: 700; margin: 4px 0; padding-top: 12px; border-top: 1px solid var(--hair-soft); }
.nc-row2 { display: flex; gap: 10px; }
.nc-row2 > div { flex: 1; min-width: 0; }
.nc-modal select { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.nc-modal select:focus { border-color: var(--gold-line); }
.nc-modal select option { background: #16181c; }
.nc-sugg-item { padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; margin-top: 6px; font-size: 13px; color: var(--text-mid); cursor: pointer; background: rgba(255,255,255,0.02); }
.nc-sugg-item:hover { border-color: var(--gold-line); color: var(--text-hi); }
.nc-sugg-item b { color: var(--text-hi); font-weight: 600; }
.nc-warn { font-size: 12.5px; color: #5e69ff; margin-top: 6px; }
.nc-chip { font-size: 12.5px; color: var(--text-mid); background: rgba(74, 87, 255, 0.10); border: 1px solid var(--gold-faint); border-radius: 8px; padding: 7px 10px; margin: 6px 0; }
.nc-chip a { color: var(--gold-bright); margin-left: 6px; }
.nc-sub-row { display: flex; gap: 8px; margin-bottom: 7px; align-items: center; }
.nc-sub-row input { min-width: 0; }
.nc-sub-row .nc-sub-name { flex: 2; }
.nc-sub-row .nc-sub-amt { flex: 1; }
.nc-sub-del { flex: none; width: 34px; height: 40px; border: 1px solid var(--hair); background: none; color: var(--text-dim); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.nc-sub-del:hover { color: #e88b86; border-color: rgba(224,82,78,0.5); }
.nc-addrow { -webkit-appearance: none; appearance: none; margin-top: 4px; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--gold-faint); background: none; color: var(--gold-bright); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nc-addrow:hover { background: rgba(74, 87, 255, 0.06); }

/* Shared page toolbar (daily logs, change orders, …) */
.dl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 20px; }
.dl-sel { font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.dl-sel:focus { border-color: var(--gold-line); }
.dl-sel option { background: #16181c; }
.dl-dt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mid); border: 1px solid var(--hair); border-radius: 10px; padding: 5px 10px; background: rgba(18,20,24,0.6); }
.dl-dt input { font: inherit; font-size: 13px; border: 0; background: none; color: var(--text-hi); outline: none; color-scheme: dark; }
.dl-clear { font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.dl-clear:hover { color: var(--text-hi); border-color: var(--gold-faint); }
.dl-export { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.14); color: var(--gold-bright); cursor: pointer; }
.dl-export:hover { background: rgba(74, 87, 255, 0.24); }
.dl-add { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line); background: var(--gold); color: #101114; cursor: pointer; }
.dl-add:hover { background: var(--gold-bright); }

/* Modal form widgets shared by every page's modals (dark, on-theme) */
.nc-modal { color-scheme: dark; }
.nc-modal textarea { width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; resize: vertical; min-height: 60px; }
.nc-modal textarea:focus { border-color: var(--gold-line); }
.nc-modal input[type=file] { padding: 9px 12px; font-size: 13px; color: var(--text-mid); }
.nc-modal input[type=file]::file-selector-button { font: inherit; font-size: 12.5px; font-weight: 600; margin-right: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.14); color: var(--gold-bright); cursor: pointer; }
.nc-btn.danger { border-color: rgba(224,82,78,0.5); background: rgba(224,82,78,0.10); color: #e8908c; }
.nc-btn.danger:hover { background: rgba(224,82,78,0.20); color: #ffd9d6; }
.tt-state { padding: 40px 4px; color: var(--text-dim); font-size: 14px; text-align: center; }

/* Collapse control */
.rail-foot { margin-top: auto; padding-top: 18px; }
.collapse-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mid);
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.collapse-btn:hover { color: var(--text-hi); border-color: var(--gold-faint); background: rgba(74, 87, 255, 0.05); }
.collapse-btn .chev { transition: transform 0.28s ease; }
.app.collapsed .collapse-btn .chev { transform: rotate(180deg); }
.app.collapsed .collapse-btn .label { display: none; }

/* Rail edge collapse arrow (desktop) - sits on the rail's right border */
.rail-toggle {
  position: absolute; top: 80px; right: -14px; z-index: 6;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--hair); background: #0a0a0c; color: var(--text-mid);
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.rail-toggle:hover { color: var(--gold-bright); border-color: var(--gold-faint); background: #1c1f24; }
.rail-toggle .chev { transition: transform 0.3s ease; }
.app.collapsed .rail-toggle .chev { transform: rotate(180deg); }

/* Mobile hamburger - lives in the topbar, hidden on desktop */
.nav-toggle {
  display: none; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6);
  color: var(--text); cursor: pointer; place-items: center;
}
.nav-toggle .ico { width: 22px; height: 22px; }

/* Mobile drawer backdrop */
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.25s ease;
}

/* ============================== Main =============================== */
.main {
  /* every page fills the window; this is the one fixed margin (per Dillon:
     no wasted desktop space). Page wrappers must not cap max-width. */
  padding: 30px 40px 48px;
  min-width: 0;
  width: 100%;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}
.page-title h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-hi);
  line-height: 1.1;
}
.page-title .date {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 400;
}

.search {
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}
.search .ico {
  position: absolute; left: 20px;
  width: 19px; height: 19px; color: var(--text-dim);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 15px 20px 15px 52px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  color: var(--text-hi);
  font-family: inherit; font-size: 15px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.search input::placeholder { color: var(--text-dim); }
.search input:focus {
  border-color: var(--gold-line);
  background: rgba(20, 22, 26, 0.8);
  box-shadow: 0 0 0 3px rgba(74, 87, 255, 0.08);
}

.topbar-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

.bell {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  color: var(--text-mid);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.bell:hover { color: var(--text-hi); border-color: var(--gold-faint); }
.bell .ico { width: 21px; height: 21px; }
.bell .badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--gold);
  color: #101114;
  font-size: 11px; font-weight: 700;
  box-shadow: 0 0 10px var(--gold-glow);
  border: 2px solid var(--bg-base);
}

.user {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 14px 6px 6px;
  border-radius: 30px;
  border: 1px solid var(--hair);
  background: rgba(18, 20, 24, 0.6);
  cursor: pointer;
  transition: border-color 0.18s ease;
}
.user:hover { border-color: var(--gold-faint); }
.user .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--gold-bright);
  border: 1px solid var(--gold-line);
  background: radial-gradient(circle at 50% 40%, rgba(74, 87, 255, 0.16), transparent);
}
.user .uname { font-size: 14px; font-weight: 500; color: var(--text); }
.user .chev { color: var(--text-dim); }

/* ============================== Grid =============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

/* Row 1 */
.span-task     { grid-column: span 5; }
.span-schedule { grid-column: span 4; }
.span-today    { grid-column: span 3; grid-row: span 1; }
/* Row 2 */
.span-bid      { grid-column: span 4; }
.span-invoice  { grid-column: span 4; }
.span-pulse    { grid-column: span 4; }
/* Row 3 */
.span-weather  { grid-column: span 12; }

/* ============================== Card ============================== */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 24px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 42%),
    var(--panel);
  border: 1px solid var(--hair);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  /* lit-from-within: soft inner top highlight + grounding drop shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 0 40px rgba(255,255,255,0.012),
    0 24px 44px -30px rgba(0,0,0,0.9);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover { transform: translateY(-3px); }

/* --- Selective glow = triage. Attention cards float up and glow gold. --- */
/* Two intensities: glow intensity tracks urgency (build-plan polish note). */
.card.glow {                       /* softer nudge - "waiting on you" */
  border-color: var(--gold-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(74, 87, 255, 0.30),
    0 0 34px -6px var(--gold-glow),
    0 24px 44px -28px rgba(0,0,0,0.9);
}
.card.glow-strong {                /* higher urgency - something slipping */
  border-color: rgba(74, 87, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 0 1px rgba(74, 87, 255, 0.5),
    0 0 46px -4px rgba(74, 87, 255, 0.55),
    0 26px 48px -26px rgba(0,0,0,0.9);
}
.card.glow:hover        { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(74, 87, 255, 0.4), 0 0 42px -4px var(--gold-glow), 0 30px 50px -26px rgba(0,0,0,0.9); }
.card.glow-strong:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(74, 87, 255, 0.65), 0 0 56px -2px rgba(74, 87, 255, 0.6), 0 32px 54px -24px rgba(0,0,0,0.9); }

/* Card header */
.card-head {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 20px;
}
.card-head .ico {
  width: 22px; height: 22px; color: var(--gold);
  flex: none;
  filter: drop-shadow(0 0 6px rgba(74, 87, 255, 0.25));
}
.card-head h2 {
  font-size: 16px; font-weight: 600; letter-spacing: 0.005em;
  color: var(--text-hi);
}
.card-head .head-right { margin-left: auto; }

/* Headline number block */
.headline { display: flex; align-items: center; gap: 18px; }
.headline .big {
  font-size: 52px; font-weight: 700; line-height: 0.9;
  color: var(--text-hi);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.headline .big.gold { color: var(--gold-bright); }
.headline .cap { display: flex; flex-direction: column; gap: 6px; }
.headline .cap .lead { font-size: 18px; font-weight: 500; color: var(--text); }
.headline .cap .sub {
  font-size: 13px; color: var(--text-mid);
  display: flex; align-items: center; gap: 7px;
}
.headline .grow { flex: 1; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot.green { background: var(--green); box-shadow: 0 0 8px var(--green-dim); }
.dot.gold  { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }

.behind { color: var(--gold-bright); font-weight: 600; }

/* Progress ring */
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring .track { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 7; }
.ring .value {
  fill: none; stroke: var(--gold); stroke-width: 7; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--gold-glow));
}
.ring .pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 700; color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}

/* Home summary: priority donut + legend + preview */
.tt-donut { position: relative; width: 92px; height: 92px; flex: none; }
.tt-donut svg { width: 100%; height: 100%; display: block; }
.ht-donut-center {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 24px; font-weight: 700; color: var(--text-hi); font-variant-numeric: tabular-nums;
}
.ht-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 16px; }
.ht-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-mid); }
.ht-leg b { color: var(--text-hi); font-weight: 700; margin-left: 1px; font-variant-numeric: tabular-nums; }
.ht-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ht-pri { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ht-msg { padding: 16px 4px; color: var(--text-dim); font-size: 14px; }
a.row { text-decoration: none; color: inherit; }

/* Divider */
.divider { height: 1px; background: var(--hair-soft); margin: 20px 0; border: 0; }

/* Task / list rows */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.16s ease;
}
.row + .row { border-top: 1px solid var(--hair-soft); }
.row:hover { background: rgba(255,255,255,0.03); }
.row .status-ico { width: 22px; height: 22px; flex: none; }
.row .status-ico.amber { color: var(--amber); }
.row .status-ico.green { color: var(--green); }
.row .status-ico.gray  { color: var(--text-dim); }
.row .r-title { font-size: 15px; font-weight: 600; color: var(--text-hi); width: 118px; flex: none; }
.row .r-desc { font-size: 14px; color: var(--text-mid); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .r-meta { font-size: 13px; font-weight: 600; white-space: nowrap; }
.row .r-meta.gold { color: var(--gold-bright); }
.row .r-meta.green { color: var(--green); }
.row .r-meta.dim { color: var(--text-mid); }
.row .chev-r { color: var(--text-dim); flex: none; }

/* ---- Interactive Task Tracker controls ---- */
.row .status-ico {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
  width: 22px; height: 22px; flex: none; cursor: pointer;
  display: grid; place-items: center;
}
.row .status-ico svg { width: 22px; height: 22px; display: block; }
.row .status-ico:hover { filter: brightness(1.3); }
.row.is-done .r-title, .row.is-done .r-desc { text-decoration: line-through; opacity: 0.5; }

.task-del {
  -webkit-appearance: none; appearance: none; border: 0; background: none;
  width: 20px; height: 20px; padding: 0; flex: none; cursor: pointer;
  color: var(--text-dim); opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.task-del svg { width: 18px; height: 18px; display: block; }
.row:hover .task-del { opacity: 1; }
.task-del:hover { color: #d98a6a; }

.add-task-link {
  -webkit-appearance: none; appearance: none;
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px dashed var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-mid); font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.add-task-link:hover { color: var(--gold-bright); border-color: var(--gold-faint); background: rgba(74, 87, 255, 0.05); }

.task-add {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: center;
}
.task-add input, .task-add select {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18, 20, 24, 0.6);
  color: var(--text-hi); font: inherit; font-size: 14px; outline: none;
  transition: border-color 0.15s ease;
}
.task-add input::placeholder { color: var(--text-dim); }
.task-add input:focus, .task-add select:focus { border-color: var(--gold-line); }
.task-add-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.t-btn {
  -webkit-appearance: none; appearance: none;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--gold-line);
  background: rgba(74, 87, 255, 0.14); color: var(--gold-bright);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease;
}
.t-btn:hover { background: rgba(74, 87, 255, 0.22); }
.t-btn.ghost { border-color: var(--hair); background: none; color: var(--text-mid); }
.t-btn.ghost:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.04); }
.task-empty { padding: 16px 4px; color: var(--text-dim); font-size: 14px; }

/* ---------------------- Today's Schedule --------------------------- */
.timeline { display: flex; flex-direction: column; gap: 6px; }
.tl-item {
  position: relative;
  padding: 14px 6px 14px 20px;
  border-left: 2px solid var(--gold-line);
  border-radius: 0 8px 8px 0;
  transition: background 0.16s ease;
}
.tl-item:hover { background: rgba(255,255,255,0.025); }
.tl-item .time {
  font-size: 14px; font-weight: 600; color: var(--gold-bright);
  letter-spacing: 0.02em; margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.tl-item .what { font-size: 15px; color: var(--text); }

/* ------------------------- Bid Tracker ---------------------------- */
.bar-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.bar-row .name { font-size: 14px; color: var(--text); width: 130px; flex: none; }
.bar-track {
  flex: 1; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,0.07); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); box-shadow: 0 0 8px var(--green-dim); }
.bar-fill.gold  { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 8px var(--gold-glow); }
.bar-row .tag { font-size: 13px; font-weight: 600; width: 84px; flex: none; text-align: right; }
.bar-row .tag.green { color: var(--green); }
.bar-row .tag.gold  { color: var(--gold-bright); }
.bar-row .tag.red   { color: #e88a85; }

/* Bid Tracker card (live) */
a.hb-row { text-decoration: none; border-radius: 8px; }
a.hb-row:hover .name { color: var(--gold-bright); }
a.hb-row .tag { width: 96px; }
.hb-alerts { display: flex; gap: 14px; flex-wrap: wrap; margin: -4px 0 10px; }
.hb-alerts .tag { font-size: 12.5px; font-weight: 700; }
.hb-alerts .tag.gold { color: var(--gold-bright); }
.hb-alerts .tag.red { color: #e88a85; }
.hb-quiet { font-size: 13px; color: var(--text-dim); padding: 8px 0 4px; }

/* Money / invoice list */
.money-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 4px;
  cursor: pointer; border-radius: 10px;
  transition: background 0.16s ease;
}
.money-row + .money-row { border-top: 1px solid var(--hair-soft); }
.money-row:hover { background: rgba(255,255,255,0.03); }
.money-row .m-name { font-size: 15px; color: var(--text); flex: 1; }
.money-row .m-amt {
  font-size: 15px; font-weight: 600; color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.money-row .chev-r { color: var(--text-dim); }

/* Footer link */
.card-link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: 14px; font-weight: 600; color: var(--gold-bright);
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}
.card-link:hover { gap: 11px; color: var(--gold); }

/* --------------------------- Weather: see "home: weather" below ---- */

/* ------------------------ Company Pulse --------------------------- */
.pulse-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  cursor: pointer; border-radius: 10px;
  transition: background 0.16s ease;
}
.pulse-item + .pulse-item { border-top: 1px solid var(--hair-soft); }
.pulse-item:hover { background: rgba(255,255,255,0.03); }
.pulse-item .p-ico { width: 26px; height: 26px; flex: none; }
.pulse-item .p-ico.green { color: var(--green); }
.pulse-item .p-ico.gold  { color: var(--gold); }
.pulse-item .p-body { flex: 1; min-width: 0; }
.pulse-item .p-title { font-size: 15px; font-weight: 600; color: var(--text-hi); }
.pulse-item .p-sub { font-size: 13px; color: var(--text-mid); margin-top: 2px; }
.pulse-item .p-when { font-size: 13px; font-weight: 600; white-space: nowrap; }
.pulse-item .p-when.green { color: var(--green); }
.pulse-item .p-when.gold  { color: var(--gold-bright); }

/* =========================== Mini Gantt =========================== */
.gantt { margin-top: 22px; }
.gantt-axis {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  margin-bottom: 12px;
}
.gantt-axis .axis-origin { font-size: 12px; font-weight: 600; color: var(--text-mid); letter-spacing: 0.05em; }
.gantt-ticks { display: flex; justify-content: space-between; position: relative; }
.gantt-ticks span {
  font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.gantt-ticks span.today {
  color: var(--gold-bright); font-weight: 700;
  position: relative;
}
.gantt-ticks span.today::after {
  content: ""; position: absolute; left: 50%; top: -4px; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 10px var(--gold-glow);
}

.gantt-rows { display: flex; flex-direction: column; gap: 14px; position: relative; }
/* today's vertical guide line sits over the plot */
.gantt-plot-wrap { position: relative; }
.gantt-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--gold-line);
  box-shadow: 0 0 8px var(--gold-glow);
  pointer-events: none; z-index: 1;
}
.gantt-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.gantt-row .g-label { font-size: 13px; color: var(--text); }
.gantt-lane { position: relative; height: 10px; }
.gantt-lane::before {  /* faint lane baseline */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255,255,255,0.04);
}
.g-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 8px; border-radius: 5px;
}
.g-bar.green { background: linear-gradient(90deg, var(--green-dim), var(--green)); box-shadow: 0 0 10px -1px var(--green-dim); }
.g-bar.gold  { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); box-shadow: 0 0 12px -1px var(--gold-glow); }
.g-bar.gold .end-dot {
  position: absolute; right: -5px; top: 50%; transform: translate(50%, -50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-glow);
  border: 2px solid var(--bg-deep);
}

.gantt-legend {
  display: flex; gap: 24px; align-items: center;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--hair-soft);
}
.gantt-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-mid); }

/* ============================ Responsive ========================== */
/* Mid widths - two-up cards */
@media (max-width: 1500px) {
  .span-task, .span-schedule, .span-today,
  .span-bid, .span-invoice, .span-pulse { grid-column: span 6; }
  .span-weather { grid-column: span 12; }
}

/* ---------------------------------------------------------------------------
   MOBILE (<= 900px): the left rail becomes a slide-in drawer with a hamburger,
   and the whole layout stacks to a single column. ~half of usage is phones,
   so this is a first-class layout, not an afterthought.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .app, .app.collapsed { grid-template-columns: 1fr; }   /* main spans full width */

  .rail {
    position: fixed; top: 0; left: 0; z-index: 50;
    width: 82vw; max-width: 300px; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    border-right: 1px solid var(--hair);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
      rgba(9, 10, 12, 0.97);
  }
  .app.nav-open .rail { transform: translateX(0); box-shadow: 0 0 70px rgba(0,0,0,0.7); }
  .rail {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS momentum */
    overscroll-behavior: contain;        /* drawer scroll stays in the drawer */
    padding-bottom: 40px;                /* room past the last group */
  }

  .nav-backdrop { display: block; visibility: hidden; }
  .app.nav-open .nav-backdrop { visibility: visible; opacity: 1; }

  .rail-toggle { display: none; }        /* no edge arrow on mobile */
  .rail-foot { display: none; }          /* collapse control not relevant in drawer mode */
  .nav-toggle { display: grid; }         /* show the hamburger */

  /* the drawer always shows full labels, regardless of desktop collapse state */
  .rail .brand .wordmark, .nav a .label { display: inline; }
  .nav a { justify-content: flex-start; padding: 13px 14px; }

  .main { padding: 16px 15px 44px; }

  /* topbar reflow: [hamburger] [title] … [actions], search on its own row */
  .topbar { flex-wrap: wrap; gap: 12px 14px; margin-bottom: 22px; }
  .nav-toggle { order: 1; }
  .page-title { order: 2; }
  .page-title h1 { font-size: 22px; }
  .topbar-right { order: 3; margin-left: auto; }
  .search { order: 4; flex-basis: 100%; max-width: none; margin: 0; }

  .grid { gap: 16px; }
  .grid > * { grid-column: 1 / -1 !important; }
  .card { padding: 20px; }
}

/* Small phones */
@media (max-width: 480px) {
  .headline .big { font-size: 44px; }
  .user .uname { display: none; }
  .user { padding: 5px; }
  .row .r-title { width: 100px; }
  .tt-search { max-width: none; }
}

/* In-page document viewer (popup for PDFs & photos) */
.sg-viewer { position: fixed; inset: 0; z-index: 90; display: none; background: rgba(10,11,13,0.9); padding: 18px; }
.sg-viewer.show { display: flex; flex-direction: column; }
.sg-viewer-bar { display: flex; align-items: center; gap: 14px; max-width: 920px; width: 100%; margin: 0 auto 10px; }
.sg-viewer-name { flex: 1; font-size: 13.5px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-viewer-tab { flex: none; font-size: 12.5px; color: var(--gold-bright); text-decoration: none; border: 1px solid var(--gold-faint); padding: 6px 12px; border-radius: 8px; }
.sg-viewer-tab:hover { border-color: var(--gold-line); }
.sg-viewer-x { flex: none; font: inherit; font-size: 26px; line-height: 1; background: none; border: 0; color: var(--text-mid); cursor: pointer; padding: 0 2px; }
.sg-viewer-x:hover { color: #fff; }
.sg-viewer-body { flex: 1; max-width: 920px; width: 100%; margin: 0 auto; min-height: 0; }
.sg-viewer-body iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; background: #fff; }
.sg-viewer-body img { max-width: 100%; max-height: 100%; display: block; margin: 0 auto; border-radius: 10px; }
@media (max-width: 640px) { .sg-viewer { padding: 10px; } }

/* Shared toolbar search box (used by Daily Logs, Projects, ...) */
.dl-search {
  font: inherit; font-size: 13px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi);
  outline: none; min-width: 160px;
}
.dl-search:focus { border-color: var(--gold-line); }

/* Themed scrollbars - every scroll container matches the dark/gold layout
   instead of showing the browser's default light slider. */
:root { scrollbar-width: thin; scrollbar-color: rgba(74, 87, 255, 0.35) rgba(18,20,24,0.55); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(18,20,24,0.55); border-radius: 8px; }
::-webkit-scrollbar-thumb {
  background: rgba(74, 87, 255, 0.30); border-radius: 8px;
  border: 2px solid rgba(18,20,24,0.7); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(74, 87, 255, 0.55); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Mobile: destructive Delete buttons are desktop-only - too easy to fat-finger
   in the field. (The client-facing decline button is .sg-btn and unaffected.) */
@media (max-width: 900px) {
  .nc-btn.danger { display: none !important; }
}

/* Accordion nav groups (menu itself is rendered by nav.js) */
.nav-group { display: flex; flex-direction: column; }
.nav-group-head {
  display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: 500; padding: 11px 14px; border: 0; border-radius: 12px;
  background: none; color: var(--text-mid); transition: background .15s ease, color .15s ease;
}
.nav-group-head:hover { color: var(--text-hi); background: rgba(255,255,255,0.04); }
.nav-group-head .ico { width: 22px; height: 22px; flex: none; }
.nav-group-head .chev-g { margin-left: auto; font-size: 11px; color: var(--text-dim); transition: transform .18s ease; transform: rotate(-90deg); }
.nav-group.open > .nav-group-head .chev-g { transform: rotate(0deg); }
.nav-group-head.haslive { color: var(--gold-bright); }
.nav-group-items { display: none; flex-direction: column; gap: 2px; padding: 1px 0 4px 14px; position: relative; }
.nav-group-items::before {
  content: ""; position: absolute; left: 24px; top: 2px; bottom: 6px; width: 1px;
  background: var(--hair);
}
.nav-group.open > .nav-group-items { display: flex; }
.nav-group-items a { font-size: 13.5px; padding: 9px 12px 9px 22px; }
.nav-group-items a .ico { width: 19px; height: 19px; }

/* name-only future items */
.nav-future .nav-group-head { color: var(--text-dim); }
.nav-soonitem {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 22px;
  font-size: 13px; color: var(--text-dim); cursor: default; opacity: .75;
}
.nav-soonitem em {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-faint); border: 1px solid var(--hair); border-radius: 6px; padding: 1px 5px; margin-left: 5px;
}

/* collapsed rail: groups shrink to their icon; items hide until re-expanded */
.app.collapsed .nav-group-head { justify-content: center; padding: 12px 0; }
.app.collapsed .nav-group-items { display: none !important; }

/* Settings -> Pipelines (server-side pipeline manager, admin) */
.pp-pipe { border: 1px solid var(--hair); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.pp-pipe-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pp-pipe-head .pp-pipe-name { flex: 1; font-weight: 600; }
.pp-ghl { flex: none; font-size: 11px; border: 1px solid rgba(74, 87, 255, 0.5); color: var(--gold-bright, #7b85ff); border-radius: 999px; padding: 3px 10px; }
.pp-stages { display: grid; gap: 6px; margin: 0 0 6px 18px; }
.pp-stage { display: flex; gap: 8px; align-items: center; }
.pp-stage .pp-stage-name { flex: 1; }
.pp-del { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-dim); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.pp-del:hover { color: #f0a2a2; border-color: rgba(191,54,54,0.55); }
.pp-move { font-size: 13px; }

/* Master Schedule card (live) */
a.hs-row { text-decoration: none; }
a.hs-row:hover .g-label { color: var(--gold-bright); }

/* Sign out is a button now (POST), styled like the old link */
.auth-chip .auth-out { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* security banner (Settings) when a testing aid is left on */
.sec-banner { border: 1px solid rgba(191,54,54,0.6); background: rgba(191,54,54,0.14); color: #f0b1ad; border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.sec-banner b { color: #fff; }
.set-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.set-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 6px 8px; border-bottom: 1px solid var(--hair); }
.set-table td { padding: 7px 8px; border-bottom: 1px solid var(--hair); color: var(--text-mid); vertical-align: top; }
.set-table td b { color: var(--text-hi); }
.set-table .me { color: #8fd8a2; font-weight: 700; }
.set-mini { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.set-mini:hover { border-color: var(--gold-line); color: var(--text-hi); }
.set-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.set-filter input, .set-filter select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }

/* ---- live user chip (photo or initials) ---- */
.auth-chip .auth-me { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.auth-chip .auth-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-line); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--gold-bright); background: radial-gradient(circle at 50% 40%, rgba(74, 87, 255, 0.18), rgba(18,20,24,0.6)); }
.auth-chip .auth-me:hover .auth-name { color: var(--gold-bright); }
/* Settings: account card */
.acct-id { display: flex; align-items: center; gap: 14px; }
.acct-avatar { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold-line); display: grid; place-items: center; cursor: pointer; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(74, 87, 255, 0.18), rgba(18,20,24,0.6)); color: var(--gold-bright); font-weight: 700; letter-spacing: .06em; font-size: 16px; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar:hover { border-color: var(--gold); }
.set-lbl { display: block; font-size: 12px; color: var(--text-mid); font-weight: 600; margin: 8px 0 4px; }
.set-in { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.set-in:focus { border-color: var(--gold-line); }
/* ---- home: search results ---- */
.search { position: relative; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 70vh; overflow: auto; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.8); padding: 6px; }
.sr-group + .sr-group { border-top: 1px solid var(--hair); margin-top: 4px; padding-top: 4px; }
.sr-cat { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); padding: 8px 10px 4px; font-weight: 700; }
.sr-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--text); }
.sr-item:hover, .sr-item.on { background: rgba(74, 87, 255, 0.10); }
.sr-title { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
.sr-sub { font-size: 12px; color: var(--text-dim); }
.sr-empty { padding: 12px; font-size: 13px; color: var(--text-dim); }
/* ---- home: weather (Weather Underground style 7-day panel) ---- */
.wx-cardhead { flex-wrap: wrap; }
.wx-cardhead .wx-loc { margin: 0 0 0 auto; }
.wx-loc { display: flex; gap: 6px; }
.wx-loc input { width: 190px; font: inherit; font-size: 12.5px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.wx-loc input:focus { border-color: var(--gold-line); }
.wx-go { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.12); color: var(--gold-bright); cursor: pointer; display: inline-flex; align-items: center; }
.wx-go:hover { background: rgba(74, 87, 255, 0.22); }
.wx-geo.on { background: var(--gold); color: #101114; }
.wx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 0 14px; }
.wx-coords { font-size: 11px; color: var(--text-dim); letter-spacing: .02em; }
.wx-city { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; line-height: 1.05; color: var(--text-hi); }
.wx-city .wx-src { font-family: Inter, sans-serif; font-size: 11px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: .06em; margin-left: 10px; vertical-align: middle; }
.weather-cond { font-size: 13.5px; color: var(--text); margin-top: 4px; }
.weather-main { display: flex; align-items: center; gap: 10px; }
.weather-main .temp { font-size: 48px; font-weight: 700; color: var(--text-hi); letter-spacing: -0.02em; line-height: 0.9; }
.weather-main .w-ico { width: 64px; height: 64px; margin-left: 0; }
.weather-main .w-ico svg { width: 64px; height: 64px; }
.weather-main .w-sub { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.weather-main .w-sub span { display: block; }
.wx-dim { color: var(--text-dim); font-size: 13px; }
/* day columns share the chart's x axis: a 44px axis gutter then 7 equal columns */
.wx-days { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--hair); border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.015); overflow: hidden; }
.wx-day { text-align: center; padding: 8px 4px 10px; border-left: 1px solid var(--hair-soft); min-width: 0; }
.wx-axis { border-left: 0; }
.wx-day.today { background: rgba(74, 87, 255, 0.07); }
.wx-day .wx-d { font-size: 12px; color: var(--text-hi); font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 8px; white-space: nowrap; }
.wx-day.today .wx-d { color: var(--gold-bright); }
.wx-hl { font-size: 14px; font-variant-numeric: tabular-nums; }
.wx-hl .hi { color: #f0a15a; font-weight: 700; } .wx-hl .sep { color: var(--text-dim); margin: 0 5px; } .wx-hl .lo { color: #8fb8e0; }
.wx-i svg { width: 58px; height: 58px; margin: 2px auto 0; display: block; }
.wx-txt { font-size: 12px; color: var(--text); min-height: 2.6em; line-height: 1.3; padding: 0 2px; }
.wx-rain { font-size: 12px; color: var(--text-mid); margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.wx-rain svg { width: 11px; height: 11px; }
.wx-rain.wet { color: #8fb8e0; font-weight: 700; }
.wx-pop { font-size: 11px; color: var(--text-dim); }
.wx-sun { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); padding: 6px 6px 0; }
.wx-sun span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #f0a15a; margin-right: 3px; vertical-align: 1px; }
.wx-sun span:last-child::before { background: #c86a3a; }
.wx-charts { border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 12px 12px; padding: 6px 0 4px; background: rgba(255,255,255,0.01); position: relative; }
.wx-chart { display: block; width: 100%; height: auto; }
.wx-chart text { font-family: Inter, sans-serif; font-size: 10.5px; fill: var(--text-dim); }
.wx-chart .grid { stroke: rgba(255,255,255,0.06); }
.wx-chart .daygrid { stroke: rgba(255,255,255,0.12); }
.wx-chart .nowline { stroke: var(--gold); stroke-dasharray: 3 3; }
.wx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-mid); padding: 0 12px 8px 44px; }
.wx-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.wx-legend i.area { height: 9px; opacity: .6; }
.wx-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--panel-solid); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: var(--text-mid); line-height: 1.5; box-shadow: 0 12px 30px -12px rgba(0,0,0,0.8); min-width: 150px; }
.wx-tip b { color: var(--text-hi); display: block; margin-bottom: 2px; }
.wx-tip span { color: var(--text-hi); }
.span-weather { position: relative; }
.weather-note { font-size: 12.5px; color: var(--text-mid); margin-top: 10px; }
.tl-diag { font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.12); color: var(--gold-bright); cursor: pointer; margin-left: 6px; }
.tl-diag:disabled { opacity: .6; }
@media (max-width: 900px) {
  /* the seven days keep full columns and scroll sideways, charts along with them */
  .wx-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin: 0 -4px; padding: 0 4px 4px; }
  .wx-scroll::-webkit-scrollbar { height: 6px; } .wx-scroll::-webkit-scrollbar-thumb { background: rgba(74, 87, 255, 0.35); border-radius: 3px; }
  /* the strip's width is set by the chart script (axis gutter, 7 x 96px, and the right gutter) so both boxes end on the same edge */
  .wx-days { grid-template-columns: 30px repeat(7, 96px); width: max-content; min-width: 100%; }
  .wx-day { scroll-snap-align: start; }
  .wx-charts { min-width: 100%; }
  .wx-i svg { width: 42px; height: 42px; } .wx-txt { font-size: 11.5px; } .wx-sun { display: none; } .wx-hl { font-size: 12.5px; } .wx-day .wx-d { font-size: 11px; }
  /* legends follow the scroll by margin (set in home.js), never by position: sticky, so they add nothing to the scroll width */
  .wx-legend { width: max-content; max-width: calc(100vw - 64px); padding-left: 30px; box-sizing: border-box; }
  .wx-city { font-size: 24px; } .weather-main .temp { font-size: 40px; }
  /* the header stacks: place on its own line, the icon, temperature, and readings on the next, nothing past the edge */
  .wx-head { flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .wx-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .wx-city { overflow-wrap: anywhere; }
  .weather-main { flex: 1 1 100%; justify-content: flex-start; gap: 12px; min-width: 0; }
  .weather-main .w-sub { display: flex; flex-wrap: wrap; gap: 0 10px; }
  .weather-main .w-sub span { display: inline; white-space: nowrap; }
  .wx-cardhead .wx-loc { margin-left: 0; width: 100%; } .wx-loc input { flex: 1; width: auto; }
}
/* ---- home: today + pulse ---- */
.tl-item { text-decoration: none; }
.tl-item.event { border-left: 3px solid #8fb8e0; }
.tl-item.task { border-left: 3px solid var(--gold-line); }
.tl-kind { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 1px 6px; margin-right: 8px; vertical-align: 2px; border: 1px solid var(--hair); color: var(--text-dim); }
.tl-kind.event { color: #8fb8e0; border-color: rgba(143,184,224,0.45); }
.tl-kind.task { color: var(--gold-bright); border-color: var(--gold-line); }
.tl-sub { display: block; font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.tl-empty { font-size: 13px; color: var(--text-dim); padding: 8px 4px; }
.tl-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
.money-row .m-sub { display: block; font-size: 12px; color: var(--text-dim); }
a.money-row { text-decoration: none; }
/* ---- permissions matrix ---- */
.pm-hint { margin-bottom: 10px; }
.pm-wrap { overflow-x: auto; }
.pm-table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.pm-table th, .pm-table td { border-bottom: 1px solid var(--hair); padding: 8px 10px; vertical-align: top; text-align: left; }
.pm-table th.pm-user { min-width: 170px; }
.pm-name { font-weight: 700; color: var(--text-hi); } .pm-name em { font-style: normal; color: var(--text-dim); font-weight: 400; }
.pm-email { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.pm-role { font-size: 12px !important; padding: 6px 8px !important; }
.pm-reset { display: block; margin-top: 4px; font: inherit; font-size: 11px; color: var(--gold-bright); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.pm-group td { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; padding-top: 14px; border-bottom: 0; }
.pm-perm { min-width: 220px; } .pm-perm b { display: block; color: var(--text-hi); } .pm-perm span { display: block; font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.pm-cell { text-align: center !important; } .pm-cell.over { background: rgba(74, 87, 255, 0.10); }
.pm-check { display: inline-block; position: relative; width: 22px; height: 22px; }
.pm-check input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pm-check span { display: block; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--gold-line); background: rgba(74, 87, 255, 0.06); }
.pm-check input:checked + span { background: var(--gold); border-color: var(--gold); }
.pm-check input:checked + span::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #101114; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pm-check input:disabled + span { opacity: .55; }

/* ===================== Home page tiles (per-user layout) ===================== */
/* widths in twelfths; the tiles stack two-up on mid widths and one-up on phones */
.tw-3 { grid-column: span 3; } .tw-4 { grid-column: span 4; } .tw-5 { grid-column: span 5; } .tw-6 { grid-column: span 6; }
.tw-7 { grid-column: span 7; } .tw-8 { grid-column: span 8; } .tw-9 { grid-column: span 9; } .tw-10 { grid-column: span 10; } .tw-11 { grid-column: span 11; } .tw-12 { grid-column: span 12; }
@media (max-width: 1500px) { .card[class*="tw-"] { grid-column: span 6; } .card.tw-12 { grid-column: span 12; } }
@media (max-width: 900px) { .card[class*="tw-"] { grid-column: span 12; } }

/* schedule lookahead card */
.hs-week { margin-top: 14px; }
.hs-range { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin-bottom: 8px; }
.hs-proj { border-top: 1px solid var(--hair-soft); padding: 8px 0 6px; }
.hs-proj:first-of-type { border-top: 0; }
.hs-proj-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-decoration: none; padding: 2px 0 4px; }
.hs-proj-h b { font-size: 14px; color: var(--text-hi); }
.hs-proj-h span { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.hs-proj-h i { font-style: normal; }
.hs-task { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 13px; }
.hs-task:hover { background: rgba(255,255,255,0.03); }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hs-task.late .hs-dot { background: #e2423c; } .hs-task.done .hs-dot { background: var(--green); } .hs-task.ms .hs-dot { border-radius: 1px; transform: rotate(45deg); background: var(--gold-bright); }
.hs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-task.done .hs-name { color: var(--text-dim); text-decoration: line-through; }
.hs-when { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.hs-task.late .hs-when { color: #e88b86; font-weight: 600; }
.hs-more { font-size: 12px; color: var(--text-dim); padding: 3px 6px 0 25px; }

/* link tiles: search box, link button, embedded page */
.lk-search { display: flex; gap: 8px; }
.lk-search input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.lk-search input:focus { border-color: var(--gold-line); }
.lk-search button { font: inherit; font-size: 13px; font-weight: 700; padding: 0 16px; border-radius: 12px; border: 1px solid var(--gold); background: var(--gold); color: #101114; cursor: pointer; }
.lk-search button:hover { background: var(--gold-bright); }
.lk-sub { font-size: 12px; color: var(--text-dim); margin-top: 10px; }
.lk-big { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--hair); background: rgba(255,255,255,0.02); color: var(--text); transition: border-color .15s ease, background .15s ease; }
.lk-big:hover { border-color: var(--gold-line); background: rgba(74, 87, 255, 0.06); }
.lk-big .lk-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(74, 87, 255, 0.12); color: var(--gold-bright); flex: none; }
.lk-big .lk-ico .ico { width: 20px; height: 20px; }
.lk-big .lk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-big .lk-txt b { font-size: 15px; color: var(--text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-big .lk-txt span { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-big svg:last-child { color: var(--text-dim); flex: none; }
.lk-open { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gold-bright); text-decoration: none; white-space: nowrap; }
.lk-frame { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: #fff; }
.lk-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* settings: the tile list */
.ht-list { display: flex; flex-direction: column; gap: 8px; }
.ht-row { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 10px 12px; align-items: center; border: 1px solid var(--hair); border-radius: 12px; background: rgba(255,255,255,0.02); padding: 10px 12px; }
.ht-row.dragging { opacity: .45; }
.ht-row.over { border-color: var(--gold-line); }
.ht-grip { color: var(--text-dim); cursor: grab; font-size: 16px; line-height: 1; user-select: none; text-align: center; }
.ht-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ht-name .ico { width: 18px; height: 18px; color: var(--gold); flex: none; }
.ht-name b { font-size: 14px; color: var(--text-hi); }
.ht-name span { font-size: 12px; color: var(--text-dim); }
.ht-size { font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); }
.ht-btns { display: flex; gap: 4px; }
.ht-btns button { font: inherit; font-size: 12px; font-weight: 700; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.ht-btns button:hover { border-color: var(--gold-line); color: var(--text-hi); }
.ht-btns button.del:hover { color: #e88b86; border-color: rgba(226,66,60,0.5); }
.ht-opts { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; padding-top: 4px; border-top: 1px solid var(--hair-soft); margin-top: 2px; }
.ht-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--text-dim); font-weight: 600; }
.ht-opts label.chk { flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.ht-opts input, .ht-opts select { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; width: 100%; box-sizing: border-box; }
.ht-opts input[type=checkbox] { width: 18px; height: 18px; accent-color: #4a57ff; }
.ht-opts input:focus, .ht-opts select:focus { border-color: var(--gold-line); }
.ht-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ht-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; margin: 0 0 12px; }
@media (max-width: 640px) { .ht-row { grid-template-columns: 22px 1fr auto; } .ht-size { grid-column: 2 / -1; } }

/* Settings > Cost Codes: locked budgets checked against the company list */
.cc-proj { margin-top: 12px; }
.cc-table { margin-top: 6px; }
.cc-table td { vertical-align: middle; }
.cc-actions { white-space: nowrap; }
.cc-actions .cc-map { max-width: 240px; margin: 0 6px; font-size: 12.5px; }
@media (max-width: 720px) { .cc-actions { white-space: normal; } .cc-actions .cc-map { max-width: 100%; margin: 6px 0; display: block; } }

/* ======================= Top bar navigation (sections) =======================
   Rendered by nav.js above the app grid. The rail becomes the current section's
   column; the logo moves up here. */
.gl-top { position: sticky; top: 0; z-index: 60; height: 64px; display: flex; align-items: stretch; background: rgba(14,16,19,0.94); border-bottom: 1px solid var(--hair); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,0.30); }
.gl-logo { display: flex; align-items: center; padding: 0 26px; border-right: 1px solid var(--hair); flex: none; }
.gl-logo img { height: 36px; width: auto; display: block; }
.gl-secs { display: flex; align-items: stretch; }
.gl-sec { display: flex; align-items: center; gap: 9px; padding: 0 22px; color: var(--text-mid); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; border-right: 1px solid var(--hair); position: relative; white-space: nowrap; }
.gl-sec:hover { color: var(--text-hi); background: rgba(255,255,255,0.03); }
.gl-sec.on { color: var(--gold-bright); background: var(--gold-faint); }
.gl-sec.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); }
.gl-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; }
/* the Projects tab is the project picker: a button showing the chosen job, and a panel under it (search, recent, all) */
.gl-projtab { padding: 0; min-width: 220px; align-items: stretch; gap: 0; }
.gl-projtab-go { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 12px 0 22px; text-decoration: none; min-width: 0; flex: 1 1 auto; }
.gl-projtab-go:hover .gl-projtab-v { color: var(--text-hi); }
.gl-projtab-pick { font: inherit; background: none; border: 0; border-left: 1px solid var(--hair); cursor: pointer; width: 40px; flex: none; display: grid; place-items: center; color: var(--text-mid); position: relative; }
.gl-projtab-pick:hover, .gl-projtab.open .gl-projtab-pick { background: rgba(255,255,255,0.05); color: var(--gold-bright); }
.gl-projtab-k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.gl-projtab-v { font-size: 14.5px; font-weight: 600; color: var(--text-mid); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-projtab-v.set { color: var(--text-hi); }
.gl-projtab.on .gl-projtab-k { color: var(--gold); } .gl-projtab.on .gl-projtab-v.set { color: var(--gold-bright); }
.gl-projtab .gl-caret { position: static; margin: 0; }
/* with a project picked, the Projects column drops All Projects and New Project (per Dillon) */
body.gl-projpicked .rail .nav #newClientNav, body.gl-projpicked .rail .nav a[href="/projects/"] { display: none; }
.gl-projpanel { position: absolute; top: 64px; left: 0; width: 360px; background: #16181c; border: 1px solid rgba(74, 87, 255, 0.4); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: 0 22px 60px rgba(0,0,0,0.6); padding: 10px; z-index: 70; }
.gl-projpanel input { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--hair); background: rgba(255,255,255,0.04); color: var(--text-hi); }
.gl-projlists { max-height: min(60vh, 520px); overflow: auto; margin-top: 6px; }
.gl-projhead { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 12px 10px 4px; }
.gl-projrow { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; color: var(--text-mid); font-size: 13.5px; cursor: pointer; }
.gl-projrow:hover { background: rgba(255,255,255,0.06); color: var(--text-hi); }
.gl-projrow.on { background: var(--gold-faint); color: var(--gold-bright); font-weight: 600; }
.gl-projchk { color: var(--gold); font-weight: 700; }
.gl-projnone { padding: 10px 12px; color: var(--text-dim); font-size: 13px; }
.gl-projfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--hair); }
.gl-projfoot a { color: var(--gold-bright); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.gl-projfoot button { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.gl-projfoot button:hover { color: var(--gold-bright); border-color: var(--gold-faint); }
.gl-right { margin-left: auto; display: flex; align-items: center; padding: 0 22px; border-left: 1px solid var(--hair); }
.gl-right .topbar-right { margin-left: 0; }
body.gl-topnav .rail { top: 64px; height: calc(100vh - 64px); padding-top: 12px; }
body.gl-topnav .rail .brand { display: none; }
body.gl-topnav .topbar { min-height: 46px; }
.nav-sec-title { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin: 10px 12px 4px; }
.nav-sec { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 16px 12px 4px; }
.app.collapsed .nav-sec, .app.collapsed .nav-sec-title { display: none; }
.nav-secs { display: none; }
.gl-right .auth-chip { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--hair); }
.gl-projtab-go { color: inherit; }
.gl-sec-ico, .gl-sec-logo, .gl-projcur, .gl-secmenu, .gl-usermenu { display: none; }
/* laptops: the seven tabs plus the account chip must fit without a sideways scroll, so the bar tightens in two steps */
@media (min-width: 901px) and (max-width: 1680px) {
  .gl-sec { padding: 0 14px; } .gl-projtab { min-width: 180px; } .gl-projtab-go { padding-left: 14px; } .gl-projtab-v { max-width: 200px; }
  .gl-right { padding: 0 14px; } .gl-right .auth-chip { margin-left: 10px; padding-left: 10px; }
}
@media (min-width: 901px) and (max-width: 1440px) {
  .gl-sec { padding: 0 10px; font-size: 14px; } .gl-projtab { min-width: 160px; } .gl-projtab-v { max-width: 160px; font-size: 13.5px; }
  .gl-right { padding: 0 10px; } .gl-right .topbar-right { gap: 6px; } .auth-chip { gap: 8px; }
}
/* small laptops and tablets held sideways: the section tabs become their icons (each keeps its name as a tooltip); the logo, project picker, and account chip stay */
@media (min-width: 901px) and (max-width: 1300px) {
  .gl-sec { padding: 0 13px; gap: 0; }
  .gl-sec .gl-sec-lab { display: none; }
  .gl-sec .gl-sec-ico { display: grid; place-items: center; } .gl-sec-ico .ico { width: 22px; height: 22px; }
  .gl-projtab-go .gl-sec-ico { display: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .gl-sec { padding: 0 8px; } .gl-projtab { min-width: 130px; } .gl-projtab-v { max-width: 120px; } .gl-right { padding: 0 8px; }
  .gl-right .auth-chip .auth-name { display: none; } .gl-right .auth-chip .auth-out { padding: 4px 8px; }
}
@media (max-width: 900px) {
  /* phones: every section is an icon (the Dashboard is the G mark), the Projects tab is its icon plus the picker caret, the account chip is the avatar */
  .gl-top { height: 56px; }
  .gl-logo { display: none; }
  .gl-secs { flex: 1 1 auto; min-width: 0; }
  .gl-sec { padding: 0; flex: 0 0 40px; justify-content: center; gap: 0; border-right: 0; }
  .gl-sec .gl-sec-lab { display: none; }
  .gl-sec .gl-sec-ico { display: grid; place-items: center; } .gl-sec-ico .ico { width: 23px; height: 23px; }
  .gl-sec[data-sec="dash"] .gl-sec-ico { display: none; } .gl-sec[data-sec="dash"] .gl-sec-logo { display: block; height: 30px; width: auto; }
  .gl-sec.menu-open { color: var(--gold-bright); background: rgba(255,255,255,0.05); }
  .gl-projtab { min-width: 0; flex: 0 0 auto; }
  .gl-projtab-go { padding: 0; width: 40px; flex: none; align-items: center; justify-content: center; }
  .gl-projtab-go .gl-sec-ico { display: grid; }
  .gl-projtab-k, .gl-projtab-v { display: none; }
  .gl-projtab-pick { width: 28px; border-left: 0; } .gl-projtab-pick.set { color: var(--gold-bright); }
  .gl-projpanel { position: fixed; top: 56px; left: 0; right: 0; width: auto; border-radius: 0 0 14px 14px; max-height: calc(100vh - 56px); overflow: auto; }
  .gl-projcur { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 10px; font-size: 13px; color: var(--text-hi); }
  .gl-projcur span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .gl-projcur b { font-weight: 600; color: var(--gold-bright); }
  .gl-right { padding: 0 6px 0 0; border-left: 0; flex: none; min-width: 0; }
  .gl-right .topbar-right { gap: 0; }
  .gl-right .bell { width: 38px; height: 38px; } .gl-right .bell .ico { width: 19px; height: 19px; }
  .gl-right .bell[title="Refresh"], .gl-right #gearBtn, .gl-right #updBtn, .gl-right .gl-topaction { display: none; }
  .gl-right .auth-chip { margin-left: 0; padding-left: 2px; border-left: 0; }
  .gl-right .auth-chip .auth-name, .gl-right .auth-chip .auth-out { display: none; }
  .gl-right .auth-chip .auth-me { position: relative; padding: 4px; }
  .gl-right .auth-avatar.has-dot::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); border: 2px solid #0e1013; }
  .gl-right .auth-chip.menu-open .auth-avatar { box-shadow: 0 0 0 2px var(--gold-line); }
  body.gl-topnav .rail { top: 56px; height: calc(100vh - 56px); }
  body.gl-topnav .nav-toggle { display: none !important; }   /* the section icons replace the hamburger */
  /* the drop-downs under the bar */
  .gl-secmenu, .gl-usermenu { display: block; position: fixed; top: 56px; left: 0; right: 0; z-index: 70; background: #16181c; border-bottom: 1px solid rgba(74, 87, 255, 0.4); box-shadow: 0 22px 60px rgba(0,0,0,0.6); padding: 10px 12px 14px; max-height: calc(100vh - 56px); overflow: auto; }
  .gl-usermenu { left: auto; width: 270px; border-left: 1px solid rgba(74, 87, 255, 0.4); border-radius: 0 0 0 14px; padding: 8px; }
  .gl-sm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; }
  .gl-sm-title { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
  .gl-sm-proj { display: inline-flex; align-items: center; gap: 8px; max-width: 70%; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-mid); background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 9px; padding: 6px 10px; cursor: pointer; }
  .gl-sm-proj.set { color: var(--gold-bright); border-color: var(--gold-faint); }
  .gl-sm-proj .gl-caret { flex: none; }
  .gl-sm-group { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 10px 4px 4px; }
  .gl-sm-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .gl-sm-item { display: flex; align-items: center; gap: 9px; padding: 10px 10px; border-radius: 10px; border: 1px solid var(--hair); color: var(--text-mid); text-decoration: none; font-size: 13.5px; font-weight: 500; min-width: 0; }
  .gl-sm-item .ico { width: 18px; height: 18px; flex: none; } .gl-sm-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gl-sm-item.on { color: var(--gold-bright); border-color: var(--gold-line); background: var(--gold-faint); }
  .gl-sm-item.nav-admin { display: none; } body.role-admin .gl-sm-item.nav-admin { display: flex; }
  .gl-sm-new { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--gold-line); background: var(--gold-faint); color: var(--gold-bright); cursor: pointer; }
  .gl-sm-new .ico { width: 18px; height: 18px; }
  .gl-um-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--hair); margin-bottom: 6px; } .gl-um-head b { display: block; font-size: 14px; color: var(--text-hi); } .gl-um-head span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; word-break: break-all; }
  .gl-um-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--text-mid); background: none; border: 0; border-radius: 9px; padding: 11px 10px; cursor: pointer; text-decoration: none; position: relative; }
  .gl-um-item .ico { width: 19px; height: 19px; flex: none; } .gl-um-item:hover { background: rgba(255,255,255,0.05); color: var(--text-hi); }
  .gl-um-dot { position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--gold); }
  /* the drawer (opened from a page button such as Plans) still switches sections at its top */
  .nav-secs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 0 0 12px; }
  .nav-secs a { display: block; text-align: center; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--hair); color: var(--text-mid); text-decoration: none; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-secs a.on { color: var(--gold-bright); border-color: var(--gold-line); background: var(--gold-faint); }
}
@media (max-width: 900px) { body.gl-topnav .notif-panel { top: 60px; right: 8px; left: 8px; width: auto; max-height: calc(100vh - 70px); } }
@media (max-width: 900px) {
  .topbar .gl-pagesearch { order: 4; flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; margin: 0; }
  .gl-scrolls { position: relative; box-shadow: inset -18px 0 16px -16px rgba(0,0,0,0.55); }
  .gl-scrolls.gl-scrolled { box-shadow: inset -18px 0 16px -16px rgba(0,0,0,0.55), inset 18px 0 16px -16px rgba(0,0,0,0.55); }
  .gl-scrolls.gl-scrollend { box-shadow: inset 18px 0 16px -16px rgba(0,0,0,0.55); }
  .gl-scrolls::after { content: "Swipe sideways for more"; position: sticky; left: 0; display: block; width: 100%; box-sizing: border-box; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 5px 10px 6px; text-align: right; }
  .gl-scrolls.gl-scrollend::after { visibility: hidden; }
}
@media (max-width: 430px) { .gl-sec { flex-basis: 37px; } .gl-projtab-go { width: 37px; } .gl-projtab-pick { width: 24px; } .gl-right .bell { width: 36px; } }
@media (max-width: 370px) { .gl-sec { flex-basis: 34px; } .gl-projtab-go { width: 34px; } .gl-sec-ico .ico { width: 21px; height: 21px; } .gl-right .bell { width: 32px; } }
/* Sales (no company-data permission): the Sales tab and Tasks are the dashboard; the rest of the bar, the project picker, and New Project are gone */
body.no-company .gl-sec[data-sec]:not([data-sec="sales"]):not([data-sec="tasks"]), body.no-company #glProjPanel, body.no-company #newClientNav, body.no-company .nav-secs a:not([href="/sales/"]):not([href="/tasks/"]), body.no-company .set-tile[href="#home"], body.no-company .gl-sm-new { display: none !important; }
@media (max-width: 900px) { body.no-company .gl-logo { display: flex; } }

/* project pages: the filter is locked to the picked project (shown as a gold label), or the page asks for a project */
body.gl-projlocked select.gl-locked { pointer-events: none; -webkit-appearance: none; appearance: none; color: var(--gold-bright); -webkit-text-fill-color: var(--gold-bright); border-color: var(--gold-line); background: var(--gold-faint); font-weight: 600; opacity: 1; }
body.gl-projlocked .sch-back[href="/bids/"] { display: none; }
body.gl-projlocked #bgBack { display: none; }   /* one budget per project: there is no list to go back to */
body.gl-noproj .main > :not(.topbar):not(.gl-pickproj):not(.site-foot) { display: none !important; }
.gl-pickproj { text-align: center; padding: 60px 20px; }
.gl-pickproj h2 { font-size: 22px; color: var(--text-hi); margin: 0 0 8px; }
.gl-pickproj p { color: var(--text-mid); font-size: 14px; margin: 0 0 18px; }
.gl-pickproj p a { color: var(--gold-bright); font-weight: 600; text-decoration: none; }
.gl-picklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.gl-picklist button { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--gold-line); background: var(--gold-faint); color: var(--gold-bright); cursor: pointer; }
.gl-picklist button:hover { background: rgba(74, 87, 255, 0.24); }
/* the Dashboard page runs full width: no left column */
body.gl-norail .app, body.gl-norail .app.collapsed { grid-template-columns: 1fr; }
body.gl-norail .rail, body.gl-norail .rail-toggle, body.gl-norail .nav-toggle, body.gl-norail .nav-backdrop { display: none !important; }
.gl-topaction { display: inline-flex; align-items: center; gap: 8px; width: auto; margin: 0 16px 0 0; padding: 9px 16px; font-size: 13.5px; }
.gl-topaction .label { display: inline; }
@media (max-width: 900px) { .gl-topaction .label { display: none; } .gl-topaction { padding: 8px 10px; margin-right: 6px; } }

/* Settings > Email Wording: list of emails on the left, the sentences and a live preview on the right */
.set-card.et-card { padding-bottom: 14px; }
.et-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.et-side { position: sticky; top: 12px; }
.et-search { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; margin-bottom: 10px; }
.et-search:focus { border-color: var(--gold-line); }
.et-typesel { display: none; width: 100%; margin-bottom: 10px; }
.et-list { max-height: calc(100vh - 150px); overflow-y: auto; padding-right: 4px; }
.et-group { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 12px 0 4px 10px; }
.et-group:first-child { margin-top: 2px; }
.et-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; font: inherit; border: 1px solid transparent; background: none; color: var(--text-mid); border-radius: 10px; padding: 8px 10px; cursor: pointer; line-height: 1.3; }
.et-item:hover { background: rgba(255,255,255,0.04); color: var(--text-hi); }
.et-item.on { background: rgba(74, 87, 255, 0.12); border-color: var(--gold-faint); color: var(--text-hi); }
.et-item b { display: block; font-size: 13px; font-weight: 600; }
.et-item small { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.et-item .et-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 6px; opacity: 0; }
.et-item.custom .et-dot { opacity: 1; }
.et-item.hide, .et-group.hide { display: none; }
.et-main { min-width: 0; }
.et-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair-soft); margin-bottom: 14px; }
.et-title { font-size: 17px; font-weight: 700; color: var(--text-hi); }
.et-state { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
.et-state.custom { color: var(--gold-bright); }
.et-state.dirty { color: #5e69ff; }
.et-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.et-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); gap: 20px; align-items: start; }
.et-field { margin-bottom: 14px; }
.et-flab { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.et-flab label { font-size: 12.5px; font-weight: 600; color: var(--text-hi); }
.et-flab .et-hint { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.et-changed { display: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-bright); border: 1px solid var(--gold-faint); border-radius: 7px; padding: 1px 6px; }
.et-reset { display: none; margin-left: auto; font: inherit; font-size: 11.5px; color: var(--text-dim); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }
.et-reset:hover { color: var(--text-hi); }
.et-field.changed .et-changed, .et-field.changed .et-reset { display: inline-block; }
.et-in { display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; resize: vertical; }
textarea.et-in { min-height: 60px; }
.et-in:focus { border-color: var(--gold-line); }
.et-field.changed .et-in { border-color: rgba(74, 87, 255, 0.35); }
.et-tokens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.et-chip { font: inherit; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold-bright); background: rgba(74, 87, 255, 0.08); border: 1px solid var(--gold-faint); border-radius: 7px; padding: 2px 7px; cursor: pointer; }
.et-chip:hover { background: rgba(74, 87, 255, 0.2); }
.et-preview { position: sticky; top: 12px; }
.et-pvbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.et-pvlab { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; }
.et-dev { display: inline-flex; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.et-dev button { font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border: 0; background: none; color: var(--text-dim); cursor: pointer; }
.et-dev button.on { background: rgba(74, 87, 255, 0.18); color: var(--gold-bright); }
.et-subject { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 8px 12px; border: 1px solid var(--hair); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.03); }
.et-subject span { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; flex: none; }
.et-subject b { color: var(--text-hi); font-weight: 600; min-height: 1.2em; }
.et-framewrap { position: relative; border: 1px solid var(--hair); border-radius: 0 0 12px 12px; background: #17181b; height: min(72vh, 760px); overflow: hidden; }
.et-framewrap iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; transition: width .2s ease; }
.et-framewrap.phone iframe { width: 390px; margin: 0 auto; border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.et-pvbusy { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity .2s ease; }
.et-framewrap.busy .et-pvbusy { opacity: 1; animation: etbusy 1s linear infinite; }
@keyframes etbusy { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.et-pvnote { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.45; }
.et-adv { margin-top: 10px; border-top: 1px dashed var(--hair); padding-top: 10px; }
.et-adv summary { cursor: pointer; font-size: 12.5px; color: var(--text-mid); font-weight: 600; }
.et-adv[open] summary { color: var(--gold-bright); }
.et-advnote { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 8px 0; }
.et-advnote span { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold-bright); }
.et-adv textarea { display: block; width: 100%; box-sizing: border-box; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; resize: vertical; }
.et-adv textarea:focus { border-color: var(--gold-line); }
.et-advacts { display: flex; gap: 8px; margin-top: 8px; }
.et-msg { margin-top: 10px; font-size: 13px; min-height: 1em; color: #e88b86; }
.et-msg.ok { color: #8fd8a2; }
.et-empty { color: var(--text-dim); font-size: 13px; padding: 20px 0; }
@media (max-width: 1200px) { .et-body { grid-template-columns: 1fr; } .et-preview { position: static; } .et-framewrap { height: 560px; } }
@media (max-width: 900px) {
  .et-wrap { grid-template-columns: 1fr; gap: 10px; }
  .et-side { position: static; } .et-search, .et-list { display: none; } .et-typesel { display: block; }
  .et-framewrap.phone iframe { width: 100%; border: 0; }
}

/* Settings > Team: the roster above the permission matrix */
.tm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 10px; }
.tm-head h3, .tm-sub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; margin: 0; }
.tm-sub { margin: 22px 0 10px; padding-top: 14px; border-top: 1px solid var(--hair-soft); }
.tm-add { border: 1px solid var(--gold-faint); background: rgba(74, 87, 255, 0.05); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.tm-add-grid { display: grid; grid-template-columns: 1.2fr 1.4fr .9fr; gap: 10px; }
.tm-add label { display: block; font-size: 12px; font-weight: 600; color: var(--text-mid); }
.tm-add label input, .tm-add label .dl-sel { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; }
.tm-add label input:focus { border-color: var(--gold-line); }
.tm-check { display: flex !important; align-items: center; gap: 8px; margin-top: 10px; font-weight: 500 !important; } .tm-check input { width: 17px; height: 17px; accent-color: #4a57ff; }
.tm-add-acts { display: flex; gap: 8px; margin-top: 12px; }
.tm-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin: 10px 0 0; }
.tm-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--hair-soft); flex-wrap: wrap; }
.tm-row:last-child { border-bottom: 0; }
.tm-row.off { opacity: .6; }
.tm-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--gold-bright); border: 1px solid var(--gold-line); background: radial-gradient(circle at 50% 40%, rgba(74, 87, 255, 0.18), rgba(18,20,24,0.6)); object-fit: cover; }
.tm-who { flex: 1 1 200px; min-width: 0; }
.tm-who b { display: block; font-size: 14px; color: var(--text-hi); }
.tm-who span { display: block; font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }
.tm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--hair); color: var(--text-dim); }
.tm-tag.role { color: var(--gold-bright); border-color: var(--gold-faint); }
.tm-tag.off { color: #e88b86; border-color: rgba(232,139,134,0.4); }
.tm-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-acts button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--text-mid); cursor: pointer; }
.tm-acts button:hover { color: var(--text-hi); border-color: var(--gold-faint); }
.tm-acts button.danger:hover { color: #e88b86; border-color: rgba(232,139,134,0.5); }
.tm-acts button:disabled { opacity: .5; cursor: default; }
.tm-edit { display: flex; gap: 8px; flex: 1 1 100%; align-items: center; flex-wrap: wrap; padding: 4px 0 2px 46px; }
.tm-edit input { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--hair); background: rgba(18,20,24,0.6); color: var(--text-hi); outline: none; min-width: 0; }
.tm-edit input:focus { border-color: var(--gold-line); }
@media (max-width: 720px) { .tm-add-grid { grid-template-columns: 1fr; } .tm-edit { padding-left: 0; } }