/* ============================================================
   Bug Hunter — UI styles (v3.2 visual refresh)

   What changed from v3.1:
   - Refined dark + light palettes with deeper, calmer surfaces.
   - Gradient accents on KPIs, primary buttons, brand and badges.
   - Subtle depth: layered shadows, soft borders, glass-like surfaces.
   - Typography scale tightened; Inter system stack with tabular nums for IDs.
   - All animations honour prefers-reduced-motion.
   - Every selector / id / class from v3.1 retained — JS hooks unchanged.
   ============================================================ */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }

/* Honour the HTML `hidden` attribute even on flex/grid containers that
   declare their own display. Without this, [hidden] = display:none from
   the UA sheet is silently overridden by our component CSS (e.g.
   `.filter-bar { display: flex }`), so JS toggling `.hidden = true` did
   nothing. This was the cause of the bug filter-bar leaking onto the
   Audit page even though setView() correctly flagged it. */
[hidden] { display: none !important; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.kpi-num, .col-id, .att-count, .session-line3,
.audit-time, .activity-time, .comment-time {
  font-variant-numeric: tabular-nums;
}

/* ---------- Theme tokens ---------- */
:root,
[data-theme="dark"] {
  --bg: #0a0e1a;
  --bg-grad: radial-gradient(ellipse 1200px 600px at 20% -10%, rgba(99,102,241,0.08), transparent 60%),
             radial-gradient(ellipse 1000px 500px at 90% 110%, rgba(56,189,248,0.06), transparent 55%),
             #0a0e1a;
  --bg-elev: #131829;
  --bg-elev-2: #1a2138;
  --bg-elev-3: #232c47;
  --surface-glass: rgba(26, 33, 56, 0.72);
  --border: #232c47;
  --border-strong: #344063;
  --border-soft: rgba(255,255,255,0.05);

  --text: #eef2ff;
  --text-muted: #9aa6c4;
  --text-faint: #5e6a85;

  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-2: #38bdf8;
  --accent-soft: rgba(129, 140, 248, 0.16);
  --accent-glow: rgba(129, 140, 248, 0.35);
  --accent-text: #ffffff;
  --accent-grad: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #38bdf8 100%);
  --accent-grad-hover: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #0ea5e9 100%);

  --danger: #f43f5e;
  --danger-strong: #e11d48;
  --danger-soft: rgba(244, 63, 94, 0.14);
  --danger-grad: linear-gradient(135deg, #e11d48, #f43f5e);
  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --ok: #10b981;
  --ok-soft: rgba(16, 185, 129, 0.14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.18);
  --shadow: 0 4px 12px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-xl: 0 24px 56px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.30);
  --shadow-focus: 0 0 0 3px var(--accent-glow);

  --kpi-bg: linear-gradient(140deg, #1a2138 0%, #131829 100%);

  --status-new: #38bdf8;
  --status-progress: #f59e0b;
  --status-resolved: #10b981;
  --status-closed: #94a3b8;
  --status-reopened: #a78bfa;
  --status-not-bug: #64748b;
  --status-later: #f59e0b;

  --p-low: #94a3b8;
  --p-medium: #38bdf8;
  --p-high: #f59e0b;
  --p-critical: #f43f5e;

  --env-dev: #10b981;
  --env-uat: #f59e0b;
  --env-prod: #f43f5e;

  --scrollbar-thumb: #2a3553;
  --scrollbar-thumb-hover: #3a4870;
}

[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-grad: radial-gradient(ellipse 1200px 600px at 20% -10%, rgba(99,102,241,0.06), transparent 60%),
             radial-gradient(ellipse 1000px 500px at 90% 110%, rgba(56,189,248,0.05), transparent 55%),
             #f4f6fb;
  --bg-elev: #ffffff;
  --bg-elev-2: #f1f4fb;
  --bg-elev-3: #e6ecf6;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --border: #e2e8f0;
  --border-strong: #c8d2e0;
  --border-soft: rgba(15,23,42,0.05);

  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;

  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --accent-2: #0284c7;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --accent-glow: rgba(99, 102, 241, 0.25);
  --accent-text: #ffffff;
  --accent-grad: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #0284c7 100%);
  --accent-grad-hover: linear-gradient(135deg, #4338ca 0%, #4f46e5 50%, #0369a1 100%);

  --danger: #dc2626;
  --danger-strong: #b91c1c;
  --danger-soft: rgba(220, 38, 38, 0.10);
  --danger-grad: linear-gradient(135deg, #b91c1c, #dc2626);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.10);
  --ok: #059669;
  --ok-soft: rgba(5, 150, 105, 0.10);

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow: 0 4px 12px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.05);
  --shadow-lg: 0 16px 40px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-xl: 0 28px 64px rgba(15,23,42,0.20), 0 12px 32px rgba(15,23,42,0.10);
  --shadow-focus: 0 0 0 3px var(--accent-glow);

  --kpi-bg: #ffffff;

  --status-new: #0284c7;
  --status-progress: #d97706;
  --status-resolved: #059669;
  --status-closed: #64748b;
  --status-reopened: #7c3aed;
  --status-not-bug: #94a3b8;
  --status-later: #d97706;

  --p-low: #64748b;
  --p-medium: #0284c7;
  --p-high: #d97706;
  --p-critical: #dc2626;

  --env-dev: #059669;
  --env-uat: #d97706;
  --env-prod: #dc2626;

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

body {
  background: var(--bg-grad);
  color: var(--text);
  background-attachment: fixed;
}

::selection { background: var(--accent-soft); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
body.sidebar-collapsed .app { grid-template-columns: 64px 1fr; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 12px;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border);
  /* Same flex-shrink fix as .org-banner — a tall sidebar (many
     projects/users) would otherwise squash this row's content. */
  flex-shrink: 0;
  /* Sidebar brand row: keep the collapse button visible on narrow widths
     (was a duplicate .brand block lower in the file; merged here). */
  min-width: 0;
}
.brand-text { flex: 1; min-width: 0; overflow: hidden; }
.sidebar-collapse-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: 12px;
  line-height: 1;
}
.brand-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(99,102,241,0.25));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-logo:hover { transform: rotate(-8deg) scale(1.05); }
.brand-logo svg, .brand-logo img {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.brand-title {
  font-weight: 700;
  font-size: 17px;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-version {
  font-size: 10px;
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.sidebar-collapsed .sidebar { padding: 14px 8px; gap: 6px; }
body.sidebar-collapsed .brand { padding: 4px 0 10px; justify-content: center; }
body.sidebar-collapsed .brand-text { display: none; }
body.sidebar-collapsed .brand-logo { width: 34px; height: 34px; }
body.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; }
body.sidebar-collapsed .nav-btn { justify-content: center; padding: 10px 4px; }
body.sidebar-collapsed .nav-btn span:not(.nav-icon) { display: none; }
body.sidebar-collapsed .side-section { display: none; }
body.sidebar-collapsed .side-account { display: flex !important; }
body.sidebar-collapsed .side-account .side-section-header { display: none; }
body.sidebar-collapsed .account-card { padding: 4px; justify-content: center; }
body.sidebar-collapsed .account-info,
body.sidebar-collapsed .account-actions { display: none; }
body.sidebar-collapsed .side-footer .link-btn { padding: 6px 4px; text-align: center; font-size: 0; }
body.sidebar-collapsed .side-footer .link-btn::first-letter { font-size: 14px; }
body.sidebar-collapsed .theme-icon { margin-right: 0; }
body.sidebar-collapsed .side-footer .link-btn svg { margin-right: 0; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.nav-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.nav-btn:active { transform: scale(0.98); }
.nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0; top: 22%;
  width: 3px; height: 56%;
  background: var(--accent-grad);
  border-radius: 0 3px 3px 0;
}
.nav-icon { font-size: 16px; flex-shrink: 0; }

.side-section { display: flex; flex-direction: column; gap: 4px; }
.side-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
}
.side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 220px;
  overflow-y: auto;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s ease;
}
.side-item:hover { background: var(--bg-elev-2); }
.side-item.active { background: var(--accent-soft); color: var(--accent); }
.side-item .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-elev);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.side-item .swatch:hover { transform: scale(1.25); box-shadow: 0 0 0 3px var(--accent-soft); }
.side-item .label-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.side-item .label-text:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.side-item .row-actions { display: none; gap: 2px; }
.side-item:hover .row-actions { display: flex; }
.side-item .meta { font-size: 11px; color: var(--text-faint); }

.actor-select {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  width: 100%;
  font-family: inherit;
}

.side-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  text-align: left;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: color 0.12s ease, background 0.12s ease;
}
.link-btn:hover { color: var(--text); background: var(--bg-elev-2); }

.theme-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  flex-shrink: 0;
}

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

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar .menu-btn { display: none; }
.page-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.search-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 480px;
  margin-left: auto;
}
.search-wrap input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.search-wrap input:hover:not(:focus) {
  border-color: var(--accent);
  background: var(--bg-elev-3);
}
.search-wrap input:focus {
  border-color: var(--accent);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-focus);
}
.search-wrap input::placeholder { color: var(--text-faint); }

/* ---------- KPI strip ---------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding: 18px 24px;
}
.kpi {
  background: var(--kpi-bg);
  border: 1px solid var(--border);
  padding: 16px 18px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  /* Button reset — KPI tiles are now <button> for keyboard + filter clicks */
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, var(--accent-soft) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.kpi:hover::before { opacity: 1; }
.kpi:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--accent);
}
.kpi:active { transform: translateY(0); }
/* Active = the KPI's status filter matches the current multi-select */
.kpi.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.kpi.active::before { opacity: 1; }
.kpi.active .kpi-label { color: var(--accent); }
.kpi-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kpi-num.kpi-open     { background: linear-gradient(135deg, var(--status-new), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-num.kpi-resolved { background: linear-gradient(135deg, var(--status-resolved), #34d399); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-num.kpi-closed   { background: linear-gradient(135deg, var(--status-closed), #cbd5e1); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-num.kpi-later    { background: linear-gradient(135deg, var(--warn), #fbbf24); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
  font-weight: 700;
}

/* ---------- Filter bar ---------- */
.filter-bar {
  display: flex;
  gap: 8px;
  padding: 0 24px 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Multi-select dropdown ---------- */
.ms-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
.ms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  min-width: 140px;
  max-width: 220px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ms-btn:hover { border-color: var(--accent); background: var(--bg-elev-3); }
.ms-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.ms-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ms-btn-label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-caret { font-size: 10px; opacity: 0.65; flex-shrink: 0; transition: transform 0.15s ease; }
.ms-btn[aria-expanded="true"] .ms-caret { transform: rotate(180deg); }
.ms-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  animation: ms-pop 0.12s ease;
}
@keyframes ms-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ms-panel[hidden] { display: none; }
.ms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
  transition: background 0.1s ease;
}
.ms-row:hover { background: var(--bg-elev-2); }
.ms-row.on { background: var(--accent-soft); color: var(--accent); }
.ms-check {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--bg);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ms-row.on .ms-check {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.ms-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-empty { padding: 8px; color: var(--text-faint); font-size: 12px; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  white-space: nowrap;
}
.btn:hover { border-color: var(--border-strong); background: var(--bg-elev-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn.primary {
  background: var(--accent-grad);
  color: white;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px var(--accent-glow);
}
.btn.primary:hover {
  background: var(--accent-grad-hover);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 6px 16px var(--accent-glow);
}
.btn.danger {
  background: var(--danger-grad);
  color: white;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(244,63,94,0.30);
}
.btn.danger:hover {
  background: linear-gradient(135deg, var(--danger-strong), var(--danger));
  border-color: transparent;
}
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--bg-elev-2); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.icon-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger); color: white; }

/* ---------- Table ---------- */
.view { padding: 0 24px 24px; }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}
.bug-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
  /* table-layout: auto is the key here. With "fixed" + a mix of pixel
     and percentage column widths, the browser scales the columns
     proportionally when they sum past 100 % and the min-width hints
     I'd set on individual <td>s were ignored. That's what made the
     # column truncate to "#1..." and the Tasks title shrink while
     other columns had visible slack. With "auto", the browser sizes
     small cols to their content (helped by white-space:nowrap) and
     the title col with width:100% greedily fills whatever's left. */
  table-layout: auto;
}
.bug-table th, .bug-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
/* Small fixed-width columns: shrink to content, never wrap or
   ellipsize. The width:1% is the classic table trick to tell the
   browser "I don't want any of the leftover space — give it all to
   whichever column asked for width:100%." */
.bug-table th.col-id,        .bug-table td.col-id,
.bug-table th.col-status,    .bug-table td.col-status,
.bug-table th.col-priority,  .bug-table td.col-priority,
.bug-table th.col-env,       .bug-table td.col-env,
.bug-table th.col-due,       .bug-table td.col-due,
.bug-table th.col-att,       .bug-table td.col-att,
.bug-table th.col-actions,   .bug-table td.col-actions {
  width: 1%;
  white-space: nowrap;
}
/* Project / event / assignees can have long values — let them keep a
   sensible cap so a 50-char project name doesn't push the title
   column down to nothing. Within the cap, content wraps. */
.bug-table th.col-project,   .bug-table td.col-project,
.bug-table th.col-event,     .bug-table td.col-event,
.bug-table th.col-assignees, .bug-table td.col-assignees {
  width: 1%;
  white-space: nowrap;
}
.bug-table td.col-project   { max-width: 200px; white-space: normal; word-break: break-word; }
.bug-table td.col-event     { max-width: 220px; white-space: normal; }
.bug-table td.col-assignees { max-width: 280px; white-space: normal; }
/* Title is the greedy column — it expands to fill leftover space. The
   inner .title-text wraps and is line-clamped to 2 lines (see below). */
.bug-table th.col-title, .bug-table td.col-title {
  width: 100%;
  white-space: normal;
  min-width: 200px;
}
.bug-table th {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10.5px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}
.bug-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.bug-table tbody tr:hover { background: var(--bg-elev-2); }
.bug-table tbody tr:last-child td { border-bottom: none; }

.col-id        { color: var(--text-muted); font-weight: 600; text-align: left; }
.col-att       { text-align: center; }
.col-actions   { text-align: right; }

.title-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.title-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.title-meta {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.empty-state {
  padding: 56px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 12px;
  margin-top: 8px;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.pagination button {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pagination button:hover:not(:disabled) {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.pagination button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
  background: transparent;
  letter-spacing: 0.02em;
  position: relative;
}
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.10;
  pointer-events: none;
}
.badge[data-status="New"]            { color: var(--status-new); }
.badge[data-status="In Progress"]    { color: var(--status-progress); }
.badge[data-status="Resolved"]       { color: var(--status-resolved); }
.badge[data-status="Closed"]         { color: var(--status-closed); }
.badge[data-status="Reopened"]       { color: var(--status-reopened); }
.badge[data-status="Not a Bug"]      { color: var(--status-not-bug); }
.badge[data-status="Resolve Later"]  { color: var(--status-later); }

.badge[data-priority="Low"]      { color: var(--p-low); }
.badge[data-priority="Medium"]   { color: var(--p-medium); }
.badge[data-priority="High"]     { color: var(--p-high); }
.badge[data-priority="Critical"] { color: var(--p-critical); }
.badge[data-priority="Critical"]::before { opacity: 0.16; }

.badge[data-env="DEV"]  { color: var(--env-dev); border-color: rgba(16,185,129,0.45); }
.badge[data-env="UAT"]  { color: var(--env-uat); border-color: rgba(245,158,11,0.45); }
.badge[data-env="PROD"] { color: var(--env-prod); border-color: rgba(244,63,94,0.45); }

.assignee-stack {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  font-size: 11px;
  /* Each chip stays on a single line — the cap is enforced by max-width
     + ellipsis on the inner .assignee-chip-name span (the avatar circle
     keeps its fixed size). Without nowrap + ellipsis-on-name-span, a
     long name like "Chinmaya Venkataraman" used to wrap
     character-by-character because word-break:break-all forced mid-word
     breaks at the chip boundary, producing "Ka mal" / "Shu bha m S ing h". */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.assignee-chip > .avatar { flex-shrink: 0; }
.assignee-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 160px;
}
.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.attach-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
}

/* ---------- Charts ---------- */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.chart-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.chart-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chart-host { width: 100%; min-height: 180px; }
.chart-host svg { width: 100%; height: auto; display: block; }

/* ---------- Page intro banner ----------
   The Audit Trail, Sessions and Invitations screens don't have the KPI
   strip so without this their controls bar sits flush against the
   topbar — visually cramped. The banner gives the page a title +
   one-line purpose and creates breathing room. */
.page-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
}
.page-intro-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.page-intro-text { min-width: 0; }
.page-intro-text h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.page-intro-text p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Audit list ---------- */
.audit-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  /* Boxed look — card-style chrome consistent with .events-controls and
     .sessions-controls so the page chrome reads as one family. */
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin: 14px 24px 18px;
}
.audit-controls select, .audit-controls input {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  min-width: 140px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.audit-controls select:hover, .audit-controls input:hover {
  border-color: var(--accent);
  background: var(--bg-elev-3);
}
.audit-controls select:focus,
.audit-controls input:focus {
  border-color: var(--accent);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-focus);
}
.audit-controls input { flex: 1; }

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 24px 24px;
}
.audit-item, .audit-row {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 12px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.audit-item:hover, .audit-row:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
}
.audit-icon {
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  border-radius: 8px;
  color: var(--accent);
  flex-shrink: 0;
}
.audit-main, .audit-text { flex: 1; min-width: 0; }
.audit-actor { font-weight: 600; color: var(--text); }
.audit-action {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-left: 8px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
.audit-entity {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 6px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
.audit-detail {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 4px;
  word-break: break-word;
}
.audit-time {
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Modals ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above the Sleuth FAB (z-index 900) and any other floating UI so an
     active modal's primary actions (Save / Delete / Cancel) are never
     covered. The backdrop also occludes the FAB while a modal is open. */
  z-index: 1000;
  padding: 16px;
  animation: modal-fade 0.18s ease;
}
/* Confirm dialog stacks above the other modals — it's frequently
   invoked FROM inside another modal (e.g. removing a project member
   from the Members modal) and was otherwise rendered underneath and
   unclickable.

   v2.8 fix: previously z-index:200 actually rendered confirm BELOW
   the base modal layer (1000) and even below the Sleuth FAB (900),
   so the logout dialog was occluded by the FAB on the main app. The
   value should be ABOVE 1000 to genuinely stack above sibling modals. */
#modalConfirm { z-index: 1100; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal[hidden] { display: none; }
.modal-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 540px;
  /* Use dvh (dynamic viewport height) on mobile browsers so the card
     accounts for the browser chrome that appears/disappears on scroll.
     Falls back to vh on browsers without dvh support. */
  max-height: 92vh;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  /* Override-able by descendants but a sensible default. */
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  animation: modal-rise 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-card.sm { max-width: 400px; }
/* Compact confirm dialog — single-line prompts (Log out, Cancel revoke…)
   look cramped or too spacious in the generic modal-body layout, so we
   give the confirm dialog its own tightened paddings. */
.confirm-card { max-width: 380px; }
.confirm-body {
  padding: 14px 20px 4px;
}
.confirm-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.confirm-foot {
  padding: 12px 20px 16px;
  margin-top: 0;
  border-top: none;
}
.modal-card.lg { max-width: 760px; }
.modal-card.xl { max-width: 920px; }
.modal-card.xxl {
  max-width: 1400px;
  width: 95vw;
  max-height: 92vh;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  min-width: 0;
  flex: 1;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.detail-head-actions { display: flex; gap: 6px; align-items: center; }
.bug-modal-head-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.bug-modal-head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.bug-modal-subtitle { font-weight: 400; }

.modal-body {
  padding: 18px 20px 0;
  overflow-y: auto;
  /* min-height: 0 lets the body shrink inside the flex parent so the
     sticky foot has a real scrolling viewport instead of overflowing
     past the bottom of the modal-card. Without this the foot can sit
     off-screen at high browser zoom. */
  min-height: 0;
  flex: 1 1 auto;
  /* Avoid janky bouncing on iOS when the body content overflows. */
  -webkit-overflow-scrolling: touch;
}
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  /* Stretch across the modal-body's horizontal padding so the foot's
     top border reaches edge-to-edge and the buttons line up with the
     right side of the card. */
  margin: 12px -20px 0;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  /* Pin to the bottom of the scrolling modal-body so action buttons
     stay visible at any zoom / viewport. Outside a scroll container
     (e.g. the confirm modal where modal-foot is a sibling of body)
     sticky degrades gracefully into normal flow. */
  position: sticky;
  bottom: 0;
  z-index: 2;
}
/* The foot above only makes sense when it lives INSIDE the scrolling
   modal-body. For the confirm modal where modal-foot is a sibling of
   modal-body, cancel the negative margin so it sits inside its own
   padding box. */
.modal-card > .modal-foot {
  margin: 0;
}
/* The bug modal's body has padding: 0 (sections inside provide their
   own padding), so the foot must not use the default negative margin. */
.bug-modal-body > .modal-foot {
  margin: 12px 0 0;
}

.bug-modal-body { padding: 0; }
.bug-modal-body .bug-title-field { margin: 18px 22px 0; }
.bug-modal-body .bug-title-field input {
  font-size: 19px;
  font-weight: 600;
  padding: 12px 14px;
  letter-spacing: -0.01em;
}

.bug-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  padding: 20px 22px 22px;
  align-items: start;
}
.bug-modal-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.bug-modal-main textarea { resize: vertical; min-height: 120px; }
.bug-modal-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  position: sticky;
  top: 0;
}
.bug-modal-side .field select,
.bug-modal-side .field input { width: 100%; min-width: 0; }
.bug-modal-side .field select:disabled {
  cursor: not-allowed;
  background: var(--bg-elev);
  opacity: 0.85;
}

.bug-modal-body .modal-foot {
  margin: 0;
  padding: 16px 24px 18px;
  border-top: 1px solid var(--border);
}

.bug-section h3 {
  font-size: 12px;
  margin: 0 0 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.bug-section + .bug-section { margin-top: 20px; }
.bug-comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bug-activity-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.bug-activity-section details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 6px 0;
  user-select: none;
  transition: color 0.12s ease;
}
.bug-activity-section details summary:hover { color: var(--text); }

.bug-side-meta {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bug-side-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  gap: 12px;
}
.bug-side-meta-row .v { color: var(--text); text-align: right; }

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  flex: 1;
  min-width: 0;
}
.field span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.field span em { color: var(--danger); font-style: normal; margin-left: 1px; }
.field input, .field select, .field textarea {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  width: 100%;
  /* v2.4: subtle inner highlight + drop shadow give fields a visible
     "you can type here" boundary. Pre-v2.4 the field background was
     barely distinguishable from the panel below it which made every
     field read as disabled. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:hover:not(:disabled):not(:focus),
.field select:hover:not(:disabled):not(:focus),
.field textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
  background: var(--bg-elev-3);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-focus);
}
/* Disabled state — must look DIFFERENT from enabled, not the same. */
.field input:disabled, .field select:disabled, .field textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-elev);
  border-style: dashed;
}
.field input[type="color"] { padding: 2px; height: 38px; cursor: pointer; }
.field.check-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.field.check-row input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }

/* fieldset.field — neutralize the browser's default border/padding/margin
   so a <fieldset class="field"> looks identical to <label class="field">.
   Used for chip-picker groups where <label> can't wrap a non-control. */
fieldset.field {
  border: 0;
  padding: 0;
  margin: 0 0 12px 0;
  min-inline-size: 0;
}
fieldset.field > legend {
  padding: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row .field { flex: 1; }
.row .f-grow { flex: 2; }

/* Chip picker */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  min-height: 40px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  color: var(--text);
}
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.chip.selected {
  background: var(--accent-grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 6px var(--accent-glow);
}
/* When a chip is selected, the sub-label (e.g. role name beside the
   assignee name) needs higher contrast against the gradient background
   than the muted blue-grey used elsewhere. */
.chip.selected .chip-sub {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Comments */
.comment {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  transition: border-color 0.15s ease;
}
.comment:hover { border-color: var(--border-strong); border-left-color: var(--accent); }
.comment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 8px;
  gap: 10px;
}
.comment-head-left { display: flex; align-items: center; gap: 8px; }
.comment-author { font-weight: 600; color: var(--text); }
.comment-time { color: var(--text-faint); font-size: 11px; }
.comment-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
}
.comment-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* Activity row */
.activity-row {
  background: var(--bg-elev-2);
  padding: 11px 14px;
  border-radius: 9px;
  margin-bottom: 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.activity-row:hover { border-color: var(--border); }
.activity-icon { font-size: 16px; flex-shrink: 0; }
.activity-text { flex: 1; min-width: 0; }
.activity-actor { font-weight: 600; color: var(--text); }
.activity-action {
  display: inline-block;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-left: 6px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
.activity-detail {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
  word-break: break-word;
}
.activity-time {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}
.no-content {
  color: var(--text-faint);
  text-align: center;
  padding: 28px 8px;
  font-style: italic;
}

/* Comment form */
.comment-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comment-form textarea {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  min-height: 84px;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.comment-form textarea:hover:not(:focus) { border-color: var(--accent); background: var(--bg-elev-3); }
.comment-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-focus);
}
.comment-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.comment-attach-btn {
  cursor: pointer;
  padding: 8px 13px;
  border-radius: 9px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.comment-attach-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.comment-attach-btn input[type="file"] { display: none; }
/* .attach-staged-list and .attach-staged base rules live in the
   v2.4 staging block lower in this file (canonical definitions).
   The previous duplicate rules here were overridden by the cascade
   anyway, so they have been removed to satisfy css:S4666. */
.attach-staged button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

/* Attachments display */
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.attach-card {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.attach-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.attach-preview {
  width: 100%;
  height: 120px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.attach-preview img,
.attach-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attach-preview .file-icon {
  font-size: 38px;
  color: var(--text-muted);
}
.attach-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.attach-name {
  font-weight: 500;
  color: var(--text);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.attach-info {
  color: var(--text-faint);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.attach-actions {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.attach-actions a, .attach-actions button {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.attach-actions a:hover { background: var(--accent); color: white; border-color: var(--accent); }
.attach-actions button.danger:hover { background: var(--danger); color: white; border-color: var(--danger); }

/* Toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-width: 90vw;
  animation: toast-rise 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes toast-rise { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast[hidden] { display: none; }
.toast.error { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.toast.success { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }

/* Sidebar backdrop */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9;
}
.sidebar-backdrop[hidden] { display: none; }

/* Responsive */
@media (max-width: 1100px) {
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .bug-modal-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .topbar .menu-btn { display: inline-flex; }

  .bug-modal-grid { grid-template-columns: 1fr; gap: 16px; }
  .bug-modal-side {
    position: static;
    background: transparent;
    border: 1px dashed var(--border);
  }

  /* Hide low-value columns at tablet sizes so the auto-layout title
     column keeps a usable width. (Widths are otherwise controlled by
     the .bug-table td.col-* rules — the auto-layout approach handles
     shrinking on its own.) */
  .col-actions   { display: none; }
}

@media (max-width: 700px) {
  .kpi-strip { grid-template-columns: repeat(2, 1fr); padding: 14px; gap: 8px; }
  .filter-bar { padding: 0 12px 12px; }
  .topbar { padding: 12px; }
  .view { padding: 0 12px 24px; }
  .row { flex-direction: column; }
  .modal-card { max-height: 95vh; }
  .modal-card.xxl { width: 100%; max-width: 100%; }
  .charts-grid { grid-template-columns: 1fr; }
  .audit-controls { padding: 14px 12px 12px; margin: 14px 12px 14px; }
  .audit-list { padding: 0 12px 24px; }
  .sessions-controls { padding: 14px 12px 12px; margin: 14px 12px 14px; flex-direction: column; align-items: stretch; }
  .sessions-list { padding: 0 12px 24px; }
  .page-intro { padding: 16px 12px 14px; gap: 12px; }
  .page-intro-icon { width: 40px; height: 40px; font-size: 18px; }
  .page-intro-text h2 { font-size: 15px; }
  .page-intro-text p { font-size: 12px; }
  .bug-table td.col-project   { max-width: 130px; }
  .bug-table td.col-event     { max-width: 140px; }
  .bug-table td.col-assignees { max-width: 180px; }

  .session-row { grid-template-columns: 1fr; }
  .session-actions { justify-self: stretch; }
}

@media (max-width: 500px) {
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 12px 14px; }
  .kpi-num { font-size: 22px; }
  .page-title { font-size: 17px; }
  /* On phones the topbar can't fit title + search + new-bug side-by-side,
     so we break the search onto its own row below the topbar. Previously
     we hid it entirely, which left mobile users with no search at all. */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .search-wrap {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
    margin-left: 0;
  }
  /* v2.8: keep a hair of padding for the safe-area top inset so the
     modal-head's close-button isn't tucked under iOS / Android status
     bars. dvh (dynamic viewport height) handles browser-chrome
     auto-hide without clipping the modal's top edge — pure 100vh
     ignored the visible viewport on mobile Safari + Chrome. */
  .modal { padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0); }
  .modal-card {
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    max-width: 100%;
  }
  .modal-card.xxl { width: 100%; }

  /* v2.8: the confirm dialog is a 2-button question — don't blow it
     up to full-screen on mobile. Keep it card-sized with a sensible
     margin so the backdrop is visible and the dialog feels like a
     dialog, not a route change. */
  #modalConfirm .modal-card,
  #modalConfirm .confirm-card {
    width: calc(100% - 32px);
    max-width: 380px;
    height: auto;
    max-height: 80dvh;
    border-radius: 14px;
    margin: auto;
  }
  .attachment-grid { grid-template-columns: 1fr 1fr; }
  .detail-head-actions .btn,
  .bug-modal-head-actions .btn { padding: 6px 10px; font-size: 12px; }
  .bug-table th.col-assignees, .bug-table td.col-assignees,
  .bug-table th.col-priority,  .bug-table td.col-priority { display: none; }
  .bug-table { min-width: 420px; }

  .bug-modal-body .bug-title-field { margin: 14px 14px 0; }
  .bug-modal-grid { padding: 14px; }
  .bug-modal-body .modal-foot { padding: 12px 14px; }
}

/* Helpers */
.muted { color: var(--text-muted); }
.muted.small { font-size: 11px; }
.no-cursor { cursor: default !important; }
.chip-empty { color: var(--text-faint); padding: 4px 8px; font-size: 12px; }
.chip-sub { opacity: 0.65; font-weight: normal; }
.swatch.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.avatar.mini { display: inline-flex; width: 18px; height: 18px; font-size: 9px; margin-right: 6px; vertical-align: middle; }
.att-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}

/* Bar charts */
.bar-row { margin-bottom: 10px; }
.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text);
}
.bar-track {
  height: 8px;
  background: var(--bg-elev-2);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--accent-grad);
}

@media (max-width: 700px) {
  .audit-row { flex-wrap: wrap; }
  .audit-time { width: 100%; margin-top: 4px; padding-left: 28px; }
}

/* ============================================================
 * Auth pages
 * ============================================================ */
.auth-body {
  /* min-height (not height) so the page CAN grow when the card needs more
     room than the viewport. Combined with `overflow-x: hidden` (not
     overflow: hidden) so we still clip the decorative blob pseudo-
     elements on the sides but vertical scroll keeps working. Previously
     overflow:hidden + align-items:center meant tall forms (signup, accept
     invite) got clipped on short screens with no way to reach the submit
     button. */
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg-grad);
  padding: 32px 16px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.auth-body::before, .auth-body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.auth-body::before {
  width: 380px; height: 380px;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  top: -100px; left: -100px;
}
.auth-body::after {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
  bottom: -100px; right: -100px;
}
.auth-shell {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  /* Push the card into vertical center when content is shorter than the
     viewport. Auto margins under flex-align-items:flex-start give us
     this without forcing align-items:center on the parent (which broke
     scrolling for tall forms). */
  margin: auto 0;
}
/* v2.8 — Allow the signup / accept-invite (wide) cards to actually be
   wider. Without this, .auth-card-wide's max-width: 460px is capped by
   the 420px shell above, so the "Create organization" form rendered
   the same size as login. :has() is supported in every evergreen
   browser since mid-2023. */
.auth-shell:has(.auth-card-wide) {
  max-width: 480px;
}
.auth-card {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-grad);
}
.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-logo {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 18px var(--accent-glow));
  animation: auth-logo-float 4s ease-in-out infinite;
}
@keyframes auth-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.auth-logo svg, .auth-logo img {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
.auth-brand h1 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-tagline { margin: 0; font-size: 14px; color: var(--text-muted); }
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-form[hidden] { display: none !important; }
.auth-help {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}
.auth-submit {
  width: 100%;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 15px;
  margin-top: 6px;
}
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 13px;
}
.auth-links a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s ease;
}
.auth-links a:hover { text-decoration: underline; color: var(--accent-strong); }
.auth-alert {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 13px;
  border: 1px solid;
}
.auth-alert.error {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}
.auth-alert.success {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}
.auth-footnote {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Account card */
.side-account {
  margin-top: auto !important;
  padding-top: 12px !important;
}
.account-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-elev-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}
.account-card:hover { border-color: var(--border-strong); }
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--accent-glow);
}
.account-info { flex: 1; min-width: 0; }
.account-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
}

[data-needs-role] { display: none; }

.field .hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-faint);
}
.field em.js-required.hidden { display: none; }

/* Reporter is always the logged-in user — the select is disabled and only
   ever holds one option. Stripping the dropdown caret makes it read as a
   static field rather than implying the user can pick someone else. */
.reporter-select {
  width: 100% !important;
  max-width: 100%;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  padding-right: 12px !important;
}
.reporter-select::-ms-expand { display: none; }
.reporter-select option {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.sidebar-collapsed .app { grid-template-columns: 1fr; }
  body.sidebar-collapsed .sidebar { padding: 16px 12px; gap: 12px; }
  body.sidebar-collapsed .brand-text,
  body.sidebar-collapsed .nav-btn span:not(.nav-icon),
  body.sidebar-collapsed .side-section,
  body.sidebar-collapsed .account-info,
  body.sidebar-collapsed .account-actions { display: ""; }
  .sidebar-collapse-btn { display: none; }
}

@media (max-width: 700px) {
  .ms-btn { min-width: 0; flex: 1 1 calc(50% - 4px); max-width: 100%; }
  .ms-wrap { flex: 1 1 calc(50% - 4px); }
  .ms-panel { left: 0; right: 0; max-width: 100%; }
}
@media (max-width: 500px) {
  .ms-btn, .ms-wrap { flex-basis: 100%; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(5) { grid-column: span 2; }
}

/* Sessions admin view */
.sessions-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  /* Boxed look — matches .audit-controls / .events-controls. */
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin: 14px 24px 18px;
}
.sessions-help {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  min-width: 240px;
  line-height: 1.55;
}
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 24px;
}
.session-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.session-row:hover { border-color: var(--border-strong); }
.session-row.is-current {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.session-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--accent-glow);
}
.session-main { min-width: 0; }
.session-line1 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text);
}
.session-line1 .session-name { font-weight: 600; }
.session-line1 .session-role-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.session-line1 .session-current-flag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--accent-grad);
  color: white;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.session-line2 {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-word;
}
.session-line3 {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.session-actions { display: flex; gap: 6px; align-items: center; }
.sessions-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* details disclosure marker */
.bug-activity-section details > summary { list-style: none; }
.bug-activity-section details > summary::-webkit-details-marker { display: none; }
.bug-activity-section details > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
  margin-right: 4px;
}
.bug-activity-section details[open] > summary::before { content: "▾ "; }

/* legacy compatibility shims (not actively used by current HTML but kept harmless) */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  background: var(--bg-elev-2);
  border-radius: 10px;
}
.detail-meta-item .k {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  font-weight: 700;
}
.detail-meta-item .v {
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detail-section { margin-top: 16px; }
.detail-section h3 {
  font-size: 12px;
  margin: 0 0 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.detail-section p {
  white-space: pre-wrap;
  margin: 0;
  background: var(--bg-elev-2);
  padding: 12px;
  border-radius: 8px;
  color: var(--text);
}
.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 16px 0 12px;
}
.detail-tab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.detail-tab:hover { color: var(--text); }
.detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  margin-bottom: 16px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.upload-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  gap: 4px;
  cursor: pointer;
  text-align: center;
}
.upload-cta input[type="file"] { display: none; }
.upload-icon { font-size: 34px; margin-bottom: 4px; }
.upload-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.upload-sub { font-size: 12px; color: var(--text-muted); }

/* ============================================================================
   v4 multi-tenant — themed and responsive
   ========================================================================== */

/* ---- Sidebar org banner ----
   Sits between the brand row and the nav. Looks like a compact "you're
   currently in X" card so users always know which tenant they're acting on. */
.org-banner {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb, 99, 102, 241), 0.08),
    rgba(var(--accent-rgb, 99, 102, 241), 0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  /* The sidebar is itself a flex column with max-height: 100vh. With
     enough content (projects + users lists) the sidebar total exceeds
     the viewport and EVERY flex child shrinks proportionally — including
     this banner, which collapsed its name + meta lines to 0px. Lock the
     banner's intrinsic height by refusing to shrink. */
  flex-shrink: 0;
}
.org-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 6%);
  opacity: 0.15;
  pointer-events: none;
}
.org-banner-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.org-banner-meta {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Hide the banner entirely when the sidebar is collapsed — there's no
   useful narrow representation, and showing it cropped (per the bug
   report) looks broken. */
body.sidebar-collapsed .org-banner { display: none; }

/* ---- Project key chip ----
   Compact uppercase pill shown next to project names and on bug rows.
   Mirrors the Jira "PROJ-42" look without imitating colors. */
.proj-key {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border-radius: 4px;
  vertical-align: middle;
  font-family: var(--mono, "SF Mono", Menlo, monospace);
}
[data-theme="light"] .proj-key { background: rgba(0, 0, 0, 0.05); }

/* ---- Auth pages — wider cards for signup / invite ---- */
.auth-card-wide { max-width: 460px; }
.field-help, .auth-fineprint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.auth-fineprint { margin: 8px 0 0; }
.auth-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.auth-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-footer a:hover { text-decoration: underline; }

/* ---- Loading state ---- */
.auth-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 16px;
  color: var(--text-muted);
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---- Invite preview banner on accept page ---- */
.invite-preview {
  padding: 14px 16px;
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.invite-preview .auth-help {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.invite-preview code {
  font-family: var(--mono, "SF Mono", Menlo, monospace);
  font-size: 12px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--text);
}
[data-theme="light"] .invite-preview code { background: rgba(0, 0, 0, 0.05); }

/* ---- Invitations admin view ---- */
.invitations-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.invitations-controls .sessions-help {
  flex: 1 1 320px;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.invitations-list {
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.invite-status-pending  { background: #1e3a5f; color: #e0eaf8; }
.invite-status-accepted { background: #1f4d36; color: #d4f0dd; }
.invite-status-revoked  { background: #5f1f1f; color: #f8d7d7; }
.invite-status-expired  { background: #5f4216; color: #fbe7c4; }

/* ---- Invite modal: project picker checkboxes ----
   Themed to look like first-class chips, not raw browser checkboxes. */
.invite-projects {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.invite-proj-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s ease;
  color: var(--text);
}
.invite-proj-chip:hover { background: rgba(var(--accent-rgb, 99, 102, 241), 0.08); }
.invite-proj-chip input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.invite-proj-chip .swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.invite-proj-chip:has(input:checked) {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}

/* ---- Project members modal ---- */
.members-add {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.members-add select { flex: 1 1 200px; min-width: 0; }
.members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
}
.member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.12s ease;
}
.member-row:hover { border-color: var(--border-strong, var(--border)); }
.member-main { flex: 1; min-width: 0; overflow: hidden; }
.member-main > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-main strong { color: var(--text); }
.member-role-select {
  width: 110px;
  flex-shrink: 0;
}
.member-row .btn.danger {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
}

/* ---- Profile modal ---- */
.profile-section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.profile-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.profile-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.profile-readonly-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.profile-readonly-field .label {
  color: var(--text-muted);
  font-weight: 500;
}
.profile-readonly-field .value {
  color: var(--text);
  font-weight: 500;
  font-family: var(--mono, "SF Mono", Menlo, monospace);
}

.email-change-step2 {
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
}
.email-change-step2 p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.code-input {
  font-family: var(--mono, "SF Mono", Menlo, monospace);
  font-size: 20px;
  letter-spacing: 0.4em;
  text-align: center;
  padding: 10px;
}

/* ---- Responsive polish ---- */
@media (max-width: 900px) {
  /* On the slide-in mobile sidebar, the org banner shouldn't be cramped */
  .org-banner { margin: 0 0 8px; padding: 10px 12px; }
}

@media (max-width: 700px) {
  .invitations-controls {
    padding: 12px;
    gap: 10px;
  }
  .invitations-controls .sessions-help { flex-basis: 100%; }
  .invitations-controls .btn { flex: 1 1 auto; }
  .invitations-list { padding: 12px; }
  .members-add { flex-direction: column; align-items: stretch; }
  .members-add select, .members-add button { width: 100%; }
  .member-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .member-row .session-avatar { display: none; }
  .member-main { flex-basis: 100%; }
  .member-role-select { flex: 1 1 auto; }

  .invite-status { font-size: 9px; padding: 2px 7px; }
}

@media (max-width: 500px) {
  /* Auth pages — let the card fill the phone screen. We keep min-height
     for visual consistency on short forms (login) but make sure the
     card can grow with content (signup, accept-invite) and the parent
     allows vertical scroll. */
  .auth-card, .auth-card-wide {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .auth-shell { padding: 0; margin: 0; }
  /* v2.8: pad the auth body for the device's safe-area insets so the
     logo + heading aren't tucked behind the notch / status bar on
     iOS, and the submit button isn't tucked under the home indicator. */
  .auth-body {
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
    align-items: stretch;
  }
  .invite-projects { max-height: 160px; }
}

/* ---- Sidebar brand row helpers (the .brand / .brand-text min-width fix
   has been merged into the original rules higher in the file). ---- */
.brand-title, .brand-version {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* CSS variable: accent-rgb. The base theme uses --accent as a hex
   colour; some gradients above want it as r,g,b. The values below
   match each theme's --accent so tinted gradients look right in both. */
:root, :root[data-theme="dark"] { --accent-rgb: 129, 140, 248; }   /* #818cf8 */
:root[data-theme="light"]       { --accent-rgb: 99, 102, 241; }    /* #6366f1 */

/* ============================================================
 * v2.4 — Type tabs, events, attachment staging, read-only mode
 * ============================================================ */

/* Type tabs above the work-items table */
.type-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  margin: 8px 0 12px;
  overflow-x: auto;
}
.type-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 10px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
  margin-bottom: -1px;
}
.type-tab:hover { color: var(--text); }
.type-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.type-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  min-width: 22px;
}
.type-tab.active .type-tab-count {
  background: var(--accent);
  color: white;
}

/* + New split-button caret menu */
.new-item-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.new-item-wrap > .btn.primary:not(.new-item-caret) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 12px;
}
.new-item-caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0 8px;
  min-width: 28px;
}
.new-item-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  padding: 4px;
  z-index: 1000;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.new-item-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  border-radius: 6px;
}
.new-item-menu button:hover { background: var(--bg-elev-2); }

/* Per-tab specialty columns — actual sizing is handled in the main
   .bug-table block (auto layout + width:1% / 100% trick). The rules
   here are removed in favor of the canonical per-column rules above. */
.event-pill {
  display: inline-block;
  padding: 2px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.type-marker { font-size: 14px; margin-right: 4px; }

/* Read-only banner shown above the form when the current user can't
   edit this item type (e.g. a member opening a Task or Requirement). */
.bug-readonly-banner {
  background: linear-gradient(135deg, rgba(248, 165, 50, 0.16), rgba(248, 165, 50, 0.08));
  border: 1px solid rgba(248, 165, 50, 0.32);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13px;
  margin-bottom: 4px;
}
.chip-picker.locked { pointer-events: none; opacity: 0.7; }

/* Staged-files preview (hover to reveal X, click to open) */
.attach-staged-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.attach-staged {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  max-width: 220px;
}
.attach-staged-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.attach-staged-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 5px;
}
.attach-staged-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border-radius: 5px;
}
.attach-staged-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.attach-staged-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.attach-staged-size { font-size: 11px; }
.attach-staged-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.attach-staged:hover .attach-staged-remove {
  opacity: 1;
  transform: scale(1.05);
}
.attach-staged-remove:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
.create-attach-hint { margin: 6px 0 0; font-size: 11.5px; }
/* The "Upload N file(s)" CTA appended after staged thumbs. */
.attach-staged-upload {
  margin-left: 6px;
  padding: 8px 14px;
  font-size: 12px;
}

/* Events view */
.events-intro h2 { margin: 0 0 4px; }
.events-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  /* Boxed look — card-style chrome consistent with audit/sessions. */
  margin: 18px 24px 20px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.events-summary { color: var(--text-muted); font-size: 13px; margin-left: auto; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 0 24px 24px;
}
.event-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.12s ease, transform 0.08s ease,
              box-shadow 0.12s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.event-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.event-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.event-card-icon { font-size: 20px; }
.event-card-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-card-date {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}
.event-card-meta {
  display: flex;
  gap: 12px;
  color: var(--text-muted);
  font-size: 12px;
}
.event-card-stat strong {
  color: var(--text);
  font-weight: 700;
  margin-right: 4px;
}
.event-card-managers {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.event-mgr-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-elev-2);
  border-radius: 999px;
  padding: 2px 9px 2px 2px;
  font-size: 11px;
  color: var(--text-muted);
  max-width: 140px;
}
.event-mgr-chip .avatar {
  width: 18px;
  height: 18px;
  font-size: 9px;
}
.event-mgr-chip span:not(.avatar) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-mgr-more {
  font-size: 11px;
  color: var(--text-muted);
  align-self: center;
  padding: 0 4px;
}
.events-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--text-muted);
}

/* Events detail mode */
.events-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* Boxed look — matches .events-controls / audit / sessions. */
  margin: 0 24px 14px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.events-detail-head h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-detail-actions {
  display: flex;
  gap: 8px;
}
.events-detail-meta {
  padding: 0 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.events-detail-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
}
.events-detail-row .k {
  color: var(--text-muted);
  min-width: 110px;
  font-weight: 500;
}
.events-detail-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  display: block;
}
.event-detail-managers .v {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.events-detail-controls {
  padding: 0 24px 12px;
}
.events-detail-items { padding: 0 24px 24px; }

/* ============================================================
 * v2.5 — Events list + Event detail search/filter bars
 *
 * Visual match for the main work-items filter bar so the UI feels
 * consistent across views. Both bars use the same card-style chrome
 * as .events-controls / .audit-controls / .sessions-controls.
 * ============================================================ */
.events-filter-bar,
.events-detail-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 16px;
}
.events-filter-bar input[type="search"],
.events-detail-filter-bar input[type="search"] {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.events-filter-bar input[type="search"]:hover,
.events-detail-filter-bar input[type="search"]:hover {
  border-color: var(--accent);
  background: var(--bg-elev-3);
}
.events-filter-bar input[type="search"]:focus,
.events-detail-filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elev-3);
  box-shadow: var(--shadow-focus);
}
.events-filter-bar input[type="date"] {
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  flex: 0 0 auto;
}
.events-filter-bar input[type="date"]:hover,
.events-filter-bar input[type="date"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (max-width: 600px) {
  .events-filter-bar,
  .events-detail-filter-bar {
    padding: 12px;
    gap: 8px;
  }
  .events-filter-bar input[type="search"],
  .events-detail-filter-bar input[type="search"] {
    flex: 1 1 100%;
  }
  .events-filter-bar input[type="date"] {
    flex: 1 1 100%;
  }
}

/* ============================================================
 * v2.6 — Custom date picker
 *
 * The native <input type="date"> is hidden via .bh-date-native and
 * replaced by a button + popover that match the screenshot. The native
 * input stays in the DOM so form submission picks up its value.
 * ============================================================ */
.bh-date-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.bh-date-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.bh-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.bh-date-btn:hover { border-color: var(--accent); background: var(--bg-elev-3); }
.bh-date-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--accent); }
.bh-date-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.bh-date-icon { font-size: 14px; flex: 0 0 auto; }
.bh-date-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-date-placeholder { color: var(--text-faint); }
.bh-date-clear {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elev-3);
  border: 1px solid transparent;
}
.bh-date-clear:hover { color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.15); }

.bh-date-pop {
  /* JS sets position:fixed + top/left at open time so the popover
     escapes any overflow:hidden / transformed ancestor (modal-card,
     backdrop-filter wrapper, etc.). z-index sits above everything
     including the bug modal (z 1000-ish) and the global loader
     overlay base. */
  position: fixed;
  z-index: 100000;
  width: 320px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  animation: bh-date-pop-in 0.14s ease;
  user-select: none;
}
@keyframes bh-date-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bh-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bh-date-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.bh-date-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bh-date-nav:hover { background: var(--bg-elev-2); color: var(--text); border-color: var(--border); }
.bh-date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.bh-date-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.bh-date-cell {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 8px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: center;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bh-date-cell.muted { color: var(--text-faint); }
.bh-date-cell:hover { background: var(--bg-elev-2); border-color: var(--border); }
.bh-date-cell.is-today {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.bh-date-cell.is-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 700;
}
.bh-date-cell.is-selected:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.bh-date-foot {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.bh-date-today {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.bh-date-today:hover { background: var(--accent-soft); }

@media (max-width: 380px) {
  .bh-date-pop { width: calc(100vw - 24px); }
}

/* ============================================================
 * v2.6 — Rich-text editor
 *
 * Wraps a hidden textarea (kept for form submission) with a toolbar
 * and a contenteditable surface. The toolbar groups B / I / U / S,
 * lists, quote / code, image / clear-formatting.
 * ============================================================ */
.bh-rt-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.bh-rt-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.bh-rt-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.bh-rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.bh-rt-toolbar button {
  width: 30px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bh-rt-toolbar button:hover {
  background: var(--bg-elev-3);
  border-color: var(--border);
}
.bh-rt-toolbar button:active {
  background: var(--accent-soft);
}
.bh-rt-toolbar button.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.bh-rt-divider {
  width: 1px;
  background: var(--border);
  margin: 2px 4px;
  align-self: stretch;
}
.bh-rt-editor {
  min-height: 110px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  outline: none;
}
.bh-rt-wrap.compact .bh-rt-editor {
  min-height: 64px;
}
.bh-rt-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-faint);
  pointer-events: none;
}
.bh-rt-editor p { margin: 0 0 8px; }
.bh-rt-editor p:last-child { margin-bottom: 0; }
.bh-rt-editor blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 12px;
  margin: 6px 0;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border-radius: 0 6px 6px 0;
}
.bh-rt-editor pre {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
}
.bh-rt-editor code {
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.bh-rt-editor ul, .bh-rt-editor ol { margin: 4px 0 8px 22px; padding: 0; }
.bh-rt-editor li { margin-bottom: 2px; }
.bh-rt-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 8px 0;
  border: 1px solid var(--border);
}

/* Read-only rich content (rendered HTML in the comments list, etc.) */
.bh-rich-content p:last-child { margin-bottom: 0; }
.bh-rich-content blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 12px;
  margin: 6px 0;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  border-radius: 0 6px 6px 0;
}
.bh-rich-content pre {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-x: auto;
}
.bh-rich-content code {
  background: var(--bg-elev-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.bh-rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 6px 0;
  border: 1px solid var(--border);
}

/* ============================================================
 * v2.6 — Custom single-select dropdown
 *
 * The native <select> is hidden via .bh-sel-native; the button + popover
 * give a consistent cross-browser look that matches the calendar.
 * ============================================================ */
.bh-sel-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}
.bh-sel-native {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.bh-sel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02),
              0 1px 2px rgba(0, 0, 0, 0.18);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.bh-sel-btn:hover:not(.is-disabled) { border-color: var(--accent); background: var(--bg-elev-3); }
.bh-sel-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--accent); }
.bh-sel-btn[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.bh-sel-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}
.bh-sel-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bh-sel-placeholder { color: var(--text-faint); }
.bh-sel-caret {
  flex: 0 0 auto;
  font-size: 10px;
  opacity: 0.65;
  transition: transform 0.15s ease;
}
.bh-sel-btn[aria-expanded="true"] .bh-sel-caret { transform: rotate(180deg); }

.bh-sel-pop {
  /* See .bh-date-pop — placed via JS as position:fixed so the panel
     doesn't get clipped by the modal-foot or any other scroll/clip
     ancestor. min-width matches the trigger button (set by JS). */
  position: fixed;
  z-index: 100000;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: bh-date-pop-in 0.14s ease;
}
.bh-sel-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.bh-sel-row:hover { background: var(--bg-elev-2); }
.bh-sel-row.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* Audit "Load more" footer */
.audit-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  text-align: center;
}

@media (max-width: 500px) {
  .bh-rt-toolbar button { width: 28px; height: 26px; font-size: 12px; }
  .bh-rt-editor { min-height: 90px; padding: 8px 10px; }
}

/* ============================================================
 * v2.5 — Global blocking loader
 *
 * Full-viewport overlay shown while an action is in flight. The
 * pointer-events:all on the overlay catches every click so the
 * user can't double-submit or click somewhere else mid-request.
 * The spinner is a pure-CSS ring (no asset dep) so it works even
 * before web fonts / images load.
 * ============================================================ */
.global-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 22, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: bh-loader-fade 0.18s ease;
}
.global-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 30px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
}
.global-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.10);
  border-top-color: var(--accent);
  animation: bh-loader-spin 0.9s linear infinite;
}
.global-loader-text {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.01em;
}
@keyframes bh-loader-spin { to { transform: rotate(360deg); } }
@keyframes bh-loader-fade { from { opacity: 0; } to { opacity: 1; } }

/* When the loader is up, dim background interactions visually too. */
body.is-loading { cursor: progress; }
body.is-loading .topbar,
body.is-loading .filter-bar,
body.is-loading .kpi-strip,
body.is-loading .bug-table,
body.is-loading .modal-card,
body.is-loading .events-grid,
body.is-loading .events-detail-mode {
  /* The overlay already blocks clicks; this just makes it visually
     obvious that the page is busy. */
  filter: saturate(0.85);
}

@media (max-width: 500px) {
  .global-loader-card { min-width: 140px; padding: 18px 24px; }
  .global-loader-spinner { width: 36px; height: 36px; }
}

/* ============================================================
 * v2.5 — Comment admin actions (edit / delete)
 * ============================================================ */
.comment-head-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comment-admin-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.comment-admin-actions .icon-btn {
  padding: 4px 6px;
  font-size: 13px;
  opacity: 0.65;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.comment-admin-actions .icon-btn:hover { opacity: 1; background: var(--bg-elev-2); }

.comment-edit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 2px;
}
.comment-edit-input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  resize: vertical;
  min-height: 60px;
}
.comment-edit-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.comment-edit-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.comment-edit-actions .btn { padding: 6px 14px; font-size: 12px; }

/* ============================================================
 * v2.5 — Bug-level "Add attachment" uploader inside detail modal
 * ============================================================ */
.bug-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bug-section-head h3 {
  margin: 0;
}
.bug-attach-add-btn {
  /* Same look as the comment composer's attach button — keep the UI
     consistent so users don't have to learn a new control. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.bug-attach-add-btn:hover { border-color: var(--accent); background: var(--bg-elev-3); }
.bug-attach-add-btn input[type="file"] { display: none; }
.bug-attach-empty {
  padding: 14px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

/* ============================================================
 * v3.3 — Bug table responsive trim (additive to existing breakpoints)
 *
 * The auto-layout bug table (greedy title column) needs help on
 * narrower viewports: hide low-value columns rather than letting
 * the title shrink to nothing.
 * ============================================================ */
@media (max-width: 900px) {
  .bug-table th.col-env, .bug-table td.col-env,
  .bug-table th.col-att, .bug-table td.col-att,
  .bug-table th.col-assignees, .bug-table td.col-assignees,
  .bug-table th.col-priority, .bug-table td.col-priority { display: none; }
  .bug-table td.col-project   { max-width: 130px; }
  .bug-table td.col-event     { max-width: 140px; }
}
@media (max-width: 640px) {
  .bug-table td.col-project   { max-width: 110px; }
  .bug-table td.col-event     { max-width: 120px; }
}