/* ============================================================
   Swift PI Portal — Design System
   ============================================================ */

:root {
  --bg: #070b14;
  --surface: #0d1420;
  --surface-2: #111c2d;
  --surface-3: #162035;
  --border: #1e2d45;
  --border-subtle: #152030;
  --text: #e8edf5;
  --text-muted: #6b7fa0;
  --text-dim: #3d5070;

  --blue: #3b82f6;
  --blue-dim: rgba(59, 130, 246, 0.12);
  --blue-glow: rgba(59, 130, 246, 0.25);
  --purple: #8b5cf6;
  --purple-dim: rgba(139, 92, 246, 0.12);
  --purple-glow: rgba(139, 92, 246, 0.25);
  --green: #10b981;
  --green-dim: rgba(16, 185, 129, 0.12);
  --amber: #f59e0b;
  --amber-dim: rgba(245, 158, 11, 0.12);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.12);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
}

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

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   Auth Page
   ============================================================ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
}

.auth-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}

.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.auth-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.logo-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-main {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.logo-sub {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.auth-tabs {
  display: flex;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  margin-bottom: 24px;
}

.tab-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

.form-group input::placeholder { color: var(--text-dim); }

.input-wrap {
  position: relative;
}

.input-wrap input { padding-right: 44px; }

.toggle-pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.toggle-pw:hover { color: var(--text); }

.form-error {
  font-size: 13px;
  color: var(--red);
  margin-bottom: 12px;
  min-height: 0;
  display: none;
}

.form-error.visible { display: block; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  width: 100%;
  background: var(--blue);
  color: white;
  margin-top: 4px;
}

.btn-primary:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--blue-glow);
}

.btn-primary.accent-purple {
  background: var(--purple);
}

.btn-primary.accent-purple:hover:not(:disabled) {
  background: #7c3aed;
  box-shadow: 0 4px 16px var(--purple-glow);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.btn-ghost:hover { color: var(--text); background: var(--surface-2); }

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn.loading .btn-text { opacity: 0; }
.btn.loading .btn-spinner { display: block; position: absolute; }

@keyframes spin { to { transform: rotate(360deg); } }

.auth-help {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
}

.auth-footer {
  font-size: 12px;
  color: var(--text-dim);
}

/* ============================================================
   Modal
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-title { font-size: 16px; font-weight: 600; margin: 0; color: var(--text); }
.modal-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-header p { font-size: 14px; color: var(--text-muted); margin: 0; }
.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--text); background: var(--surface-2); }
.modal-body { padding: 0; }
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================
   App Layout
   ============================================================ */

.app-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sidebar layout */
.sidebar-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.sidebar-logo-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  font-weight: 400;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
}

.nav-section {
  margin-bottom: 4px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 8px 12px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 450;
  cursor: pointer;
  transition: all 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--blue-dim); color: var(--blue); }
.nav-item.active svg { stroke: var(--blue); }
.nav-item svg { flex-shrink: 0; }

.sidebar-user {
  padding: 16px 20px;
  border-top: 1px solid var(--border-subtle);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.user-details { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text-muted); }

.logout-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: color 0.1s;
}

.logout-btn:hover { color: var(--red); }

/* Main content */
.main-content {
  flex: 1;
  overflow-x: hidden;
}

/* ============================================================
   Page Header
   ============================================================ */

.page-header {
  padding: 28px 32px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* .btn-primary is width:100% (meant for stacked form buttons) — without this override,
   a button placed directly in .page-header takes that literally as 100% of the flex
   row's main size, squeezing the title down to near-nothing and running off the right
   edge of the viewport instead of sizing to its own content. Affects every role
   dashboard's header action button (Add User, Add Client, Submit Case Request, etc.),
   not just one page. */
.page-header > .btn {
  width: auto;
  flex-shrink: 0;
}

.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.page-subtitle { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

.page-body { padding: 0 32px 40px; }

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.card-body { padding: 20px; }
.card-body-lg { padding: 24px; }

/* ============================================================
   Stats / Metric Cards
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.blue { background: var(--blue-dim); color: var(--blue); }
.stat-icon.purple { background: var(--purple-dim); color: var(--purple); }
.stat-icon.green { background: var(--green-dim); color: var(--green); }
.stat-icon.amber { background: var(--amber-dim); color: var(--amber); }

.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* ============================================================
   Case List
   ============================================================ */

.cases-list { display: flex; flex-direction: column; gap: 8px; }

.case-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
}

.case-item:hover {
  border-color: var(--blue);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.case-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.case-dot.open { background: var(--green); box-shadow: 0 0 6px var(--green); }
.case-dot.closed { background: var(--text-dim); }
.case-dot.pending-activation { background: var(--amber); }
.case-dot.on-hold { background: #f97316; }
.case-dot.in-progress { background: var(--blue); box-shadow: 0 0 6px var(--blue); }

.case-info { flex: 1; min-width: 0; }

.case-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Client portal only (#cases-list) — sized to match the meeting/booking module it now
   sits directly beneath, so the two read as a matched pair of "modules" rather than a
   full card followed by a much thinner list row. Scoped by ID rather than changing the
   shared .case-item rules, which pi.html also uses for its (often much longer) case list. */
#cases-list .case-item { padding: 20px 22px; }
#cases-list .case-dot { width: 10px; height: 10px; }
#cases-list .case-title { font-size: 15px; }
#cases-list .case-meta { font-size: 13px; }

/* ============================================================
   Badges / Status
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.badge-open { background: var(--green-dim); color: var(--green); }
.badge-closed { background: rgba(107,127,160,0.1); color: var(--text-muted); }
.badge-pending { background: var(--amber-dim); color: var(--amber); }
.badge-on-hold { background: rgba(249,115,22,0.12); color: #f97316; }
.badge-disputed { background: rgba(168,85,247,0.14); color: #a855f7; }
.badge-in-progress { background: var(--blue-dim); color: var(--blue); }
.badge-report { background: var(--purple-dim); color: var(--purple); }

/* ============================================================
   Timeline
   ============================================================ */

.timeline { position: relative; }

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}

.timeline-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}

.timeline-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-dot.note { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.timeline-dot.waypoint { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.timeline-dot.observation { background: var(--purple-dim); border-color: var(--purple); color: var(--purple); }
.timeline-dot.photo { background: var(--amber-dim); border-color: var(--amber); color: var(--amber); }
.timeline-dot.report { background: var(--green-dim); border-color: var(--green); color: var(--green); }

.timeline-content { flex: 1; min-width: 0; padding-top: 4px; }

.timeline-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.timeline-type {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.timeline-time {
  font-size: 11px;
  color: var(--text-dim);
}

.timeline-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.timeline-address {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   Photo Grid
   ============================================================ */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.photo-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all 0.15s;
}

.photo-item:hover { transform: scale(1.02); box-shadow: var(--shadow); }

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 11px;
  padding: 12px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Lightbox
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  transition: all 0.15s;
}

.lightbox-close:hover { color: var(--text); background: var(--surface-2); }

.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.5);
  padding: 6px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ============================================================
   Reports List
   ============================================================ */

.reports-list { display: flex; flex-direction: column; gap: 8px; }

.report-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.report-icon {
  width: 40px;
  height: 40px;
  background: var(--purple-dim);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
}

.report-info { flex: 1; min-width: 0; }
.report-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.report-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--purple-dim);
  color: var(--purple);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  flex-shrink: 0;
}

.report-download:hover { background: var(--purple); color: white; text-decoration: none; }

/* ============================================================
   Empty States
   ============================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-icon {
  width: 56px;
  height: 56px;
  background: var(--surface-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 { font-size: 15px; font-weight: 500; color: var(--text-muted); margin-bottom: 4px; }
.empty-state p { font-size: 13px; color: var(--text-dim); max-width: 280px; }

/* ============================================================
   Case Detail Header
   ============================================================ */

.case-detail-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 24px 32px;
}

.case-detail-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-detail-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   Live Indicator
   ============================================================ */

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-live 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* ============================================================
   Divider
   ============================================================ */

.divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 20px 0;
}

/* ============================================================
   Tab Content Sections
   ============================================================ */

.tab-content { display: none; }
.tab-content.active { display: block; }

.content-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.content-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-tab:hover { color: var(--text); }
.content-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* Compact tab row (case detail has 9 tabs): small enough to sit on one line, never wraps, and scrolls sideways inside its own box
   (no visible scrollbar) on a narrow window instead of spilling out of the page. */
.content-tabs.compact {
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.content-tabs.compact::-webkit-scrollbar { display: none; }
.content-tabs.compact .content-tab { padding: 7px 6px; font-size: 11px; gap: 3px; white-space: nowrap; flex-shrink: 0; }
.content-tabs.compact .count-badge { min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px; }

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--surface-2);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

/* ============================================================
   Loader
   ============================================================ */

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   Toast Notifications
   ============================================================ */

.toasts {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  animation: toast-in 0.2s ease-out;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red); }
.toast.info { border-left: 3px solid var(--blue); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .sidebar { display: none; }
  /* Wrap instead of overflow: .page-header's action button (.btn-primary is width:100%,
     and some are given flex-shrink:0 inline) doesn't fit beside the title on narrow
     screens and was running off the right edge of the viewport. */
  .page-header { padding: 16px 16px 0; flex-wrap: wrap; }
  .page-body { padding: 0 16px 32px; }
  .case-detail-header { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* #ob-reminder-banner is position:fixed at the bottom of the viewport — on a short
     mobile page (e.g. just the meeting module + one case card), it can float directly
     on top of the last card instead of appearing below it. Reserving extra bottom
     space makes room for it below the real content instead of over it. */
  body.ob-banner-visible .main-content { padding-bottom: 130px; }

  /* Scrollable tabs so all tabs are reachable on small screens */
  .content-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 0;
  }
  .content-tabs::-webkit-scrollbar { display: none; }
  .content-tab { white-space: nowrap; flex-shrink: 0; padding: 10px 10px; font-size: 12px; }

  /* Case detail tab content area — reduce 32px horizontal padding on mobile */
  .case-tabs-wrap { padding: 14px 12px 28px !important; }

  /* Case complete bar */
  #case-complete-bar { padding: 10px 12px !important; }

  /* Case card — grid layout for clean two-row display on small screens */
  .case-item {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 12px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
  }
  .case-dot { grid-row: 1; grid-column: 1; margin-top: 4px; }
  .case-info { grid-row: 1; grid-column: 2; min-width: 0; }
  .case-right { grid-row: 2; grid-column: 2; gap: 8px; align-items: center; flex-wrap: nowrap; }
  .case-title { white-space: normal; word-break: break-word; overflow: visible; font-size: 14px; line-height: 1.3; }
  .case-meta { white-space: normal; word-break: break-word; overflow: visible; }
  .case-item:hover { transform: none; }

  /* Activity log form — full width inputs on mobile */
  .al-form select { min-width: 0; width: 100%; box-sizing: border-box; }
  .al-form input[type="datetime-local"] { min-width: 0; width: 100%; box-sizing: border-box; }
  .al-form-row { flex-direction: column; }
  .al-form textarea { font-size: 16px; } /* prevent iOS zoom on focus */
  .al-form select, .al-form input { font-size: 16px; } /* prevent iOS zoom */
}

/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ============================================================
   Back Button
   ============================================================ */

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  transition: color 0.1s;
  margin-bottom: 12px;
}

.back-btn:hover { color: var(--text); }

/* PI purple accent overrides */
.pi-accent .nav-item.active { background: var(--purple-dim); color: var(--purple); }

/* ============================================================
   Light / Day Theme  (respects system preference)
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f0f4f9;
    --surface: #ffffff;
    --surface-2: #f5f8fc;
    --surface-3: #eaeff6;
    --border: #d2dce8;
    --border-subtle: #e2eaf4;
    --text: #0d1829;
    --text-muted: #4a6080;
    --text-dim: #8fa4be;

    --blue-dim: rgba(59, 130, 246, 0.1);
    --blue-glow: rgba(59, 130, 246, 0.22);
    --purple-dim: rgba(139, 92, 246, 0.1);
    --purple-glow: rgba(139, 92, 246, 0.22);
    --green-dim: rgba(16, 185, 129, 0.1);
    --amber-dim: rgba(245, 158, 11, 0.1);
    --red-dim: rgba(239, 68, 68, 0.1);

    --shadow: 0 2px 12px rgba(10, 25, 50, 0.08);
    --shadow-lg: 0 4px 32px rgba(10, 25, 50, 0.12);
  }

  .auth-grid {
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  }
  .auth-bg {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139,92,246,0.04) 0%, transparent 50%);
  }
  .login-brand {
    background: linear-gradient(135deg, #1a2a4a 0%, #1e3560 50%, #182d50 100%) !important;
  }
  .sidebar { box-shadow: 2px 0 16px rgba(10,25,50,0.07); }
  .stat-card, .card { box-shadow: 0 1px 4px rgba(10,25,50,0.06); }
  .case-item { box-shadow: 0 1px 3px rgba(10,25,50,0.05); }
  .form-group input,
  .form-group textarea,
  .form-group select { background: #f8fafd; }
  .auth-card { box-shadow: 0 4px 24px rgba(10,25,50,0.1); }
}

/* ============================================================
   Hover Glow — Universal clickable feedback
   ============================================================ */

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--blue-glow), 0 4px 16px var(--blue-glow);
}
.btn-primary.accent-purple:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--purple-glow), 0 4px 16px var(--purple-glow);
}
.btn-secondary:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--border), 0 2px 8px rgba(0,0,0,0.15);
}
.btn-ghost:hover {
  box-shadow: 0 0 0 2px var(--border);
}

.nav-item:hover {
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.18);
}
.nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(59,130,246,0.3);
}
.pi-accent .nav-item.active {
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.3);
}

.case-item:hover {
  box-shadow: 0 0 0 1px var(--blue), 0 4px 16px var(--blue-glow);
}

.content-tab:hover {
  background: var(--surface-2);
}

.photo-item:hover {
  box-shadow: 0 0 0 2px var(--blue), 0 4px 16px var(--blue-glow);
  transform: scale(1.02);
}

.report-download:hover {
  box-shadow: 0 0 0 2px var(--purple-glow), 0 2px 8px var(--purple-glow);
}

.tab-btn:hover {
  box-shadow: 0 0 0 2px var(--border);
  color: var(--text);
  background: var(--surface-3);
}
.tab-btn.active {
  box-shadow: 0 0 0 1px rgba(59,130,246,0.2);
}

.logout-btn:hover {
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}

.action-btn:hover {
  box-shadow: 0 0 0 2px var(--border);
}

.token-chip:hover {
  box-shadow: 0 0 0 2px var(--blue-glow);
}

.filter-btn:hover {
  box-shadow: 0 0 0 2px var(--border);
  color: var(--text);
}

.lightbox-close:hover {
  box-shadow: 0 0 0 2px var(--border);
}

.overlay-close:hover {
  box-shadow: 0 0 0 2px var(--border);
}

/* ============================================================
   Mobile Header
   ============================================================ */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 12px 0 16px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-hamburger {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.mobile-hamburger:hover {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 0 0 2px var(--border);
}

.mobile-logout-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.mobile-logout-btn:hover {
  background: var(--red-dim);
  color: var(--red);
  box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.mobile-nav-overlay.visible { display: block; }

@media (max-width: 768px) {
  .mobile-header { display: flex; }

  .sidebar-layout { padding-top: 56px; }

  /* Override the existing display:none for mobile sidebar */
  .sidebar {
    display: flex !important;
    position: fixed !important;
    top: 56px !important;
    left: -280px;
    width: 260px;
    height: calc(100vh - 56px) !important;
    z-index: 200;
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
  }
  .sidebar.mobile-open { left: 0; }

  .page-header { padding: 16px 16px 0; flex-wrap: wrap; }
  .page-body { padding: 0 16px 32px; }
  .case-detail-header { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.pi-accent .content-tab.active { color: var(--purple); border-bottom-color: var(--purple); }