/* BugFlow — modern Bootstrap UI theme */
:root {
    --bf-primary: #6366f1;
    --bf-primary-dark: #4f46e5;
    --bf-sidebar-bg: #0f172a;
    --bf-sidebar-bg-2: #111c34;
    --bf-sidebar-muted: #94a3b8;
    --bf-body-bg: #f1f5f9;
    --bf-card-radius: 14px;
    --bf-sidebar-w: 256px;
}

* { scrollbar-width: thin; scrollbar-color: #c7cdd6 transparent; }
/* Compact theme: shrink the root rem so Bootstrap's rem-based spacing/typography
   scales down across the whole portal. */
html { font-size: 14px; }
body {
    background: var(--bf-body-bg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
}

/* Buttons / accents */
.btn-primary { background: var(--bf-primary); border-color: var(--bf-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--bf-primary-dark); border-color: var(--bf-primary-dark); }
.btn-outline-primary { color: var(--bf-primary-dark); border-color: var(--bf-primary); }
.btn-outline-primary:hover { background: var(--bf-primary); border-color: var(--bf-primary); }
a { color: var(--bf-primary-dark); text-decoration: none; }
a:hover { color: var(--bf-primary); }
.text-primary { color: var(--bf-primary-dark) !important; }
.bg-primary { background-color: var(--bf-primary) !important; }
.form-control:focus, .form-select:focus { border-color: var(--bf-primary); box-shadow: 0 0 0 .2rem rgba(99,102,241,.18); }
.page-link { color: var(--bf-primary-dark); }
.active > .page-link, .page-link.active { background: var(--bf-primary); border-color: var(--bf-primary); }

/* Layout — top navigation */
.bf-wrapper { display: flex; flex-direction: column; min-height: 100vh; }

/* Top navigation bar */
.bf-topnav {
    background: linear-gradient(90deg, var(--bf-sidebar-bg), var(--bf-sidebar-bg-2));
    color:#e2e8f0; position:sticky; top:0; z-index:1040;
    box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.bf-topnav-inner { display:flex; align-items:center; gap:1rem; padding:0 1.5rem; height:64px; }
.bf-brand { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.25rem; color:#fff; white-space:nowrap; }
.bf-brand:hover { color:#fff; }
.bf-brand .bi { color: var(--bf-primary); font-size:1.6rem; }

.bf-nav-toggle { background:transparent; border:0; color:#e2e8f0; font-size:1.5rem; line-height:1; padding:.2rem .4rem; margin-left:auto; }

/* Main menu */
.bf-mainnav { display:flex; }
.bf-menu { list-style:none; display:flex; align-items:center; gap:.25rem; margin:0; padding:0; }
.bf-menu .dropdown { position:static; }
.bf-menu-link {
    display:flex; align-items:center; gap:.5rem; color:#cbd5e1; padding:.55rem .85rem;
    border-radius:9px; font-size:.92rem; font-weight:500; white-space:nowrap;
    transition: background .15s, color .15s; cursor:pointer;
}
.bf-menu-link .bi { font-size:1.05rem; }
.bf-menu-link.dropdown-toggle::after { margin-left:.15rem; opacity:.7; }
.bf-menu-link:hover { background: rgba(255,255,255,.08); color:#fff; }
.bf-menu-link.active { background: var(--bf-primary); color:#fff; box-shadow: 0 6px 14px -6px rgba(99,102,241,.8); }
.bf-menu-link.show { background: rgba(255,255,255,.12); color:#fff; }

/* Mega menu panel */
.bf-mega {
    border:none; border-radius:14px; padding:1rem; margin-top:.5rem;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,.35); min-width:520px;
}
.bf-mega-head { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; font-weight:700; padding:.1rem .5rem .6rem; }
.bf-mega-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.4rem; }
.bf-mega-item { display:flex; align-items:center; gap:.75rem; padding:.6rem .65rem; border-radius:11px; color:#1e293b; transition: background .15s; }
.bf-mega-item:hover { background:#f1f5f9; color:#1e293b; }
.bf-mega-item.active { background:#eef2ff; }
.bf-mega-ico { flex:0 0 auto; width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem; }
.bf-mega-text { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.bf-mega-title { font-weight:600; font-size:.92rem; }
.bf-mega-desc { font-size:.76rem; color:#64748b; }

/* Right-side actions */
.bf-topnav-actions { display:flex; align-items:center; gap:1rem; margin-left:auto; }
.bf-topnav-actions .bf-search { max-width:280px; }
.bf-topnav-actions .bf-search .form-control { background: rgba(255,255,255,.1); border:none; border-radius:9px; color:#fff; }
.bf-topnav-actions .bf-search .form-control::placeholder { color:#94a3b8; }
.bf-topnav-actions .bf-search .input-group-text .bi { color:#94a3b8; }
.bf-topnav-actions > a.text-secondary { color:#cbd5e1 !important; }
.bf-topnav-actions > a.text-secondary:hover { color:#fff !important; }
.bf-topnav-actions .dropdown-toggle.text-dark { color:#e2e8f0 !important; }
.bf-topnav-actions .dropdown-toggle .fw-semibold { color:#fff; }
.bf-topnav-actions .dropdown-toggle .text-muted { color:#94a3b8 !important; }

.bf-main { flex:1; display:flex; flex-direction:column; min-width:0; }
.bf-content { padding: 1.5rem; flex:1; }

/* Cards */
.card { border:none; border-radius: var(--bf-card-radius); box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); }
.card-header { background:#fff; border-bottom:1px solid #eef1f5; font-weight:600; border-radius: var(--bf-card-radius) var(--bf-card-radius) 0 0 !important; padding: 1rem 1.25rem; }
.stat-card { border-radius: var(--bf-card-radius); padding:1.25rem; color:#fff; position:relative; overflow:hidden; }
.stat-card .stat-icon { position:absolute; right:1rem; top:1rem; font-size:2.4rem; opacity:.25; }
.stat-card .stat-value { font-size:2rem; font-weight:700; line-height:1; }
.stat-card .stat-label { opacity:.85; font-size:.85rem; }
.bg-grad-indigo { background:linear-gradient(135deg,#6366f1,#4f46e5); }
.bg-grad-rose   { background:linear-gradient(135deg,#fb7185,#e11d48); }
.bg-grad-emerald{ background:linear-gradient(135deg,#34d399,#059669); }
.bg-grad-amber  { background:linear-gradient(135deg,#fbbf24,#d97706); }
.bg-grad-sky    { background:linear-gradient(135deg,#38bdf8,#0284c7); }
.bg-grad-slate  { background:linear-gradient(135deg,#64748b,#334155); }

/* Projects grid */
.project-card { overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -16px rgba(15,23,42,.28); }
.project-card .pc-accent { height:6px; width:100%; }
.project-card .pc-icon { width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:inline-flex; align-items:center;
    justify-content:center; font-weight:700; color:#fff; font-size:1.05rem; text-transform:uppercase; }
.project-card .pc-title { font-weight:700; font-size:1.05rem; color:#0f172a; line-height:1.3; }
.project-card .pc-title:hover { color: var(--bf-primary); }
.project-card .pc-meta { font-size:.82rem; color:#64748b; line-height:1.4; }
.pc-chip { display:inline-flex; align-items:center; gap:.35rem; background:#f1f5f9; color:#475569;
    border-radius:999px; padding:.25rem .65rem; font-size:.76rem; font-weight:600; }
.pc-chip .bi { font-size:.85rem; opacity:.85; }
.avatar-stack { display:inline-flex; }
.avatar-stack .avatar { border:2px solid #fff; margin-left:-9px; box-shadow:0 1px 2px rgba(15,23,42,.12); }
.avatar-stack .avatar:first-child { margin-left:0; }
.avatar-stack .avatar-more { background:#e2e8f0; color:#475569; }

/* Status pills (project) */
.st-pill.st-active    { background:#dcfce7; color:#15803d; }
.st-pill.st-on_hold   { background:#fef9c3; color:#a16207; }
.st-pill.st-completed { background:#e0e7ff; color:#4338ca; }
.st-pill.st-archived  { background:#f1f5f9; color:#64748b; }

/* Segmented control */
.seg-control { display:inline-flex; background:#f1f5f9; border-radius:999px; padding:.25rem; gap:.15rem; flex-wrap:wrap; }
.seg-item { padding:.35rem .85rem; border-radius:999px; font-size:.82rem; font-weight:600; color:#64748b; white-space:nowrap; transition: all .15s ease; }
.seg-item:hover { color:var(--bf-primary); }
.seg-item.active { background:#fff; color:var(--bf-primary-dark); box-shadow:0 1px 3px rgba(15,23,42,.12); }

/* Tables */
.table { vertical-align: middle; }
.table > :not(caption) > * > * { padding: .55rem .8rem; }
.table thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:600; border-bottom:1px solid #e2e8f0; background:#f8fafc; }
.table-hover tbody tr:hover { background:#f8fafc; }

/* Clickable table rows — the whole row is a real link via a stretched anchor in one cell,
   so right-click / Ctrl+Cmd-click / middle-click all get native browser behaviour. */
tr.row-link { position: relative; cursor: pointer; }
tr.row-link .ref-link { color: var(--bf-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
tr.row-link:hover .ref-link { text-decoration: underline; }
/* keep genuine in-cell controls clickable above the stretched link */
tr.row-link a:not(.stretched-link),
tr.row-link button, tr.row-link input,
tr.row-link select, tr.row-link label { position: relative; z-index: 2; }

/* Detailed bug report — grouped by testing category */
.bug-report-table td { border-color:#f1f5f9; }
.bug-report-table .cat-group-row td {
    background:#fff; padding:.6rem .8rem;
    border-top:0; border-bottom:0;
}
.bug-report-table .cat-group-row:hover td { background:#fff; }
.cat-band {
    position:relative;
    display:flex; align-items:center; gap:.7rem;
    padding:.6rem .85rem .6rem .7rem;
    border:1px solid color-mix(in srgb, var(--cat-color) 35%, #fff);
    border-left:3px solid var(--cat-color);
    border-radius:.65rem;
    background:color-mix(in srgb, var(--cat-color) 6%, #fff);
    transition:box-shadow .12s ease, border-color .12s ease;
}
.cat-band-link { position:absolute; inset:0; z-index:1; }
.bug-report-table .cat-group-row:hover .cat-band {
    box-shadow:0 1px 6px color-mix(in srgb, var(--cat-color) 22%, transparent);
    border-color:color-mix(in srgb, var(--cat-color) 55%, #fff);
    border-left-color:var(--cat-color);
}
.cat-icon {
    flex:0 0 auto;
    display:inline-flex; align-items:center; justify-content:center;
    width:2.1rem; height:2.1rem; border-radius:.55rem;
    background:var(--cat-color); color:#fff;
    box-shadow:0 1px 3px color-mix(in srgb, var(--cat-color) 35%, transparent);
}
.cat-icon .bi { font-size:1.05rem; line-height:1; }
.cat-name { font-weight:700; font-size:1rem; color:#0f172a; }
.cat-count {
    margin-left:auto;
    font-size:.8rem; font-weight:700;
    color:var(--cat-color);
    background:color-mix(in srgb, var(--cat-color) 12%, #fff);
    border-radius:999px; padding:.1rem .65rem; min-width:1.6rem; text-align:center;
}
.cat-band--muted .cat-name { color:#475569; }
.bug-report-table .bug-row td { font-size:.86rem; }
.bug-report-table .muted-cell { color:#94a3b8; }

/* Row hover actions (copy / delete) */
.bug-report-table .bug-actions-cell { width:1%; white-space:nowrap; }
.bug-report-table .bug-actions { display:inline-flex; gap:.15rem; opacity:0; transition:opacity .12s ease; }
.bug-report-table .bug-row:hover .bug-actions,
.bug-report-table .bug-actions:focus-within { opacity:1; }
.bug-report-table .btn-icon {
    border:0; background:transparent; color:#334155;
    padding:.2rem .4rem; line-height:1; border-radius:6px; font-size:.95rem; }
.bug-report-table .btn-icon:hover { background:#eef2f7; color:var(--bf-primary); }
.bug-report-table .btn-icon.btn-icon-danger:hover { background:#fee2e2; color:#b91c1c; }
@media (hover:none) { .bug-report-table .bug-actions { opacity:1; } }

/* Badges for severity / priority / status */
.badge { font-weight:600; padding:.4em .7em; border-radius:7px; font-size:.72rem; }
.sev-critical{ background:#fee2e2; color:#b91c1c; } .sev-high{ background:#ffedd5; color:#c2410c; }
.sev-medium{ background:#fef9c3; color:#a16207; } .sev-low{ background:#dcfce7; color:#15803d; }
.pri-urgent{ background:#fee2e2; color:#b91c1c; } .pri-high{ background:#ffedd5; color:#c2410c; }
.pri-medium{ background:#e0e7ff; color:#4338ca; } .pri-low{ background:#f1f5f9; color:#475569; }
.st-pill { background:#eef2ff; color:#4338ca; }
.st-new,.st-open{ background:#e0e7ff; color:#4338ca; }
.st-assigned,.st-in-progress{ background:#fef3c7; color:#b45309; }
.st-ready-for-qa,.st-retest{ background:#cffafe; color:#0e7490; }
.st-passed,.st-closed{ background:#dcfce7; color:#15803d; }
.st-reopened,.st-blocked,.st-rejected{ background:#fee2e2; color:#b91c1c; }
.st-duplicate{ background:#f1f5f9; color:#475569; }
.res-pass{ background:#dcfce7; color:#15803d; } .res-fail{ background:#fee2e2; color:#b91c1c; } .res-na{ background:#f1f5f9; color:#475569; }

.avatar { width:34px; height:34px; border-radius:50%; background:var(--bf-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:600; }
.avatar-sm { width:26px; height:26px; font-size:.68rem; }
.timeline { position:relative; padding-left:1.6rem; }
.timeline::before { content:''; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:#e2e8f0; }
.timeline-item { position:relative; padding-bottom:1.1rem; }
.timeline-item::before { content:''; position:absolute; left:-1.6rem; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--bf-primary); }

.page-title { font-weight:700; font-size:1.5rem; margin:0; }
.breadcrumb { margin:0; font-size:.85rem; }
.empty-state { text-align:center; padding:3rem 1rem; color:#94a3b8; }
.empty-state .bi { font-size:3rem; opacity:.4; }

/* Tablet: tighten the menu and hide the inline search to make room */
@media (max-width: 1199.98px) {
    .bf-topnav-actions .bf-search { display:none; }
}

@media (max-width: 991.98px) {
    .bf-nav-toggle { order:-1; margin-left:0; margin-right:.25rem; }
    .bf-mainnav {
        position:fixed; top:0; left:0; bottom:0; width:280px; z-index:1041;
        background: linear-gradient(180deg, var(--bf-sidebar-bg), var(--bf-sidebar-bg-2));
        padding:1rem; overflow-y:auto; transform: translateX(-100%); transition: transform .25s ease;
    }
    .bf-mainnav.show { transform: translateX(0); }
    .bf-menu { flex-direction:column; align-items:stretch; gap:2px; }
    .bf-menu .dropdown { position:static; }
    /* On mobile, expand mega panels inline rather than as floating dropdowns */
    .bf-mega {
        position:static !important; transform:none !important; display:block; min-width:0;
        box-shadow:none; background:transparent; padding:.25rem 0 .5rem; margin:0;
    }
    .bf-mega-head { display:none; }
    .bf-mega-grid { grid-template-columns:1fr; gap:2px; }
    .bf-mega-item { color:#cbd5e1; padding:.5rem .85rem; }
    .bf-mega-item:hover, .bf-mega-item.active { background: rgba(255,255,255,.08); color:#fff; }
    .bf-mega-ico { width:30px; height:30px; font-size:1rem; border-radius:8px; }
    .bf-mega-desc { display:none; }
    .bf-menu-link { color:#cbd5e1; }
    .bf-menu-link.dropdown-toggle::after { margin-left:auto; }
}
.bf-backdrop { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1040; }
.bf-backdrop.show { display:block; }

/* Details sidebar — labelled rows with dividers, dot/icon adorned selects */
.detail-list .detail-row { display:flex; align-items:center; gap:.5rem; padding:.6rem 0; border-bottom:1px solid #eef1f5; }
.detail-list .detail-row:first-child { padding-top:0; }
.detail-list .detail-row:last-child { border-bottom:0; padding-bottom:0; }
.detail-list .detail-label { flex:0 0 auto; width:84px; margin:0; font-weight:400; color:#64748b; font-size:.875rem; line-height:1.25; }
.detail-list .detail-control { flex:1 1 auto; min-width:0; position:relative; }
.detail-list .detail-ico { font-size:1rem; line-height:1; flex:0 0 auto; }
.detail-list .detail-dot { width:9px; height:9px; border-radius:50%; background:#94a3b8; flex:0 0 auto; }

/* Faux-select: visible wrapping "face" + transparent native select overlaid for interaction */
.detail-list .fsel > select {
    position:absolute; inset:0; width:100%; height:100%;
    margin:0; padding:0; border:0; opacity:0; cursor:pointer; z-index:2;
}
.detail-list .fsel-face {
    display:flex; align-items:center; gap:.5rem;
    min-height:calc(1.5em + .8rem + 2px); padding:.4rem .65rem;
    border:1px solid #ced4da; border-radius:10px; background:#fff; font-weight:600;
}
.detail-list .fsel-face .fsel-text { flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.detail-list .fsel-face .fsel-caret { flex:0 0 auto; color:#64748b; font-size:.85rem; }
.detail-list .fsel-face-static { background:#f1f5f9; }
.detail-list .fsel > select:focus + .fsel-face { border-color:var(--bf-primary); box-shadow:0 0 0 .2rem rgba(99,102,241,.18); }

/* Chip multi-select (Reporter / Assignee) */
.detail-list .ms > details { position:relative; }
.detail-list .ms summary.ms-face { list-style:none; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
    min-height:calc(1.5em + .8rem + 2px); padding:.3rem .55rem; border:1px solid #ced4da; border-radius:10px; background:#fff; cursor:pointer; }
.detail-list .ms summary.ms-face::-webkit-details-marker { display:none; }
.detail-list .ms[data-ms] > details[open] summary.ms-face { border-color:var(--bf-primary); box-shadow:0 0 0 .2rem rgba(99,102,241,.18); }
.detail-list .ms .ms-chips { display:flex; flex-wrap:wrap; gap:.25rem; flex:1 1 auto; min-width:0; align-items:center; }
.detail-list .ms .ms-chip { display:inline-flex; align-items:center; gap:.2rem; background:#e0e7ff; color:#4338ca;
    border-radius:999px; padding:.05rem .2rem .05rem .5rem; font-size:.75rem; font-weight:600; }
.detail-list .ms .ms-chip-x { border:0; background:transparent; color:#4338ca; cursor:pointer; line-height:1; padding:0 .15rem; font-size:.95rem; }
.detail-list .ms .ms-chip-x:hover { color:#1e1b4b; }
.detail-list .ms .fsel-caret { margin-left:auto; color:#64748b; font-size:.85rem; flex:0 0 auto; }
.detail-list .ms .ms-menu { position:absolute; z-index:20; top:calc(100% + 4px); left:0; right:0; max-height:220px; overflow:auto;
    background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 10px 24px -8px rgba(15,23,42,.25); padding:.25rem; }
.detail-list .ms .ms-opt { display:flex; align-items:center; gap:.5rem; padding:.3rem .4rem; border-radius:8px; cursor:pointer; margin:0; font-weight:500; }
.detail-list .ms .ms-opt:hover { background:#f1f5f9; }
.detail-list .ms .ms-opt input { flex:0 0 auto; }

/* Comment reactions */
.reaction-chip, .reaction-opt, .reaction-add {
    border:1px solid #e2e8f0; background:#f8fafc; border-radius:999px;
    padding:.1rem .55rem; font-size:.8rem; line-height:1.4; cursor:pointer; color:#334155;
}
.reaction-chip:hover, .reaction-opt:hover, .reaction-add:hover { background:#eef2ff; border-color:#c7d2fe; }
.reaction-chip.reacted { background:#e0e7ff; border-color:#a5b4fc; color:#4338ca; font-weight:600; }
.reaction-chip .reaction-count { font-weight:600; }
.reaction-picker { position:relative; display:inline-block; }
.reaction-picker > summary { list-style:none; display:inline-flex; align-items:center; }
.reaction-picker > summary::-webkit-details-marker { display:none; }
.reaction-add { display:inline-flex; align-items:center; padding:.1rem .45rem; }
.reaction-palette {
    position:absolute; bottom:calc(100% + 6px); left:0; z-index:10;
    display:flex; gap:.25rem; padding:.35rem; background:#fff;
    border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 8px 20px -8px rgba(15,23,42,.25);
}
.reaction-palette .reaction-opt { font-size:1rem; padding:.15rem .35rem; }

/* Compact density tweaks */
.card-body { padding: 1.1rem; }
.card-body.p-4 { padding: 1.25rem !important; }
.form-control, .form-select { padding: .4rem .65rem; }
.form-label { margin-bottom: .3rem; }
.btn { padding: .4rem .8rem; }
.row.g-3 { --bs-gutter-y: .85rem; }
.row.g-4 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }

/* Detailed Bug Report — filters (reports/project) */
.bug-detail-entry.report-last-visible { border-bottom: 0 !important; }
#bugFilterToggle.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* Detailed Bug Report — left category nav (reports/project) */
.report-cat-section { scroll-margin-top: 90px; }
.report-cat-nav { position: sticky; top: 90px; }
.report-cat-nav-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-bottom: .6rem;
    padding-left: .25rem;
}
.report-cat-nav-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    margin-bottom: .25rem;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.report-cat-nav-item:hover,
.report-cat-nav-item.active {
    background: color-mix(in srgb, var(--cat-color, #6366f1) 10%, #fff);
    border-left-color: var(--cat-color, #6366f1);
    color: #1e293b;
}
.report-cat-nav-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    color: #fff;
    font-size: .8rem;
    background: var(--cat-color, #6366f1);
}
.report-cat-nav-label {
    font-size: .88rem;
    font-weight: 500;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-cat-nav-count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--cat-color, #6366f1);
    background: color-mix(in srgb, var(--cat-color, #6366f1) 16%, #fff);
    border-radius: 999px;
    padding: .05rem .45rem;
}

/* Detailed Bug Report — category group headers (reports/project) */
.report-category-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.1rem;
    padding: .55rem .85rem;
    border: 1px solid color-mix(in srgb, var(--cat-color, #6366f1) 25%, transparent);
    border-left: 4px solid var(--cat-color, #6366f1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--cat-color, #6366f1) 8%, #fff);
}
.report-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    color: #fff;
    font-size: 1rem;
    background: var(--cat-color, #6366f1);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--cat-color, #6366f1) 45%, transparent);
}
.report-category-header.is-link {
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.report-category-header.is-link:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--cat-color, #6366f1) 14%, #fff);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--cat-color, #6366f1) 25%, transparent);
}
.report-category-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.report-category-go {
    color: var(--cat-color, #6366f1);
    font-size: .85rem;
    opacity: 0;
    transition: opacity .15s ease;
}
.report-category-header.is-link:hover .report-category-go { opacity: .8; }
.report-category-count {
    margin-left: auto;
    min-width: 26px;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    color: var(--cat-color, #6366f1);
    background: color-mix(in srgb, var(--cat-color, #6366f1) 16%, #fff);
}

/* Detailed Bug Report — document-style entries (reports/project) */
.bug-detail-entry > a { font-size: 1.05rem; color: #1e293b; }
.bug-detail-entry > a:hover { color: #6366f1; }
.bug-detail-description { color: #334155; line-height: 1.6; }
.bug-detail-description img,
.bug-detail-description video { max-width: 100%; height: auto; border-radius: 6px; border: 4px solid #e2e8f0; }
.bug-detail-description table { max-width: 100%; border-collapse: collapse; }
.bug-detail-description table td,
.bug-detail-description table th { border: 1px solid #e2e8f0; padding: .35rem .5rem; }

/* Pretty confirmation dialog */
.bf-confirm .modal-content { border:0; border-radius:18px; box-shadow:0 24px 60px rgba(15,23,42,.28); overflow:hidden; }
.bf-confirm .modal-body { padding:2rem 1.75rem 1.75rem; }
.bf-confirm .bf-confirm-icon {
    width:64px; height:64px; margin:0 auto 1.1rem; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:1.7rem;
    background:#fee2e2; color:#dc2626; }
.bf-confirm .bf-confirm-icon[data-variant="primary"] { background:#e0e7ff; color:var(--bf-primary-dark); }
.bf-confirm .bf-confirm-icon[data-variant="warning"] { background:#fef3c7; color:#b45309; }
.bf-confirm .bf-confirm-icon[data-variant="success"] { background:#dcfce7; color:#15803d; }
.bf-confirm .bf-confirm-title { font-weight:700; color:#0f172a; margin-bottom:.4rem; }
.bf-confirm .bf-confirm-text { font-size:.92rem; margin-bottom:0; line-height:1.5; }
.bf-confirm .btn { border-radius:10px; font-weight:600; }
.bf-confirm .btn-light { background:#f1f5f9; border-color:#f1f5f9; color:#475569; }
.bf-confirm .btn-light:hover { background:#e2e8f0; }