@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&display=swap');

/* ============================================================
   Klang Quality Board — Linear-inspired design system
   ============================================================ */
:root {
    --bg: #08090A;            /* app background          */
    --bg-2: #0C0D0F;          /* sidebar                 */
    --card: #141517;          /* panels / cards          */
    --card-2: #191A1D;        /* nested surfaces, bubbles */
    --input: #0F1011;         /* form fields             */
    --border: #232428;        /* hairline borders        */
    --border-2: #2C2D32;      /* stronger borders        */
    --text: #D6D7DA;          /* body text               */
    --text-strong: #F3F4F6;   /* headings                */
    --text-secondary: #8A8D94;/* muted                   */
    --text-faint: #5C5F66;    /* faintest                */

    --accent: #5E6AD2;        /* Linear indigo           */
    --accent-hover: #6E78D8;
    --accent-fg: #A8AEEC;     /* accent text on dark soft */
    --accent-soft: rgba(94, 106, 210, 0.15);

    --green:  #3FB950; --green-soft:  rgba(63, 185, 80, 0.15);
    --red:    #F0616D; --red-soft:    rgba(240, 97, 109, 0.15);
    --orange: #E08C3B; --orange-soft: rgba(224, 140, 59, 0.15);
    --yellow: #D9A23B; --yellow-soft: rgba(217, 162, 59, 0.15);
    --purple: #A371F7; --purple-soft: rgba(163, 113, 247, 0.15);

    --sidebar-w: 232px;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--accent-fg); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code, pre, .font-mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace; }
::selection { background: rgba(94,106,210,0.35); }

/* Scrollbars — thin, Linear-style */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A2B30; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3A3B41; background-clip: content-box; }

/* ============================================================
   App shell: sidebar + topbar + scrolling content
   ============================================================ */
.app { display: flex; height: 100vh; width: 100%; }

.sidebar {
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 10px;
}
.sidebar-head {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 14px;
}
.ws-logo {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 2px 6px rgba(94,106,210,0.40));
}
.qb-logo { display: block; }
.ws-name { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ws-name strong { color: var(--text-strong); font-weight: 600; font-size: 13px; }
.ws-name span { color: var(--text-secondary); font-size: 11px; }

.nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.nav-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 12px 10px 5px; font-weight: 600; }
.nav-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 6px;
    color: var(--text-secondary); font-size: 13px; font-weight: 450;
    cursor: pointer; transition: background .12s, color .12s;
    white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.nav-item.active { background: rgba(255,255,255,0.06); color: var(--text-strong); font-weight: 500; }
.nav-item.active .nav-ic { color: var(--accent-fg); }
.nav-ic { flex: 0 0 16px; display: inline-flex; color: var(--text-secondary); }
.nav-ic svg { display: block; }
.nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--card-2); color: var(--text-secondary);
    font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.nav-count.alert { background: var(--accent); color: #fff; }

.sidebar-foot { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.user-card {
    display: flex; align-items: center; gap: 9px;
    padding: 8px; margin-top: 6px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card);
}
.user-av {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-fg);
    font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.user-meta { min-width: 0; flex: 1; line-height: 1.25; }
.user-name { color: var(--text); font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-sub { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-logout { color: var(--text-secondary); display: inline-flex; padding: 4px; border-radius: 5px; }
.user-logout:hover { color: var(--red); background: rgba(255,255,255,0.04); }

.main-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    flex: 0 0 auto; height: 48px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px; border-bottom: 1px solid var(--border);
    background: rgba(10,11,12,0.7); backdrop-filter: blur(8px);
}
.topbar-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text-strong); }
.topbar-title .tb-ic { display: inline-flex; color: var(--text-secondary); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.tb-clock { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.page-scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.page-scroll > main { padding: 24px 28px; }

/* ============================================================
   Cards / panels
   ============================================================ */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card.overflow-hidden { overflow: hidden; }

/* Headings inside content */
h1, h2, h3 { color: var(--text-strong); }

/* ============================================================
   Tables
   ============================================================ */
table { border-collapse: collapse; width: 100%; }
th {
    color: var(--text-secondary); font-weight: 500; text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    background: rgba(255,255,255,0.015);
}
th, td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
tbody tr { transition: background .1s; }
tbody tr:hover { background: rgba(255,255,255,0.025); }
tbody tr:last-child td { border-bottom: 0; }

.expandable-row { display: none; }
.expandable-row.open { display: table-row; }
.expandable-row:hover { background: transparent; }

/* ============================================================
   Form controls
   ============================================================ */
select, input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="date"], textarea {
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
}
select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }
label { color: var(--text-secondary); }

button { font-family: inherit; }

/* Generic button helpers (opt-in) */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--border-2); background: rgba(255,255,255,0.03); }

/* ============================================================
   Badges — soft Linear pills
   ============================================================ */
[class*="badge-"] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 6px;
    font-size: 11.5px; font-weight: 500; line-height: 1.5;
    white-space: nowrap; vertical-align: middle;
}
/* leading status dot */
.badge-critical::before, .badge-high::before, .badge-medium::before, .badge-low::before,
.badge-new::before, .badge-confirmed::before, .badge-in_progress::before, .badge-resolved::before,
.badge-wont_fix::before, .badge-duplicate::before, .badge-needs_manual_fix::before,
.badge-awaiting_verification::before,
.badge-passed::before, .badge-failed::before, .badge-broken::before,
.badge-analysis-done::before, .badge-analysis-analyzing::before, .badge-analysis-pending::before,
.badge-need-open::before, .badge-need-in_progress::before, .badge-need-passed::before,
.badge-need-failed::before, .badge-need-dismissed::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px;
}

.badge-critical { background: var(--red-soft);    color: var(--red); }
.badge-high     { background: var(--orange-soft); color: var(--orange); }
.badge-medium   { background: var(--yellow-soft); color: var(--yellow); }
.badge-low      { background: var(--card-2);      color: var(--text-secondary); }

.badge-new         { background: var(--accent-soft); color: var(--accent-fg); }
.badge-confirmed   { background: var(--purple-soft); color: var(--purple); }
.badge-in_progress { background: var(--yellow-soft); color: var(--yellow); }
.badge-awaiting_verification { background: var(--accent-soft); color: var(--accent-fg); }
.badge-resolved    { background: var(--green-soft);  color: var(--green); }
.badge-wont_fix    { background: var(--card-2);      color: var(--text-secondary); }
.badge-duplicate   { background: var(--card-2);      color: var(--text-secondary); }
.badge-needs_manual_fix { background: var(--orange-soft); color: var(--orange); }

.badge-passed { background: var(--green-soft);  color: var(--green); }
.badge-failed { background: var(--red-soft);    color: var(--red); }
.badge-broken { background: var(--yellow-soft); color: var(--yellow); }

.badge-analysis-done      { background: var(--green-soft);  color: var(--green); }
.badge-analysis-analyzing { background: var(--yellow-soft); color: var(--yellow); }
.badge-analysis-pending   { background: var(--card-2);      color: var(--text-secondary); }

.badge-fix-proposed { background: var(--purple-soft); color: var(--purple); }
.badge-needs_manual_fix { background: var(--orange-soft); color: var(--orange); }
.badge-resolution { background: var(--card-2); color: var(--text-secondary); border: 1px solid var(--border); }

.badge-need-open        { background: var(--accent-soft); color: var(--accent-fg); }
.badge-need-in_progress { background: var(--yellow-soft); color: var(--yellow); }
.badge-need-passed      { background: var(--green-soft);  color: var(--green); }
.badge-need-failed      { background: var(--red-soft);    color: var(--red); }
.badge-need-dismissed   { background: var(--card-2);      color: var(--text-secondary); }

/* Need change-type + regression-risk pills (no status dot) */
.badge-change-ui    { background: var(--accent-soft); color: var(--accent-fg); }
.badge-change-core  { background: var(--purple-soft); color: var(--purple); }
.badge-change-mixed { background: var(--orange-soft); color: var(--orange); }
.badge-risk-low     { background: var(--card-2);      color: var(--text-secondary); }
.badge-risk-medium  { background: var(--yellow-soft); color: var(--yellow); }
.badge-risk-high    { background: var(--red-soft);    color: var(--red); }

.analysis-content { white-space: pre-wrap; }

/* Assignee chip (table cell + meta bar) */
.assignee-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text); white-space: nowrap; }
.assignee-av {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-fg);
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}

/* Need detail: at-a-glance meta bar + section headers + technical block */
.need-meta-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 10px 12px; background: var(--card-2); border: 1px solid var(--border); border-radius: 8px; }
.nm-item { display: inline-flex; align-items: center; gap: 7px; }
.nm-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; }
.nm-v { font-size: 12.5px; color: var(--text); font-weight: 500; }
.nm-none { font-size: 12.5px; color: var(--text-faint); }
.need-sec-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 5px; }
.tech-sec { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: radial-gradient(120% 100% at 0% 0%, rgba(163,113,247,0.07), transparent 55%), var(--card); }
.tech-sec-h { padding: 7px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--purple); background: rgba(163,113,247,0.08); border-bottom: 1px solid var(--border); }
.tech-sec-body { padding: 10px 12px; }

/* Compact edit-form labels + textareas (create modal + Edit details) */
.ed-l { display: block; font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
.ed-ta { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-family: inherit; resize: vertical; }

/* ============================================================
   Charts
   ============================================================ */
.chart-container { position: relative; height: 300px; }
.stacked-bar { display: flex; height: 24px; border-radius: 6px; overflow: hidden; }
.stacked-bar > div { height: 100%; transition: width 0.3s; }

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(2px);
    justify-content: center; align-items: center;
}
.modal-content {
    background: var(--card); border: 1px solid var(--border-2);
    border-radius: 12px; width: 100%; max-width: 600px;
    max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow);
}

/* ============================================================
   Markdown (crash analysis / need descriptions)
   ============================================================ */
.crash-analysis-md h1, .crash-analysis-md h2, .crash-analysis-md h3 { color: var(--text-strong); margin-top: 0.75em; margin-bottom: 0.25em; font-weight: 600; }
.crash-analysis-md h2 { font-size: 0.95em; }
.crash-analysis-md h3 { font-size: 0.88em; }
.crash-analysis-md p { margin: 0.4em 0; }
.crash-analysis-md ul, .crash-analysis-md ol { margin: 0.4em 0; padding-left: 1.5em; }
.crash-analysis-md li { margin: 0.15em 0; }
.crash-analysis-md a { color: var(--accent-fg); }
.crash-analysis-md code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.85em; }
.crash-analysis-md pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.6em; overflow-x: auto; margin: 0.5em 0; }
.crash-analysis-md pre code { border: none; padding: 0; background: none; }

/* ============================================================
   Propose-fix button
   ============================================================ */
.propose-fix-btn { background: var(--accent); color: white; border: none; cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.propose-fix-btn:hover { background: var(--accent-hover); }
.propose-fix-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Version pills
   ============================================================ */
.version-pills { display: flex; flex-wrap: wrap; gap: 3px; max-width: 180px; }
.version-pill { display: inline-block; font-size: 0.7rem; font-family: ui-monospace, SFMono-Regular, monospace; padding: 1px 6px; border-radius: 4px; background: var(--card-2); color: var(--text-secondary); white-space: nowrap; }

/* ============================================================
   @mentions
   ============================================================ */
.mention { color: var(--accent-fg); background: var(--accent-soft); border-radius: 4px; padding: 0 3px; font-weight: 500; }

/* @mention autocomplete popup */
.mention-pop {
    position: fixed; z-index: 90; min-width: 230px; max-width: 300px; max-height: 244px; overflow-y: auto;
    background: var(--card); border: 1px solid var(--border-2); border-radius: 10px;
    box-shadow: var(--shadow); padding: 5px; display: none;
}
.mention-pop.open { display: block; }
.mention-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.mention-item.active, .mention-item:hover { background: var(--accent-soft); }
.mention-item .mi-av { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-size: .7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.mention-item .mi-name { font-size: .82rem; color: var(--text); font-weight: 500; }
.mention-item .mi-handle { font-size: .72rem; color: var(--text-secondary); margin-left: auto; }
.mention-empty { padding: 9px 11px; font-size: .78rem; color: var(--text-secondary); }

/* Root Cause Analysis — AI insight card */
.rca {
    border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 22px;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(163,113,247,0.10), transparent 55%),
        var(--card-2);
}
.rca-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--purple); background: rgba(163,113,247,0.08);
}
.rca-head svg { display: block; }
.rca-body { padding: 14px 16px; font-size: .86rem; line-height: 1.65; color: var(--text); }
.rca-foot { padding: 0 16px 13px; }

/* ============================================================
   Legacy comment / activity (kept for any page not on chat yet)
   ============================================================ */
.comment { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--card-2); }
.comment.agent { border-left: 3px solid var(--accent); }
.comment-meta { font-size: 0.72rem; color: var(--text-secondary); }
.comment-author { font-weight: 600; color: var(--text); }
.activity-item { display: flex; gap: 8px; font-size: 0.75rem; color: var(--text-secondary); padding: 3px 0; align-items: baseline; }
.activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); flex-shrink: 0; margin-top: 5px; }
.activity-actor { color: var(--text); font-weight: 500; }

/* ============================================================
   Chat conversation (comments)
   ============================================================ */
.chat { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 10px; }
.chat-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 82%; }
.chat-msg.me { flex-direction: row-reverse; margin-left: auto; }
.chat-av { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--card-2); border: 1px solid var(--border); color: var(--text); font-size: 0.72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.chat-av.agent { background: var(--accent-soft); border-color: transparent; color: var(--accent-fg); }
.chat-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chat-msg.me .chat-body { align-items: flex-end; }
.chat-meta { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: var(--text-secondary); }
.chat-name { color: var(--text); font-weight: 600; }
.chat-tag { font-size: 0.58rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-fg); background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; font-weight: 600; }
.chat-time { color: var(--text-faint); }
.chat-bubble { background: var(--card-2); border: 1px solid var(--border); border-radius: 12px; border-top-left-radius: 4px; padding: 8px 12px; font-size: 0.85rem; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.chat-bubble p { margin: 0 0 .4em; } .chat-bubble p:last-child { margin: 0; }
/* Markdown rendered inside chat bubbles (comments) */
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3, .chat-bubble h4 { font-size: 0.92em; font-weight: 600; color: var(--text-strong); margin: 0.6em 0 0.25em; }
.chat-bubble h1:first-child, .chat-bubble h2:first-child, .chat-bubble h3:first-child, .chat-bubble h4:first-child { margin-top: 0; }
.chat-bubble ul, .chat-bubble ol { margin: 0.3em 0; padding-left: 1.4em; }
.chat-bubble li { margin: 0.15em 0; }
.chat-bubble a { color: var(--accent-fg); }
.chat-bubble code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.85em; }
.chat-bubble pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.6em; overflow-x: auto; margin: 0.4em 0; }
.chat-bubble pre code { border: none; padding: 0; background: none; }
.chat-bubble blockquote { border-left: 3px solid var(--border-2); margin: 0.4em 0; padding-left: 0.75em; color: var(--text-secondary); }
.chat-bubble hr { border: none; border-top: 1px solid var(--border); margin: 0.6em 0; }
.chat-bubble table { border-collapse: collapse; margin: 0.4em 0; font-size: 0.95em; }
.chat-bubble th, .chat-bubble td { border: 1px solid var(--border); padding: 3px 8px; }
.chat-msg.me .chat-bubble { background: var(--accent-soft); border-color: rgba(94,106,210,0.3); border-top-left-radius: 12px; border-top-right-radius: 4px; }
.chat-event { align-self: center; display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-secondary); max-width: 100%; text-align: center; }
.ce-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-2); flex: 0 0 5px; }
.ce-actor { color: var(--text); font-weight: 500; }
.chat-empty { font-size: 0.8rem; color: var(--text-secondary); padding: 10px 0; text-align: center; }
.chat-input { display: flex; gap: 10px; align-items: flex-end; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.chat-input textarea { flex: 1; background: var(--input); border-radius: 10px; padding: 9px 12px; font-size: 0.85rem; resize: vertical; min-height: 40px; }

/* ============================================================
   Attachments
   ============================================================ */
.attachment-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.attachment-thumb { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 140px; background: var(--card-2); }
.attachment-thumb img { width: 140px; height: 90px; object-fit: cover; display: block; }
.attachment-thumb .att-cap { font-size: 0.68rem; padding: 4px 6px; color: var(--text-secondary); }
.attachment-log { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.75rem; color: var(--text); text-decoration: none; background: var(--card-2); }
.attachment-log:hover { border-color: var(--accent); }
.yt-embed { position: relative; width: 100%; max-width: 480px; aspect-ratio: 16/9; }
.yt-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* Thumbnail of a screenshot pasted into the Create Bug form (⌘V / Ctrl+V). */
.paste-preview:empty { display: none; }
.paste-preview { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-2); }
.paste-preview img { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.paste-preview .paste-name { font-size: .7rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.paste-preview button { font-size: .75rem; color: var(--text-secondary); background: none; border: 0; cursor: pointer; }
.paste-preview button:hover { color: var(--red); }

/* Transient status line (window.qbToast). */
.qb-toast { position: fixed; right: 18px; bottom: 18px; z-index: 60; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-size: .78rem; box-shadow: 0 6px 24px rgba(0,0,0,.35); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.qb-toast.show { opacity: 1; transform: translateY(0); }

/* Any video provider: a framed player or a direct <video>, plus a caption
   linking back to the original URL (the embed src is not shareable). */
.video-embed { position: relative; width: 100%; max-width: 480px; }
.video-embed iframe, .video-embed video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 8px; display: block; background: #000; }
.video-embed .att-cap { font-size: .68rem; padding: 4px 2px; color: var(--text-secondary); }
.video-embed .att-cap a { color: var(--text-secondary); text-decoration: none; }
.video-embed .att-cap a:hover { color: var(--accent-fg); }

/* ============================================================
   Code blocks inside chat bubbles

   A fenced snippet in a comment has no natural width limit, and a flex item's
   default min-width:auto lets it push the bubble (and the whole conversation
   column) wider than the page. Pinning the bubble to the column width and
   letting the <pre> scroll on its own keeps long snippets readable in place.
   ============================================================ */
.chat-body { max-width: 100%; }
.chat-bubble { max-width: 100%; }
.chat-bubble pre {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: .55em .7em; margin: .5em 0; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
}
.chat-bubble pre code { white-space: pre; overflow-wrap: normal; word-break: normal; display: block; }
.chat-bubble code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.85em; }
.chat-bubble pre code { border: none; padding: 0; background: none; }
.chat-bubble table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.chat-bubble img { max-width: 100%; height: auto; }
/* Same treatment for prose panes that render markdown (bug/need bodies, RCA). */
.crash-analysis-md pre code { white-space: pre; overflow-wrap: normal; word-break: normal; }
.crash-analysis-md table { display: block; max-width: 100%; overflow-x: auto; }

/* Slim scrollbars so an inline snippet doesn't get a chunky OS bar. */
.chat-bubble pre::-webkit-scrollbar, .crash-analysis-md pre::-webkit-scrollbar { height: 7px; }
.chat-bubble pre::-webkit-scrollbar-thumb, .crash-analysis-md pre::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.chat-bubble pre::-webkit-scrollbar-track, .crash-analysis-md pre::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Build branch badge
   ============================================================ */
.branch-badge {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, monospace; font-size: .68rem; vertical-align: middle;
}

/* ============================================================
   Issue-key references (KLANG-12 / KLANG-N5 / KLANG-P7)
   ============================================================ */
.key-ref {
    color: var(--accent-fg); font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: .95em; text-decoration: none; border-bottom: 1px dotted rgba(94,106,210,0.5);
}
.key-ref:hover { border-bottom-style: solid; }

/* Hover preview popup */
.key-peek {
    position: fixed; z-index: 95; display: none; width: max-content; max-width: 340px;
    background: var(--card); border: 1px solid var(--border-2); border-radius: 10px;
    box-shadow: var(--shadow); padding: 9px 11px;
}
.key-peek.open { display: block; }
.key-peek .kp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.key-peek .kp-key { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72rem; color: var(--accent-fg); }
.key-peek .kp-kind { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.key-peek .kp-title { font-size: .82rem; color: var(--text-strong); font-weight: 500; line-height: 1.35; }
.key-peek .kp-meta { display: flex; gap: 6px; margin-top: 5px; font-size: .68rem; color: var(--text-secondary); }
.key-peek .kp-status, .key-peek .kp-extra { background: var(--card-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.key-peek .kp-note { margin-top: 5px; font-size: .7rem; color: var(--text-faint); line-height: 1.4; overflow-wrap: anywhere; }
.key-peek .kp-miss { font-size: .74rem; color: var(--text-faint); }

/* ============================================================
   Inline edit of a bug/need report body
   ============================================================ */
.bug-edit-form { margin-bottom: 22px; }
.bug-edit-form .bug-section { margin-bottom: 12px; }
.bug-edit-form input[type="text"], .bug-edit-form textarea { width: 100%; }
.edit-toggle { margin-left: auto; flex-shrink: 0; text-decoration: none; align-self: center; }

/* ============================================================
   Rows that are real links (middle-click / cmd-click to open in a new tab)

   List rows used to navigate from a JS onclick only, so middle-click did
   nothing — you could not open several issues into background tabs. Now the
   title is a genuine <a>, and a positioned ::after stretches its hit area over
   the whole title cell (the widest column). The cell is the containing block,
   not the <tr>: position:relative on a table ROW is unreliable across engines,
   on a CELL it is not.
   ============================================================ */
td.cell-link { position: relative; }
a.row-open { color: inherit; text-decoration: none; }
a.row-open:hover { color: var(--accent-fg); }
a.row-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Badges, chips and nested links in the same cell must stay above the hit area
   so they keep their own click behaviour (and their own middle-click target). */
td.cell-link > *:not(.row-open), td.cell-link a:not(.row-open),
td.cell-link button, td.cell-link input, td.cell-link label { position: relative; z-index: 2; }
/* The key column is a real link too — a small, precise middle-click target. */
a.key-open { color: var(--text-secondary); text-decoration: none; font-family: ui-monospace, SFMono-Regular, monospace; }
a.key-open:hover { color: var(--accent-fg); }

/* ============================================================
   Notification bell (legacy header) + notification list
   ============================================================ */
.bell-wrap { position: relative; display: inline-flex; }
.bell-badge { position: absolute; top: -6px; right: -8px; background: var(--red); color: white; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; }
.notif-unread { border-left: 2px solid var(--accent); background: rgba(94,106,210,0.04); }
.notif-read { opacity: 0.65; }

/* ============================================================
   Selected rows / bulk actions / keyboard
   ============================================================ */
tr.row-selected { background: var(--accent-soft) !important; }
tr.row-cursor > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.bulk-bar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius);
    padding: 8px 12px; margin-bottom: 8px; box-shadow: var(--shadow);
}
.kbd { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.7rem; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--text-secondary); background: var(--card-2); }
.copy-key { cursor: pointer; font-family: ui-monospace, SFMono-Regular, monospace; color: var(--text-secondary); }
.copy-key:hover { color: var(--accent-fg); }

/* ============================================================
   Bug / Need detail — two-pane (main + properties sidebar)
   ============================================================ */
.bug-detail-cell { padding: 0 !important; background: var(--bg); }
.bug-detail-cell:hover { background: var(--bg); }
/* Full-page detail: a "back to list" link, Linear-style */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.back-link:hover { color: var(--text); }
.back-link svg { display: block; }
.bug-detail-grid { display: flex; align-items: stretch; }
.bug-main { flex: 1 1 auto; min-width: 0; padding: 24px 28px; }
/* min-width:0 so a long unbreakable title inside can never widen the column
   past its 290px basis (a flex item's default min-width is its content). */
.bug-sidebar { flex: 0 0 290px; min-width: 0; border-left: 1px solid var(--border); padding: 20px; background: rgba(255,255,255,0.012); }
@media (max-width: 980px) {
    .bug-detail-grid { flex-direction: column; }
    .bug-sidebar { flex-basis: auto; border-left: 0; border-top: 1px solid var(--border); }
}

.bug-title-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.bug-key { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72rem; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; }
.bug-key:hover { color: var(--accent-fg); }
.bug-title-text { font-size: 1.2rem; font-weight: 600; color: var(--text-strong); line-height: 1.3; }

.bug-section { margin-bottom: 22px; }
.bug-section-h { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; }
.bug-prose { font-size: .86rem; line-height: 1.65; color: var(--text); }
.bug-collapse { margin-bottom: 22px; }
.bug-collapse > summary { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); cursor: pointer; font-weight: 600; list-style: none; }
.bug-collapse > summary::-webkit-details-marker { display: none; }
.bug-collapse > summary::before { content: "▸ "; }
.bug-collapse[open] > summary::before { content: "▾ "; }

/* unified feed (legacy, still used as fallback) */
.feed { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.avatar { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--card-2); color: var(--text); font-size: .7rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.avatar.agent { background: var(--accent); color: #fff; }
.feed-comment { display: flex; gap: 10px; }
.feed-bubble { flex: 1; min-width: 0; }
.feed-bubble .fb-head { font-size: .75rem; color: var(--text-secondary); margin-bottom: 3px; }
.feed-bubble .fb-author { color: var(--text); font-weight: 600; }
.feed-bubble .fb-body { font-size: .85rem; line-height: 1.55; color: var(--text); }
.feed-event { display: flex; align-items: center; gap: 0; font-size: .75rem; color: var(--text-secondary); }
.feed-event .fe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); flex: 0 0 6px; margin: 0 13px 0 9px; }
.feed-event .fe-actor { color: var(--text); font-weight: 500; }

/* composer (legacy) */
.composer { display: flex; gap: 10px; align-items: flex-start; }
.composer textarea { flex: 1; border-radius: 8px; padding: 8px 10px; font-size: .85rem; resize: vertical; }

/* sidebar properties */
.sb-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.sb-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sb-h { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 9px; font-weight: 600; }
.prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.prop:last-child { margin-bottom: 0; }
.prop-label { font-size: .78rem; color: var(--text-secondary); }
.prop-select { font-size: .78rem; padding: 3px 6px; border: 1px solid transparent; background: transparent; color: var(--text); border-radius: 6px; cursor: pointer; max-width: 170px; text-align: right; }
.prop-select:hover { border-color: var(--border); background: var(--input); }
.prop-select:focus { outline: none; border-color: var(--accent); box-shadow: none; }
.sb-link { display: flex; align-items: center; gap: 6px; font-size: .78rem; margin-bottom: 6px; }
/* Titles in the sidebar stay on ONE line and ellipsize. Tailwind's .truncate
   alone does not shrink inside a flex row — min-width:0 is what allows it. */
.sb-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--text-secondary); }
/* Overflow backlinks live behind this, so 40 of them can't run the sidebar tall. */
.sb-more > summary { cursor: pointer; font-size: .7rem; color: var(--text-secondary); list-style: none; padding: 2px 0; }
.sb-more > summary:hover { color: var(--accent-fg); }
.sb-more > summary::before { content: '▸ '; }
.sb-more[open] > summary::before { content: '▾ '; }
.sb-note { resize: vertical; min-height: 54px; max-height: 220px; line-height: 1.45; }
.sb-add { display: flex; gap: 5px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.sb-add input, .sb-add select { font-size: .72rem; padding: 3px 5px; }
.sb-meta { font-size: .72rem; color: var(--text-secondary); line-height: 1.8; }
.btn-mini { font-size: .72rem; padding: 4px 9px; border-radius: 6px; background: var(--card-2); color: var(--text); cursor: pointer; border: 1px solid var(--border); }
.btn-mini:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.watch-btn { width: 100%; text-align: center; padding: 7px; border-radius: 6px; background: var(--input); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: .78rem; }
.watch-btn:hover { border-color: var(--accent); }
.watch-btn.watching { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg); }

/* ============================================================
   Crash filter bar / view toggle / day groups
   ============================================================ */
.crash-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.crash-filter-bar label { font-size: 0.75rem; color: var(--text-secondary); }
.crash-filter-bar select, .crash-filter-bar input[type="text"], .crash-filter-bar input[type="date"] { font-size: 0.75rem; padding: 4px 8px; }

.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; background: var(--card-2); }
.view-toggle a { font-size: 0.75rem; padding: 5px 12px; color: var(--text-secondary); text-decoration: none; transition: all 0.12s; }
.view-toggle a:hover { color: var(--text); }
.view-toggle a.active { color: white; background: var(--accent); }

.day-group-header { background: var(--card-2); cursor: pointer; }
.day-group-header:hover { background: rgba(255,255,255,0.04); }
.day-group-header td { border-bottom: 1px solid var(--border); }
.day-group-date { font-weight: 600; font-size: 0.9rem; color: var(--text-strong); }
.day-group-stats { font-size: 0.75rem; color: var(--text-secondary); }

/* Stat tiles helper (numbers row) */
.stat-grid { display: grid; gap: 12px; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); }
.stat-value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; color: var(--text-strong); }

/* Sortable table headers (sortableTh in lib/qa.php) */
.th-sort a { color: inherit; text-decoration: none; }
.th-sort a:hover { color: var(--text); }
.th-sort-on a { color: var(--accent-fg); }
.th-arrow { font-size: 9px; }

/* ============================================================
   Products (Main App / OTAI Plugin)

   A bug or Need can belong to more than one product, so the picker is a
   checkbox stack rather than a <select>, and list rows can show two badges —
   both must stay narrow enough not to widen the table.
   ============================================================ */
.product-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .68rem; font-weight: 500; line-height: 1.5;
    padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border-2); background: var(--card-2); color: var(--text-secondary);
    white-space: nowrap;
}
.product-badge + .product-badge { margin-left: 3px; }

/* Sidebar multi-select. Stacked, left-aligned — unlike .prop's label/value row,
   because the options themselves are the content here. */
.prop-checks { display: flex; flex-direction: column; gap: 3px; }
.prop-check {
    display: flex; align-items: center; gap: 6px;
    font-size: .78rem; color: var(--text); cursor: pointer;
    padding: 2px 4px; border-radius: 5px;
}
.prop-check:hover { background: var(--input); }
.prop-check input { margin: 0; }

/* Groups the product tick-boxes in a list header so they read as one control
   next to the status boxes instead of merging into them. */
.filter-group {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--card-2);
}
/* Divider between the status action and the product action in the bulk bar. */
.bulk-sep { width: 1px; align-self: stretch; background: var(--border-2); margin: 0 2px; }

/* ============================================================
   Readable tables & dashboard layout (integrated from the QA lead's
   "Klang Quality Board - readable tables" userscript v1.1.0).
   The kqb-* classes are set statically in the page markup (bugs/needs/
   crashes/tests) and body.kqb-list-page is kept in sync across soft-nav
   swaps in footer.php. The !important stays because these rules must win
   over Tailwind's runtime-generated utilities and a few inline styles
   (e.g. the chart-container inline height).
   ============================================================ */

/* Shared layout. Keep the board inside the viewport and let its content
   columns shrink without allowing long ticket text to widen the page. */
body.kqb-board {
    min-width: 0 !important;
}

body.kqb-board {
    overflow-x: hidden !important;
}

body.kqb-board .app,
body.kqb-board .main-wrap,
body.kqb-board .page-scroll {
    min-width: 0 !important;
}

body.kqb-board .main-wrap {
    flex: 1 1 auto !important;
}

body.kqb-board.kqb-list-page .page-scroll > main.max-w-7xl {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body.kqb-board .page-scroll > main.max-w-7xl {
    box-sizing: border-box !important;
}

body.kqb-board .kqb-list-card,
body.kqb-board .kqb-summary-grid > .card,
body.kqb-board .kqb-chart-grid > .card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Summary metrics. auto-fit keeps six bug metrics and four need metrics
   aligned at desktop widths, then reduces the number of columns cleanly. */
body.kqb-board .kqb-summary-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    align-items: stretch !important;
    gap: 16px !important;
}

body.kqb-board .kqb-summary-grid > .card {
    min-width: 0 !important;
    width: auto !important;
    min-height: 84px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: var(--surface, var(--bg-card, #17191f)) !important;
    border: 1px solid var(--border, #2b2e38) !important;
    border-radius: 10px !important;
}

body.kqb-board .kqb-summary-grid .stat-label,
body.kqb-board .kqb-summary-grid .text-xs.uppercase {
    display: block !important;
    color: var(--text-secondary, #a9b1c2) !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
}

body.kqb-board .kqb-summary-grid .stat-value,
body.kqb-board .kqb-summary-grid .text-2xl {
    display: block !important;
    color: var(--text-strong, #f4f7fb) !important;
    margin-top: 6px !important;
    font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

body.kqb-board .kqb-summary-grid .stat-value[style*="--accent-fg"],
body.kqb-board .kqb-summary-grid .text-2xl[style*="--accent-fg"] {
    color: var(--accent-fg, #8b9cff) !important;
}

body.kqb-board .kqb-summary-grid .stat-value[style*="--red"],
body.kqb-board .kqb-summary-grid .text-2xl[style*="--red"] {
    color: var(--red, #f0616d) !important;
}

body.kqb-board .kqb-summary-grid .stat-value[style*="--green"],
body.kqb-board .kqb-summary-grid .text-2xl[style*="--green"] {
    color: var(--green, #3fb950) !important;
}

body.kqb-board .kqb-summary-grid .stat-value[style*="--yellow"],
body.kqb-board .kqb-summary-grid .text-2xl[style*="--yellow"] {
    color: var(--yellow, #d9a23b) !important;
}
/* Chart row. Equal-height cards and fixed chart slots stop ApexCharts from
   making the three visualizations appear on different baselines. */
body.kqb-board .kqb-chart-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 16px !important;
}

body.kqb-board .kqb-chart-grid > .card {
    min-width: 0 !important;
    width: auto !important;
    min-height: 284px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--surface, var(--bg-card, #17191f)) !important;
    border: 1px solid var(--border, #2b2e38) !important;
    border-radius: 10px !important;
}

body.kqb-board .kqb-chart-grid > .card > h2 {
    flex: 0 0 auto !important;
    min-height: 2.5rem !important;
    margin: 0 0 12px !important;
    color: var(--text-secondary, #a9b1c2) !important;
    line-height: 1.25 !important;
}

body.kqb-board .kqb-chart-grid .chart-container {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    flex: 0 0 220px !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.kqb-board .kqb-chart-grid .chart-container > div,
body.kqb-board .kqb-chart-grid .apexcharts-canvas,
body.kqb-board .kqb-chart-grid .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
}

body.kqb-board .kqb-chart-grid .chart-container > div {
    height: 100% !important;
    min-width: 0 !important;
}

body.kqb-board .kqb-chart-grid .apexcharts-canvas {
    margin: 0 auto !important;
}

body.kqb-board .kqb-chart-grid .apexcharts-svg {
    height: 100% !important;
}

/* List toolbar. The filters may wrap below the title/search controls rather
   than compressing every control onto one line. */
body.kqb-board .kqb-list-toolbar {
    align-items: flex-start !important;
    gap: 12px !important;
}

body.kqb-board .kqb-list-toolbar > :last-child {
    flex: 1 1 640px !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

body.kqb-board .kqb-list-toolbar .filter-group,
body.kqb-board .kqb-list-toolbar > :last-child > .flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
}

body.kqb-board .kqb-list-toolbar input[type="search"] {
    flex: 1 1 220px !important;
    width: min(240px, 100%) !important;
    max-width: 240px !important;
    min-width: 160px !important;
}

/* List tables. Fill the content area, wrap titles, and retain a readable
   minimum width on smaller screens via the card's horizontal scroll. */
body.kqb-board .kqb-list-card {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

body.kqb-board table.kqb-list-table {
    width: 100% !important;
    min-width: 1080px !important;
    max-width: none !important;
    table-layout: fixed !important;
}

body.kqb-board table.kqb-list-table th,
body.kqb-board table.kqb-list-table td {
    box-sizing: border-box !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    vertical-align: top !important;
}

body.kqb-board table.kqb-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

body.kqb-board table.kqb-list-table td.cell-link > a.row-open {
    display: inline !important;
    line-height: 1.35 !important;
}

body.kqb-board table.kqb-list-table td:nth-child(1),
body.kqb-board table.kqb-list-table td:nth-child(2),
body.kqb-board table.kqb-list-table td:nth-child(8),
body.kqb-board table.kqb-list-table td:nth-child(9) {
    font-variant-numeric: tabular-nums;
}

/* Bugs: checkbox, ID, title, product, severity, status, activity, submitted,
   last activity. */
body.kqb-board table.kqb-bug-list th:nth-child(1),
body.kqb-board table.kqb-bug-list td:nth-child(1) { width: 3%; }
body.kqb-board table.kqb-bug-list th:nth-child(2),
body.kqb-board table.kqb-bug-list td:nth-child(2) { width: 9%; }
body.kqb-board table.kqb-bug-list th:nth-child(3),
body.kqb-board table.kqb-bug-list td:nth-child(3) { width: 36%; }
body.kqb-board table.kqb-bug-list th:nth-child(4),
body.kqb-board table.kqb-bug-list td:nth-child(4) { width: 13%; }
body.kqb-board table.kqb-bug-list th:nth-child(5),
body.kqb-board table.kqb-bug-list td:nth-child(5) { width: 8%; }
body.kqb-board table.kqb-bug-list th:nth-child(6),
body.kqb-board table.kqb-bug-list td:nth-child(6) { width: 10%; }
body.kqb-board table.kqb-bug-list th:nth-child(7),
body.kqb-board table.kqb-bug-list td:nth-child(7) { width: 7%; }
body.kqb-board table.kqb-bug-list th:nth-child(8),
body.kqb-board table.kqb-bug-list td:nth-child(8) { width: 7%; }
body.kqb-board table.kqb-bug-list th:nth-child(9),
body.kqb-board table.kqb-bug-list td:nth-child(9) { width: 7%; }

/* Needs: checkbox, ID, re-test title, product, area, priority, status,
   assignee, commit, added, last activity. */
body.kqb-board table.kqb-need-list th:nth-child(1),
body.kqb-board table.kqb-need-list td:nth-child(1) { width: 3%; }
body.kqb-board table.kqb-need-list th:nth-child(2),
body.kqb-board table.kqb-need-list td:nth-child(2) { width: 8%; }
body.kqb-board table.kqb-need-list th:nth-child(3),
body.kqb-board table.kqb-need-list td:nth-child(3) { width: 28%; }
body.kqb-board table.kqb-need-list th:nth-child(4),
body.kqb-board table.kqb-need-list td:nth-child(4) { width: 11%; }
body.kqb-board table.kqb-need-list th:nth-child(5),
body.kqb-board table.kqb-need-list td:nth-child(5) { width: 9%; }
body.kqb-board table.kqb-need-list th:nth-child(6),
body.kqb-board table.kqb-need-list td:nth-child(6) { width: 7%; }
body.kqb-board table.kqb-need-list th:nth-child(7),
body.kqb-board table.kqb-need-list td:nth-child(7) { width: 8%; }
body.kqb-board table.kqb-need-list th:nth-child(8),
body.kqb-board table.kqb-need-list td:nth-child(8) { width: 8%; }
body.kqb-board table.kqb-need-list th:nth-child(9),
body.kqb-board table.kqb-need-list td:nth-child(9) { width: 7%; }
body.kqb-board table.kqb-need-list th:nth-child(10),
body.kqb-board table.kqb-need-list td:nth-child(10) { width: 5.5%; }
body.kqb-board table.kqb-need-list th:nth-child(11),
body.kqb-board table.kqb-need-list td:nth-child(11) { width: 5.5%; }

/* Ticket/detail pages. */
body.kqb-board .bug-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
}

body.kqb-board .bug-main,
body.kqb-board .bug-sidebar,
body.kqb-board .bug-title-row {
    min-width: 0 !important;
}

body.kqb-board .bug-title-row {
    align-items: flex-start !important;
    gap: 8px !important;
}

body.kqb-board .bug-title-text,
body.kqb-board .bug-prose,
body.kqb-board .rca-body,
body.kqb-board .chat {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.kqb-board .bug-title-text {
    line-height: 1.25 !important;
}

@media (max-width: 1100px) {
    body.kqb-board .kqb-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    body.kqb-board .bug-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.kqb-board .kqb-chart-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.kqb-board .kqb-list-toolbar > :last-child {
        justify-content: flex-start !important;
    }
}