/* My Book Pad — clean white + Claim Blue. Modeled on Jobber, Encircle, Albi.
   "Insurance-grade" professional contractor tool. Light is default; dark is opt-in.
   Single brand accent (Claim Blue) + 4 semantic tokens. No aurora, no glass. */

/* ============ LIGHT (default) ============ */
:root, [data-theme="light"] {
  /* Surfaces — slightly warm off-white for personality, not stark */
  --bg-base:        #F8FAFC;
  --bg-deep:        #EEF2F7;
  --bg-card:        #FFFFFF;
  --bg-card-strong: #FFFFFF;
  --bg-input:       #FFFFFF;
  --bg-soft:        #F1F5F9;
  --border:         #E5E7EB;
  --border-strong:  #CBD5E1;

  /* Type */
  --text:      #0F172A;
  --text-soft: #334155;
  --muted:     #64748B;

  /* Brand — Claim Blue (anchor) */
  --brand:        #0B5FA5;
  --brand-strong: #084680;
  --brand-light:  #3B82F6;
  --brand-soft:   #EFF6FC;

  /* Expanded palette — used sparingly but with intention. Each KPI / card
     type gets its own hue so the dashboard reads at a glance. */
  --coral:   #F43F5E;
  --coral-soft: #FFE4E6;
  --lime:    #10B981;
  --lime-soft:  #D1FAE5;
  --sun:     #F59E0B;
  --sun-soft:   #FEF3C7;
  --sky:     #0EA5E9;
  --sky-soft:   #E0F2FE;
  --plum:    #8B5CF6;
  --plum-soft:  #EDE9FE;
  --teal:    #14B8A6;
  --teal-soft:  #CCFBF1;

  /* Semantic — bound to palette */
  --success: var(--lime);
  --warning: var(--sun);
  --danger:  var(--coral);
  --info:    var(--sky);

  /* Legacy aliases — keep so existing CSS keeps working during the migration. */
  --cyan:    var(--brand);
  --violet:  var(--brand-strong);
  --lime:    var(--success);
  --rose:    var(--danger);
  --amber:   var(--warning);
  --emerald: var(--success);

  /* Layered shadows — colored tint for depth without darkness */
  --shadow-sm:    0 1px 2px rgba(16,24,40,.05);
  --shadow:       0 4px 14px -2px rgba(11,95,165,.10), 0 2px 4px -1px rgba(15,23,42,.04);
  --shadow-md:    0 12px 28px -8px rgba(11,95,165,.18), 0 4px 8px -2px rgba(15,23,42,.05);
  --shadow-lg:    0 24px 48px -12px rgba(11,95,165,.22), 0 8px 16px -4px rgba(15,23,42,.06);
  --shadow-glow:  0 0 0 1px rgba(11,95,165,.10), 0 8px 24px -4px rgba(11,95,165,.18);
  --shadow-glass: var(--shadow-sm);
  --shadow-hover: var(--shadow-md);

  /* Radius — more friendly than enterprise */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Hero gradient — Claim Blue → lighter shade. Used on dashboard hero. */
  --hero-grad: linear-gradient(135deg, #0B5FA5 0%, #1E78C7 45%, #3B82F6 100%);
  --hero-glow: radial-gradient(circle at 90% 10%, rgba(59,130,246,.35), transparent 50%);

  /* Spring easing — used on every hover transition for tactile feel */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
}

/* ============ DARK ============ */
[data-theme="dark"] {
  --bg-base:        #0B1220;
  --bg-deep:        #0E1729;
  --bg-card:        #121C30;
  --bg-card-strong: #0F1828;
  --bg-input:       #0E1729;
  --bg-soft:        #131F36;
  --border:         #1F2A44;
  --border-strong:  #324063;

  --text:      #E5E9F2;
  --text-soft: #B8C3D6;
  --muted:     #6B7891;

  --brand:        #2C7CC0;     /* lighter blue in dark mode for contrast */
  --brand-strong: #4593D6;
  --brand-soft:   rgba(44,124,192,.16);

  --success: #34D399;
  --warning: #F59E0B;
  --danger:  #F87171;
  --info:    #38BDF8;

  /* "*-soft" surface tints — these must be redefined for dark mode,
     otherwise they stay as bright pastels (white-ish) on dark surfaces
     and create harsh "white box" patches inside cards. Use translucent
     RGBA over the accent hue so they tint the dark surface rather than
     painting it light. */
  --coral-soft: rgba(244,63,94,.14);
  --lime-soft:  rgba(16,185,129,.14);
  --sun-soft:   rgba(245,158,11,.14);
  --sky-soft:   rgba(14,165,233,.14);
  --plum-soft:  rgba(139,92,246,.14);
  --teal-soft:  rgba(20,184,166,.14);

  --cyan:    var(--brand);
  --violet:  var(--brand-strong);
  --lime:    var(--success);
  --rose:    var(--danger);
  --amber:   var(--warning);
  --emerald: var(--success);

  --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
  --shadow:       0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-md:    0 4px 8px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.35);
  --shadow-lg:    0 12px 24px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4);
  --shadow-glass: var(--shadow-sm);
  --shadow-hover: var(--shadow-md);

  --hero-grad: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 100%);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-base);
  color: var(--text);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color .35s ease, color .35s ease;
}
body { position: relative; overflow-x: hidden; }
/* Soft ambient glow — three barely-there radial blooms in brand-adjacent
   hues that give the otherwise flat surface life without being noisy. */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 15% 0%,  rgba(59,130,246,.06), transparent 70%),
    radial-gradient(800px 600px at 85% 50%, rgba(139,92,246,.04), transparent 70%),
    radial-gradient(700px 500px at 50% 100%,rgba(20,184,166,.05), transparent 70%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(900px 600px at 15% 0%,  rgba(59,130,246,.10), transparent 70%),
    radial-gradient(800px 600px at 85% 50%, rgba(139,92,246,.07), transparent 70%),
    radial-gradient(700px 500px at 50% 100%,rgba(20,184,166,.07), transparent 70%);
}

a { color: var(--brand); text-decoration: none; transition: color .15s var(--ease-out); font-weight: 500; }
a:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }

h1 { margin: 0 0 .5rem; font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; color: var(--text); }
h2 { margin: 1.5rem 0 .75rem; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
h3 { margin: 1rem 0 .5rem; font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }

/* =====================================================================
   APP SHELL — fixed left sidebar, thin topnav, scrollable main.
   Mirrors Jobber / QBO / Wave layout. Mobile becomes drawer + bottom-tab.
   ===================================================================== */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topnav"
    "sidebar main";
  min-height: 100vh;
}

/* --- Sidebar (flat, white, hairline border — Jobber/Encircle aesthetic) --- */
.sidebar {
  grid-area: sidebar;
  display: flex; flex-direction: column;
  background: var(--bg-card-strong);
  border-right: 1px solid var(--border);
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 60;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .75rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; letter-spacing: -.02em;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(11,95,165,.4);
}
/* MBP logo — the wordmark is built into the image so it stands alone.
   The PNG has a baked-in white background; rather than wrapping it in
   a white card, we use `mix-blend-mode: multiply` to blend the white
   pixels into whatever sits behind the image. White × white = white
   (invisible against light sidebar); white × dark = dark (blends into
   dark sidebar). Colors stay intact in light mode; in dark mode they
   pick up a slight tint from the bg, which reads as natural. */
.brand-mark-img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  /* Crop 20% off the top and 20% off the bottom of the logo (40% total
     vertical crop, 60% of height visible). Aspect-ratio 5:3 means the box
     is ~67% wider than tall — object-fit: cover zooms the square source
     image until it fills that box, chopping exactly 20% off top + bottom. */
  aspect-ratio: 5 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: transform .25s var(--ease-spring);
}
.sidebar-brand:hover .brand-mark-img {
  transform: scale(1.03);
}
/* Dark mode — the multiply blend with a near-black background renders
   colors too dark. Swap to `screen` mode which inverts the math: white
   × dark = white (the white sticker shape still shows, but it now
   reads as the "card" color), while keeping the illustration legible. */
[data-theme="dark"] .brand-mark-img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

/* Visually hidden but available to screen readers (accessibility helper) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.brand-name {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* "+ New" launcher in sidebar — solid Claim Blue button, no gradient */
.sidebar-create { margin: .85rem .75rem .35rem; position: relative; }
.sidebar-create summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem .85rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff; font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  box-shadow: 0 6px 16px -4px rgba(11,95,165,.45), 0 2px 4px rgba(11,95,165,.18);
  transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out);
}
.sidebar-create summary::-webkit-details-marker { display: none; }
.sidebar-create summary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(11,95,165,.5), 0 4px 8px rgba(11,95,165,.22); }
.sidebar-create summary:active { transform: translateY(0); }
.sidebar-create summary .plus { font-size: 1.1rem; line-height: 1; font-weight: 700; }
.sidebar-create-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + .3rem);
  background: var(--bg-card-strong);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: .35rem;
  display: flex; flex-direction: column; gap: .15rem;
  box-shadow: var(--shadow-hover);
  z-index: 70;
}
.sidebar-create-menu a {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  border-radius: 7px;
  font-size: .9rem;
  color: var(--text-soft);
  text-decoration: none;
}
.sidebar-create-menu a:hover { background: rgba(91,140,255,0.10); color: var(--text); text-decoration: none; }

/* Nav links */
.sidebar-nav { display: flex; flex-direction: column; padding: .3rem .65rem; flex: 1 1 auto; gap: .1rem; }
.sidebar-nav .nav-section {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted);
  padding: .9rem .85rem .35rem;
  margin-top: .35rem;
}
.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .8rem;
  border-radius: 9px;
  color: var(--text-soft);
  font-size: .92rem; font-weight: 500;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
  position: relative;
}
.nav-link:hover { background: rgba(91,140,255,0.08); color: var(--text); text-decoration: none; }
.nav-link.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}
.nav-link.is-active::before {
  content: ''; position: absolute; left: -.65rem; top: 25%; bottom: 25%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand);
}
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: currentColor;
  flex-shrink: 0;
}
.nav-icon svg { width: 18px; height: 18px; }
.nav-label { white-space: nowrap; flex: 1 1 auto; }

/* Notification badges (count of needs-attention items per section) */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: .68rem; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.nav-badge-rose  { background: rgba(251,113,133,.18); color: var(--rose);    border: 1px solid rgba(251,113,133,.38); }
.nav-badge-amber { background: rgba(251,191,36,.18);  color: var(--amber);   border: 1px solid rgba(251,191,36,.38); }
.nav-badge-cyan  { background: rgba(34,211,238,.16);  color: var(--cyan);    border: 1px solid rgba(34,211,238,.36); }
.nav-badge-lime  { background: rgba(163,230,53,.18);  color: var(--lime);    border: 1px solid rgba(163,230,53,.38); }
.nav-badge-teal  { background: rgba(20,184,166,.18);  color: #14b8a6;        border: 1px solid rgba(20,184,166,.38); }
.nav-link.is-active .nav-badge { filter: brightness(1.1); }

/* Sidebar footer: user tile + sign out */
.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: .65rem .65rem .9rem;
  display: flex; align-items: center; gap: .5rem;
}
.user-tile {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem;
  border-radius: 9px;
  color: inherit; text-decoration: none;
  transition: background .12s ease;
}
.user-tile:hover { background: rgba(91,140,255,0.08); text-decoration: none; }
.user-tile-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.user-tile-text strong { font-size: .88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-tile-text .small { font-size: .72rem; }
.signout-form { display: inline-flex; flex-shrink: 0; }
.signout-btn {
  appearance: none;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease;
}
.signout-btn svg { display: block; width: 20px; height: 20px; }
.signout-btn:hover  { color: var(--rose); background: rgba(251,113,133,0.10); border-color: var(--rose); transform: translateY(-1px); }
.signout-btn:active { transform: translateY(0); }
.signout-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* Scrim behind mobile drawer */
.sidebar-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 55;
}
body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }

/* --- Topnav (thin row above content) --- */
.topnav {
  grid-area: topnav;
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .85rem;
  padding: .55rem 1.1rem;
  background: var(--bg-card-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.topnav-hamburger {
  display: none;
  background: transparent; border: 1px solid var(--border);
  width: 36px; height: 36px; border-radius: 8px;
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-soft);
}
.topnav-hamburger:hover { color: var(--text); border-color: var(--border-strong); }

.topnav-search {
  flex: 1 1 auto; max-width: 520px;
  position: relative;
}
.topnav-search-icon {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.topnav-search input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .5rem .9rem .5rem 2.3rem;
  color: var(--text);
  font-size: .9rem;
  transition: border-color .15s ease, background .15s ease;
}
.topnav-search input:focus { outline: none; border-color: var(--cyan); background: var(--bg-card); }
.topnav-toggle, .topnav-theme { display: inline-flex; align-items: center; }
/* Theme toggle lives on the far right of the topbar, regardless of whether
   the search field is rendered (search hides on mobile — without this rule
   the toggle would bunch up next to the hamburger on the left). */
.topnav-theme { margin-left: auto; }

/* --- Main content area --- */
.page {
  grid-area: main;
  padding: 1.5rem 1.75rem 2.5rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.page-bare { padding: 1.25rem; max-width: 720px; margin: 4rem auto; }

/* Bottom-tab bar (mobile only) — single-hand thumb-zone nav */
.bottom-tabs {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bg-card-strong);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--border);
  z-index: 65;
  padding: .35rem .25rem max(.4rem, env(safe-area-inset-bottom));
}
.bottom-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .4rem .25rem;
  background: transparent; border: none;
  color: var(--muted);
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
}
.bottom-tab svg { color: currentColor; }
.bottom-tab.is-active { color: var(--cyan); }
.bottom-tab-fab {
  position: relative;
  margin-top: -1.1rem;
}
.bottom-tab-fab svg {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff;
  width: 56px; height: 56px;
  padding: 14px;
  border-radius: 50%;
  box-shadow: 0 12px 28px -4px rgba(11,95,165,.45), 0 4px 8px rgba(11,95,165,.22);
  transition: transform .2s var(--ease-spring);
}
.bottom-tab-fab:active svg { transform: scale(.92); }
.bottom-tab-fab span { color: var(--brand); font-weight: 700; }

/* Brand legacy class still used in some places */
.brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Avatars ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #fff; font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Compact "avatar + name" pair that stays aligned horizontally even when the
   surrounding cell is tight. Used in table cells where avatars sit next to a
   user's name. */
.user-cell { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.user-cell-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-init { font-size: .85rem; letter-spacing: .02em; }
.avatar-sm { width: 28px; height: 28px; font-size: .78rem; }
.avatar-md { width: 40px; height: 40px; font-size: 1rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 2.4rem; border-width: 2px; }
.avatar-cyan-violet  { background: linear-gradient(135deg, var(--cyan),  var(--violet)); }
.avatar-rose-amber   { background: linear-gradient(135deg, var(--rose),  var(--amber)); }
.avatar-lime-cyan    { background: linear-gradient(135deg, var(--lime),  var(--cyan)); }
.avatar-violet-rose  { background: linear-gradient(135deg, var(--violet),var(--rose)); }

.avatar-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.avatar-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; color: var(--text-soft);
  transition: all .25s ease;
}
.theme-toggle:hover { color: var(--cyan); border-color: var(--cyan); transform: rotate(20deg); }
.theme-toggle svg { width: 16px; height: 16px; }
[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.container { padding: 1.25rem; max-width: 1200px; margin: 0 auto; }  /* legacy, gradually replaced by .page */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head h1 {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  margin: 0 0 .25rem;
}
.page-head .actions { display: flex; gap: .55rem; flex-wrap: wrap; }

/* =====================================================================
   PAGE HERO — reusable gradient header for every primary view.
   Title + subtitle on the left, optional stat strip on the right.
   Use class variants .page-hero-* to change the gradient mood per page.
   ===================================================================== */
.page-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.8rem;
  background: var(--hero-grad);
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  color: #fff;
  box-shadow: 0 20px 40px -16px rgba(11,95,165,.32), 0 6px 12px -2px rgba(11,95,165,.18);
  animation: dash-fade-up .5s var(--ease-out) backwards;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 12%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 24px);
  pointer-events: none; border-radius: 50%;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero-title {
  font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  color: #fff; margin: 0;
  display: flex; align-items: center; gap: .65rem;
}
.page-hero-title-emoji { font-size: 1.85rem; }
.page-hero-sub { color: rgba(255,255,255,.78); font-size: .95rem; margin-top: .4rem; max-width: 60ch; }
.page-hero-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .65rem; }
.page-hero-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: -.005em;
}
.page-hero-actions { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.page-hero-actions .btn {
  background: rgba(255,255,255,.18);
  color: #fff; border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-weight: 600;
}
.page-hero-actions .btn:hover {
  background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.4);
  color: #fff; transform: translateY(-1px);
}
.page-hero-actions .btn.primary {
  background: #fff;
  color: var(--brand-strong);
  border-color: transparent;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,.18);
}
.page-hero-actions .btn.primary:hover {
  background: #fff; color: var(--brand-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 24px -4px rgba(0,0,0,.22);
}

/* Right-side stat strip on the hero */
.page-hero-stats {
  display: flex; gap: 1.5rem; align-items: center;
  padding: .85rem 1.25rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--radius);
}
.page-hero-stat { display: flex; flex-direction: column; gap: .1rem; min-width: 90px; }
.page-hero-stat .label { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); font-weight: 600; }
.page-hero-stat .value { font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: .15rem; }
.page-hero-stat .sub { font-size: .75rem; color: rgba(255,255,255,.78); margin-top: .15rem; }

/* Color variants — swap the hero gradient mood per page */
.page-hero-coral  { background: linear-gradient(135deg, #DB2777 0%, #F43F5E 45%, #FB7185 100%);
                    box-shadow: 0 20px 40px -16px rgba(244,63,94,.35), 0 6px 12px -2px rgba(244,63,94,.20); }
.page-hero-lime   { background: linear-gradient(135deg, #047857 0%, #10B981 45%, #34D399 100%);
                    box-shadow: 0 20px 40px -16px rgba(16,185,129,.35), 0 6px 12px -2px rgba(16,185,129,.20); }
.page-hero-sun    { background: linear-gradient(135deg, #B45309 0%, #F59E0B 45%, #FBBF24 100%);
                    box-shadow: 0 20px 40px -16px rgba(245,158,11,.35), 0 6px 12px -2px rgba(245,158,11,.20); }
.page-hero-plum   { background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 45%, #A78BFA 100%);
                    box-shadow: 0 20px 40px -16px rgba(139,92,246,.35), 0 6px 12px -2px rgba(139,92,246,.20); }
.page-hero-teal   { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 45%, #2DD4BF 100%);
                    box-shadow: 0 20px 40px -16px rgba(20,184,166,.35), 0 6px 12px -2px rgba(20,184,166,.20); }
.page-hero-slate  { background: linear-gradient(135deg, #1E293B 0%, #334155 45%, #475569 100%);
                    box-shadow: 0 20px 40px -16px rgba(51,65,85,.40), 0 6px 12px -2px rgba(51,65,85,.20); }

@media (max-width: 800px) {
  .page-hero { grid-template-columns: 1fr; padding: 1.25rem 1.4rem; }
  .page-hero-title { font-size: 1.6rem; }
  .page-hero-stats { padding: .7rem 1rem; gap: 1rem; overflow-x: auto; }
  .page-hero-stat { min-width: 80px; }
  .page-hero-stat .value { font-size: 1.25rem; }
}

/* Hero — solid Claim Blue gradient header, white text. */
.hero {
  background: var(--hero-grad);
  border: 1px solid var(--brand-strong);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  color: #fff;
}
.hero h1 { color: #fff; margin-bottom: .25rem; }
.hero .greeting { color: rgba(255,255,255,0.85); font-size: .9rem; }

/* Stat tiles — flat white, top-border accent, no glass. */
.stats-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.25rem; }
.stat {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, var(--brand)); }
.stat .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .3rem; font-weight: 600; }
.stat .value { font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.stat .sub { font-size: .78rem; color: var(--text-soft); margin-top: .2rem; }
.stat-cyan    { --accent: var(--brand); }
.stat-violet  { --accent: var(--brand-strong); }
.stat-lime    { --accent: var(--success); }
.stat-rose    { --accent: var(--danger); }
.stat-emerald { --accent: var(--success); }
.stat-amber   { --accent: var(--warning); }
a.stat { color: inherit; text-decoration: none; }
a.stat:hover  { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow); }

.charts-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 1.25rem;
}
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem 1.15rem;
  box-shadow: var(--shadow-sm);
}
.chart-card canvas { width: 100% !important; height: 220px !important; }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); text-decoration: none; }
.card-top { display: flex; justify-content: space-between; align-items: start; gap: .5rem; margin-bottom: .25rem; }
.card-top strong { font-size: 1rem; font-weight: 600; }
.card .muted { font-size: .85rem; }
.card .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: .5rem; font-size: .9rem; }
.card .row span { color: var(--muted); font-size: .8rem; }

.pill {
  display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--muted); background: var(--bg-input);
  white-space: nowrap;
  transition: transform .15s var(--ease-spring);
}
a.pill:hover, button.pill:hover { transform: translateY(-1px); }
/* Status pills — soft tinted chips, no glow. Jobber/Albi convention. */
.pill-active    { color: #1E40AF; border-color: #BFDBFE; background: #DBEAFE; }
.pill-open      { color: #1E40AF; border-color: #BFDBFE; background: #DBEAFE; }
.pill-pending   { color: #92400E; border-color: #FDE68A; background: #FEF3C7; }
.pill-halted    { color: #991B1B; border-color: #FCA5A5; background: #FEE2E2; }
.pill-done      { color: #065F46; border-color: #A7F3D0; background: #D1FAE5; }
.pill-completed { color: #065F46; border-color: #A7F3D0; background: #D1FAE5; }
.pill-archived  { color: var(--muted); border-color: var(--border); background: var(--bg-soft); }
.pill-role-admin       { color: #5B21B6; border-color: #DDD6FE; background: #EDE9FE; }
.pill-role-partner     { color: #1E40AF; border-color: #BFDBFE; background: #DBEAFE; }
.pill-role-supervisor  { color: #065F46; border-color: #A7F3D0; background: #D1FAE5; }
.pill-role-contributor { color: #92400E; border-color: #FDE68A; background: #FEF3C7; }
/* Dark-mode pill tweaks — same hues but darker tints. */
[data-theme="dark"] .pill-active,
[data-theme="dark"] .pill-open      { color: #93C5FD; background: rgba(59,130,246,.16); border-color: rgba(59,130,246,.32); }
[data-theme="dark"] .pill-pending   { color: #FCD34D; background: rgba(217,119,6,.18);  border-color: rgba(217,119,6,.32); }
[data-theme="dark"] .pill-halted    { color: #FCA5A5; background: rgba(220,38,38,.16);  border-color: rgba(220,38,38,.32); }
[data-theme="dark"] .pill-done,
[data-theme="dark"] .pill-completed { color: #6EE7B7; background: rgba(5,150,105,.16);  border-color: rgba(5,150,105,.32); }
[data-theme="dark"] .pill-role-admin       { color: #C4B5FD; background: rgba(91,33,182,.20); border-color: rgba(91,33,182,.36); }
[data-theme="dark"] .pill-role-partner     { color: #93C5FD; background: rgba(30,64,175,.20); border-color: rgba(30,64,175,.36); }
[data-theme="dark"] .pill-role-supervisor  { color: #6EE7B7; background: rgba(6,95,70,.22); border-color: rgba(6,95,70,.40); }
[data-theme="dark"] .pill-role-contributor { color: #FCD34D; background: rgba(146,64,14,.20); border-color: rgba(146,64,14,.36); }
.admin-link { color: var(--violet) !important; font-weight: 600; }
.admin-link:hover { color: var(--rose) !important; }

/* Basic / Advanced dashboard toggle in the topbar */
.view-toggle {
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-soft) !important;
  padding: .25rem .7rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.view-toggle:hover {
  color: var(--cyan) !important;
  border-color: var(--cyan);
  transform: translateY(-1px);
}
.view-toggle.pill-active { color: var(--cyan) !important; }
.view-toggle.pill-completed { color: var(--emerald) !important; }

/* Insurance vs Retail tabs above the new-project form */
.type-picker {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.type-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  text-decoration: none;
}
.type-tab:hover { color: var(--text); text-decoration: none; }
.type-tab.is-active {
  color: var(--text);
  background: var(--bg-card-strong);
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.type-tab.is-active[data-type="insurance"] { color: var(--cyan); border-color: rgba(34,211,238,0.35); }
.type-tab.is-active[data-type="retail"]    { color: var(--lime); border-color: rgba(163,230,53,0.35); }

/* "Needs attention" admin panel */
.needs-attention {
  border-left: 3px solid var(--rose);
  margin-bottom: 1.25rem;
}
.needs-attention h2 { color: var(--rose); margin-top: 0; }
.needs-attention .issue-row {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--border);
}
.needs-attention .issue-row:first-child { border-top: none; }
.needs-attention .issue-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem;
  padding: 0 .5rem; border-radius: 999px;
  background: rgba(251,113,133,0.12);
  color: var(--rose);
  font-weight: 700; font-size: .85rem;
}

/* Quick-add expense form — compact 4-up row */
.quick-add { margin-bottom: 1.25rem; border-left: 3px solid var(--cyan); }
.quick-add-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.5fr 1fr 0.8fr;
  gap: .55rem;
}
.quick-add-grid label { margin: 0; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.quick-add-grid label span { font-weight: 500; }
.quick-add-grid input,
.quick-add-grid select { min-width: 0; width: 100%; max-width: 100%; }
.quick-add-grid input[type="file"] { padding: .45rem .5rem; }
@media (max-width: 700px) {
  /* On phones, stack each field on its own row. Previously the grid stayed
     2-column on phones, which clipped the inputs (and the 16px iOS auto-zoom
     font-size override made it worse). Single column is plenty readable. */
  .quick-add-grid { grid-template-columns: 1fr; gap: .75rem; }
  .quick-add-grid input[type="file"] { padding: .55rem .65rem; }
}

/* Inline new-client picker in the new-project form */
.client-picker {
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: .85rem 1rem .5rem;
  margin-bottom: 1rem;
  background: var(--bg-input);
}
.client-picker legend {
  padding: 0 .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* "Auto-fill from PDF" panel on new project — highlighted */
details.pdf-prefill {
  border-color: rgba(167, 139, 250, 0.4);
  background: linear-gradient(120deg, rgba(167,139,250,0.07), rgba(34,211,238,0.05));
}
details.pdf-prefill summary { color: var(--violet); font-weight: 600; }

/* Pin star button */
.pin-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted) !important;
  width: auto !important;
  transition: color .15s ease, transform .15s ease;
  vertical-align: middle;
  display: inline-flex;
}
.pin-btn:hover { color: var(--amber) !important; transform: scale(1.15) !important; }
.pin-btn.is-pinned { color: var(--amber) !important; }
.card-pinned {
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 4px 32px rgba(251, 191, 36, 0.12), 0 1px 0 rgba(255,255,255,0.05) inset !important;
}
.row-pinned td { background: rgba(251, 191, 36, 0.04); }

/* Notes timeline */
.notes-list { list-style: none; padding: 0; margin: 0; }
.note-item {
  display: flex; gap: .65rem;
  padding: .65rem 0;
  border-top: 1px solid var(--border);
}
.note-item:first-child { border-top: none; padding-top: .25rem; }
.note-body { flex: 1 1 auto; min-width: 0; }
.note-meta { font-size: .85rem; margin-bottom: .15rem; }
.note-text { white-space: pre-wrap; word-break: break-word; }

/* ---------- Photo lightbox ---------- */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 2rem;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 8px 60px rgba(0,0,0,0.6);
  border-radius: 6px;
}
/* Receipt overlay variant — iframe view for both images and PDFs.
   Keeps the user inside the PWA instead of bouncing to a new tab. */
.receipt-overlay { padding: 1rem; }
.receipt-overlay iframe {
  width: min(96vw, 1100px);
  height: min(92vh, 1400px);
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 60px rgba(0,0,0,.55);
}
body.modal-open { overflow: hidden; }
@media (max-width: 720px) {
  .receipt-overlay { padding: .5rem; }
  .receipt-overlay iframe { width: 100vw; height: calc(100vh - 4rem); border-radius: 8px; }
  .receipt-overlay .lb-close { top: .5rem; right: .5rem; }
}
.lightbox-overlay button {
  position: absolute;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important;
  transition: all .15s;
}
.lightbox-overlay button:hover { background: rgba(255,255,255,0.2) !important; transform: none !important; }
.lightbox-overlay .lb-close { top: 1rem; right: 1rem; }
.lightbox-overlay .lb-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lightbox-overlay .lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-overlay .lb-counter {
  position: absolute; bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Print styles ---------- */
.print-only { display: none; }
@media print {
  body { background: white !important; color: black !important; }
  body::before { display: none !important; }
  .topbar, .no-print, .actions, form, .danger-form, .quick-add, .photo-grid, details.settings, .lightbox-overlay { display: none !important; }
  .print-only { display: block !important; }
  .card, .totals, .form, .table, .claim-card, .hero {
    background: white !important; color: black !important;
    box-shadow: none !important; border-color: #ccc !important;
    backdrop-filter: none !important;
  }
  .muted, .small { color: #555 !important; }
  a { color: black !important; text-decoration: underline; }
  table { page-break-inside: avoid; }
  h1, h2, h3 { color: black !important; }
}

/* Dashboard status breakdown row */
.status-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: -.25rem 0 1.5rem;
}
.status-chip {
  text-decoration: none;
  font-size: .8rem !important;
  padding: .35rem .75rem !important;
  cursor: pointer;
  transition: all .2s ease;
}
.status-chip:hover { transform: translateY(-1px); text-decoration: none; filter: brightness(1.15); }

/* Quick status switcher on project page */
.status-switcher {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin: -.5rem 0 1.25rem;
  align-items: center;
}
.status-switcher .status-btn {
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: .72rem !important;
  padding: .25rem .65rem !important;
  opacity: 0.55;
  transition: all .2s ease;
}
.status-switcher .status-btn:hover { opacity: 1; transform: translateY(-1px); }
.status-switcher .status-btn.is-current {
  opacity: 1;
  font-weight: 700;
  box-shadow: 0 0 0 2px currentColor inset, 0 0 12px rgba(255,255,255,0.05);
  cursor: default;
}

/* Insurance claim card on project page */
.claim-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-glass);
}
.claim-grid {
  display: grid; gap: .85rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.claim-grid > div { line-height: 1.4; }
.claim-grid .claim-full { grid-column: 1 / -1; }
.claim-label {
  display: block;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: .15rem; font-weight: 600;
}

input, textarea, select, button { font: inherit; }
/* `input:not([type])` catches bare <input name="..."> — without it, those
   inputs render with the browser's default white background, which looks
   broken in dark mode. Same idea for tel, url, time, datetime-local. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="date"],
input[type="tel"], input[type="url"], input[type="time"],
input[type="datetime-local"], input:not([type]),
textarea, select {
  width: 100%; padding: .5rem .75rem;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); outline: none;
  font-size: .9rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
label { display: block; margin-bottom: .75rem; font-size: .78rem; color: var(--muted); font-weight: 500; }
label input, label textarea, label select { margin-top: .3rem; }
.checkbox { display: flex; align-items: center; gap: .55rem; }
.checkbox input { width: auto; margin: 0; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; }
@media (max-width: 540px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

/* Buttons — primary has gradient + glow + lift, ghosts are clean. */
.btn, button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: -.005em;
  transition: transform .2s var(--ease-spring), background .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.btn:hover, button:hover { border-color: var(--border-strong); text-decoration: none; background: var(--bg-deep); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active, button:active { transform: translateY(0); }
.btn:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn.primary, button.primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px -4px rgba(11,95,165,.45), 0 2px 4px rgba(11,95,165,.18);
}
.btn.primary:hover, button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(11,95,165,.5), 0 4px 8px rgba(11,95,165,.22);
  color: #fff; border-color: transparent;
}
.btn.small, button.small, .btn.btn-sm, button.btn-sm {
  padding: .3rem .55rem; font-size: .8rem; border-radius: var(--radius-sm);
}
button.danger, .btn.danger { background: transparent; color: var(--danger); border-color: rgba(220,38,38,.32); }
button.danger:hover, .btn.danger:hover { background: rgba(220,38,38,.08); border-color: var(--danger); color: var(--danger); }
button.link { background: none; border: none; padding: 0; color: var(--brand); cursor: pointer; font-weight: 500; }
button.link:hover { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; background: none; }
button.link.danger { color: var(--danger); }

/* =====================================================================
   TABLES v3 — Linear / Stripe / Notion patterns.
   Hairline rows, no zebra. Status dots with halo glow. Hover gets a
   brand wash + left edge accent + revealed action icons. Sticky header
   gains a scroll shadow. Numeric cells use tabular numerals. Mobile
   collapses each row into a stacked card (no horizontal scroll).
   ===================================================================== */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: .9rem;
}
.table th, .table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: middle;
  word-break: break-word; overflow-wrap: anywhere;
}

/* Header — tiny uppercase "label" feel. Sticky, with a soft shadow once
   the body scrolls. Solid bg so text never bleeds through scrolling rows. */
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-card);
  font: 700 .68rem/1 Inter, system-ui, sans-serif;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--border);
  padding: .7rem 1rem;
  white-space: nowrap;
}
.table thead::after {
  /* Scroll shadow under the sticky header — appears on scroll via animation-timeline */
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 4px;
  background: linear-gradient(180deg, rgba(15,23,42,.10), transparent);
  opacity: 0;
}
@supports (animation-timeline: scroll()) {
  .table { animation: table-scroll-flag linear; animation-timeline: scroll(self); }
  @keyframes table-scroll-flag { from { --scrolled: 0; } to { --scrolled: 1; } }
}

.table thead th:first-child { padding-left: 1.2rem; }
.table tbody td:first-child { padding-left: 1.2rem; font-weight: 500; color: var(--text); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { position: relative; transition: background .15s var(--ease-out); }

/* Hover — brand wash + brand left edge + reveal hidden actions */
.table tbody tr:hover td { background: var(--brand-soft); }
.table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 0 var(--brand); }
.table tbody tr:hover .row-action-icon {
  opacity: 1; transform: translateX(0);
}

/* Sortable headers — chevron hint */
.table thead th .th-sort,
.table thead th a {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: color .12s var(--ease-out);
}
.table thead th a:hover { color: var(--brand); }

/* Numeric columns — tabular numerals so columns line up perfectly */
.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.dim td { color: var(--muted); }

/* Big total / summary row — accent stripe + soft bg */
.big td { font-size: 1.08rem; font-weight: 700; padding-top: 1rem; padding-bottom: 1rem; background: var(--bg-soft) !important; }
.big td:first-child { box-shadow: inset 3px 0 0 0 var(--brand); }

/* Action cell — right-aligned, no-wrap, icons that fade in on row-hover */
.table td:last-child:not(.num) { text-align: right; white-space: nowrap; }
/* Keep .row-actions as a normal table cell (display: table-cell) so the
   column gets a real share of the table's auto-layout. We align contents
   to the right with text-align — DON'T set display:flex on the td or the
   cell falls out of the table layout and the buttons render outside it. */
.table .row-actions { text-align: right; white-space: nowrap; }
.row-action-icon {
  /* Hidden until row hover. Used by .row-actions buttons that have this class. */
  opacity: 0; transform: translateX(4px);
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out);
}
@media (hover: none) { .row-action-icon { opacity: 1; transform: none; } }

/* === Status dots — small dot with a colored halo. Replaces fat pills for "live" indicators. === */
.status-dot {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 500; color: var(--text);
}
.status-dot::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.status-dot.dot-open::before    { background: #3B82F6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.status-dot.dot-pending::before { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.status-dot.dot-halted::before  { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.status-dot.dot-completed::before { background: #059669; box-shadow: 0 0 0 3px rgba(5,150,105,.18); }
.status-dot.dot-archived::before  { background: #94A3B8; box-shadow: 0 0 0 3px rgba(148,163,184,.18); }
/* Pulsing "live" variant — used on Open / In-progress projects */
.status-dot.dot-live::before { animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 8%,  transparent); }
}

/* Row-state variants */
.table tbody tr.row-pinned td {
  background: linear-gradient(90deg, var(--sun-soft), color-mix(in srgb, var(--sun-soft) 25%, transparent)) !important;
}
.table tbody tr.row-pinned:hover td { background: linear-gradient(90deg, var(--sun-soft), var(--brand-soft)) !important; }
.table tbody tr.row-paid td { opacity: .68; }
.table tbody tr.row-paid:hover td { opacity: 1; }

/* Selected row (for tables with bulk-select checkboxes) */
.table tbody tr.is-selected td { background: var(--brand-soft); }
.table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 0 var(--brand); }

/* Compact density variant — toggle by adding data-density="compact" on .table */
.table[data-density="compact"] th { padding: .5rem .8rem; font-size: .62rem; }
.table[data-density="compact"] td { padding: .55rem .8rem; font-size: .85rem; }

/* Empty cell — auto em-dash */
.table td:empty::after { content: '—'; color: var(--muted); font-weight: 400; }

/* Inline avatar+name pair */
.table .row-person { display: inline-flex; align-items: center; gap: .55rem; }

/* --- Site info card (employees only on project Overview tab) --- */
.site-info-card {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--teal-soft) 0%, var(--bg-card) 75%);
  border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--border));
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  margin: 1rem 0 1.25rem;
  box-shadow: var(--shadow-sm);
}
.site-info-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.site-info-body { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; min-width: 0; }
.site-info-label {
  font-size: .65rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal);
}
.site-info-client {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text); letter-spacing: -.01em;
}
.site-info-address {
  display: inline-block;
  margin-top: .15rem;
  font-size: .95rem; font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}
.site-info-address:hover { text-decoration: underline; }
.site-info-phone {
  margin-top: .15rem;
  font-size: .9rem; font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
}
.site-info-phone:hover { color: var(--brand); }
.table .row-person-meta { display: flex; flex-direction: column; line-height: 1.15; }
.table .row-person-name { font-weight: 500; color: var(--text); }
.table .row-person-sub  { font-size: .75rem; color: var(--muted); }

/* Phone — by default tables horizontally scroll (safe for any table).
   Tables that have `data-label="…"` on every cell can opt into the card
   stack via the `.table-stack` class for a more mobile-native feel. */
@media (max-width: 700px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table thead { white-space: nowrap; }
  .table th, .table td { padding: .55rem .65rem; font-size: .85rem; }
}
@media (max-width: 700px) {
  .table.table-stack {
    border: none; background: transparent; box-shadow: none;
    overflow: visible; white-space: normal;
  }
  .table-stack thead { display: none; }
  .table-stack tbody, .table-stack tr { display: block; }
  .table-stack tbody tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: .75rem;
    padding: .5rem .25rem;
  }
  .table-stack tbody tr:hover td { background: transparent; }
  .table-stack tbody tr:hover td:first-child { box-shadow: none; }
  .table-stack tbody tr:hover { box-shadow: var(--shadow), inset 3px 0 0 0 var(--brand); }
  .table-stack td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--border);
    text-align: right;
  }
  .table-stack tbody td:first-child {
    font-size: 1rem; font-weight: 600;
    padding-top: .65rem;
    text-align: left;
  }
  .table-stack td:last-child { border-bottom: none; }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted);
  }
  .table-stack .row-action-icon { opacity: 1; transform: none; }
}

.totals {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem; margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.totals-table { width: 100%; }
.totals-table td { padding: .3rem 0; }
.totals-table th { padding: .25rem 0; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; text-align: left; }
.totals-table th.num { text-align: right; }
.totals-table td.num { text-align: right; }
.totals-table .pos, .table .pos { color: var(--emerald); }
.totals-table .neg, .table .neg { color: var(--rose); }
.settle-up {
  margin: .75rem 0 0;
  padding: .65rem .9rem;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.25);
  border-radius: 10px;
  color: var(--text);
}

.form {
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.form-actions { display: flex; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.row-form { display: flex; gap: .55rem; flex-wrap: wrap; margin: .75rem 0; }
.row-form input { flex: 1 1 120px; }
.danger-form { margin-top: 1.25rem; }

details.settings {
  margin-top: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .65rem 1rem;
}
details.settings summary { cursor: pointer; color: var(--muted); padding: .35rem 0; font-weight: 500; }
details.settings[open] summary { margin-bottom: .85rem; color: var(--text); }

.upload { border: 1px dashed var(--border-strong); padding: 1rem; border-radius: 12px; background: var(--bg-input); }

/* Project site photos */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .55rem;
  margin-top: 1rem;
}
.photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-input);
}
.photo-tile a { display: block; height: 100%; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; display: block; }
.photo-tile:hover img { transform: scale(1.06); }
.photo-tile form { position: absolute; top: 4px; right: 4px; margin: 0; }
.photo-delete {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.65) !important;
  color: #fff !important;
  border: none !important;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1;
  padding: 0 !important;
  opacity: 0.7;
  transition: all .15s ease;
}
.photo-delete:hover {
  opacity: 1;
  background: var(--rose) !important;
  transform: scale(1.1);
}

.list { padding-left: 1rem; }
.list li { margin: .35rem 0; }

/* --- Login screen — branded card on a soft glow backdrop --- */
.login-shell {
  position: relative;
  min-height: calc(100vh - 4rem);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.login-glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 500px at 20% 30%, rgba(11,95,165,.18), transparent 65%),
    radial-gradient(600px 400px at 80% 70%, rgba(139,92,246,.12), transparent 65%);
  pointer-events: none;
}
.login-card {
  width: 100%; max-width: 420px;
  padding: 2.25rem 2rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: 1.4rem; }
.login-mark {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 100%);
  color: #fff;
  box-shadow: 0 6px 14px -2px rgba(11,95,165,.4);
}
.login-name {
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.025em;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* Image-based login brand — transparent PNG sits naturally on the login
   card. Stretches to the full width of the card (capped sensibly) and
   scales aspect-ratio-preserved. */
.login-brand-img-wrap {
  display: block;
  width: 100%;
  margin: 0 auto 1.7rem;
}
.login-brand-img {
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent;
  /* Same 20% top + 20% bottom crop as the sidebar logo */
  aspect-ratio: 5 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
}
.login-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 .35rem; }
.login-sub { color: var(--muted); font-size: .95rem; margin: 0 0 1.5rem; }
.login-form { display: flex; flex-direction: column; gap: 0; }
.login-form label { margin-bottom: 1rem; }
.login-submit {
  width: 100%; justify-content: center;
  padding: .7rem 1rem !important;
  font-size: .95rem !important;
  margin-top: .35rem;
}

.filters { display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: center; }
.filters input, .filters select { flex: 1 1 160px; }

.flash {
  padding: .75rem 1rem; border-radius: 12px;
  margin-bottom: 1.25rem; border: 1px solid;
  backdrop-filter: blur(12px);
}
.flash-ok    { background: rgba(52,211,153,.10); border-color: rgba(52,211,153,.4); color: var(--emerald); }
.flash-error { background: rgba(251,113,133,.10); border-color: rgba(251,113,133,.4); color: var(--rose); }
.flash-warn  { background: rgba(251,191,36,.10); border-color: rgba(251,191,36,.4);  color: var(--amber); }
.flash-info  { background: rgba(34,211,238,.10); border-color: rgba(34,211,238,.4);  color: var(--cyan); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

@media (max-width: 960px) {
  /* App grid collapses to single column. Sidebar becomes a slide-in drawer. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas: "topnav" "main";
  }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px;
    /* Override the desktop `height: 100vh` — on iOS Safari, 100vh extends
       under the home indicator + browser chrome, pushing the bottom of the
       sidebar (user tile + logout) off-screen. Using `height: auto` with
       top:0 + bottom:0 lets the sidebar correctly span only the visible
       viewport. 100dvh fallback handles browsers that prefer explicit height. */
    height: auto;
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 75;
    /* The sidebar itself must NOT scroll — the inner nav scrolls instead.
       Without this, position: sticky on .sidebar-foot misbehaves inside the
       transformed drawer on iOS, causing the foot to overlap the nav items
       above it instead of pinning to the bottom. */
    overflow: hidden;
    padding-bottom: 0;
  }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: 0 18px 60px rgba(0,0,0,.5); }
  /* When the side drawer is open, hide the bottom-tabs bar — the drawer
     already has full navigation, and the user-tile at the bottom of the
     drawer was visually stacking on top of the tabs. */
  body.sidebar-open .bottom-tabs { display: none; }
  /* Pin the user tile + logout to the bottom of the visible drawer so
     they stay accessible even when the nav above scrolls. The sidebar
     itself is the scroll container (overflow-y: auto), so sticky here
     anchors the foot to the bottom of that scroll viewport. */
  /* On mobile: the sidebar itself doesn't scroll (overflow: hidden), the
     NAV scrolls internally, and the foot is a normal flex child sitting at
     the bottom of the column. This is far more reliable than sticky inside
     a transformed drawer (which iOS Safari mishandles). */
  .sidebar-nav {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;   /* required so flex: 1 1 auto can actually shrink */
  }
  .sidebar-foot {
    position: static;
    flex: 0 0 auto;
    background: var(--bg-card-strong);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 14px -8px rgba(15,23,42,.08);
    /* Respect iOS home indicator so user tile + logout aren't hidden under it. */
    padding-bottom: max(.9rem, env(safe-area-inset-bottom));
  }
  .topnav-hamburger { display: inline-flex; }
  .page { padding: 1rem 1rem 5rem; }   /* extra bottom padding so bottom-tabs don't overlap */
  .bottom-tabs { display: flex; }
}

/* Tablet (700–960px) — keep the table layout but with horizontal scroll if needed. */
@media (min-width: 701px) and (max-width: 960px) {
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .table thead { white-space: nowrap; }
  .table th, .table td { padding: .65rem .8rem; font-size: .87rem; }
}

@media (max-width: 700px) {
  /* ---- Type bump: body 15px, inputs 16px+ (iOS auto-zoom-on-focus kicks
         in if input font-size < 16px, which forces the user to zoom the
         whole page. Setting 16px is the canonical fix.) ---- */
  html, body { font-size: 15px; line-height: 1.55; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="date"],
  input[type="tel"], textarea, select {
    font-size: 16px !important;
    padding: .65rem .85rem;
  }
  /* Min 44px tap targets — Apple HIG minimum, prevents fat-finger misses */
  .btn, button, .btn.btn-sm, button.btn-sm,
  .nav-link, .project-tab, .bottom-tab, .signout-btn, .theme-toggle, .topnav-hamburger {
    min-height: 44px;
  }
  /* Circular icon-only buttons must keep equal width + height on mobile,
     otherwise the 44px min-height alone turns them into pill ovals. */
  .theme-toggle, .topnav-hamburger {
    min-width: 44px; width: 44px; height: 44px;
  }
  .theme-toggle svg, .topnav-hamburger svg { width: 20px; height: 20px; }
  .btn, button { padding: .65rem 1rem; font-size: .95rem; }
  .btn.btn-sm, button.btn-sm { padding: .55rem .85rem; font-size: .9rem; }

  /* Sidebar drawer fills almost full width on tiny screens — bigger nav rows */
  .sidebar { width: 88vw; max-width: 340px; }
  .nav-link { padding: .85rem 1rem; font-size: 1rem; gap: .85rem; }
  .nav-link .nav-icon svg { width: 22px; height: 22px; }
  .sidebar-create summary { padding: .85rem 1rem; font-size: 1rem; }
  .user-tile { padding: .65rem .8rem; }
  .user-tile-text strong { font-size: .95rem; }

  /* Topnav stays slim — search/toggle hide on phone (sidebar has Search anyway) */
  .topnav { padding: .5rem .75rem; gap: .55rem; min-height: 56px; }
  .topnav-search, .topnav-toggle { display: none; }

  /* Bottom-tab bar is the primary nav on mobile — make labels readable */
  .bottom-tab { padding: .5rem .2rem; font-size: .72rem; gap: .15rem; }
  .bottom-tab svg { width: 26px; height: 26px; }

  /* Page padding + heading sizes — generous, not cramped */
  .container { padding: 1rem; }
  .page { padding: 1rem .9rem 6rem; }
  .page-head { gap: .65rem; margin-bottom: 1.1rem; }
  .page-head h1 { font-size: 1.55rem; }
  h1 { font-size: 1.55rem; }
  h2 { font-size: .78rem; }
  h3 { font-size: 1.05rem; }
  p { line-height: 1.55; }

  /* Hero — bigger headline, KPI tile becomes full-width below */
  .hero, .hero-v2 { padding: 1.2rem 1.3rem; }
  .hero-v2 { grid-template-columns: 1fr; }
  .hero-v2 .hero-left h1, .dash-hero-greet { font-size: 1.65rem; }
  .hero-v2 .hero-kpi, .dash-hero-kpi {
    padding: 1rem 1.15rem; min-width: 0; width: 100%; text-align: left;
    border: 1px solid rgba(255,255,255,.22);
  }
  .dash-hero { padding: 1.25rem 1.3rem; }
  .dash-hero-kpi .kpi-value { font-size: 2rem; }
  .page-hero { padding: 1.25rem 1.35rem; }
  .page-hero-title { font-size: 1.6rem; }
  .page-hero-sub { font-size: .92rem; }
  .page-hero-stats { padding: .75rem 1rem; gap: 1.1rem; flex-wrap: wrap; }
  .page-hero-stat .value { font-size: 1.4rem; }

  /* Stat tiles — 2-up grid, big numbers, readable labels */
  .dash-stats, .stats-grid, .stats-grid-v2 { gap: .75rem; grid-template-columns: 1fr 1fr; }
  .dash-stat, .stats-grid-v2 .stat { padding: 1rem 1.05rem; }
  .dash-stat-value, .stat .value, .money-kpi-value { font-size: 1.55rem; }
  .dash-stat-label, .stat .label { font-size: .68rem; }
  .dash-stat-sub, .stat .sub { font-size: .8rem; }
  .stats-grid-v2 .stat .stat-icon { font-size: 1.15rem; top: .65rem; right: .8rem; }

  /* Filters */
  .filters { gap: .5rem; }
  .filters input, .filters select { flex: 1 1 100%; min-width: 0; }
  .filter-chips { width: 100%; }
  .filter-chips .chip { flex: 1 1 auto; justify-content: center; padding: .55rem .65rem; font-size: .85rem; min-height: 38px; }

  /* Project + debt cards stack to single column */
  .project-grid, .debt-grid, .proj-grid { grid-template-columns: 1fr; gap: .85rem; }
  .project-card, .proj-card { padding: 1rem 1.15rem 1.05rem; }
  .proj-card-head strong { font-size: 1.05rem; }

  /* Activity feed: tighter layout, allow vendor name to wrap */
  .activity-row {
    grid-template-columns: 40px 1fr auto;
    gap: .65rem;
    padding: .7rem .15rem;
  }
  .activity-emoji { width: 40px; height: 40px; font-size: 1.15rem; }
  .activity-line-1 { font-size: .98rem; white-space: normal; }
  .activity-line-2 { font-size: .82rem; }
  .activity-money { font-size: 1rem; }

  /* Tables (general) — slightly bigger cell padding so taps land cleanly */
  .table th, .table td { padding: .7rem .8rem; font-size: .9rem; }
  /* Action buttons inside table rows — fingers, not pixels */
  .table .btn, .table button, .table .btn.btn-sm, .table button.btn-sm {
    min-height: 38px; padding: .5rem .75rem; font-size: .85rem;
  }
  .row-actions { white-space: normal; gap: .5rem; }

  /* Employee expenses bulk-bar wraps to 2 lines */
  .bulk-bar { flex-direction: column; align-items: stretch; gap: .6rem; padding: .8rem; }

  /* Money snapshot 2-up on phone */
  .money-snapshot { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
  .money-kpi { padding: 1rem; }

  /* Upload card stays usable on tiny screens, but bigger tap area */
  label.upload-card { padding: 1.1rem 1.15rem; gap: .8rem; }
  .upload-card-emoji { font-size: 1.85rem; }
  .upload-card-text strong { font-size: 1rem; }

  /* Dash two-column body collapses */
  .dash-grid, .dash-body { grid-template-columns: 1fr; }
  .dash-section { margin-top: 1.5rem; }

  /* Sticky topnav search hidden; sidebar drawer's Search nav-link is primary */

  /* Forms */
  label { font-size: .85rem; }
  .row-2, .row-3 { grid-template-columns: 1fr; gap: .85rem; }
}

@media (max-width: 380px) {
  /* Tiny phones — drop to single-column stat grid so numbers stay legible */
  .dash-stats, .stats-grid, .stats-grid-v2 { grid-template-columns: 1fr; }
  .dash-stat-value, .stat .value { font-size: 1.7rem; }
  .page-hero-title { font-size: 1.45rem; }
  .dash-hero-greet { font-size: 1.5rem; }
}

/* ---------- Employee expenses page ---------- */

/* Filter chip row */
.filter-chips { display: inline-flex; gap: .3rem; padding: .25rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; }
.filter-chips .chip {
  display: inline-flex; align-items: center;
  padding: .35rem .85rem;
  font-size: .82rem; font-weight: 600;
  color: var(--text-soft);
  border-radius: 999px;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.filter-chips .chip:hover { color: var(--text); text-decoration: none; }
.filter-chips .chip.is-active { color: var(--text); background: var(--bg-card-strong); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }

/* Bulk action bar above the table */
.bulk-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .65rem .9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: .65rem;
}
.bulk-select-all { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; color: var(--text-soft); font-size: .9rem; }
.bulk-select-all input { width: 16px; height: 16px; cursor: pointer; }

/* Bulk-action "Reimbursed by" picker */
.bulk-reimburser { display: inline-flex; align-items: center; gap: .45rem; }
.bulk-reimburser select {
  padding: .35rem .55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text); font-size: .88rem;
  min-width: 9rem;
}

/* Action-cell children: each rendered at the SAME explicit height so a
   row's height isn't driven by which element is tallest. <summary> in
   particular needs forcing — its default display: list-item ignores the
   .btn class's inline-flex unless we override explicitly. */
.table .row-actions > .btn,
.table .row-actions > a.btn,
.table .row-actions > button,
.table .row-actions > .reimburse-menu,
.table .row-actions > .reimburse-menu > summary {
  height: 30px;
  line-height: 1;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  margin-left: .35rem;
}
.table .row-actions > *:first-child { margin-left: 0; }
.table .row-actions > .reimburse-menu > summary {
  list-style: none;
  margin: 0;       /* the wrapping <details> already has the left margin */
}

/* .btn-spacer = invisible button-shaped slot. Reserves the same width as the
   matching real button so the surrounding buttons (Open in particular)
   stay anchored at the same x-coordinate across rows even when View or
   ✓ Paid ▾ isn't present on a row. */
.table .row-actions > .btn-spacer {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}
/* Scope the action-column min-width + per-row min-height to tables that
   actually HAVE row-actions. Otherwise these rules leak into every list
   (projects, clients, etc.) and squeeze unrelated columns. */
.table:has(td.row-actions) th:last-child,
.table td.row-actions { min-width: 11rem; }
.table:has(td.row-actions) tbody td { height: 3.25rem; }
@media (max-width: 720px) {
  .table:has(td.row-actions) th:last-child,
  .table td.row-actions { min-width: 0; white-space: normal; }
  .table:has(td.row-actions) tbody td { height: auto; }
}

/* Belt-and-suspenders: currency cells never break across two lines. */
.num { white-space: nowrap; }

/* Status-cell sub-label — "· Reimbursed by Partner Name" rendered inline
   next to the Paid pill instead of on a second line. Keeps row heights
   identical between Paid and Outstanding rows, which is what makes the
   right-side action buttons align across rows. */
.status-by {
  display: inline-block;
  margin-left: .3rem;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* "✓ Paid ▾" dropdown menu — collapses the reimburse-partner picker into a
   single button that opens a small menu of partners. Each partner is a
   one-click submit form, so the user picks "reimbursed by X" in one tap. */
.reimburse-menu { position: relative; display: inline-block; }
.reimburse-menu > summary {
  list-style: none; cursor: pointer;
  /* relies on .btn .btn-sm classes being on the summary tag */
}
.reimburse-menu > summary::-webkit-details-marker { display: none; }
.reimburse-menu > summary::marker { content: ''; }
.reimburse-menu[open] > .reimburse-menu-panel { display: block; }
.reimburse-menu-panel {
  display: none; position: absolute;
  top: calc(100% + .35rem); right: 0; z-index: 20;
  min-width: 12rem; max-width: 18rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .3rem 0;
  box-shadow: 0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05);
}
.reimburse-menu-head {
  padding: .3rem .85rem .4rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.reimburse-menu-panel form { margin: 0; }
.reimburse-menu-panel button {
  display: block; width: 100%;
  padding: .5rem .85rem;
  text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-size: .88rem; color: var(--text);
  white-space: nowrap;
}
.reimburse-menu-panel button:hover,
.reimburse-menu-panel button:focus {
  background: var(--bg-soft); outline: none;
}
.reimburse-menu-panel button.is-current {
  color: var(--brand); font-weight: 600;
}
.reimburse-menu-revert {
  color: var(--danger) !important;
}
.reimburse-menu-revert:hover,
.reimburse-menu-revert:focus {
  background: rgba(220,38,38,.08) !important;
}
.reimburse-menu-divider {
  height: 1px; margin: .25rem 0;
  background: var(--border);
}
/* Flip the panel upward when the JS detects it would overflow viewport. */
.reimburse-menu-panel.reimburse-menu-panel-up {
  top: auto;
  bottom: calc(100% + .35rem);
}

/* Vendor cell — ellipsize long names, full text on hover via native title.
   Also click-able since the anchor inside is already the receipt link. */
.table .cell-vendor {
  max-width: 14rem;
}
.table .cell-vendor .vendor-link,
.table .cell-vendor .vendor-name {
  display: inline-block; max-width: 100%;
  vertical-align: bottom;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) {
  .table .cell-vendor { max-width: 10rem; }
}

/* Sortable column headers */
.sortable-table th .th-sort,
.sortable-table th a.th-sort {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .2rem;
}
.sortable-table th a.th-sort:hover { color: var(--text); }

/* Per-row paid / unpaid coloring */
.table tr.row-paid   td { opacity: .72; }
.table tr.row-unpaid td { /* default look — outstanding */ }
.table .row-actions { white-space: nowrap; }

/* Inline lock badge next to vendor when receipt is on file */
.lock-pill {
  display: inline-block;
  margin-left: .35rem;
  font-size: .82rem;
  opacity: .65;
  cursor: help;
}

/* Compact action button */
.btn.btn-sm, button.btn-sm {
  padding: .3rem .65rem;
  font-size: .82rem;
  border-radius: 8px;
}

/* Table hover affordance */
/* .table-hover is now equivalent to the base — kept for backwards compat. */
.table.table-hover { /* no extra rules needed */ }

/* PWA install banner — appears once on first visit (and again 30 days after
   the user dismisses it). Pinned to the bottom on mobile so it doesn't
   block the user's flow, top-right on desktop. */
.mbp-install-banner {
  position: fixed;
  z-index: 200;
  left: 12px;
  right: 12px;
  /* Lift above the bottom-tabs bar on mobile (it's fixed at bottom: 0, ~56px
     tall, plus iOS safe-area). On desktop the bar is hidden so we override
     to top-right via the min-width: 961px breakpoint below. */
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px -8px rgba(11,95,165,.25),
              0 4px 12px rgba(15,23,42,.10);
  color: var(--text);
  animation: mbp-install-in .25s var(--ease-spring);
}
@keyframes mbp-install-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mbp-install-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}
[data-theme="dark"] .mbp-install-icon { mix-blend-mode: normal; }
.mbp-install-text {
  display: flex; flex-direction: column;
  gap: .1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.mbp-install-text strong {
  font-size: .95rem;
  letter-spacing: -.01em;
}
.mbp-install-text span {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.35;
}
.mbp-install-go {
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: .55rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.mbp-install-go:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}
.mbp-install-x {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
  padding: 0 !important;
  min-height: 0 !important;
}
.mbp-install-x:hover { background: var(--bg-soft); color: var(--text); }
/* iOS variant has no install button (Apple flow), only the dismiss × */
.mbp-install-ios .mbp-install-go { display: none; }

@media (min-width: 961px) {
  /* Desktop: float top-right instead of bottom-blocking. */
  .mbp-install-banner {
    left: auto;
    top: 12px;
    right: 12px;
    bottom: auto;
    max-width: 400px;
  }
}

/* ============================================================
   CROSS-ORG COLLABORATION (Phase 6)
   ============================================================ */

/* Pending invitations inbox at top of dashboard. Sticks out so the user
   sees "you have a collaboration request" before scrolling past it. */
.collab-inbox {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--bg-card) 60%);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.collab-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .65rem;
  font-size: 1rem;
}
.collab-inbox-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .65rem .75rem;
  margin-top: .35rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.collab-inbox-body { flex: 1 1 auto; min-width: 0; }
.collab-inbox-note {
  margin-top: .35rem;
  padding: .35rem .55rem;
  font-style: italic;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-left: 2px solid var(--brand-light);
  border-radius: var(--radius-sm);
  font-size: .85rem;
}
.collab-inbox-actions {
  display: flex; gap: .5rem; flex-shrink: 0;
}
@media (max-width: 700px) {
  .collab-inbox-row { flex-direction: column; align-items: stretch; }
  .collab-inbox-actions { flex-direction: row; }
  .collab-inbox-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Active Partnerships list on Org Settings → Partnerships tab. Each card
   shows a partner workspace + the projects shared, with a bulk revoke. */
.partnership-list {
  list-style: none;
  padding: 0;
  margin: .85rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.partnership-card {
  padding: .85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.partnership-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.partnership-card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  min-width: 0;
}
.partnership-card-name strong { font-size: 1rem; }
.partnership-projects {
  list-style: none;
  margin: 0;
  padding: .55rem .85rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.partnership-projects li { font-size: .9rem; }
@media (max-width: 700px) {
  .partnership-card-head { flex-direction: column; align-items: stretch; gap: .55rem; }
  .partnership-card-head form .btn { width: 100%; justify-content: center; }
}

/* Cross-org invite card on the project detail page — collapsible block
   listing existing invitations + a form to invite a new partner. */
.collab-card {
  margin: 1rem 0 1.25rem;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.collab-card > summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .95rem;
}
.collab-card > summary::-webkit-details-marker { display: none; }
.collab-card[open] > summary {
  border-bottom: 1px solid var(--border);
}
.collab-card-body {
  padding: .85rem 1rem 1rem;
}
.collab-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.collab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .6rem .85rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.collab-row-info { display: flex; flex-wrap: wrap; gap: .35rem .65rem; align-items: baseline; min-width: 0; }
.collab-row-info strong { font-size: .95rem; }
.collab-row-status { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.collab-row-revoked, .collab-row-declined { opacity: .65; }
.collab-invite-form { margin: 0; }

/* Org picker — shown after a multi-org user authenticates. Same login-card
   visual frame, with a vertical list of workspace cards underneath. */
.org-picker-card { max-width: 460px; }
.org-picker-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .75rem;
}
.org-picker-row-form { margin: 0; }
.org-picker-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  transition: all .15s ease;
  color: var(--text) !important;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.org-picker-row:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.org-picker-name { flex: 1 1 auto; min-width: 0; }
.org-picker-arrow { color: var(--brand); font-size: 1.1rem; flex-shrink: 0; }
.org-picker-cancel { width: 100%; justify-content: center; }

/* Client-info chip on the new-project form — shows the picked client's
   phone and email as a read-only reference so the user knows they grabbed
   the right person. Hidden by default; revealed via JS. */
.client-info-chip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .55rem .8rem;
  margin: -.25rem 0 .65rem;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .9rem;
}
.client-info-row { display: inline-flex; align-items: center; gap: .35rem; }
.client-info-row:empty { display: none; }

/* Phase navigator — chip row at the top of a project's detail page that lets
   users jump between sibling phases (Emergency / Restoration / etc.) of the
   same insurance claim. Admins always see the "+ Add phase" button. */
.phase-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: .55rem .75rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.phase-nav-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: .25rem;
}
.phase-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-soft);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all .15s ease;
}
.phase-chip:hover {
  color: var(--brand);
  border-color: var(--brand-light);
  text-decoration: none;
}
.phase-chip.is-active {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
  cursor: default;
  pointer-events: none;
}
.phase-chip-add {
  color: var(--brand);
  border-style: dashed;
}
.phase-chip-add:hover {
  background: var(--brand-soft);
  border-style: solid;
}
@media (max-width: 380px) {
  /* Tiny phones — phase chips can crowd / overflow horizontally. Allow
     horizontal scroll inside the nav and trim padding on chips. */
  .phase-nav { overflow-x: auto; flex-wrap: nowrap; padding: .5rem .65rem; gap: .35rem; }
  .phase-nav .phase-chip,
  .phase-nav .phase-chip-add { padding: .3rem .65rem; font-size: .8rem; flex-shrink: 0; }
}

/* Role-visibility matrix on Org Settings — checkbox grid where rows are
   field names and columns are the configurable roles. */
.visibility-table { max-width: 640px; }
.visibility-table th, .visibility-table td { vertical-align: middle; }
.visibility-table .visibility-role-col { text-align: center; width: 130px; }
.visibility-table .visibility-cell { text-align: center; padding: .6rem; }
.visibility-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; cursor: pointer;
}
.visibility-toggle input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--brand);
  cursor: pointer;
}

/* Per-row role quick-toggle cluster on the admin team list. The forms
   inline themselves so the buttons sit side-by-side; flex-wrap kicks in
   only when the cell is too narrow to hold them. */
.role-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.role-toggle-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.role-toggle-btn {
  white-space: nowrap;
  font-size: .8rem !important;
  padding: .35rem .65rem !important;
  min-height: 32px !important;  /* override the global 44px mobile rule —
                                    this is a secondary admin tool, not a
                                    primary action; 32px is tap-friendly enough */
}
.role-toggle-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
}
@media (max-width: 700px) {
  /* On mobile the table scrolls horizontally so each cell has its
     natural width — keep buttons compact and on one line. */
  .role-toggle { gap: .3rem; }
  .role-toggle-btn {
    font-size: .78rem !important;
    padding: .3rem .55rem !important;
  }
}

/* =====================================================================
   DASHBOARD v2 — bolder, denser, more actionable
   ===================================================================== */

/* --- Hero with KPI strip --- */
.hero-v2 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.hero-v2 .hero-left h1 {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.25rem;
  line-height: 1.05;
}
.hero-v2 .greeting { color: rgba(255,255,255,0.65); font-size: .92rem; }
.hero-v2 .hero-meta { color: rgba(255,255,255,0.55); font-size: .88rem; margin-top: .25rem; }
.hero-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--lime); border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--lime);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .6; transform: scale(1.15); }
}
.hero-kpi {
  text-align: right;
  padding: .85rem 1.25rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  min-width: 200px;
}
.kpi-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,0.55); }
.kpi-value { font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-top: .15rem; }
.kpi-trend { font-size: .82rem; font-weight: 600; margin-top: .25rem; }
.kpi-up   { color: var(--emerald); }
.kpi-down { color: var(--rose); }
.kpi-flat { color: rgba(255,255,255,0.55); font-weight: 500; }

/* --- Stats grid v2 --- */
.stats-grid-v2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stats-grid-v2 .stat { padding: 1.15rem 1.25rem; position: relative; overflow: hidden; }
.stats-grid-v2 .stat .stat-icon {
  position: absolute; top: .75rem; right: .85rem;
  font-size: 1.4rem; opacity: .35;
  filter: grayscale(20%);
}
.stats-grid-v2 .stat .label { padding-right: 2rem; }
.stats-grid-v2 .stat .value { font-size: 2rem; }

/* --- Two-column body grid --- */
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.dash-data { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dash-actions { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (max-width: 1000px) {
  .dash-grid { grid-template-columns: 1fr; }
  .hero-v2 { grid-template-columns: 1fr; }
  .hero-v2 .hero-kpi { text-align: left; min-width: 0; }
}

/* Re-skin chart cards inside dash-data: subtler title + better spacing */
.dash-data .chart-card { margin-bottom: 0; }
.dash-data .chart-card h3 { margin: 0 0 .85rem; font-size: .95rem; font-weight: 600; color: var(--text-soft); }
.chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .65rem;
  padding: 1.75rem 1rem;
  color: var(--muted);
  text-align: center;
}
.chart-empty-emoji { font-size: 2.25rem; opacity: .6; }
.chart-empty p { margin: 0; max-width: 36ch; line-height: 1.5; }

/* --- Action cards (right column) --- */
.action-card {
  border-left: 3px solid var(--cyan);
  margin: 0 !important;
}
.action-card h2 {
  margin-top: 0 !important;
  font-size: .82rem !important;
  color: var(--text-soft) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.action-card.needs-attention { border-left-color: var(--rose); }
.action-card.needs-attention h2 { color: var(--rose) !important; }
.action-card-amber { border-left-color: var(--amber); }
.action-card-amber h2 { color: var(--amber) !important; }
.action-card-lime  { border-left-color: var(--lime); }
.action-card-lime h2 { color: var(--lime) !important; }
.action-card-link { display: block; text-decoration: none; color: inherit; transition: transform .15s ease, border-color .15s ease; }
.action-card-link:hover { transform: translateY(-2px); text-decoration: none; }
.action-big-money {
  font-size: 1.9rem; font-weight: 700; color: var(--text);
  letter-spacing: -.02em;
  margin: .3rem 0 .35rem;
}

/* Reminder rows inside action cards */
.reminder-row { display: grid; grid-template-columns: 88px 1fr; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--border); }
.reminder-row:first-of-type { border-top: none; }
.reminder-when { font-weight: 700; font-size: .82rem; align-self: center; text-align: right; }
.reminder-body a { font-weight: 600; }

/* --- Section heads --- */
.dash-section { margin-top: 1.75rem; }
.dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .85rem; }
.dash-section-head h2 {
  margin: 0;
  font-size: .82rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: .12em;
}
.dash-section-head .actions { display: flex; gap: .5rem; }

/* --- Project cards with progress bar --- */
.project-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.project-card {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: var(--shadow-glass);
}
.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}
.project-card-head { display: flex; justify-content: space-between; align-items: start; gap: .5rem; }
.project-card-name { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.project-card-name strong { font-size: 1rem; line-height: 1.2; word-break: break-word; }
.project-icon { font-size: 1.05rem; }
.project-card-client { color: var(--muted); font-size: .85rem; }
.project-card-address {
  margin-top: .35rem;
  font-size: .92rem;
  color: var(--text-soft);
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}
.project-card-money {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: .65rem;
  padding-top: .35rem;
  border-top: 1px solid var(--border);
}
.project-card-money > div { display: flex; flex-direction: column; gap: .1rem; }
.project-card-money strong { font-size: .92rem; }
.project-card-pinned { border-color: rgba(251,191,36,0.45); box-shadow: 0 4px 32px rgba(251,191,36,0.12), 0 1px 0 rgba(255,255,255,0.05) inset; }

/* Progress bar — animated gradient + shimmer on page load */
.progress {
  position: relative;
  height: 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-bar {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 60%, var(--sky) 100%);
  border-radius: 999px;
  transition: width .8s var(--ease-out);
  box-shadow: 0 0 12px rgba(11,95,165,.35);
  animation: progress-shimmer 1s var(--ease-out);
}
@keyframes progress-shimmer {
  from { width: 0 !important; }
}
.progress-label {
  position: absolute; right: 0; top: -1.15rem;
  font-size: .68rem; font-weight: 600;
  color: var(--text-soft); letter-spacing: .05em;
}

/* --- Activity feed (recent expenses) --- */
.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem .25rem;
  border-bottom: 1px solid var(--border);
}
.activity-row:last-child { border-bottom: none; }
.activity-emoji {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--sky-soft) 100%);
  border: 1px solid var(--border);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform .2s var(--ease-spring), box-shadow .2s var(--ease-out);
}
a.activity-emoji-link:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow);
  border-color: var(--brand-light);
}
.activity-line-1 { font-size: .95rem; }
.activity-line-2 { margin-top: .15rem; }
.activity-money { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.activity-zero { color: var(--rose); opacity: .8; }
.activity-zero::after { content: ' ⚠'; font-size: .8rem; }

/* --- Empty states --- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: .65rem;
  padding: 2.5rem 1rem;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
}
.empty-state-emoji { font-size: 2.5rem; opacity: .6; }
.empty-state p { margin: 0; }

/* --- Project detail money snapshot (3-up KPIs with progress) --- */
.money-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: .25rem 0 1.5rem;
}
.money-kpi {
  position: relative;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-glass);
  overflow: hidden;
}
.money-kpi::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent, var(--cyan));
  opacity: .8;
}
.money-kpi-cyan    { --accent: var(--cyan); }
.money-kpi-violet  { --accent: var(--violet); }
.money-kpi-emerald { --accent: var(--emerald); }
.money-kpi-rose    { --accent: var(--rose); }
.money-kpi-label   { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.money-kpi-value   { font-size: 1.85rem; font-weight: 700; letter-spacing: -.02em; margin: .25rem 0 .15rem; color: var(--text); }
.money-kpi-sub     { font-size: .82rem; color: var(--text-soft); }
.money-kpi .progress { margin-bottom: .5rem; }
.money-kpi .progress-label { color: var(--muted); top: .35rem; right: .1rem; }

/* Per-person reimbursement debt cards on Employee Expenses page */
.debt-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1rem 0 1.5rem;
}
.debt-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .95rem 1.1rem 1.1rem;
  background: linear-gradient(135deg, rgba(251,113,133,0.10), rgba(167,139,250,0.08));
  border: 1px solid rgba(251,113,133,0.28);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.debt-card:hover { transform: translateY(-2px); border-color: var(--rose); text-decoration: none; box-shadow: 0 8px 32px rgba(251,113,133,0.18); }
.debt-card-head { display: flex; align-items: center; gap: .55rem; }
.debt-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--amber));
  color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: .92rem;
}
.debt-name { font-weight: 600; }
.debt-amount { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.debt-meta { font-size: .82rem; color: var(--muted); }

/* --- Project assignments (admins/partners assigning employees) --- */
.assignment-card {
  border-left: 3px solid var(--violet);
  scroll-margin-top: 80px;   /* keep clear of the sticky topbar when jumped to */
}
.assignment-card h2 { margin-top: 0; color: var(--violet) !important; }
.assignment-card.is-flashed {
  animation: assign-flash 1.4s ease-out;
}
@keyframes assign-flash {
  0%   { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
  20%  { box-shadow: 0 0 0 6px rgba(167,139,250,0.35); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
.assignee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .55rem;
  margin: .5rem 0;
}
.assignee-chip {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .65rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.assignee-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.assignee-meta strong { font-size: .92rem; }
.assignee-chip .btn.btn-sm {
  padding: .15rem .45rem;
  font-size: 1rem; line-height: 1;
  border-color: rgba(251,113,133,0.35);
  color: var(--rose);
}
.assignee-chip .btn.btn-sm:hover { background: rgba(251,113,133,0.10); }

/* --- Project detail tab strip — sticky, scrollable, with brand underline --- */
.project-tabs {
  position: sticky; top: 56px;
  z-index: 40;
  display: flex; gap: .2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin: 0 -1.75rem 1.5rem;
  padding: .65rem 1.75rem .15rem;
  background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-base) 75%, transparent 100%);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.project-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .95rem;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  font-size: .88rem; font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.project-tab span { font-size: 1.05rem; }
.project-tab:hover { color: var(--brand); background: var(--brand-soft); text-decoration: none; }
.project-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: linear-gradient(180deg, transparent, var(--brand-soft));
  font-weight: 700;
}
/* Anchored sections live in the normal flow with scroll-margin so the
   sticky topnav + tab-strip don't cover the heading when jumped to. */
/* Tab-style behavior — only the active section is visible. JS toggles
   .is-active based on the URL hash (or defaults to #tab-overview on first
   load so the user sees the project summary first). Sections are
   show/hide rather than scroll-anchor, so the page stays compact and
   role-restricted content stays out of view unless the user picks that
   tab — important for keeping claim info / totals from leaking. */
.project-section { scroll-margin-top: 130px; display: none; }
.project-section.is-active { display: block; }
/* Fallback for browsers without JS — show everything (graceful degrade). */
html.no-js .project-section { display: block; }
/* Active tab visual treatment in the tab strip */
.project-tab.is-active {
  color: var(--brand) !important;
  border-bottom-color: var(--brand) !important;
  font-weight: 700;
}

@media (max-width: 600px) {
  .project-tabs { margin: 0 -1rem 1rem; padding: .45rem 1rem .15rem; }
  .project-tab { padding: .4rem .65rem; font-size: .82rem; }
  .project-tab span { font-size: .9rem; }
}

/* --- Integration rows on the Settings page --- */
.integration-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 0;
  border-top: 1px solid var(--border);
}
.integration-row:first-of-type { border-top: none; }
.integration-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: #fff; font-weight: 700; font-size: 1.05rem;
  flex-shrink: 0;
}
.integration-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.integration-text strong { font-size: .95rem; }
.integration-text code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; padding: .05rem .3rem; background: var(--bg-input); border-radius: 4px; }

/* Expandable integration card — click the row header to open details */
details.integration-row-expandable { display: block; padding: 0; border-top: 1px solid var(--border); }
details.integration-row-expandable:first-of-type { border-top: none; }
details.integration-row-expandable > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 0;
}
details.integration-row-expandable > summary::-webkit-details-marker { display: none; }
details.integration-row-expandable .integration-chevron {
  margin-left: .35rem;
  color: var(--muted);
  transition: transform .15s ease;
  display: inline-block;
}
details.integration-row-expandable[open] .integration-chevron { transform: rotate(180deg); }
.integration-body { padding: .25rem 0 .75rem 3.6rem; }
.integration-kv {
  display: grid; grid-template-columns: 120px 1fr;
  gap: .35rem .85rem;
  margin: 0; padding: 0;
  font-size: .88rem;
}
.integration-kv dt { color: var(--muted); }
.integration-kv dd { margin: 0; color: var(--text); }
@media (max-width: 600px) {
  .integration-body { padding-left: 0; }
  .integration-kv { grid-template-columns: 1fr; gap: .15rem; }
  .integration-kv dt { margin-top: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
}

/* Assignment count chip in the projects list */
.assign-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem;
  padding: 0 .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  background: rgba(167,139,250,0.12);
  color: var(--violet);
  border: 1px solid rgba(167,139,250,0.32);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.assign-count:hover { background: rgba(167,139,250,0.22); text-decoration: none; transform: translateY(-1px); }
.assign-count-empty {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
  font-size: .72rem;
  font-weight: 600;
  padding: 0 .6rem;
}
.assign-count-empty:hover { color: var(--violet); border-color: var(--violet); }

/* Issue-count chip in the projects list — hover shows tooltip listing what's wrong */
.issue-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 1.6rem;
  padding: 0 .55rem;
  border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  background: rgba(251,113,133,0.14);
  color: var(--rose);
  border: 1px solid rgba(251,113,133,0.4);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, transform .15s ease;
}
.issue-chip:hover { background: rgba(251,113,133,0.22); transform: translateY(-1px); text-decoration: none; }

/* Inline "receipts waiting for amounts" list in the chart empty state */
.zero-amount-list {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.zero-amount-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: .5rem;
}
.zero-amount-list ul { list-style: none; padding: 0; margin: 0; }
.zero-amount-list li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.zero-amount-list li:last-child { border-bottom: none; }
.zero-amount-list li a { font-weight: 600; }

/* Vendor name styled as a "view the receipt photo" link */
.vendor-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed rgba(91,140,255,0.45);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.vendor-link:hover { color: var(--cyan); border-bottom-color: var(--cyan); text-decoration: none; }
.vendor-link::after {
  content: ' 👁';
  font-size: .8em;
  opacity: .55;
  margin-left: .15rem;
}

/* Dedicated "View receipt" button — leans cyan so it reads as a different action than Open/Edit */
.btn.btn-view {
  border-color: rgba(34,211,238,0.32);
  color: var(--cyan);
  white-space: nowrap;
}
.btn.btn-view:hover {
  background: rgba(34,211,238,0.10);
  border-color: var(--cyan);
}

/* Activity feed: when there's a photo, the emoji tile itself becomes a tappable view-receipt link */
a.activity-emoji-link {
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
a.activity-emoji-link:hover {
  transform: scale(1.06);
  border-color: var(--cyan);
  background: rgba(34,211,238,0.08);
  text-decoration: none;
}

/* =====================================================================
   DASHBOARD v3 — clean white surface, big numbers, tight hierarchy.
   Modeled on Jobber/Encircle/Albi. Replaces dash-grid + hero-v2 + stats-grid-v2.
   ===================================================================== */

/* --- Hero — dramatic gradient header with white text and glow overlay --- */
.dash-hero {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.75rem 1.9rem;
  background: var(--hero-grad);
  border: none;
  border-radius: var(--radius-xl);
  margin-bottom: 1.5rem;
  box-shadow: 0 24px 48px -16px rgba(11,95,165,.35), 0 8px 16px -4px rgba(11,95,165,.20);
  color: #fff;
}
.dash-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}
.dash-hero::after {
  /* Decorative diagonal lines — subtle texture for depth */
  content: '';
  position: absolute; right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 24px);
  pointer-events: none;
  border-radius: 50%;
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero-greet {
  font-size: 1.9rem; font-weight: 700;
  color: #fff;
  letter-spacing: -.025em;
  line-height: 1.1;
}
.dash-hero-meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-top: .35rem; color: rgba(255,255,255,.78); font-size: .9rem; }
.dash-hero-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .65rem;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.25);
}
.dash-hero-kpi {
  position: relative;
  padding: 1rem 1.35rem;
  min-width: 240px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  text-align: right;
  transition: background .2s var(--ease-out), transform .2s var(--ease-spring);
}
.dash-hero-kpi-link:hover { background: rgba(255,255,255,.20); transform: translateY(-2px) scale(1.02); text-decoration: none; }
.dash-hero-kpi .kpi-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.7); font-weight: 600; }
.dash-hero-kpi .kpi-value { font-size: 2.15rem; font-weight: 700; color: #fff; margin-top: .15rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-hero-kpi .kpi-trend { font-size: .8rem; font-weight: 600; margin-top: .25rem; color: rgba(255,255,255,.85); }
.kpi-up   { color: #6EE7B7; }
.kpi-down { color: #FCA5A5; }
.kpi-flat { color: rgba(255,255,255,.65); }
[data-theme="light"] .dash-hero { color: #fff; }
.dash-hero .muted, .dash-hero .small { color: rgba(255,255,255,.7) !important; }

/* --- KPI tiles — each card gets its own hue. Glow + lift on hover. --- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-stat {
  position: relative; overflow: hidden;
  display: block;
  padding: 1.15rem 1.3rem 1.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .15s ease;
}
.dash-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent, var(--brand)), var(--accent-2, var(--brand-light)));
}
.dash-stat::after {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, var(--accent, var(--brand)), transparent 65%);
  opacity: .08;
  pointer-events: none;
  border-radius: 50%;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
a.dash-stat:hover { border-color: var(--accent, var(--brand-strong)); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
a.dash-stat:hover::after { opacity: .18; transform: scale(1.1); }
.dash-stat-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700;
  display: flex; align-items: center; gap: .35rem;
}
.dash-stat-value {
  font-size: 2.1rem; font-weight: 700; color: var(--text);
  margin-top: .35rem; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dash-stat-sub { font-size: .82rem; color: var(--text-soft); margin-top: .45rem; font-weight: 500; }
/* Color variants — applied via class on the stat */
.dash-stat-attention { --accent: var(--warning); --accent-2: var(--coral); }
.dash-stat-attention .dash-stat-value { color: var(--warning); }
.dash-stat:nth-of-type(4n+1) { --accent: var(--brand);  --accent-2: var(--brand-light); }
.dash-stat:nth-of-type(4n+2) { --accent: var(--plum);   --accent-2: var(--brand-light); }
.dash-stat:nth-of-type(4n+3) { --accent: var(--teal);   --accent-2: var(--lime); }
.dash-stat:nth-of-type(4n+4) { --accent: var(--coral);  --accent-2: var(--sun); }

/* --- Welcome banner — friendly first-visit hero with 3 action cards --- */
.dash-welcome {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.dash-welcome-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 0% 0%,   rgba(11,95,165,.10), transparent 60%),
    radial-gradient(50% 70% at 100% 0%, rgba(14,165,233,.08), transparent 60%),
    radial-gradient(40% 60% at 50% 100%, rgba(20,184,166,.07), transparent 60%);
  pointer-events: none;
}
.dash-welcome::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light), var(--sky));
  z-index: 2;
}
.dash-welcome-inner {
  position: relative; z-index: 1;
  padding: 1.5rem 1.6rem 1.4rem;
}
.dash-welcome-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand);
  margin-bottom: .35rem;
}
.dash-welcome-title {
  margin: 0 0 .35rem; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--text);
}
.dash-welcome-sub {
  margin: 0 0 1.25rem; color: var(--muted); font-size: .95rem; line-height: 1.55;
  max-width: 60ch;
}
.dash-welcome-actions {
  display: grid; gap: .65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash-welcome-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text);
  transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.dash-welcome-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(11,95,165,.10);
}
.dash-welcome-card-icon {
  font-size: 1.55rem; line-height: 1; flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border-radius: var(--radius-sm);
}
.dash-welcome-card-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0; flex: 1;
}
.dash-welcome-card-body strong {
  font-size: .92rem; font-weight: 600; color: var(--text);
}
.dash-welcome-card-arrow {
  color: var(--muted); font-weight: 700; flex-shrink: 0;
  transition: transform .15s var(--ease-out), color .15s var(--ease-out);
}
.dash-welcome-card:hover .dash-welcome-card-arrow {
  color: var(--brand); transform: translateX(3px);
}
.dash-welcome-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .85rem;
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px dashed var(--border);
}
.dash-welcome-doc {
  color: var(--text); text-decoration: none; font-weight: 500; font-size: .88rem;
}
.dash-welcome-doc:hover { color: var(--brand); }
.dash-welcome-skip-form { margin: 0; }
.dash-welcome-skip {
  background: transparent; border: 0; padding: 0;
  color: var(--muted); font-size: .85rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.dash-welcome-skip:hover { color: var(--text); }

/* Welcome banner — mobile: stack cards vertically */
@media (max-width: 720px) {
  .dash-welcome-inner { padding: 1.2rem 1.1rem 1.1rem; }
  .dash-welcome-title { font-size: 1.35rem; }
  .dash-welcome-actions { grid-template-columns: 1fr; }
  .dash-welcome-card { padding: .85rem .9rem; }
  .dash-welcome-foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
}

/* --- First-run setup checklist — gradient header bar + soft glow --- */
.dash-checklist {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.dash-checklist::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light), var(--sky));
}
.dash-checklist-head {
  display: flex; align-items: start; justify-content: space-between; gap: .5rem;
  margin-bottom: .85rem;
}
.dash-checklist-title { margin: 0 0 .15rem; font-size: 1.1rem; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: -.015em; }
.dash-checklist-list { list-style: none; padding: 0; margin: .15rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.dash-checklist-list li {
  display: flex; align-items: center; gap: .6rem;
  padding: .3rem 0;
  font-size: .92rem;
}
.dash-checklist-list li.is-done .dash-check-label { color: var(--muted); text-decoration: line-through; }
.dash-checklist-list li a { color: var(--brand); font-weight: 500; text-decoration: none; }
.dash-checklist-list li a:hover { text-decoration: underline; text-underline-offset: 2px; }
.dash-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: 999px;
  font-size: .8rem; font-weight: 700;
  color: transparent;
  background: var(--bg-card);
}
.dash-checklist-list li.is-done .dash-check {
  background: var(--success); border-color: var(--success); color: #fff;
}
.dash-checklist-done {
  display: flex; align-items: center; gap: .65rem;
}
.dash-checklist-done .dash-check.is-done {
  background: var(--success); border-color: var(--success); color: #fff;
}

/* --- Two-column body (Needs Attention + Follow-ups) --- */
.dash-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.dash-card-head {
  margin: 0 0 .65rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600;
}
.dash-card-attention { border-left: 3px solid var(--danger); }
.dash-card-attention .dash-card-head { color: var(--danger); }
.dash-card-soft { border-left: 3px solid var(--warning); }
.dash-card-soft .dash-card-head { color: var(--warning); }
.dash-attn-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem 0;
  font-size: .9rem;
  border-top: 1px solid var(--border);
}
.dash-attn-row:first-of-type { border-top: none; padding-top: 0; }
.dash-attn-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem;
  padding: 0 .45rem;
  font-size: .82rem; font-weight: 700;
  background: rgba(220,38,38,.10); color: var(--danger);
  border: 1px solid rgba(220,38,38,.32);
  border-radius: 999px;
  flex-shrink: 0;
}
.dash-followup-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .45rem 0;
  font-size: .9rem;
  border-top: 1px solid var(--border);
}
.dash-followup-row:first-of-type { border-top: none; padding-top: 0; }
.dash-followup-row .pill { white-space: nowrap; flex-shrink: 0; }
.dash-followup-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-followup-body a { font-weight: 500; }

/* --- Project cards — bold accent rail, spring hover, gradient progress bars --- */
.proj-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.proj-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem 1.25rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), border-color .15s ease;
}
.proj-card::before {
  /* left-edge color rail */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, var(--brand), var(--brand-light));
  opacity: 0; transition: opacity .2s var(--ease-out);
}
.proj-card:hover { border-color: var(--brand-light); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
.proj-card:hover::before { opacity: 1; }
.proj-card-pinned {
  border-color: var(--sun);
  background: linear-gradient(135deg, var(--sun-soft) 0%, var(--bg-card) 30%);
  box-shadow: 0 4px 14px -2px rgba(245,158,11,.15);
}
.proj-card-pinned::before { background: linear-gradient(180deg, var(--sun), #FBBF24); opacity: 1; }
[data-theme="dark"] .proj-card-pinned { background: linear-gradient(135deg, rgba(245,158,11,.08) 0%, var(--bg-card) 30%); }
.proj-card-head { display: flex; align-items: start; justify-content: space-between; gap: .55rem; }
.proj-card-head strong { font-size: 1rem; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: .35rem; flex: 1 1 auto; min-width: 0; word-break: break-word; letter-spacing: -.01em; }
.proj-card-icon { flex-shrink: 0; font-size: 1.1rem; }
.proj-card-client { color: var(--text-soft); font-size: .87rem; font-weight: 500; }
.proj-card-address {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-soft);
  margin-top: -.1rem;
  line-height: 1.35;
  word-break: break-word;
}
/* Multi-phase claim card layout — clickable card body (link to root project)
   + a small bubble button bottom-left that toggles the phase money panel.
   Replaces the old <details>-based approach so navigating and expanding are
   separate, deliberate actions. */
.proj-card-group {
  position: relative;
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s var(--ease-spring),
              box-shadow .2s var(--ease-out),
              border-color .15s ease;
}
.proj-card-group:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.proj-card-group .proj-card-body {
  display: block;
  padding: 1rem 1.15rem 1.05rem;
  text-decoration: none;
  color: inherit;
}
.proj-card-group.is-expanded {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-light);
}

/* "N phases" badge — small chip in the card head, next to the project name.
   Replaces the old "2 phases · tap to expand" text. */
.proj-card-phase-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  color: var(--brand);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* "Details" expand bubble — sits at the bottom-left corner of the card,
   visually anchored. Pill shape, brand-tinted, doesn't compete with the
   main card. Click toggles the phase money panel via JS. */
.proj-card-expand-btn {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .85rem !important;
  font-size: .78rem !important;
  font-weight: 600;
  color: var(--brand) !important;
  background: var(--bg-card) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border)) !important;
  border-radius: 999px !important;
  cursor: pointer;
  min-height: 0 !important;
  box-shadow: 0 2px 4px rgba(15,23,42,.04);
  transition: all .15s ease;
}
.proj-card-expand-btn:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  transform: translateY(-1px);
}
.proj-card-expand-icon { font-size: .85rem; line-height: 1; transition: transform .15s ease; }
.proj-card-group.is-expanded .proj-card-expand-icon { transform: rotate(180deg); }
/* Make sure the card body has bottom padding so the bubble doesn't overlap stats */
.proj-card-group .proj-card-body { padding-bottom: 3rem; }
@media (max-width: 700px) {
  /* Phones: more bottom padding so the absolutely-positioned Details bubble
     doesn't visually sit on top of the stats numbers. Also bump the bubble
     itself slightly tighter to claim less space. */
  .proj-card-group .proj-card-body { padding-bottom: 3.5rem; }
  .proj-card-expand-btn {
    bottom: 10px;
    left: 10px;
    padding: .3rem .7rem !important;
    font-size: .72rem !important;
  }
}

/* Per-phase money breakdown on a dashboard claim-group card. Three numbers
   per phase (Quoted, Paid, Spent), each phase row clickable. */
.proj-card-phase-money {
  padding: .75rem 1.15rem 1rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
/* The `hidden` attribute must beat the display: flex above so the JS toggle
   actually hides the panel when the user collapses it. */
.proj-card-phase-money[hidden] { display: none !important; }
.proj-card-phase-line {
  display: block;
  padding: .65rem .85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.proj-card-phase-line:hover {
  border-color: var(--brand);
  text-decoration: none;
}
.proj-card-phase-line-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  margin-bottom: .35rem;
}
.proj-card-phase-line-head strong {
  font-size: .9rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 auto;
  min-width: 0;
}
.proj-card-phase-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: var(--text-soft);
}
.proj-card-phase-stats strong {
  display: inline-block;
  margin-left: .25rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* (older claim-group card styles removed — replaced by the .proj-card-group
   + .proj-card-expand-btn block earlier in this file.) */
.proj-card-phase-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .55rem .85rem .65rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}
.proj-card-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.proj-card-phase-chip:hover {
  color: var(--brand);
  border-color: var(--brand-light);
  text-decoration: none;
}
.phase-status-pill {
  padding: .1rem .55rem !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
/* "Paid in full" pill — appears next to phase names + on summaries */
.paid-badge {
  display: inline-block;
  padding: .1rem .55rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  color: var(--success);
  background: var(--lime-soft);
  border: 1px solid color-mix(in srgb, var(--success) 25%, var(--border));
  margin-left: .35rem;
  vertical-align: middle;
}
.paid-badge-partial {
  color: var(--warning);
  background: var(--sun-soft);
  border-color: color-mix(in srgb, var(--warning) 25%, var(--border));
}
.proj-card-phase-line.is-paid {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--lime-soft) 50%, var(--bg-card));
}
/* Combined stats row on the collapsed claim summary — 3-up grid (Paid/Spent/Outstanding) */
.proj-card-stats-combined {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  margin-top: .75rem;
  padding: .65rem .75rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
@media (max-width: 380px) {
  /* Tiny phones — drop to 1-column so labels + numbers don't crush. */
  .proj-card-stats-combined { grid-template-columns: 1fr; gap: .45rem; }
}
.proj-card-stats-combined > div {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
}
.proj-card-stats-combined span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 600;
}
.proj-card-stats-combined strong {
  font-size: 1rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Money tab summary card — Quoted / Paid / Outstanding stat row + a paid-in-full
   toggle, with a progress bar underneath. Visual centerpiece of the Money tab. */
.money-summary-card {
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.money-summary-card.is-paid {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: color-mix(in srgb, var(--lime-soft) 40%, var(--bg-card));
}
.money-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
}
.money-summary-stat {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 110px;
}
.money-summary-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
}
.money-summary-stat strong {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.money-summary-due { color: var(--warning); }
.money-summary-clear { color: var(--success); }
.money-summary-paid-form {
  margin: 0 0 0 auto;
  align-self: center;
}
.money-summary-progress {
  margin-top: .85rem;
  height: 6px;
}
@media (max-width: 700px) {
  /* Stack the row as a 3-column grid so stats line up cleanly without
     flex-wrap pushing them to a second row + the button to a third. */
  .money-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .65rem;
  }
  .money-summary-stat { min-width: 0; }
  .money-summary-stat strong { font-size: 1.05rem; }
  .money-summary-paid-form {
    grid-column: 1 / -1;
    margin: 0;
    align-self: stretch;
    width: 100%;
  }
  .money-summary-paid-form .paid-toggle { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  /* Tiny phones — Paid/Spent/Outstanding on their own rows. */
  .money-summary-row { grid-template-columns: 1fr; gap: .55rem; }
  .money-summary-stat strong { font-size: 1.15rem; }
}

/* "Mark paid" toggle button on the project detail page */
.paid-toggle-form { margin: 0 0 1rem; }
.paid-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem !important;
  font-size: .9rem !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-soft) !important;
  cursor: pointer;
  transition: all .15s ease;
}
.paid-toggle:hover {
  border-color: var(--success) !important;
  color: var(--success) !important;
  background: var(--lime-soft) !important;
}
.paid-toggle.is-paid {
  background: var(--lime-soft) !important;
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 35%, var(--border)) !important;
}
.paid-toggle.is-paid:hover {
  background: var(--bg-card) !important;
  color: var(--text-soft) !important;
  border-color: var(--border) !important;
}

/* Same treatment for the employee/supervisor card grid */
.project-card-group {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.project-card-group .project-card-body {
  display: block;
  padding: 1rem 1.15rem 1.05rem;
  text-decoration: none;
  color: inherit;
}
.project-card-phases {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .55rem .85rem .7rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--border);
}
.project-card-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
}
.project-card-phase-chip:hover {
  color: var(--brand);
  border-color: var(--brand-light);
  text-decoration: none;
}
.project-card-phase-chip .pill { padding: .05rem .45rem !important; font-size: .65rem !important; }

/* Admin table — collapsible phase chips inside the Project cell. Defaults
   to closed so the table stays dense; admin clicks "N phases ▾" to reveal. */
.row-phases-collapser {
  margin: .35rem 0 0 2rem;
}
.row-phases-collapser > summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brand);
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border));
}
.row-phases-collapser > summary::-webkit-details-marker { display: none; }
.row-phases-collapser > summary:hover {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
}
.row-phases-collapser[open] > summary { margin-bottom: .35rem; }
.row-phase-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.row-phase-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--text-soft);
  border: 1px solid var(--border);
  text-decoration: none;
}
.row-phase-chip:hover {
  color: var(--brand);
  border-color: var(--brand-light);
  background: var(--brand-soft);
  text-decoration: none;
}
.row-phase-chip .phase-status {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.row-phase-chip .phase-status.dot-open      { background: var(--brand); }
.row-phase-chip .phase-status.dot-pending   { background: var(--warning); }
.row-phase-chip .phase-status.dot-halted    { background: var(--danger); }
.row-phase-chip .phase-status.dot-completed { background: var(--success); }
.row-phase-chip .phase-status.dot-archived  { background: var(--muted); }

/* Small inline tag rendered next to a project name when it's a phase of a
   multi-stage claim (e.g., "Emergency", "Restoration"). Subtle, brand-tinted. */
.phase-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  margin-left: .35rem;
  vertical-align: middle;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
}
.proj-card-pct { font-size: .76rem; color: var(--muted); margin-top: -.15rem; font-weight: 500; }
.proj-card-stats {
  display: flex; gap: 1.5rem;
  margin-top: .4rem; padding-top: .65rem;
  border-top: 1px dashed var(--border);
}
.proj-card-stats > div { display: flex; flex-direction: column; gap: .15rem; }
.proj-card-stats span { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.proj-card-stats strong { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Section headers + tighter rhythm */
.dash-section { margin-top: 1.75rem; }
.dash-section .dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.dash-section .dash-section-head h2 {
  margin: 0;
  font-size: 1.05rem; font-weight: 700;
  color: var(--text);
  text-transform: none; letter-spacing: -.015em;
  display: inline-flex; align-items: center; gap: .55rem;
}
.dash-section .dash-section-head h2::before {
  content: ''; width: 4px; height: 1.2rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand-light));
}
.dash-section .dash-section-head .actions { display: flex; gap: .5rem; }

@media (max-width: 800px) {
  .dash-hero { grid-template-columns: 1fr; padding: 1.25rem 1.35rem; }
  .dash-hero-greet { font-size: 1.55rem; }
  .dash-hero-kpi { border: 1px solid rgba(255,255,255,.18); padding: .85rem 1rem; min-width: 0; text-align: left; }
  .dash-body { grid-template-columns: 1fr; }
  .proj-grid { grid-template-columns: 1fr; }
  .dash-stat-value { font-size: 1.85rem; }
}

/* --- Entrance animations — only the first render, polite for reduced-motion --- */
@media (prefers-reduced-motion: no-preference) {
  .dash-hero, .dash-checklist, .dash-stats, .dash-body, .dash-section {
    animation: dash-fade-up .55s var(--ease-out) backwards;
  }
  .dash-hero      { animation-delay: 0ms;  }
  .dash-checklist { animation-delay: 70ms; }
  .dash-stats     { animation-delay: 140ms; }
  .dash-body      { animation-delay: 200ms; }
  .dash-section:nth-of-type(1) { animation-delay: 260ms; }
  .dash-section:nth-of-type(2) { animation-delay: 320ms; }
  .dash-section:nth-of-type(3) { animation-delay: 380ms; }
}
@keyframes dash-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Big tappable upload card. Native <label for=…> behavior triggers
       the OS file picker, which on iOS/Android already offers
       Take Photo / Photo Library / Files in one sheet. No JS hacks. --- */
label.upload-card {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg-input);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
label.upload-card:hover {
  border-color: var(--cyan);
  background: rgba(34,211,238,0.06);
  transform: translateY(-1px);
}
label.upload-card input[type="file"] {
  /* Visually hidden but still in the layout (so the native label-for-input
     hookup works in every browser without needing JS). */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
label.upload-card input[type="file"]:disabled + .upload-card-emoji,
label.upload-card input[type="file"]:disabled ~ .upload-card-text { opacity: .55; }
.upload-card-emoji {
  font-size: 2rem;
  flex: 0 0 auto;
  line-height: 1;
}
.upload-card-text {
  display: flex; flex-direction: column; gap: .15rem;
  flex: 1 1 auto;
  min-width: 0;
}
.upload-card-text strong { font-size: .98rem; color: var(--text); }
.upload-card-picked {
  flex: 0 0 100%;
  margin-top: .35rem;
  padding: .4rem .65rem;
  background: rgba(52,211,153,0.10);
  border: 1px solid rgba(52,211,153,0.32);
  border-radius: 8px;
  color: var(--emerald);
  font-size: .85rem;
  font-weight: 600;
}

/* =====================================================================
   PAGE-SPECIFIC MOBILE POLISH — each fix targets a specific page area
   that was still cramped after the general 700px rules.
   ===================================================================== */
@media (max-width: 700px) {

  /* ===== PROJECT DETAIL PAGE ===== */

  /* Header — title row wraps cleanly, status pill drops below */
  .page-head h1[style*="display: inline-flex"] {
    flex-direction: column; align-items: flex-start;
    gap: .25rem;
  }
  /* Status pill / follow-up pill stack under the title instead of crowding */
  .page-head .pill { margin-left: 0 !important; }

  /* Tab strip — taller tabs for fat fingers, snap-scroll for swipe */
  .project-tabs {
    padding: .5rem .9rem .15rem;
    margin: 0 -.9rem 1.25rem;
    scroll-snap-type: x mandatory;
  }
  .project-tab {
    padding: .65rem 1rem;
    font-size: .92rem;
    min-height: 44px;
    scroll-snap-align: start;
  }
  .project-tab span { font-size: 1.1rem; }

  /* Claim card — labels above values on phone, not side-by-side */
  .claim-grid { grid-template-columns: 1fr !important; gap: .75rem; }

  /* Money snapshot KPIs — stay readable, 1-up on tiny phones */
  .money-snapshot {
    grid-template-columns: 1fr !important;
    gap: .65rem;
  }
  .money-kpi-value { font-size: 1.55rem; }

  /* Settle-up table — kill the "Fair share" column on mobile; the
     Balance column tells you everything you need. */
  .totals-table { font-size: .88rem; }
  .totals-table th:nth-child(4), .totals-table td:nth-child(4) { display: none; }

  /* Profit split editor — name + % input go vertical so the input is full-width */
  .form .table td input[type="number"] {
    width: 100% !important; max-width: 140px;
    font-size: 16px !important;     /* iOS auto-zoom guard */
    padding: .6rem .7rem;
  }

  /* Site info card — taller icon, looser layout */
  .site-info-card { padding: 1.15rem 1.2rem; gap: .9rem; }
  .site-info-icon { width: 48px; height: 48px; font-size: 1.75rem; }
  .site-info-client { font-size: 1.1rem; }
  .site-info-address { font-size: 1rem; }

  /* Assignee chips — 1-up so the avatar / name / remove button all fit */
  .assignee-grid { grid-template-columns: 1fr; }
  .assignee-chip { padding: .65rem .8rem; }

  /* Notes form / list — bigger touch */
  .note-item { padding: .85rem 0; }
  .note-meta { font-size: .9rem; }

  /* ===== TEAM PAGE (admin_users) ===== */
  /* Role-toggle button cluster wraps cleanly instead of overflowing */
  .role-toggle { flex-wrap: wrap; }
  .role-toggle .btn.btn-sm {
    flex: 1 1 100%;
    min-height: 38px; font-size: .85rem;
  }

  /* ===== EMPLOYEE EXPENSES PAGE ===== */
  /* Debt cards full-width */
  .debt-grid { grid-template-columns: 1fr; gap: .75rem; }
  .debt-card { padding: 1rem 1.15rem 1.1rem; }
  .debt-amount { font-size: 1.65rem; }

  /* ===== ORG SETTINGS PAGE ===== */
  /* Integration row stacks instead of cramming icon+text+status on one line */
  details.integration-row-expandable > summary {
    flex-wrap: wrap; padding: .85rem 0;
  }
  details.integration-row-expandable > summary .pill {
    margin-left: 0 !important;
    margin-top: .35rem;
    align-self: flex-start;
  }
  .integration-icon { width: 44px; height: 44px; font-size: 1.15rem; }

  /* ===== ACCOUNT PAGE ===== */
  /* Big avatar + name stack vertically on mobile so the hero breathes */
  .page-hero > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .85rem !important;
  }
  .avatar-xl { width: 80px; height: 80px; font-size: 2rem; }

  /* ===== REPORTS PAGE ===== */
  /* Each report's wide table scrolls horizontally cleanly */
  .project-section .table { font-size: .85rem; }

  /* ===== LOGIN ===== */
  .login-card { padding: 1.75rem 1.5rem 1.5rem; max-width: 100%; border-radius: 14px; }
  .login-title { font-size: 1.55rem; }
  .login-form label { font-size: .9rem; }

  /* Kill the stacked margin/padding/min-height that pushed the login
     screen past 100vh on phones (cause of useless vertical scroll).
     `100dvh` is the dynamic viewport unit — handles iOS Safari's
     address bar collapse without jumping. */
  main.page.page-bare {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
  }
  .login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem .9rem;
  }

  /* ===== FLASH MESSAGE ===== */
  .flash { font-size: .9rem; padding: .85rem 1rem; }

  /* ===== STICKY TOPNAV — make the brand mark + hamburger feel grippable ===== */
  .topnav-hamburger { width: 44px; height: 44px; }

  /* ===== EXPENSE FORM ===== */
  /* Upload card label + buttons get more breathing room */
  .form .row-2, .form .row-3 { grid-template-columns: 1fr; }
  .form-actions { gap: .65rem; }
  .form-actions .btn, .form-actions button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  /* Even tighter on tiny phones */
  .project-tabs { margin: 0 -.6rem 1rem; padding-left: .6rem; padding-right: .6rem; }
  .page-hero { padding: 1.1rem 1.15rem; border-radius: 14px; }
  .page-hero-title { font-size: 1.4rem; }
  .dash-hero { padding: 1.1rem 1.15rem; }
  .dash-hero-greet { font-size: 1.4rem; }
  .dash-hero-kpi .kpi-value { font-size: 1.75rem; }
}

/* ============================================================
   INVISIBLE SCROLLBARS — site-wide. Scrolling still works
   (mouse wheel, trackpad, touch, keyboard) — the chrome is
   just hidden for a cleaner look.
     - WebKit (Chrome, Safari, Edge, mobile): ::-webkit-scrollbar
     - Firefox: scrollbar-width
     - Old IE/Edge: -ms-overflow-style
   ============================================================ */
* {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE 10+, legacy Edge */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;     /* WebKit (Chrome, Safari, new Edge, mobile) */
}
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   SHARED WITH YOU (Phase 6.2) — cross-org collaboration UI.
   Projects that came in from a partner workspace get a teal-ish
   tint + the ↔ chip so they're visually distinct from your own
   projects. Read-only for now (write surfaces ship in 6.3).
   ============================================================ */
.shared-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .35rem;
  background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20,184,166,.35);
  flex-shrink: 0;
}

.shared-with-you {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.15rem 1.15rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, #14b8a6 8%, var(--bg-card)) 0%,
    var(--bg-card) 60%);
  border: 1px solid color-mix(in srgb, #14b8a6 25%, var(--border));
  border-radius: var(--radius);
}
.shared-with-you-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.shared-with-you-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* Cards within either the dashboard proj-grid or projects_list project-grid */
.proj-card-shared,
.project-card-shared {
  border-color: color-mix(in srgb, #14b8a6 35%, var(--border)) !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, #14b8a6 6%, var(--bg-card)) 0%,
    var(--bg-card) 50%) !important;
}
.proj-card-shared:hover,
.project-card-shared:hover {
  border-color: #14b8a6 !important;
  box-shadow: 0 4px 12px color-mix(in srgb, #14b8a6 25%, transparent);
}

/* ----- Phase 6.3: origin chips on expense rows ----- */
/* Tiny pill that tells you which side logged each expense. Two flavours:
   - origin-chip-self: "you" — the partner viewing shared_project.php
   - origin-chip-source / origin-chip-partner: name of the other org */
.origin-chip {
  display: inline-block;
  padding: .12rem .45rem;
  margin-left: .35rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}
.origin-chip-self {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--brand);
}
.origin-chip-source,
.origin-chip-partner {
  background: linear-gradient(135deg,
    color-mix(in srgb, #14b8a6 20%, transparent),
    color-mix(in srgb, #0ea5e9 20%, transparent));
  color: #0e7490;
}
[data-theme="dark"] .origin-chip-source,
[data-theme="dark"] .origin-chip-partner {
  color: #5eead4;
}
.row-external,
.row-self-logged {
  background: color-mix(in srgb, #14b8a6 4%, transparent);
}

/* ----- Quick-log expense form on shared_project.php ----- */
/* Tucked inside a <details> so it stays out of the way until needed. The
   summary doubles as the trigger button (styled as .btn). */
.shared-log-expense > summary {
  list-style: none;
  cursor: pointer;
}
.shared-log-expense > summary::-webkit-details-marker { display: none; }
.shared-log-expense[open] > summary {
  margin-bottom: .75rem;
}
.shared-log-expense-form {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.shared-log-expense-form .form-row,
.shared-log-expense-form label {
  margin-bottom: .65rem;
}

/* Recent-activity rows that originated from a partner workspace get the
   same teal accent as everything else collab-flavoured. */
.activity-row-external {
  background: color-mix(in srgb, #14b8a6 5%, transparent);
  border-left: 3px solid color-mix(in srgb, #14b8a6 60%, transparent);
  padding-left: .5rem;
  border-radius: var(--radius-sm);
}

/* "↔ Shared" status pill — used everywhere a source-side project surfaces
   to indicate it's actively collaborated on with a partner workspace.
   Same teal/cyan family as the rest of the collab UI. */
.pill-shared {
  background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
  color: #fff;
  border: 0;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 1px 2px color-mix(in srgb, #14b8a6 40%, transparent);
}
.pill-shared:hover { filter: brightness(1.05); }
[data-theme="dark"] .pill-shared {
  background: linear-gradient(135deg, #2dd4bf 0%, #38bdf8 100%);
  color: #0b1220;
}
.pill-sm {
  font-size: .7rem;
  padding: .1rem .4rem;
  margin-top: .25rem;
  display: inline-block;
}

/* Wrapper so the status pill + ↔ Shared pill sit side-by-side on the
   employee/supervisor card view. */
.project-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  flex-shrink: 0;
}

/* ===================================================================
   Phase 6.4 / 6.5 — Inter-org settle-up panels.
   - .inter-org-panel: shown on a project's Money tab (both sides)
   - .inter-org-row: per-partner block inside the panel
   - .settle-card: the cards on the standalone Settle-up page
   =================================================================== */
.inter-org-panel {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, #14b8a6 6%, var(--bg-card)) 0%,
    var(--bg-card) 60%);
  border: 1px solid color-mix(in srgb, #14b8a6 25%, var(--border));
  border-radius: var(--radius);
}
.inter-org-panel h3 { margin: 0 0 .35rem; }
.inter-org-row {
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.inter-org-row-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .35rem;
}
.inter-org-pay { margin-top: .65rem; }
.inter-org-pay summary { cursor: pointer; }

.settle-card {
  margin: 1rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.settle-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settle-card-name { margin: 0 0 .15rem; font-size: 1.15rem; }
.settle-card-net  { text-align: right; }
.settle-label { display: block; }
.settle-amount {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.settle-amount-owe { color: var(--rose); }
.settle-amount-due { color: var(--emerald); }
.settle-direction  { display: block; }
.settle-badge {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
}
.settle-badge-square {
  background: color-mix(in srgb, var(--emerald) 18%, transparent);
  color: var(--emerald);
}
.settle-card-section { margin-top: 1rem; }
.settle-section-title { font-size: 1rem; margin: 0 0 .5rem; }
.settle-pay-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .85rem;
}
.settle-pay-form {
  padding: .85rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.settle-pay-form h4 { margin: 0 0 .5rem; font-size: .95rem; }
.settle-pay-form-alt { background: color-mix(in srgb, var(--emerald) 5%, var(--bg-soft)); }
.settle-amount-outgoing { color: var(--rose); }
.settle-amount-incoming { color: var(--emerald); }

@media (max-width: 700px) {
  .settle-pay-forms { grid-template-columns: 1fr; }
  .settle-card-head { flex-direction: column; align-items: stretch; }
  .settle-card-net  { text-align: left; }
  .settle-amount    { font-size: 1.4rem; }
}

/* Phase 6.6 — note + photo origin markers */
.note-item-external {
  background: color-mix(in srgb, #14b8a6 5%, transparent);
  border-left: 3px solid color-mix(in srgb, #14b8a6 60%, transparent);
  padding-left: .65rem;
  border-radius: var(--radius-sm);
}
.photo-tile { position: relative; }
.photo-tile-external {
  outline: 2px solid color-mix(in srgb, #14b8a6 50%, transparent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.photo-tile-badge {
  position: absolute;
  bottom: .35rem;
  left: .35rem;
  z-index: 2;
}

/* Phase 4 — Super-admin impersonation banner.  Pinned to the very top of
   the page when an active session was started via /super → Impersonate.
   Bright + clearly different from the rest of the UI so you never forget
   you're acting as someone else. */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1rem;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #1c1917;
  font-weight: 500;
  font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.impersonation-banner code {
  background: rgba(0,0,0,.12); padding: .1rem .35rem; border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.impersonation-banner .btn {
  background: #1c1917; color: #fbbf24; border-color: #1c1917;
}
.impersonation-banner .btn:hover { background: #292524; }

/* Phase 4 — Super-admin sidebar tile avatar (emoji-based, no user record) */
.super-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1c1917;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Phase 3 — trial/subscription banner on the dashboard */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.15rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--bg-card)), var(--bg-card) 70%);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
  border-radius: var(--radius);
}
.trial-banner-icon {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.trial-banner-body { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.35; }
.trial-banner-body strong { font-size: .98rem; color: var(--text); }
.trial-banner-body span { font-size: .85rem; color: var(--muted); }
.trial-banner-expired {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose) 10%, var(--bg-card)), var(--bg-card) 70%);
  border-color: color-mix(in srgb, var(--rose) 35%, var(--border));
}
.trial-banner-expired .trial-banner-icon {
  background: color-mix(in srgb, var(--rose) 18%, transparent);
  color: var(--rose);
}
@media (max-width: 540px) {
  .trial-banner { flex-direction: column; align-items: stretch; }
  .trial-banner .btn { width: 100%; justify-content: center; }
}

/* ==========================================================
   Phase 6.8 — Mobile polish for the collab/settle-up views.
   ========================================================== */
@media (max-width: 700px) {
  /* Settle-up page: a touch more breathing room on cards */
  .settle-card {
    padding: 1rem 1rem;
    margin: .75rem 0;
  }
  .settle-card-name { font-size: 1.05rem; }
  .settle-amount    { font-size: 1.5rem; }
  .settle-card-section { margin-top: .75rem; }
  /* Tap targets on the per-project tables */
  .settle-card table.table-sm td,
  .settle-card table.table-sm th { padding: .55rem .5rem; font-size: .85rem; }
  /* The two-direction payment forms always stack on mobile */
  .settle-pay-form .row-2 { display: flex; flex-direction: column; gap: .55rem; }
  .settle-pay-form .row-2 > * { width: 100%; }

  /* Inter-org panel on project Money tab */
  .inter-org-panel { padding: 1rem 1rem; }
  .inter-org-row { padding: .65rem .75rem; }
  .inter-org-row .totals-table td { padding: .45rem .5rem; font-size: .85rem; }

  /* Shared-project page narrow tweaks */
  .shared-log-expense-form .row-2 { display: flex; flex-direction: column; gap: .55rem; }
  .shared-log-expense-form .row-2 > * { width: 100%; }
  /* Photo gallery on shared_project goes 2 across instead of auto-fill */
  section.card .photo-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Notes timeline rows: more padding for tap-comfort */
  .note-row { padding: .75rem !important; }

  /* "Shared" + "Open" pills get a wrap when both visible */
  .project-card-pills { flex-wrap: wrap; gap: .25rem; }

  /* The new pill format "↔ Shared · 2" on tight space — shrink a hair */
  .pill-shared { font-size: .72rem; padding: .15rem .55rem; }

  /* Origin chips compact */
  .origin-chip { font-size: .65rem; padding: .1rem .4rem; }

  /* Buttons inside collab inbox stack neatly */
  .collab-inbox-actions .btn { min-height: 38px; }
}

/* 44px tap-targets across all collab buttons (per Apple HIG) */
.settle-card .btn,
.settle-card .form-actions button,
.inter-org-row .btn,
.collab-inbox-actions .btn,
.shared-log-expense-form button,
.shared-log-expense > summary {
  min-height: 38px;
}
@media (max-width: 700px) {
  .settle-card .btn,
  .settle-card .form-actions button,
  .inter-org-row .btn,
  .collab-inbox-actions .btn,
  .shared-log-expense-form button {
    min-height: 44px;
  }
}



/* ============================================================
   MOBILE OVERFLOW GUARD — bulletproof viewport containment.
   The page should NEVER render wider than the screen on mobile.

   IMPORTANT: we use `overflow-x: clip` here, NOT `overflow-x: hidden`.
   `hidden` turns the element into a scroll container, which on iOS
   Safari hijacks vertical touch-swipes depending on where the finger
   lands (sidebar drawer area, the gradient hero, etc.) — making the
   page feel like it "doesn't scroll" in spots. `clip` clips overflow
   without becoming a scroll container, so natural document scroll
   keeps working everywhere. Falls back to `hidden` on the rare
   browser that doesn't understand `clip`.

   Belt-and-suspenders:
     1. overflow-x: clip on html AND body
     2. max-width: 100% so nothing escapes (100vw caused subtle issues
        with safe-area insets, so we use 100% which is safer)
     3. min-width: 0 on flex/grid children so long text shrinks
     4. word wrap on long unbreakable strings (vendor names, hashes)
     5. media (img/video/iframe/canvas/svg) capped at container width
     6. tables fall back to horizontal scroll inside their own box
     7. overscroll-behavior-x: contain — kills horizontal rubber-band
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden;   /* fallback */
  overflow-x: clip;     /* modern: clips without creating scroll container */
  overscroll-behavior-x: contain;
}

img, video, iframe, canvas, svg:not(.icon):not([class*="bottom-tab"]) {
  max-width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  /* Force every direct child of .page to fit inside the viewport.
     Combined with min-width: 0, this lets grids/flexes shrink
     past their content's intrinsic width. */
  .page, .page > * {
    max-width: 100%;
    min-width: 0;
  }
  /* Common card / grid containers that previously could overflow */
  .dash-hero, .dash-checklist, .dash-stats, .dash-body, .dash-grid,
  .dash-section, .dash-data, .dash-actions,
  .page-hero, .hero, .hero-v2,
  .card, .form, .container,
  .project-grid, .proj-grid, .debt-grid,
  .stats-grid, .stats-grid-v2,
  .money-snapshot, .charts-grid,
  .filters, .filter-chips,
  .bulk-bar, .row-2, .row-3 {
    max-width: 100%;
    min-width: 0;
  }
  /* Long unbreakable strings — vendor names, URLs, file hashes,
     emails — wrap instead of pushing the layout sideways */
  .activity-line-1, .activity-line-2,
  .proj-card-head strong, .project-card-name,
  .row-person-name, .row-person-sub,
  .note-body, .note-body *,
  .integration-text, .integration-text *,
  .site-info-body, .site-info-body *,
  .user-tile-text, .user-tile-text *,
  .dash-followup-body, .dash-followup-body *,
  .assignee-meta, .assignee-meta *,
  h1, h2, h3, p, td, th, li, a, code, kbd, samp {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Defensive: any raw <table> not using the .table class still
     scrolls horizontally inside its parent instead of stretching it */
  .page table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page table.table-stack { display: table; overflow: visible; }
  /* Pre/code blocks wrap rather than push */
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* ============================================================
   DOCUMENTATION PAGE
   ============================================================ */

/* Sidebar "Help" group sits at the bottom — add a top divider so it
   feels visually anchored separate from the main nav above. */
.nav-section-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Topic grid — 3-up cards that jump to in-page anchors */
.docs-topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
  margin-bottom: 2rem;
}
.docs-topic-card {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease-spring),
              box-shadow .2s var(--ease-out),
              border-color .15s ease;
}
.docs-topic-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.docs-topic-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.docs-topic-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0; flex: 1 1 auto;
}
.docs-topic-body strong {
  font-size: 1rem; font-weight: 600; color: var(--text);
}

/* Long-form article — reads like a doc page, not a database dump */
.docs-article {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-sm);
  max-width: 820px;
  line-height: 1.65;
  color: var(--text-soft);
}
.docs-article > * + * { margin-top: 1rem; }
.docs-h2 {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text);
  margin-top: 2.5rem !important;
  padding-top: .5rem;
  scroll-margin-top: 80px;  /* offset for sticky topnav when jumping via anchor */
}
.docs-h2:first-child { margin-top: 0 !important; }
.docs-h3 {
  font-size: 1.05rem; font-weight: 600;
  color: var(--text);
  margin-top: 1.5rem !important;
}
.docs-article p { margin: 0 0 .85rem; }
.docs-article a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.docs-article a:hover { color: var(--brand-strong); }
.docs-article code {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1rem .4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
}
.docs-list, .docs-steps {
  margin: 0 0 1rem 1.4rem;
  padding: 0;
}
.docs-list li, .docs-steps li { margin-bottom: .55rem; }
.docs-callout {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .85rem 1rem;
  margin: 1.25rem 0;
  color: var(--text);
  font-size: .95rem;
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: .9rem;
}
.docs-table th,
.docs-table td {
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.docs-table th {
  background: var(--bg-soft);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 600;
}
.docs-table tbody tr:last-child td { border-bottom: 0; }
.docs-table tbody tr:hover { background: var(--bg-soft); }

@media (max-width: 700px) {
  .docs-article { padding: 1.25rem 1.1rem; border-radius: 14px; }
  .docs-h2 { font-size: 1.3rem; }
  .docs-topics { grid-template-columns: 1fr; }
  .docs-topic-card { padding: .85rem 1rem; }
}