/* ============================================================
   Mourasel Platform — Jira-inspired theme (light default, dark optional)
   Centralized design tokens: colors (light/dark), spacing scale, type
   scale, radius scale. Components below consume these tokens instead of
   ad hoc literals (ENHT-18) — extend the scale here, not per-component.
   ============================================================ */
:root {
  --bg:        #F7F8F9;
  --bg-2:      #FAFBFC;
  --panel:     #FFFFFF;
  --panel-2:   #FFFFFF;
  --border:    #DFE1E6;
  --border-2:  #C1C7D0;
  --text:      #172B4D;
  --text-dim:  #44546F;
  --text-mut:  #6B778C;
  --text-strong: #091E42;

  --primary:   #0C66E4;
  --primary-2: #2684FF;
  --primary-ink:#FFFFFF;
  --primary-rgb: 12,102,228;

  --red:    #DE350B;
  --orange: #FF8B00;
  --green:  #216E4E;
  --blue:   #0C66E4;
  --purple: #6554C0;
  --teal:   #00A3BF;
  --gray:   #6B778C;

  --sidebar-bg: #FFFFFF;
  --body-bg: linear-gradient(180deg, #FAFBFC 0%, #F4F5F7 100%);
  --backdrop-bg: rgba(255,255,255,.82);
  --btn-bg: #F4F5F7;
  --btn-bg-hover: #EBECF0;
  --input-bg: #FFFFFF;
  --nav-hover: #F4F5F7;
  --row-hover: #F4F5F7;
  --chip-bg: #F4F5F7;
  --scrollbar-thumb: #C1C7D0;
  --track-bg: #EBECF0;

  --danger-bg: #FFECEB;
  --danger-bg-hover: #FFDAD2;
  --danger-border: #FFBDAD;
  --danger-text: #AE2E24;

  --b-red-bg: #FFEBE6;    --b-red-text: #BF2600;    --b-red-border: #FFBDAD;
  --b-orange-bg: #FFF0B3; --b-orange-text: #974F0C; --b-orange-border: #FFE380;
  --b-green-bg: #E3FCEF;  --b-green-text: #006644;  --b-green-border: #ABF5D1;
  --b-blue-bg: #DEEBFF;   --b-blue-text: #0747A6;   --b-blue-border: #B3D4FF;
  --b-purple-bg: #EAE6FF; --b-purple-text: #403294; --b-purple-border: #C0B6F2;
  --b-teal-bg: #E6FCFF;   --b-teal-text: #00747D;   --b-teal-border: #B3F5FF;
  --b-gray-bg: #F4F5F7;   --b-gray-text: #42526E;   --b-gray-border: #DFE1E6;

  --notice-info-bg: #DEEBFF;  --notice-info-border: #B3D4FF;  --notice-info-text: #0747A6;
  --notice-warn-bg: #FFF7D6;  --notice-warn-border: #FFE380;  --notice-warn-text: #7A5D00;
  --notice-err-bg:  #FFEBE6;  --notice-err-border:  #FFBDAD;  --notice-err-text:  #BF2600;

  /* Radius scale — Jira uses small, restrained radii. --radius-badge is
     deliberately smaller than --radius-sm: Jira's status lozenges are
     barely rounded at all. --radius-full is for circles/pills. */
  --radius-badge: 3px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow: 0 4px 14px rgba(9,30,66,.12), 0 0 1px rgba(9,30,66,.25);
  --font: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Spacing scale (ENHT-18) — every padding/margin/gap in the app should
     resolve to one of these steps. Compact by design: Jira's own controls
     run 4-10px vertical padding, sections 16-24px — see the ticket's own
     examples. Named by size, not literal px, so the scale can shift later
     without touching every call site. */
  --space-2xs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* Type scale (ENHT-18) — collapses the old ad hoc 11/11.5/12/12.5/13/
     13.5/14/16/17/20/21/22px sprawl onto Jira's own stated ranges (page
     title ~24px, section title ~16-18px, normal UI ~14px, metadata
     ~12-13px). --text-display is reserved for KPI/stat numerals only. */
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base:13px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-display: 28px;
}

/* ---------------- Dark theme override ---------------- */
:root[data-theme="dark"] {
  --bg:        #0a0e17;
  --bg-2:      #0e1320;
  --panel:     #121a2b;
  --panel-2:   #0f1626;
  --border:    #1e2a40;
  --border-2:  #26344e;
  --text:      #e6edf7;
  --text-dim:  #9fb0c9;
  --text-mut:  #64748b;
  --text-strong: #ffffff;

  /* Jira-blue family in dark mode too (was cyan #06b6d4 — an unrelated
     hue that didn't match the light theme's Jira blue at all). */
  --primary:   #4C9AFF;
  --primary-2: #85B8FF;
  --primary-ink:#0B1220;
  --primary-rgb: 76,154,255;

  --red:    #f43f5e;
  --orange: #f59e0b;
  --green:  #22c55e;
  --blue:   #4C9AFF;
  --purple: #a855f7;
  --teal:   #2dd4bf;
  --gray:   #64748b;

  --sidebar-bg: linear-gradient(180deg, var(--bg-2), var(--bg));
  --body-bg: radial-gradient(1200px 700px at 80% -10%, #12213a 0%, var(--bg) 55%);
  --backdrop-bg: rgba(10,14,23,.7);
  --btn-bg: #17233a;
  --btn-bg-hover: #1d2c47;
  --input-bg: #0c1320;
  --nav-hover: #142138;
  --row-hover: #141f34;
  --chip-bg: #10192a;
  --scrollbar-thumb: #22314c;
  --track-bg: #17233a;

  --danger-bg: #3a1622;
  --danger-bg-hover: #4a1b2b;
  --danger-border: #5a1f30;
  --danger-text: #fda4b4;

  --b-red-bg: rgba(244,63,94,.12);    --b-red-text: #fb7185;    --b-red-border: rgba(244,63,94,.3);
  --b-orange-bg: rgba(245,158,11,.12);--b-orange-text: #fbbf24; --b-orange-border: rgba(245,158,11,.3);
  --b-green-bg: rgba(34,197,94,.12);  --b-green-text: #4ade80;  --b-green-border: rgba(34,197,94,.3);
  --b-blue-bg: rgba(76,154,255,.14);  --b-blue-text: #93c5fd;   --b-blue-border: rgba(76,154,255,.32);
  --b-purple-bg: rgba(168,85,247,.12);--b-purple-text: #c4b5fd; --b-purple-border: rgba(168,85,247,.3);
  --b-teal-bg: rgba(45,212,191,.12);  --b-teal-text: #5eead4;   --b-teal-border: rgba(45,212,191,.3);
  --b-gray-bg: rgba(100,116,139,.14); --b-gray-text: #cbd5e1;  --b-gray-border: rgba(100,116,139,.3);

  --notice-info-bg: rgba(76,154,255,.1); --notice-info-border: rgba(76,154,255,.3); --notice-info-text: #a9c9ff;
  --notice-warn-bg: rgba(245,158,11,.08);--notice-warn-border: rgba(245,158,11,.3);--notice-warn-text: #fde68a;
  --notice-err-bg:  rgba(244,63,94,.08); --notice-err-border:  rgba(244,63,94,.3); --notice-err-text:  #fecdd3;

  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--body-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 700; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius); }
::-webkit-scrollbar-track { background: transparent; }

/* Accessible keyboard focus — visible on every interactive element, not just inputs */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible,
.tab:focus-visible, .chip:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/* ---------------- Layout ---------------- */
.layout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs);
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-2xs) var(--space-xl); }
.brand-logo { width: 40px; height: 40px; border-radius: var(--radius); background: linear-gradient(135deg, #0891b2, #06b6d4); display: grid; place-items: center; color: white; font-weight: 800; font-size: var(--text-xl); flex: none; }
.brand-name { font-weight: 800; letter-spacing: .3px; font-size: var(--text-md); white-space: nowrap; }
.brand-sub { font-size: var(--text-xs); color: var(--text-mut); letter-spacing: 1.5px; white-space: nowrap; }

.nav-link {
  display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius);
  color: var(--text-dim); cursor: pointer; font-weight: 600; font-size: var(--text-md);
  border: 1px solid transparent; user-select: none; white-space: nowrap;
}
.nav-link:hover { background: var(--nav-hover); color: var(--text); text-decoration: none; }
.nav-link.active { background: linear-gradient(90deg, rgba(var(--primary-rgb),.14), rgba(var(--primary-rgb),.03)); color: var(--primary); border-color: rgba(var(--primary-rgb),.3); }
/* Base size for every bare .ico SVG (theme toggle, notification bell, buttons, etc.) —
   without this, an <svg> with no width/height attributes and no CSS sizing falls back to
   the browser's oversized default replaced-element size instead of matching its 24x24 viewBox. */
.ico { width: 18px; height: 18px; flex: none; }
.ico.sm { width: 16px; height: 16px; }
.ico.lg { width: 20px; height: 20px; }
.nav-link .ico { width: 18px; height: 18px; opacity: .9; flex: none; }
.nav-spacer { flex: 1; }
.nav-foot { border-top: 1px solid var(--border); padding-top: var(--space-sm); }

/* ENHT-22: saved-filter sub-items under "Issues" — indented to align under the parent row's
   label (icon width + the row's own gaps), one step down the type scale. */
.nav-sub { padding: var(--space-xs) var(--space-sm) var(--space-xs) calc(var(--space-md) + 18px + var(--space-md)); font-size: var(--text-sm); font-weight: 500; gap: var(--space-sm); }
.nav-sub .nav-sub-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.nav-sub .nav-sub-x { opacity: 0; flex: none; color: var(--text-mut); font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: var(--radius-sm); }
.nav-sub:hover .nav-sub-x { opacity: 1; }
.nav-sub .nav-sub-x:hover { color: var(--red); background: var(--btn-bg-hover); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: var(--space-lg); padding: 0 var(--space-2xl); min-height: 52px;
  border-bottom: 1px solid var(--border); background: var(--backdrop-bg); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: var(--text-lg); white-space: nowrap; }
.topbar .crumb { color: var(--text-mut); font-size: var(--text-base); }
.crumb { color: var(--text-mut); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.crumb a { color: var(--text-mut); text-decoration: none; }
.crumb a:hover { color: var(--primary); text-decoration: underline; }
.crumb .sep { margin: 0 var(--space-2xs); opacity: .5; }
.issue-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--primary); font-weight: 600; }
.issue-chip .ic { font-size: var(--text-sm); }
.issue-chip:hover { text-decoration: underline; }
.top-spacer { flex: 1; }
.content { padding: var(--space-xl) var(--space-2xl) 60px; max-width: 1500px; width: 100%; }

/* ---------------- Global search ---------------- */
.gsearch { position: relative; flex: 1; max-width: 480px; min-width: 120px; }
.gsearch-input-wrap { position: relative; display: flex; align-items: center; }
.gsearch-input-wrap .ico { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-mut); pointer-events: none; }
.gsearch input { padding-left: 34px; background: var(--btn-bg); border-color: transparent; }
.gsearch input:focus { background: var(--input-bg); border-color: var(--primary); }
.gsearch-results {
  position: absolute; top: calc(100% + var(--space-2xs)); left: 0; right: 0; background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 420px; overflow-y: auto; z-index: 50;
}
.gsearch-results .grp-label { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) var(--space-2xs); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--text-mut); font-weight: 700; }
.gsearch-results .grp-label .ico { width: 13px; height: 13px; }
.gsearch-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); cursor: pointer; }
.gsearch-row:hover, .gsearch-row.hi { background: var(--row-hover); }
.gsearch-row .ico { width: 16px; height: 16px; color: var(--text-mut); flex: none; }
.gsearch-row .mono { font-family: var(--mono); color: var(--primary); font-size: var(--text-sm); font-weight: 700; flex: none; }
.gsearch-row .ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); }
.gsearch-empty { padding: var(--space-lg) var(--space-md); color: var(--text-mut); font-size: var(--text-base); }
.gsearch-foot { padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-mut); cursor: pointer; }
.gsearch-foot:hover { color: var(--text); }

/* ---------------- Theme toggle ---------------- */
.theme-toggle { position: relative; }
.theme-toggle .ico.sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ico.moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ico.sun { display: block; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs); justify-content: center;
  background: var(--btn-bg); color: var(--text); border: 1px solid var(--border-2);
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-base); cursor: pointer;
  transition: .12s; white-space: nowrap; min-height: 34px;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--border-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--primary); color: var(--primary-ink); border: none; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.btn.danger:hover { background: var(--danger-bg-hover); }
.btn.sm { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); border-radius: var(--radius-sm); min-height: 30px; }
.btn.xs { padding: 3px var(--space-xs); font-size: var(--text-xs); border-radius: var(--radius-sm); line-height: 1; min-height: auto; }
.btn.icon { padding: var(--space-sm); }
.btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---------------- Cards / panels ---------------- */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.card.pad { padding: var(--space-lg); }
.card-h { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--border); }
.card-h h3 { font-size: var(--text-md); letter-spacing: .3px; }
.card-h .sub { color: var(--text-mut); font-size: var(--text-sm); }
.section-title { font-size: var(--text-sm); letter-spacing: 1.5px; color: var(--text-mut); text-transform: uppercase; margin: var(--space-2xs) 0 var(--space-md); font-weight: 700; }

.grid { display: grid; gap: var(--space-lg); }
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cols-2 { grid-template-columns: 1.5fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px){ .cols-2, .cols-3 { grid-template-columns: 1fr; } }
#smtp-profiles.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){ #smtp-profiles.cols-2 { grid-template-columns: 1fr; } }

/* KPI card with colored accent bar — compact stat tile, not a dashboard-widget-sized card */
.kpi {
  position: relative; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); overflow: hidden;
}
.kpi::before { content:""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--primary)); }
.kpi .label { color: var(--text-dim); font-size: var(--text-sm); letter-spacing: .4px; text-transform: uppercase; font-weight: 600; }
.kpi .value { font-size: var(--text-display); font-weight: 800; line-height: 1.1; margin-top: var(--space-xs); letter-spacing: -.5px; }
.kpi .foot { color: var(--text-mut); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.kpi.red    { --accent: var(--red); }
.kpi.orange { --accent: var(--orange); }
.kpi.green  { --accent: var(--green); }
.kpi.blue   { --accent: var(--blue); }
.kpi.purple { --accent: var(--purple); }
.kpi.gray   { --accent: var(--gray); }
.kpi.teal   { --accent: var(--teal); }

/* ---------------- Badges (Jira-style lozenges) ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 2px var(--space-sm); border-radius: var(--radius-badge);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  border: 1px solid transparent; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }
.b-red    { background: var(--b-red-bg);    color: var(--b-red-text);    border-color: var(--b-red-border); }
.b-orange { background: var(--b-orange-bg); color: var(--b-orange-text); border-color: var(--b-orange-border); }
.b-green  { background: var(--b-green-bg);  color: var(--b-green-text);  border-color: var(--b-green-border); }
.b-blue   { background: var(--b-blue-bg);   color: var(--b-blue-text);   border-color: var(--b-blue-border); }
.b-purple { background: var(--b-purple-bg); color: var(--b-purple-text); border-color: var(--b-purple-border); }
.b-teal   { background: var(--b-teal-bg);   color: var(--b-teal-text);   border-color: var(--b-teal-border); }
.b-gray   { background: var(--b-gray-bg);   color: var(--b-gray-text);   border-color: var(--b-gray-border); }

/* ---------------- Detail-page header (App.detailHeader, ENHT-18) ----------------
   Shared by every "issue-like" and "test-artifact" detail page — key + status/type
   badges, title, meta subline. Replaces 7x duplicated inline-styled markup. */
.detail-header { margin-bottom: var(--space-2xl); }
.detail-header .key-row { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.detail-header .key-row .key { font-weight: 700; font-size: var(--text-lg); font-family: var(--mono); }
.detail-header h2 { font-size: var(--text-2xl); margin-top: var(--space-xs); max-width: 820px; }
.detail-header .meta { color: var(--text-mut); font-size: var(--text-sm); margin-top: var(--space-xs); }
.detail-header .meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-2); }
.detail-header .meta a:hover { color: var(--primary); }
.detail-header .kicker { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--text-mut); font-size: var(--text-sm); font-weight: 600; }
.detail-header .kicker .ico { width: 14px; height: 14px; }

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.tbl th {
  text-align: left; padding: var(--space-sm) var(--space-md); color: var(--text-mut); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.tbl td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr { cursor: default; }
table.tbl tbody tr.click { cursor: pointer; }
table.tbl tbody tr.click:hover { background: var(--row-hover); }
table.tbl .mono { font-family: var(--mono); color: var(--primary); font-weight: 600; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; font-weight: 700; }
.matrix .cell { display: inline-grid; place-items: center; min-width: 30px; height: 26px; border-radius: var(--radius); font-weight: 700; }

/* Dense step-editor table (Test Steps) — compact rows, borderless inline inputs */
table.tbl.dense td { padding: var(--space-xs) var(--space-sm); }
table.tbl.dense th { padding: var(--space-xs) var(--space-sm); }
.step-row .step-n { color: var(--text-mut); font-size: var(--text-sm); text-align: center; }
.step-row input { width: 100%; border: 1px solid transparent; background: transparent; padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius); font-size: var(--text-base); color: var(--text); }
.step-row input:hover, .step-row input:focus { border-color: var(--border-2); background: var(--panel-2); outline: none; }

/* Test Repository split view */
.repo-tree .repo-node { padding: var(--space-sm) var(--space-md); font-size: var(--text-base); cursor: pointer; border-radius: var(--radius); margin: 2px var(--space-xs); color: var(--text-dim); }
.repo-tree .repo-node:hover { background: var(--row-hover); }
.repo-tree .repo-node.active { background: var(--b-blue-bg); color: var(--primary); font-weight: 600; }

/* Traceability tree */
.trace-node { border-left: 2px solid var(--border-2); padding: var(--space-xs) 0 var(--space-xs) var(--space-md); font-size: var(--text-base); }

/* Rich text editor (App.richText) */
.rte { border: 1px solid var(--border-2); border-radius: var(--radius-sm); overflow: hidden; }
.rte-toolbar { display: flex; align-items: center; gap: 3px; padding: var(--space-xs) var(--space-sm); background: var(--btn-bg); border-bottom: 1px solid var(--border-2); flex-wrap: wrap; }
.rte-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: var(--text-base); }
.rte-btn:hover { background: var(--btn-bg-hover); border-color: var(--border-2); }
.rte-sep { width: 1px; height: 20px; background: var(--border-2); margin: 0 var(--space-2xs); }
.rte-size { width: auto; min-height: auto; padding: var(--space-2xs) 22px var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
.rte-color { width: 28px; height: 28px; padding: 2px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.rte-editor { min-height: 110px; padding: var(--space-sm) var(--space-md); font-size: var(--text-base); line-height: 1.5; outline: none; background: var(--input-bg); color: var(--text); }
.rte-editor:empty:before { content: attr(data-placeholder); color: var(--text-mut); }
.rte-editor img { max-width: 100%; min-width: 40px; min-height: 40px; border-radius: var(--radius-sm); margin: var(--space-2xs) 0; resize: both; overflow: auto; display: block; }
/* A pasted-but-not-yet-uploaded image (ENHT-19) — the wrapper is its own atomic unit
   (contenteditable="false", same technique as @mention pills) so backspacing it out of the
   paragraph removes only this inline preview; the underlying file stays queued until the
   explicit ✕ is clicked or the entity is created and the queue is flushed. */
.rte-pending-img { position: relative; display: inline-block; vertical-align: bottom; }
.rte-pending-img img { max-width: 220px; max-height: 160px; border-radius: var(--radius-sm); display: block; margin: var(--space-2xs) 0; }
.rte-img-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; background: rgba(9,30,66,.68); color: #fff; border-radius: var(--radius-full); font-size: 14px; line-height: 1; cursor: pointer; }
.rte-img-x:hover { background: var(--danger); }
/* Read-only rendering of saved rich-text content (defect/comment display) — same text
   styling as the editor, minus the editing chrome. Images open the zoom lightbox on click. */
.rte-view { font-size: var(--text-base); line-height: 1.6; color: var(--text); }
.rte-view img { max-width: 100%; border-radius: var(--radius-sm); margin: var(--space-2xs) 0; cursor: zoom-in; }
.attach-thumb { display: inline-block; width: 96px; height: 72px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-2); cursor: zoom-in; background: var(--btn-bg); }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* @mention / #issue-reference pills (ENHT-8) — both are real links (to the mentioned user's
   profile / the referenced issue), so both get the same clickable affordance. */
.mention { background: var(--b-blue-bg); color: var(--b-blue-text); padding: 1px var(--space-xs); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.mention:hover { text-decoration: underline; }

/* Searchable select (App.searchSelect) */
.ssel { position: relative; }
.ssel-list {
  position: absolute; top: calc(100% + var(--space-2xs)) ; left: 0; right: 0; background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  max-height: 240px; overflow-y: auto; z-index: 60;
}
.ssel-row { padding: var(--space-sm) var(--space-md); cursor: pointer; font-size: var(--text-base); }
.ssel-row:hover { background: var(--row-hover); }
.ssel-empty { padding: var(--space-sm) var(--space-md); color: var(--text-mut); font-size: var(--text-base); }

/* Scrollable checklist box (role/type/category multi-checkbox pickers) — was a
   near-identical inline style block duplicated 5x across views-tests/testplans/
   testsets/requirements.js; max-height stays a per-instance inline override since
   it legitimately varies by call site (a genuinely dynamic value, not design debt). */
.scroll-checklist { max-height: 220px; overflow: auto; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: var(--space-sm); }

/* ---------------- Avatars ---------------- */
.avatar { width: 28px; height: 28px; border-radius: var(--radius-full); display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--text-xs); flex: none; }
.avatar.lg { width: 32px; height: 32px; font-size: var(--text-sm); }
.avatar.xl { width: 88px; height: 88px; font-size: var(--text-display); }
.user-chip { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; }
a.user-chip .nm { text-decoration: underline; text-decoration-color: var(--border-2); text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }
a.user-chip:hover .nm { color: var(--primary); text-decoration-color: currentColor; }
.user-chip .nm { font-weight: 600; }
.user-chip .rl { color: var(--text-mut); font-size: var(--text-xs); }

/* ---------------- Progress ---------------- */
.progress { height: 8px; background: var(--track-bg); border-radius: var(--radius-sm); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: var(--radius-sm); }
.progress.multi { display: flex; }
.progress.multi > i { display: block; height: 100%; }
.progress-label { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: var(--space-xs); }

/* ---------------- Forms ---------------- */
.field { margin-bottom: var(--space-md); }
.field label { display: block; font-size: var(--text-sm); color: var(--text-dim); margin-bottom: var(--space-2xs); font-weight: 600; }
.field .hint { color: var(--text-mut); font-size: var(--text-xs); margin-top: var(--space-2xs); }
input, select, textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-2); color: var(--text);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-base); font-family: inherit; outline: none; min-height: 36px;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15); }
/* resize:vertical kept as a manual escape hatch even though textareas auto-grow with content (see
   core.js autoGrow) — overflow hidden so no internal scrollbar ever flashes while it resizes. */
textarea { resize: vertical; min-height: 84px; overflow-y: hidden; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B778C' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-md) center; padding-right: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px){ .form-row, .form-row.three { grid-template-columns: 1fr; } }
.checkbox { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.checkbox input { width: auto; }

/* ---------------- Filter bar ---------------- */
.filters { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: flex-end; }
.filters .field { margin: 0; min-width: 140px; }
.filters .grow { flex: 1; min-width: 200px; }
.chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.chip { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--chip-bg); color: var(--text-dim); font-size: var(--text-sm); cursor: pointer; font-weight: 600; }
.chip.on { background: var(--b-blue-bg); border-color: var(--b-blue-border); color: var(--b-blue-text); }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: var(--space-2xs); border-bottom: 1px solid var(--border); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.tab { padding: var(--space-sm) var(--space-lg); cursor: pointer; color: var(--text-mut); font-weight: 600; font-size: var(--text-base); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text-strong); border-bottom-color: var(--primary); }

/* ---------------- Modal ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(9,30,66,.54); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: var(--space-xl); }
.modal { background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; box-shadow: var(--shadow); }
.modal.lg { max-width: 780px; }
.modal-h { display: flex; align-items: center; padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.modal-h h3 { font-size: var(--text-lg); }
.modal-h .x { margin-left: auto; cursor: pointer; color: var(--text-mut); font-size: 22px; line-height: 1; background: none; border: none; }
.modal-h .x:hover { color: var(--text-strong); }
.modal-b { padding: var(--space-xl); }
.modal-f { padding: var(--space-md) var(--space-xl); border-top: 1px solid var(--border); display: flex; gap: var(--space-sm); justify-content: flex-end; position: sticky; bottom: 0; background: var(--panel); }

/* ---------------- Toasts ---------------- */
#toast-root { position: fixed; right: var(--space-xl); bottom: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); z-index: 200; }
.toast { background: var(--panel); border: 1px solid var(--border-2); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); min-width: 260px; max-width: 380px; box-shadow: var(--shadow); animation: slideIn .2s ease; }
.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast .t { font-weight: 700; font-size: var(--text-base); }
.toast .m { color: var(--text-dim); font-size: var(--text-sm); margin-top: 2px; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- Misc ---------------- */
.empty { text-align: center; padding: var(--space-3xl) var(--space-xl); color: var(--text-mut); }
.empty .big { font-size: var(--text-2xl); margin-bottom: var(--space-sm); opacity: .6; }
.empty h3 { color: var(--text-dim); margin-bottom: var(--space-xs); font-size: var(--text-md); }
.spinner { width: 30px; height: 30px; border: 3px solid var(--track-bg); border-top-color: var(--primary); border-radius: var(--radius-full); animation: spin .7s linear infinite; margin: var(--space-2xl) auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.divider { height: 1px; background: var(--border); margin: var(--space-lg) 0; }
.meta-list { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-sm) var(--space-md); font-size: var(--text-base); }
.meta-list dt { color: var(--text-mut); }
.meta-list dd { margin: 0; color: var(--text); }
.pill-count { background: var(--btn-bg); border-radius: var(--radius-full); padding: 1px var(--space-sm); font-size: var(--text-xs); color: var(--text-dim); font-weight: 700; }
.stat-row { display: flex; gap: var(--space-xl); flex-wrap: wrap; }
.stat { }
.stat .n { font-size: var(--text-xl); font-weight: 800; }
.stat .l { font-size: var(--text-xs); color: var(--text-mut); text-transform: uppercase; letter-spacing: .5px; }
/* Semantic-colored stat/KPI numerals (pass/fail/warn counts etc.) — collapses the
   repeated inline `style="color:var(--red/green/orange)"` pattern into one class. */
.stat-value.pos { color: var(--green); }
.stat-value.neg { color: var(--red); }
.stat-value.warn { color: var(--orange); }
.notice { padding: var(--space-md) var(--space-lg); border-radius: var(--radius); font-size: var(--text-base); border: 1px solid; }
.notice.info { background: var(--notice-info-bg); border-color: var(--notice-info-border); color: var(--notice-info-text); }
.notice.warn { background: var(--notice-warn-bg); border-color: var(--notice-warn-border); color: var(--notice-warn-text); }
.notice.err  { background: var(--notice-err-bg);  border-color: var(--notice-err-border);  color: var(--notice-err-text); }
.link-muted { color: var(--text-dim); cursor: pointer; }
.tag { display: inline-block; background: var(--btn-bg); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 2px var(--space-sm); font-size: var(--text-xs); color: var(--text-dim); margin: 2px; }
.attach { display: inline-flex; align-items: center; gap: var(--space-sm); background: var(--chip-bg); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); margin: 3px 3px 3px 0; }
.attach .rm { cursor: pointer; color: var(--text-mut); }
.attach .rm:hover { color: var(--red); }
.donut-legend { display: flex; flex-direction: column; gap: var(--space-sm); }
.donut-legend .row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-base); }
.donut-legend .sw { width: 11px; height: 11px; border-radius: var(--radius-sm); }
.donut-legend .val { margin-left: auto; font-weight: 700; }

/* comment thread */
.comment { display: flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--border); transition: background 1.8s ease; border-radius: var(--radius); }
.comment .body { flex: 1; }
.comment .meta { color: var(--text-mut); font-size: var(--text-sm); margin-bottom: 3px; }
.comment .meta b { color: var(--text); }
/* Momentary highlight when landing on a comment permalink (ENHT-8) — fades via the
   transition above once the class is removed a couple seconds later. */
.comment.pinned { background: var(--b-blue-bg); }
.hist-item { display: flex; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border); font-size: var(--text-base); }
.hist-item .when { color: var(--text-mut); font-size: var(--text-xs); white-space: nowrap; }
.hist-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--primary); margin-top: var(--space-xs); flex: none; }

/* ---------------- Auth screens ---------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--space-2xl); }
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { text-align: center; margin-bottom: var(--space-xl); }
.auth-brand .logo { width: 56px; height: 56px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0891b2, #06b6d4); display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.auth-brand h1 { font-size: var(--text-2xl); }
.auth-brand p { color: var(--text-mut); font-size: var(--text-base); margin-top: var(--space-2xs); }
.auth-card .card { padding: var(--space-2xl); }
.auth-foot { text-align: center; margin-top: var(--space-lg); font-size: var(--text-base); color: var(--text-mut); }
.demo-hint { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--text-mut); background: var(--btn-bg); border: 1px dashed var(--border-2); border-radius: var(--radius); padding: var(--space-sm) var(--space-md); }

.hidden { display: none !important; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt { margin-top: var(--space-lg); } .mt-sm { margin-top: var(--space-sm); } .mt-lg { margin-top: var(--space-3xl); } .mb { margin-bottom: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); }
.text-dim { color: var(--text-dim); } .text-mut { color: var(--text-mut); }
.text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); }
.mono { font-family: var(--mono); }
.fw { width: 100%; } .tr { text-align: right; } .tc { text-align: center; }
.nowrap { white-space: nowrap; }
.flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; }
.big-num { font-family: var(--mono); }

/* ---------------- Responsive (ENHT-18, light touch) ----------------
   Sidebar shrinks to icon-only below 960px rather than a modern dashboard's
   full-collapse-with-toggle — matches Jira's own compact-rail behavior on
   narrower viewports without adding new interactive/toggle JS. Table
   horizontal scroll is already handled per-instance by .table-wrap above. */
@media (max-width: 960px) {
  .layout { grid-template-columns: 64px 1fr; }
  .sidebar { padding: var(--space-lg) var(--space-xs); align-items: center; }
  .brand-name, .brand-sub, .nav-link .lbl, .nav-sub { display: none; }
  .nav-link { justify-content: center; padding: var(--space-sm); }
  .content { padding: var(--space-lg); }
}