/* ProjectLens — Global Stylesheet v2.0
   Dark mode by default. Light mode via [data-theme="light"].
   Blue accent replaces all teal. */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  /* Blue accent */
  --blue:        #2563eb;
  --blue-hover:  #1d4ed8;
  --blue-light:  #60a5fa;
  --blue-dim:    rgba(37,99,235,0.15);
  --blue-border: rgba(37,99,235,0.3);

  /* Status */
  --green:  #22c55e;
  --amber:  #f59e0b;
  --red:    #ef4444;
  --green-dim: rgba(34,197,94,0.12);
  --amber-dim: rgba(245,158,11,0.12);
  --red-dim:   rgba(239,68,68,0.12);

  /* Typography */
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
}

/* DARK THEME (default) */
[data-theme="dark"], :root {
  --bg:          #000000;
  --bg-card:     #0d0d0d;
  --bg-card2:    #1a1a1a;
  --bg-input:    #0a0a0a;
  --border:      #2e2e2e;
  --border-soft: #232323;
  --text:        #ffffff;
  --text-muted:  #d4d4d8;
  --text-faint:  #9999a3;
  --nav-bg:      #000000;
  --nav-border:  #2e2e2e;
  --dot-color:   rgba(255,255,255,0.05);
}

/* LIGHT THEME */
[data-theme="light"] {
  --bg:          #f8fafc;
  --bg-card:     #ffffff;
  --bg-card2:    #f1f5f9;
  --bg-input:    #f8fafc;
  --border:      #e2e8f0;
  --border-soft: #e2e8f0;
  --text:        #0f172a;
  --text-muted:  #475569;
  --text-faint:  #94a3b8;
  --nav-bg:      #ffffff;
  --nav-border:  #e2e8f0;
  --dot-color:   rgba(0,0,0,0.04);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  transition: background 0.2s, color 0.2s;
}

/* Scrollbar — was using the browser default (light gray), which
   looked jarring against the black theme. Styled to match instead,
   applied globally rather than per-page. */
* {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--bg-card2) var(--bg); /* Firefox: thumb, track */
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--bg-card2);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Dot grid background — the signature element */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ── Navigation ───────────────────────────────────────────── */
.pl-nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  position: sticky; top: 0; z-index: 100;
  padding: 0 24px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* ProjectLens official branding */
.pl-logo-full {
  display:block; width:260px; max-width:100%; height:auto;
  border-radius:14px;
  object-fit:contain;
}
.pl-logo-mobile {
  display:block; width:190px; max-width:80vw; height:auto; margin:0 auto;
  border-radius:12px;
}
.pl-sidebar-logo {
  display:flex; align-items:center; gap:9px; min-width:0; text-decoration:none;
}
.pl-sidebar-logo img {
  width:34px; height:34px; object-fit:contain; flex-shrink:0;
}
.pl-sidebar-logo span {
  font-family:var(--font-ui); font-size:0.95rem; font-weight:750; letter-spacing:-0.02em;
  color:var(--text); white-space:nowrap;
}
.pl-sidebar-logo span b { color:var(--blue-light); font-weight:750; }

.pl-nav-brand {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-light);
  font-weight: 500;
  text-decoration: none;
}
.pl-nav-right { display: flex; align-items: center; gap: 12px; }

/* ── Cards ────────────────────────────────────────────────── */
.pl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.pl-card-lg { padding: 28px; }

/* ── Type selector (e.g. Submit Report's Status/Update toggle) ──────────
   Referenced by class in submit-report.html's JS but never had a CSS
   rule, so it rendered with raw browser-default button styling — a
   light background with no border, clashing hard with the dark theme
   used everywhere else in the app. */
.type-btn {
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  text-align: left; font-family: var(--font-ui, inherit);
  transition: border-color .15s, background .15s;
}
.type-btn:hover { border-color: var(--blue); }
.type-btn.selected { border-color: var(--blue); background: var(--blue-dim); }

/* ── Buttons ──────────────────────────────────────────────── */
.pl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue);
  color: #fff;
  border: none; border-radius: 8px;
  padding: 10px 18px;
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
  text-decoration: none; white-space: nowrap;
}
.pl-btn:hover { background: var(--blue-hover); }
.pl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.pl-btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.pl-btn-ghost:hover { border-color: var(--blue); color: var(--blue-light); background: var(--blue-dim); }
.pl-btn-danger { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.2); }
.pl-btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ── Inputs ───────────────────────────────────────────────── */
.pl-input, .pl-select, .pl-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-ui); font-size: 0.875rem;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.pl-input:focus, .pl-select:focus, .pl-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}
.pl-input::placeholder, .pl-textarea::placeholder { color: var(--text-faint); }

/* The browser's default calendar icon on <input type="date"> renders
   dark/black by default in Chrome and Safari — effectively invisible
   against this app's dark theme, not actually missing. Applied
   globally so every date field in the app is affected consistently. */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
.pl-label {
  display: block;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.pl-field { margin-bottom: 16px; }

/* ── Badges ───────────────────────────────────────────────── */
.pl-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 600;
}
.badge-gray  { background: rgba(100,116,139,0.15); color: #94a3b8; }
.badge-green { background: var(--green-dim); color: var(--green); }
.badge-amber { background: var(--amber-dim); color: var(--amber); }
.badge-blue  { background: var(--blue-dim);  color: var(--blue-light); }
.badge-red   { background: var(--red-dim);   color: var(--red); }

/* ── Alerts ───────────────────────────────────────────────── */
.pl-alert {
  padding: 11px 14px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 500;
  margin-bottom: 16px;
}
.pl-alert-error   { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(239,68,68,0.25); }
.pl-alert-success { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
.pl-alert-info    { background: var(--blue-dim);  color: var(--blue-light); border: 1px solid var(--blue-border); }

/* ── Trust Score ──────────────────────────────────────────── */
.trust-ring {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

/* ── Theme toggle button ──────────────────────────────────── */
.theme-btn {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center;
}
.theme-btn:hover { color: var(--text); border-color: var(--blue); }

/* ── Spinner ──────────────────────────────────────────────── */
.pl-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Notification bell pulse — plays briefly when a new notification
   arrives live via Realtime, so it's actually noticeable rather than
   just silently updating the badge number. */
@keyframes notifBellPulse {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-15deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(5deg); }
  75% { transform: rotate(-2deg); }
}
.notif-bell-pulse { animation: notifBellPulse 0.6s ease-in-out; }
.notif-bell-pulse svg { color: var(--blue-light); }

/* ── Skeleton loader ──────────────────────────────────────── */
.pl-skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

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

/* ── Tabs ─────────────────────────────────────────────────── */
.pl-tabs-wrap { position: relative; margin-bottom: 20px; }
.pl-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pl-tabs::-webkit-scrollbar { display: none; }
/* A right-edge fade signals there's more to scroll to — without it,
   tabs just clip at the viewport edge with zero indication anything
   is hidden (this is how "Alerts" and "Members" were going missing
   on mobile: nothing told the user to swipe). Hidden once the user
   has scrolled far enough that nothing more is cut off. */
.pl-tabs-wrap::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 1px; width: 28px;
  background: linear-gradient(to right, transparent, var(--bg-page, var(--bg)) 85%);
  pointer-events: none; transition: opacity .15s;
}
.pl-tabs-wrap.at-end::after { opacity: 0; }
.pl-tab {
  padding: 10px 0; margin-right: 24px; flex-shrink: 0;
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  transition: color 0.15s, border-color 0.15s;
}
.pl-tab:hover { color: var(--text); }
.pl-tab.active { color: var(--blue-light); border-bottom-color: var(--blue); }

/* ── Modal ────────────────────────────────────────────────── */
.pl-modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  /* Must stay above .app-shell's z-index:250 (set when fixing the
     mobile sidebar stacking bug) — modals are body-level siblings of
     .app-shell, not nested inside it, so this needed to be explicitly
     higher rather than assumed. This was the actual cause of "Create
     Project opens underneath the current screen" on mobile: the
     modal was opening correctly, just rendering behind everything. */
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.pl-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
.pl-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.pl-modal-header h2 { font-size: 1rem; font-weight: 600; }
.pl-modal-body { padding: 24px; }
.pl-modal-footer {
  display: flex; gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}
.pl-modal-footer .pl-btn { flex: 1; justify-content: center; }
.pl-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px;
  border-radius: 6px; transition: color 0.15s;
  display: flex; align-items: center;
}
.pl-close-btn:hover { color: var(--text); }

/* ── Project card ─────────────────────────────────────────── */
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
  text-decoration: none; display: block;
}
.project-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue-border), 0 4px 20px rgba(0,0,0,0.3);
}

/* ── Table ────────────────────────────────────────────────── */
.pl-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
/* Wrap any .pl-table in this on pages that render one — a 5-column
   table (Description/Category/Amount/Date/Verified, for example)
   has no way to fit a narrow phone screen no matter how small the
   font gets. Without this, the table pushes past the viewport edge
   and forces the WHOLE PAGE to scroll horizontally to see the rest
   of it, not just the table — a confusing "have to scroll to see
   parts of the app" experience that has nothing to do with normal,
   expected vertical scrolling. */
.pl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pl-table th {
  text-align: left; padding: 8px 12px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.pl-table td {
  padding: 12px; border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}
.pl-table tr:last-child td { border-bottom: none; }

/* ── Empty state ──────────────────────────────────────────── */
.pl-empty {
  text-align: center; padding: 48px 24px;
}
.pl-empty-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--bg-card2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; color: var(--text-muted);
}
.pl-empty h3 { font-size: 0.95rem; font-weight: 600; margin-bottom: 6px; }
.pl-empty p  { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; }

/* ── Utility ──────────────────────────────────────────────── */
.text-muted   { color: var(--text-muted); }
.text-faint   { color: var(--text-faint); }
.text-blue    { color: var(--blue-light); }
.text-green   { color: var(--green); }
.text-amber   { color: var(--amber); }
.text-red     { color: var(--red); }
.font-mono    { font-family: var(--font-mono); }
.hidden       { display: none !important; }

/* Filter pills — shared across dashboard project filters and the
   Repository tab's All/Photos/Videos/Receipts filter, so both stay
   visually consistent instead of one being unstyled. */
.filter-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.filter-btn { padding: 5px 14px; border-radius: 20px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; font-family: var(--font-ui); }
.filter-btn:hover { border-color: var(--blue); color: var(--blue-light); }
.filter-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .pl-nav { padding: 0 16px; }
  .pl-card-lg { padding: 20px 16px; }
  .pl-modal { border-radius: 12px; }
}
@media (max-width: 480px) {
  .pl-nav-brand { font-size: 0.65rem; letter-spacing: 2px; }
  .pl-tab { margin-right: 16px; font-size: 0.82rem; }
  /* !important is deliberate here: this is a one-job utility class
     ("hide this on narrow screens", full stop) and it was silently
     losing the cascade to component rules like .dash-search that
     declare `display` later in the file with identical specificity
     (one class each — last one in source order wins). That let a
     desktop-only ⌘K keyboard-shortcut hint sit in the search bar on
     phones, which don't have a ⌘ key. A utility class shouldn't have
     to out-position every component rule that might follow it. */
  .hide-on-narrow { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   SHARED APP SHELL — persistent sidebar + top bar, used on
   every authenticated page (dashboard, project, submit-update).
   Injected by js/sidebar.js so every page shares one definition.
   ══════════════════════════════════════════════════════════ */
.app-shell {
  display: flex; min-height: 100vh;
  /* Root cause of the mobile "tap closes sidebar, nothing happens"
     bug: `body > * { position: relative; z-index: 1 }` further down
     gives app-shell its own stacking context, so the sidebar's
     z-index:200 was only ever being compared to other things INSIDE
     app-shell — it never actually competed against .sidebar-overlay
     (a separate direct child of body) at the outer level, where the
     overlay's z-index:199 was quietly winning regardless. Explicit
     z-index here ensures app-shell (and the sidebar inside it)
     reliably outranks the overlay at the level where it's actually
     being compared.
  */
  position: relative; z-index: 250;
}

.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
}
.sidebar-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-section-label {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-faint);
  padding: 10px 10px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 0.875rem; color: var(--text);
  transition: all 0.15s; text-decoration: none;
  border: none; background: none; font-family: var(--font-ui);
  width: 100%; text-align: left;
}
.nav-item:hover { background: var(--bg-card2); color: var(--text); }
.nav-item.active { background: var(--blue-dim); color: var(--blue-light); }
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-footer { padding: 12px 10px; border-top: 1px solid var(--border); }
.user-pill { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: var(--bg-card2); }
.user-pill-top { display: flex; align-items: center; gap: 10px; }
.sidebar-signout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: none; border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; cursor: pointer;
  font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
  font-family: var(--font-ui); transition: all 0.15s;
}
.sidebar-signout-btn:hover { background: var(--red-dim); border-color: rgba(239,68,68,0.3); color: var(--red); }
.sidebar-signout-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-dim); border: 1px solid var(--blue-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--blue-light);
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 0.68rem; color: var(--text-faint); }

.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top-bar {
  height: 56px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: var(--nav-bg);
  position: sticky; top: 0; z-index: 50;
  gap: 12px;
}
.page-content { padding: 28px 36px; max-width: none; width: 100%; }
.sidebar-toggle {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--text-muted); flex-shrink: 0;
  /* 44x44px minimum tap target (Apple/Google's own recommended
     minimum) — the icon itself is 20px, so padding alone was giving
     roughly a 28x28px tappable area, well under that. A tap landing
     just outside the visible icon but still within a natural "this
     looks tappable" zone would silently miss entirely. */
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin: -10px; /* pull back in so it doesn't visually shove other top-bar content */
  position: relative; z-index: 10;
}

/* Project switcher inside sidebar — always-visible segmented tabs */
/* Top-bar project switcher — quick-jump dropdown independent of the
   sidebar, works identically on mobile and desktop. */
.pl-switcher-wrap { position: relative; min-width: 0; }
.pl-switcher-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); padding: 4px 2px; min-width: 0;
  color: var(--text); max-width: 100%;
}
.pl-switcher-btn:hover .pl-switcher-current { color: var(--blue-light); }
.pl-switcher-current {
  font-size: 0.9rem; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.pl-switcher-btn svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-faint); }
.pl-switcher-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: 280px; max-width: 85vw;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 300; overflow: hidden;
}
.pl-switcher-search-wrap { padding: 10px; border-bottom: 1px solid var(--border-soft); }
.pl-switcher-search-wrap input {
  width: 100%; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px; color: var(--text);
  font-size: 0.82rem; font-family: var(--font-ui); outline: none;
}
.pl-switcher-filter-row { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.pl-switcher-filter-pill {
  flex: 1; background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 0.72rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; font-family: var(--font-ui); transition: all 0.15s;
}
.pl-switcher-filter-pill:hover { border-color: var(--blue); color: var(--blue-light); }
.pl-switcher-filter-pill.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pl-switcher-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.pl-switcher-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 10px; border-radius: 7px; text-decoration: none;
  color: var(--text); font-size: 0.85rem; transition: background 0.15s;
}
.pl-switcher-item:hover { background: var(--bg-card2); }
.pl-switcher-item.active { background: var(--blue-dim); color: var(--blue-light); }
.pl-switcher-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-switcher-item-group { font-size: 0.65rem; color: var(--text-faint); flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.5px; }
.pl-switcher-empty { padding: 20px 12px; text-align: center; font-size: 0.8rem; color: var(--text-faint); }

.proj-switch-segmented {
  display: flex; gap: 4px; margin: 0 10px 8px;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}
.proj-switch-seg {
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 7px 8px; border-radius: 6px;
  font-size: 0.76rem; font-weight: 600; color: var(--text-muted);
  font-family: var(--font-ui); transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.proj-switch-seg:hover { color: var(--text); }
.proj-switch-seg.active { background: var(--blue); color: #fff; }
.proj-switch-count {
  font-family: var(--font-mono); font-size: 0.68rem;
  background: rgba(255,255,255,0.15); padding: 1px 6px; border-radius: 8px;
}
.proj-switch-seg:not(.active) .proj-switch-count { background: var(--bg-card2); color: var(--text-faint); }
.proj-switch-list { max-height: 220px; overflow-y: auto; margin-bottom: 6px; }
.proj-switch-item {
  display: block; padding: 7px 10px; margin: 0 6px; border-radius: 7px;
  font-size: 0.8rem; color: var(--text-muted); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all 0.15s;
}
.proj-switch-item:hover { background: var(--bg-card2); color: var(--text); }
.proj-switch-item.active { background: var(--blue-dim); color: var(--blue-light); font-weight: 600; }
.proj-switch-empty { padding: 10px 10px; font-size: 0.75rem; color: var(--text-faint); font-style: italic; text-align: center; }

/* Stakeholders modal (opened from sidebar on a project page) */
.stakeholder-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.stakeholder-row:last-child { border-bottom: none; }

@media (max-width: 860px) {
  .sidebar { position: fixed; left: -250px; z-index: 200; transition: left 0.25s; height: 100vh; width: min(250px, 82vw); }
  .sidebar.open { left: 0; }
  /* Previously used inset:0 (full viewport), overlapping the
     sidebar's own screen area and relying purely on z-index to make
     sure sidebar content still received taps within that overlap.
     Instead of trusting that stacking order always resolves
     correctly, this now only covers the area actually NOT under the
     sidebar — so there's no overlap left for anything to get wrong,
     and sidebar nav items are guaranteed to receive their own taps. */
  /* z-index 251 — must stay above .app-shell's 250 for the same
     reason the modal fix above needed 400: this overlay is a
     body-level sibling of .app-shell, not nested inside it, so it
     was quietly rendering BEHIND the main content once app-shell got
     bumped to 250. Taps in the dimmed area were passing straight
     through to whatever button/link sat underneath instead of
     reaching this overlay's onclick — which is why tapping outside
     the sidebar wasn't closing it. Doesn't visually conflict with the
     sidebar itself since they don't geometrically overlap (see the
     left: min(250px, 82vw) above). */
  .sidebar-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: min(250px, 82vw); background: rgba(0,0,0,0.5); z-index: 251; }
  .sidebar-overlay.visible { display: block; }
  .sidebar-toggle { display: flex; }
  .page-content { padding: 20px 14px 100px; }
  .top-bar { padding: 0 14px; }
  .nav-item { font-size: 0.9rem; padding: 11px 10px; }
  .nav-section-label { font-size: 0.7rem; letter-spacing: 1px; }
  .user-name { font-size: 0.85rem; }
  .user-role { font-size: 0.72rem; }

  /* Mobile bottom tab bar — desktop hides this entirely (see the
     non-mobile rule below). z-index must stay above .app-shell's 250
     (same stacking-context lesson as the modal fix above) or this
     would render invisibly behind dashboard content on load. */
  .mobile-tabbar {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; height: 64px;
    background: var(--bg-card); border-top: 1px solid var(--border);
    z-index: 260; padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; color: var(--text-faint); flex: 1;
    font-size: 0.62rem; font-weight: 500; padding: 6px 0;
    background: none; border: none; font-family: var(--font-ui); cursor: pointer;
  }
  .mobile-tab.active { color: var(--blue-light); }
  .mobile-tab-fab {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; margin-top: -26px;
    background: linear-gradient(135deg, var(--blue), #7c3aed);
    border: 4px solid var(--bg); cursor: pointer;
    box-shadow: 0 4px 16px rgba(37,99,235,0.4);
    flex-shrink: 0;
  }
  /* The FAB above already covers "create a project" on mobile — the
     top-bar button doing the exact same thing was a second, redundant
     control competing for space in an already-tight header. */
  .desktop-only-new-project { display: none; }

  /* .mobile-tabbar is `position: fixed; bottom: 0; height: 64px`, so
     it permanently sits on top of whatever the page has scrolled to.
     Without this, the last ~90px of every scrollable page (the tab
     bar's 64px + its safe-area inset + a margin of safety for the
     FAB, which sticks up another 26px above that) gets covered —
     on the dashboard specifically this meant the first project
     card's trust score, budget, and owner row were hidden behind an
     opaque bar and a solid floating button. Reserving the space here,
     once, fixes it for every current and future page that includes
     the shared tab bar, rather than requiring each page to remember
     to pad itself.  */
  .main-content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 24px); }
}

@media (min-width: 861px) {
  .mobile-tabbar { display: none; }
}

/* ══════════════════════════════════════════════════════════
   DASHBOARD REDESIGN — matches the reference layout: welcome
   header, icon-box stat cards, Projects Overview card, Project
   Analytics sparkline row, right column (Recent Activity feed +
   Alarms by Priority donut).
   ══════════════════════════════════════════════════════════ */

/* Top bar search + New Project button */
.dash-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 12px; width: 260px;
  color: var(--text-faint); font-size: 0.82rem; cursor: text;
}
.dash-search input { background: none; border: none; outline: none; color: var(--text); font-size: 0.82rem; flex: 1; font-family: var(--font-ui); }
.dash-search input::placeholder { color: var(--text-faint); }
.dash-search-kbd { font-size: 0.68rem; color: var(--text-faint); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.dash-user-chip { display: flex; align-items: center; gap: 8px; cursor: default; }
.dash-user-chip .user-avatar { width: 30px; height: 30px; }
.pl-btn-gradient {
  background: linear-gradient(135deg, var(--blue), #7c3aed);
  color: #fff; border: none;
}
.pl-btn-gradient:hover { filter: brightness(1.1); }

/* Welcome header */
.dash-welcome-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.dash-welcome-title { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.dash-welcome-sub { font-size: 0.88rem; color: var(--text-muted); margin-top: 4px; }
.dash-date-picker {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; color: var(--text-muted);
}

/* Icon-box stat cards */
.dash-stats-row-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.dash-stat-card-v2 {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; display: flex; gap: 14px; align-items: flex-start;
}
.dash-icon-box {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.dash-icon-box svg { width: 22px; height: 22px; }
.dash-icon-blue  { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.dash-icon-red   { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.dash-icon-green { background: linear-gradient(135deg, #10b981, #059669); }
.dash-stat-card-v2-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.dash-stat-card-v2-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }
.dash-stat-card-v2-sub { font-size: 0.72rem; color: var(--text-faint); margin-top: 6px; }
.dash-stat-card-v2-sub.needs-attention { color: var(--red); }

/* Projects Overview card wrapper */
.dash-overview-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.dash-overview-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.dash-overview-header-icon {
  width: 32px; height: 32px; border-radius: 8px; background: var(--blue-dim);
  display: flex; align-items: center; justify-content: center; color: var(--blue-light); flex-shrink: 0;
}
.dash-overview-header-title { font-size: 1rem; font-weight: 600; color: var(--text); }

/* Project card v2 */
.dash-project-card-v2 {
  display: grid; grid-template-columns: 160px 1fr; gap: 18px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin-bottom: 12px; text-decoration: none; transition: border-color 0.15s;
}
.dash-project-card-v2:hover { border-color: var(--blue); }
.dash-project-card-v2-thumb { width: 100%; height: 100%; min-height: 140px; object-fit: cover; border-radius: 8px; background: var(--bg-input); }
.dash-project-card-v2-body { display: flex; flex-direction: column; min-width: 0; }
.dash-project-card-v2-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dash-project-card-v2-name { font-size: 1rem; font-weight: 600; color: var(--text); }
.dash-project-card-v2-location { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.dash-project-card-v2-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.dash-project-card-v2-owner-label { font-size: 0.65rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.dash-project-card-v2-owner { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dash-project-card-v2-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.dash-project-card-v2-footer-label { font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.5px; }
.dash-project-card-v2-footer-value { font-size: 0.88rem; font-weight: 600; color: var(--text); font-family: var(--font-mono); margin-top: 2px; }
@media (max-width: 640px) { .dash-project-card-v2 { grid-template-columns: 1fr; } .dash-project-card-v2-thumb { height: 140px; } }

/* Project Analytics sparkline row */
.dash-analytics-card-v2 { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.dash-analytics-card-v2-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.dash-analytics-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-mini-stat { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.dash-mini-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-mini-stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.dash-mini-stat-icon svg { width: 16px; height: 16px; }
.dash-mini-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.dash-mini-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.dash-mini-stat-sparkline { width: 100%; height: 28px; margin-top: 8px; }
@media (max-width: 900px) { .dash-analytics-row { grid-template-columns: repeat(2, 1fr); } }

/* Right column */
.dash-right-col { display: flex; flex-direction: column; gap: 20px; }
.dash-right-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.dash-right-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-right-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.dash-right-card-link { font-size: 0.78rem; color: var(--blue-light); text-decoration: none; }

/* Activity feed items */
.dash-activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-activity-icon svg { width: 16px; height: 16px; }
.dash-activity-icon-green  { background: var(--green-dim); color: var(--green); }
.dash-activity-icon-orange { background: var(--amber-dim); color: var(--amber); }
.dash-activity-icon-blue   { background: var(--blue-dim); color: var(--blue-light); }
.dash-activity-icon-purple { background: rgba(139,92,246,0.15); color: #a78bfa; }
.dash-activity-body { flex: 1; min-width: 0; }
.dash-activity-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.dash-activity-sub { font-size: 0.76rem; color: var(--text-muted); margin-top: 1px; }
.dash-activity-time { font-size: 0.7rem; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; }

/* Layout: main + right column */
.dash-two-col { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .dash-two-col { grid-template-columns: 1fr; } }

/* Owned/Invited toggle when placed at the top of the dashboard,
   above the stat cards — wider and more prominent than the compact
   version used inline elsewhere. */
.dash-source-toggle { max-width: 280px; margin-bottom: 20px; }

/* Upgrade card in sidebar */
.sidebar-upgrade-card {
  margin: 14px 10px; padding: 18px 14px; border-radius: 12px; text-align: center;
  background: linear-gradient(160deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08));
  border: 1px solid rgba(139,92,246,0.25);
}
.sidebar-upgrade-icon { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 10px; background: linear-gradient(135deg, var(--blue), #7c3aed); display: flex; align-items: center; justify-content: center; }
.sidebar-upgrade-icon svg { width: 22px; height: 22px; color: #fff; }
.sidebar-upgrade-title { font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sidebar-upgrade-sub { font-size: 0.72rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 12px; }
.sidebar-upgrade-btn {
  display: block; width: 100%; padding: 8px; border-radius: 8px; border: none;
  background: linear-gradient(135deg, var(--blue), #7c3aed); color: #fff;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--font-ui);
}

/* Sidebar project list with thumbnails */
.sidebar-project-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; transition: background 0.15s;
}
.sidebar-project-item:hover { background: var(--bg-card2); }
.sidebar-project-thumb { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; background: var(--bg-input); flex-shrink: 0; }
.sidebar-project-item-body { min-width: 0; }
.sidebar-project-item-name { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-project-item-loc { font-size: 0.7rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Empty state for owned/invited lists */
.sidebar-empty-state { padding: 20px 14px; text-align: center; }
.sidebar-empty-state-icon { width: 36px; height: 36px; margin: 0 auto 10px; color: var(--text-faint); }
.sidebar-empty-state-text { font-size: 0.76rem; color: var(--text-faint); line-height: 1.4; margin-bottom: 10px; }
.sidebar-empty-state-btn { font-size: 0.76rem; color: var(--blue-light); background: none; border: none; cursor: pointer; font-family: var(--font-ui); text-decoration: underline; }

@media (max-width: 900px) {
  .dash-stats-row-v2 { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dash-stat-card-v2 { padding: 12px 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-icon-box { width: 32px; height: 32px; border-radius: 9px; }
  .dash-icon-box svg { width: 16px; height: 16px; }
  .dash-stat-card-v2-value { font-size: 1.15rem; }
  .dash-stat-card-v2-label { font-size: 0.7rem; }
  .dash-stat-card-v2-sub { font-size: 0.62rem; }
  .dash-project-card-v2 { grid-template-columns: 1fr; }
  .dash-welcome-row { flex-direction: column; }
}