/*
 * App styles on top of the Sneat (Bootstrap 5) theme.
 * Only what Sneat free doesn't ship: label buttons, workspace dots,
 * the mail client, calendar grid, kanban board and a few helpers.
 */

/* ── Helpers ───────────────────────────────────────────────────────── */
.min-w-0 { min-width: 0 !important; }
.lh-tight { line-height: 1.25 !important; }
.fs-xs { font-size: .75rem !important; }
.dot { display: inline-block; width: .625rem; height: .625rem; border-radius: 50%; flex-shrink: 0; }
.dot-sm { width: .5rem; height: .5rem; }
.text-pre-line { white-space: pre-line; }
.hover-bg:hover { background-color: rgba(var(--bs-primary-rgb), .04); }
a.card-link-hover { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.card-link-hover:hover { transform: translateY(-2px); box-shadow: 0 .375rem 1rem rgba(34, 48, 62, .12); }
.stretched-row { cursor: pointer; }

/* Label buttons (Sneat Pro style) */
.btn-label-primary   { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .16); border-color: transparent; }
.btn-label-primary:hover   { color: #fff; background: var(--bs-primary); }
.btn-label-secondary { color: var(--bs-secondary); background: rgba(var(--bs-secondary-rgb), .16); border-color: transparent; }
.btn-label-secondary:hover { color: #fff; background: var(--bs-secondary); }
.btn-label-danger    { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .16); border-color: transparent; }
.btn-label-danger:hover    { color: #fff; background: var(--bs-danger); }
.btn-label-success   { color: var(--bs-success); background: rgba(var(--bs-success-rgb), .16); border-color: transparent; }
.btn-label-success:hover   { color: #fff; background: var(--bs-success); }
.btn-label-warning   { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .16); border-color: transparent; }
.btn-label-warning:hover   { color: #fff; background: var(--bs-warning); }
.btn-text-secondary  { color: var(--bs-secondary-color); background: transparent; border-color: transparent; }
.btn-text-secondary:hover  { color: var(--bs-heading-color); background: rgba(var(--bs-secondary-rgb), .12); }
.badge-dot { display: inline-block; width: .5rem; height: .5rem; padding: 0; border-radius: 50%; flex-shrink: 0; }

/* Status / priority badges used across modules */
.badge-status-open, .badge-status-confirmed, .badge-status-active { color: var(--bs-info); background: rgba(var(--bs-info-rgb), .16); }
.badge-status-in_progress, .badge-status-review, .badge-status-draft, .badge-status-under_review  { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .16); }
.badge-status-done, .badge-status-fixed, .badge-status-accepted, .badge-status-implemented, .badge-status-pass { color: var(--bs-success); background: rgba(var(--bs-success-rgb), .16); }
.badge-status-blocked, .badge-status-rejected, .badge-status-fail, .badge-status-wont_fix { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .16); }
.badge-status-closed, .badge-status-cancelled, .badge-status-duplicate, .badge-status-deprecated, .badge-status-skipped { color: var(--bs-secondary); background: rgba(var(--bs-secondary-rgb), .16); }
.badge-priority-critical, .badge-severity-blocker, .badge-severity-critical { color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .16); }
.badge-priority-high, .badge-severity-major { color: #ff8b00; background: rgba(255, 139, 0, .16); }
.badge-priority-medium, .badge-severity-minor { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .16); }
.badge-priority-low, .badge-severity-trivial { color: var(--bs-secondary); background: rgba(var(--bs-secondary-rgb), .16); }

/* ── Layout extras ─────────────────────────────────────────────────── */
.app-brand-logo .brand-mark { width: 34px; height: 34px; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center;
                              background: var(--bs-primary); color: #fff; box-shadow: 0 .125rem .375rem rgba(var(--bs-primary-rgb), .4); }
.app-brand-text.app-name { font-size: 1.125rem; letter-spacing: -.2px; text-transform: none; }
.workspace-btn { border: 1px solid var(--bs-border-color); }
.workspace-btn .ws-name { max-width: 11rem; }
@media (max-width: 575.98px) { .workspace-btn .ws-name { max-width: 5.5rem; } }
.navbar-page-title { font-size: 1.0625rem; }

.toast-container { z-index: 1100; }

/* Navigation progress bar */
#nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; pointer-events: none; }
#nav-progress > div { height: 100%; width: 0; background: var(--bs-primary); opacity: 0; }
#nav-progress.loading > div { opacity: 1; animation: nav-progress 8s cubic-bezier(.1,.7,.1,1) forwards; }
#nav-progress.loading.done > div { width: 100% !important; opacity: 0; animation: none; transition: width .2s ease, opacity .3s ease .15s; }
@keyframes nav-progress { from { width: 0; } 10% { width: 45%; } to { width: 92%; } }

/* Permission switches */
.perm-row { cursor: pointer; }
.perm-row.is-dim { opacity: .55; }
.matrix-wrap { max-height: calc(100vh - 17rem); overflow: auto; }
.matrix-wrap thead th { position: sticky; top: 0; z-index: 3; background: var(--bs-paper-bg, #fff); }
.matrix-wrap .sticky-col { position: sticky; left: 0; z-index: 2; background: var(--bs-paper-bg, #fff); }
.matrix-wrap thead .sticky-col { z-index: 4; }
.matrix-wrap tr.module-row > * { background: var(--bs-gray-50, #f7f7f9) !important; }
.matrix-wrap td.changed { background: rgba(var(--bs-warning-rgb), .14) !important; }

/* Sticky form action bar */
.form-actions-sticky { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
                       border-top: 1px solid var(--bs-border-color); margin: 1.5rem -1.5rem 0; padding: .875rem 1.5rem; }

/* ── Calendar ──────────────────────────────────────────────────────── */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head { padding: .5rem; text-align: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--bs-secondary-color); }
.cal-day { min-height: 6.5rem; padding: .375rem; border-top: 1px solid var(--bs-border-color); border-left: 1px solid var(--bs-border-color); cursor: pointer; transition: background .12s; }
.cal-grid > .cal-day:nth-child(7n+1) { border-left: 0; }
.cal-day:hover { background: rgba(var(--bs-primary-rgb), .04); }
.cal-day.is-other { background: var(--bs-gray-25, #fbfbfc); }
.cal-day.is-other .cal-num { opacity: .45; }
.cal-day.is-selected { background: rgba(var(--bs-primary-rgb), .08); }
.cal-num { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .8125rem; }
.cal-day.is-today .cal-num { background: var(--bs-primary); color: #fff; font-weight: 600; }
.cal-chip { display: block; font-size: .6875rem; line-height: 1.2; padding: .125rem .375rem; border-radius: .25rem; margin-top: .125rem;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.cal-dots { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.ev-indigo { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .14); }
.ev-red    { color: var(--bs-danger);  background: rgba(var(--bs-danger-rgb), .14); }
.ev-green  { color: var(--bs-success); background: rgba(var(--bs-success-rgb), .16); }
.ev-yellow { color: #b88400;           background: rgba(var(--bs-warning-rgb), .2); }
.ev-default{ color: var(--bs-secondary); background: rgba(var(--bs-secondary-rgb), .14); }
.evd-indigo { background: var(--bs-primary); } .evd-red { background: var(--bs-danger); } .evd-green { background: var(--bs-success); }
.evd-yellow { background: var(--bs-warning); } .evd-default { background: var(--bs-secondary); }
@media (max-width: 575.98px) {
  .cal-day { min-height: 3.5rem; padding: .25rem; text-align: center; }
  .cal-chip { display: none; }
}
@media (min-width: 576px) { .cal-dots { display: none; } }

/* ── Kanban ────────────────────────────────────────────────────────── */
.kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { flex: 0 0 17rem; background: rgba(var(--bs-secondary-rgb), .08); border-radius: .5rem; padding: .75rem; }
.kanban-col.drag-over { outline: 2px dashed var(--bs-primary); outline-offset: -2px; }
.kanban-card { cursor: grab; }
.kanban-card.dragging { opacity: .5; }

/* ── Mail client ───────────────────────────────────────────────────── */
.mail-app { height: calc(100vh - 11.5rem); min-height: 28rem; }
.mail-list { overflow-y: auto; }
.mail-row { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); color: inherit; text-decoration: none; }
.mail-row:hover { background: rgba(var(--bs-primary-rgb), .04); color: inherit; }
.mail-row.is-unread { background: rgba(var(--bs-primary-rgb), .03); }
.mail-row.is-unread .mail-from, .mail-row.is-unread .mail-subject { font-weight: 600; color: var(--bs-heading-color); }
.mail-row.is-active { background: rgba(var(--bs-primary-rgb), .08); box-shadow: inset 3px 0 0 var(--bs-primary); }
.mail-row.is-unread .mail-date { color: var(--bs-primary); font-weight: 600; }
.mail-row > a { display: flex; gap: .75rem; flex: 1 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.mail-pane { width: 100%; }
/* Only the message list gives up height: a long list used to squash the header and tab row (clipping the active tab) */
.mail-pane > :not(.mail-scroll) { flex-shrink: 0; }
.mail-scroll { min-height: 0; scrollbar-width: thin; scrollbar-color: var(--bs-border-color) transparent; }
/* Selecting emails: the avatar turns into a checkbox on hover, and stays one while anything is selected */
.mail-pick { user-select: none; position: relative; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; cursor: pointer; }
.mail-pick .mail-check { position: absolute; margin: 0; width: 1.15rem; height: 1.15rem; opacity: 0; cursor: pointer; }
.mail-pick .avatar { transition: opacity .12s; }
.mail-row:hover .mail-pick .mail-check, .mail-pane.is-selecting .mail-check, .mail-check:focus-visible { opacity: 1; }
.mail-row:hover .mail-pick .avatar, .mail-pane.is-selecting .mail-pick .avatar, .mail-pick:has(.mail-check:focus-visible) .avatar { opacity: 0; }
.mail-row.is-selected, .mail-row.is-selected:hover { background: rgba(var(--bs-primary-rgb), .1); }
.mail-bulk { background: rgba(var(--bs-primary-rgb), .06); animation: fade-up .15s ease-out; }
.mail-star.is-starred, .mail-star.is-starred:hover { color: var(--bs-warning) !important; }
.mail-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mail-tabs .nav-link { padding: .35rem .6rem; white-space: nowrap; font-size: .875rem; }
.mail-frame { width: 100%; border: 0; display: block; min-height: 8rem; background: #fff; border-radius: .375rem; }
.mail-attachment { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; color: inherit; max-width: 100%; }
.mail-attachment:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
@media (min-width: 992px) {
  .mail-pane { width: 23rem; flex-shrink: 0; }
  .mail-scroll { overflow-y: auto; }
}
.mail-body { overflow-wrap: anywhere; }
.mail-body img { max-width: 100%; height: auto; }
.mail-body table { max-width: 100%; }
.mail-body blockquote { border-left: 3px solid var(--bs-border-color); margin: .5rem 0; padding-left: .75rem; color: var(--bs-secondary-color); }
@media (max-width: 991.98px) { .mail-app { height: auto; } }

@media print {
  .layout-menu, .layout-navbar, .content-footer, .no-print { display: none !important; }
  .layout-page { padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Theme toggle icon + navbar badge */
[data-bs-theme=dark] .theme-icon-light, html:not([data-bs-theme=dark]) .theme-icon-dark { display: none !important; }
.badge-notifications { position: absolute; top: .125rem; right: -.125rem; font-size: .625rem; padding: .25em .45em; line-height: 1; }

/* Popups: page headers/back links aren't needed inside a dialog */
#app-popup .popup-hide { display: none !important; }
#app-popup .modal-body > .row { margin-left: 0; margin-right: 0; }
#app-popup .modal-body .card { box-shadow: none; }
#app-popup .modal-body > form > .card:first-of-type,
#app-popup .modal-body .popup-flat { background: transparent; border: 0; }
#app-popup .modal-body .popup-flat > .card-body { padding: 0; }
#app-popup .modal-body > .row.justify-content-center > [class*="col-"],
#app-popup .modal-dialog:not(.modal-xl) .modal-body > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
/* Pages opened in a popup: their own back buttons and duplicate titles are noise there */
#app-popup .modal-body a[aria-label^="Back"] { display: none !important; }
#app-popup .popup-inline-panel > * { border: 0; }

/* Workspace colour swatches */
.swatch { cursor: pointer; margin: 0; }
.swatch-dot { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
              transition: transform .12s, box-shadow .12s; }
.swatch-dot:hover { transform: scale(1.1); }
.swatch-auto { border: 2px dashed var(--bs-border-color); font-size: .625rem; font-weight: 600; color: var(--bs-secondary-color); --sw: var(--bs-primary); }
.swatch input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--bs-paper-bg), 0 0 0 4px var(--sw); }
.swatch input:focus-visible + .swatch-dot { outline: 2px solid var(--bs-primary); outline-offset: 3px; }

/* ── Motion: smooth page changes, popups and feedback ───────────────── */
/* Full page loads cross-fade (Chrome, Edge, Safari 18+); menu and navbar stay put */
@view-transition { navigation: auto; }
#layout-menu { view-transition-name: app-menu; }
#layout-navbar { view-transition-name: app-navbar; }
::view-transition-old(root) { animation: vt-out .14s ease both; }
::view-transition-new(root) { animation: vt-in .22s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* Content swapped in place */
.page-fade-in { animation: fade-up .28s ease both; }
.popup-fade-in { animation: fade-up .22s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Popup: slide up a little, softer backdrop */
#app-popup.fade .modal-dialog { transform: translateY(24px) scale(.98); transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s; }
#app-popup.show .modal-dialog { transform: none; }
#app-popup .modal-content { overflow: hidden; }
#app-popup .modal-header { border-bottom: 1px solid var(--bs-border-color); padding-bottom: 1rem; }
#app-popup .modal-body { padding-top: 1.25rem; }

/* Loading placeholder */
.popup-skeleton { padding: .25rem 0 1rem; }
.popup-skeleton .sk { height: .85rem; border-radius: .375rem; margin-bottom: .85rem; width: 100%;
  background: linear-gradient(90deg, rgba(var(--bs-secondary-rgb), .12) 25%, rgba(var(--bs-secondary-rgb), .22) 37%, rgba(var(--bs-secondary-rgb), .12) 63%);
  background-size: 400% 100%; animation: shimmer 1.2s ease infinite; }
.popup-skeleton .sk-title { height: 1.4rem; width: 45%; margin-bottom: 1.25rem; }
.popup-skeleton .sk-short { width: 60%; }
.popup-skeleton .sk-block { height: 7rem; margin-top: 1.25rem; }
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* Lists and cards react to the pointer */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover, a.card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(34, 48, 62, .12); }
[data-bs-theme="dark"] .card-hover:hover, [data-bs-theme="dark"] a.card:hover { box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35); }
.table-hover > tbody > tr { transition: background-color .15s ease; }
tr[data-href], .row-link { cursor: pointer; }
.btn { transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease, color .15s ease; }
.btn:active:not(:disabled) { transform: scale(.97); }
.list-group-item-action, .dropdown-item, .menu-link { transition: background-color .15s ease, color .15s ease; }
.toast { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); }
/* Confirm dialog stacked on a popup dims the popup too */
#app-confirm { z-index: 1100; }
.modal-backdrop ~ .modal-backdrop { z-index: 1095; }
/* Live filter forms apply on change, so their submit button is redundant */
form[data-live] [type="submit"] { display: none; }
/* Popup header: keep the X in the row (Sneat floats it) so it sits beside the expand icon */
#app-popup .modal-header { align-items: center; }
#app-popup .modal-header .btn-close { position: static; transform: none; margin: 0; flex-shrink: 0; }
#app-popup .modal-header .btn-close:hover { transform: none; }
/* Vault cards: username / password rows with copy buttons */
.vault-fields { display: grid; gap: .25rem; }
.vault-field { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .125rem .25rem .125rem .625rem; border-radius: .375rem; background: rgba(var(--bs-secondary-rgb), .08); font-size: .8125rem; }
.vault-field > .font-monospace { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tests: result colours, run bars, history, step cards ───────────── */
.tr-pass     { --tr: var(--bs-success);   --tr-rgb: var(--bs-success-rgb); }
.tr-fail     { --tr: var(--bs-danger);    --tr-rgb: var(--bs-danger-rgb); }
.tr-blocked  { --tr: var(--bs-warning);   --tr-rgb: var(--bs-warning-rgb); }
.tr-skipped  { --tr: var(--bs-secondary); --tr-rgb: var(--bs-secondary-rgb); }
.tr-untested { --tr: var(--bs-secondary); --tr-rgb: var(--bs-secondary-rgb); }
.tr-open     { --tr: var(--bs-info);      --tr-rgb: var(--bs-info-rgb); }
.tr-badge { color: var(--tr); background: rgba(var(--tr-rgb), .16); font-weight: 500; }
.tr-text { color: var(--tr); }

.run-bar { display: flex; height: .5rem; border-radius: 1rem; overflow: hidden; background: rgba(var(--bs-secondary-rgb), .16); min-width: 4rem; }
.run-bar > span { background: var(--tr); transition: width .3s ease; }
.run-bar > span + span { margin-left: 2px; }
.run-bar-lg { height: .75rem; }

/* Last runs of a case as little bars, oldest → newest */
.run-history { display: inline-flex; align-items: flex-end; gap: 3px; vertical-align: middle; }
.run-history a { display: block; width: .5rem; height: 1.25rem; border-radius: 2px; background: var(--tr); opacity: .85; transition: transform .15s ease, opacity .15s; }
.run-history a.tr-open { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tr); }
.run-history a:hover, .run-history a:focus-visible { opacity: 1; transform: scaleY(1.2); }

/* Run list rows */
.run-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: center; padding: .875rem 1.25rem; border-bottom: 1px solid var(--bs-border-color); color: inherit; transition: background-color .15s ease; }
.run-row:last-child { border-bottom: 0; }
.run-row:hover { background: rgba(var(--bs-primary-rgb), .04); color: inherit; }
.run-row .run-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--tr); background: rgba(var(--tr-rgb), .16); font-size: 1.25rem; }
.run-row .run-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.run-row .run-side { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; min-width: 7rem; }
@media (max-width: 575.98px) { .run-row { grid-template-columns: auto minmax(0, 1fr); } .run-row .run-side { grid-column: 2; align-items: stretch; } }

/* Stat tiles */
.stat-tile .avatar-initial { font-size: 1.25rem; }

/* Run page: steps */
.step-card { border-left: 3px solid var(--tr, transparent); transition: border-color .2s ease; }
.step-num { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
            font-weight: 600; font-size: .875rem; color: var(--tr); background: rgba(var(--tr-rgb), .16); transition: background-color .2s, color .2s; }
.step-expected { background: rgba(var(--bs-secondary-rgb), .08); border-radius: .375rem; padding: .5rem .75rem; }
.step-actual { background: rgba(var(--tr-rgb), .08); border-radius: .375rem; padding: .5rem .75rem; }
.result-picker { display: flex; flex-wrap: wrap; gap: .375rem; }
.result-picker .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; }
.step-saved { opacity: 0; transition: opacity .2s; }
.step-saved.show { opacity: 1; }
.run-filter .nav-link { padding: .3rem .75rem; font-size: .8125rem; }
.run-legend .is-zero { opacity: .45; }

/* Test run: linked bug chips and the "link a bug" search picker */
.bug-chip { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .25rem .25rem .25rem .5rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; font-size: .8125rem; background: var(--bs-paper-bg, transparent); }
.bug-chip > a { flex: 1 1 auto; color: var(--bs-heading-color); }
.bug-chip > a:hover { color: var(--bs-primary); }
.bug-chip .btn-icon { width: 1.5rem; height: 1.5rem; }
.bug-picker-results { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + .25rem); max-height: 16rem; overflow-y: auto; border-radius: .375rem; background: var(--bs-paper-bg, #fff); }
.bug-picker-results .list-group-item { border-left: 0; border-right: 0; }
.bug-picker-results .list-group-item.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }
.bug-chip-stack { flex-wrap: wrap; row-gap: .25rem; padding: .375rem .25rem .375rem .5rem; }
.bug-chip-stack > a { flex: 1 1 100%; }
.bug-chip-stack > a .text-truncate { white-space: normal; }
.bug-chip-stack > form { margin-left: auto; }
/* Item picker ("link an item") results */
.item-picker-results { position: absolute; z-index: 1065; left: 0; right: 0; top: calc(100% + .25rem); max-height: 16rem; overflow-y: auto; border-radius: .375rem; background: var(--bs-paper-bg, #fff); }
.item-picker-results .list-group-item { border-left: 0; border-right: 0; }
.item-picker-results .list-group-item.active .badge { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }

/* ── Compose window (Gmail style) ─────────────────────────────────────
   Floating: #compose-dock at the bottom-right; full page: .compose-page */
#compose-dock { position: fixed; right: 1.5rem; bottom: 0; z-index: 1080; width: min(36rem, calc(100vw - 2rem)); height: min(38rem, calc(100vh - 5rem));
  display: flex; flex-direction: column; border-radius: .75rem .75rem 0 0; overflow: hidden; background: var(--bs-paper-bg, #fff);
  box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06); animation: dock-in .2s cubic-bezier(.2, .8, .2, 1); }
#compose-dock.is-min { height: auto; width: min(20rem, calc(100vw - 2rem)); }
#compose-dock.is-min .compose-form, #compose-dock.is-min .p-4 { display: none !important; }
#compose-dock.is-min .compose-head { cursor: pointer; }
#compose-dock.is-max { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: min(70rem, calc(100vw - 4rem)); height: calc(100vh - 6rem); border-radius: .75rem; animation: none; }
.compose-backdrop { position: fixed; inset: 0; z-index: 1079; background: rgba(0, 0, 0, .45); }
@keyframes dock-in { from { transform: translateY(1.5rem); opacity: 0; } }
@media (max-width: 575.98px) {
  #compose-dock:not(.is-min) { inset: 0; width: auto; height: auto; transform: none; border-radius: 0; }
  #compose-dock.is-min { right: .75rem; }
}

.compose-page { max-width: 60rem; height: calc(100vh - 11.5rem); min-height: 30rem; margin: 0 auto; border-radius: .75rem; overflow: hidden;
  box-shadow: var(--bs-box-shadow, 0 .25rem 1rem rgba(0, 0, 0, .1)); background: var(--bs-paper-bg, #fff); }
.compose-win[data-mode="page"] [data-compose-min], .compose-win[data-mode="page"] [data-compose-max] { display: none; }

.compose-win { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.compose-head { display: flex; align-items: center; gap: .25rem; padding: .55rem .5rem .55rem 1rem; background: #2f3349; color: #fff; flex-shrink: 0; }
[data-bs-theme="dark"] .compose-head { background: #3b3f5c; }
.compose-title { flex: 1 1 auto; font-weight: 500; font-size: .9375rem; }
.compose-head-btn { width: 1.875rem; height: 1.875rem; border: 0; border-radius: .375rem; background: transparent; color: rgba(255, 255, 255, .8); display: inline-flex; align-items: center; justify-content: center; }
.compose-head-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.compose-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.compose-row { display: flex; align-items: center; gap: .5rem; margin: 0 1rem; padding: .3rem 0; border-bottom: 1px solid var(--bs-border-color); flex-shrink: 0; }
.compose-row > label { flex-shrink: 0; margin: 0; color: var(--bs-secondary-color); font-size: .875rem; min-width: 2.25rem; }
.compose-row .form-control, .compose-row .form-select { border: 0; box-shadow: none !important; padding: .35rem 0; background-color: transparent; font-size: .9375rem; }
.compose-row .form-select { padding-right: 2rem; background-position: right .25rem center; }
.compose-row-quiet .form-select { pointer-events: none; background-image: none; }
.compose-row-links button { border: 0; background: none; color: var(--bs-secondary-color); font-size: .875rem; padding: .125rem .375rem; border-radius: .25rem; }
.compose-row-links button:hover { color: var(--bs-heading-color); background: rgba(var(--bs-secondary-rgb), .12); }

.compose-body { flex: 1 1 auto; min-height: 6rem; overflow-y: auto; }
.compose-editor { outline: none; min-height: 100%; padding: .75rem 1rem 1.25rem; line-height: 1.55; font-size: .9375rem; color: var(--bs-body-color); overflow-wrap: anywhere; }
.compose-editor blockquote { border-left: 3px solid var(--bs-border-color); margin: .5rem 0; padding-left: .75rem; color: var(--bs-secondary-color); }
.compose-editor a { color: var(--bs-primary); }
.compose-editor img { max-width: 100%; height: auto; }
.compose-editor table { max-width: 100%; }
/* Quoted mail keeps the look it was written with: a light page, also in dark mode */
[data-bs-theme="dark"] .compose-editor .gmail-quote { background: #fff; color: #384551; border-radius: .375rem; padding: .75rem 1rem !important; border-left: 0 !important; }

.compose-format { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; margin: 0 .75rem .25rem; padding: .25rem; border-radius: .5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14), 0 0 0 1px var(--bs-border-color); flex-shrink: 0; }
.compose-format button:not(.dropdown-item):not(.compose-color), .compose-format .dropdown-menu button:not(.dropdown-item):not(.compose-color) {
  border: 0; background: transparent; color: var(--bs-body-color); height: 2rem; min-width: 2rem; padding: 0 .3rem; border-radius: .375rem; display: inline-flex; align-items: center; justify-content: center; }
.compose-format button:hover:not(.dropdown-item) { background: rgba(var(--bs-secondary-rgb), .14); }
.compose-format .sep { width: 1px; height: 1.25rem; background: var(--bs-border-color); margin: 0 .2rem; }
.compose-format .dropdown-menu { min-width: auto; }
.compose-color { width: 1.375rem; height: 1.375rem; padding: 0; border-radius: 50%; border: 2px solid var(--bs-paper-bg, #fff); background: var(--sw); box-shadow: 0 0 0 1px var(--bs-border-color); cursor: pointer; }
.compose-color:hover, .compose-color:focus-visible { transform: scale(1.15); }

.compose-link { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 .75rem .5rem; padding: .5rem; border-radius: .5rem; box-shadow: 0 0 0 1px var(--bs-border-color); flex-shrink: 0; }
.compose-link .form-control { flex: 1 1 12rem; }

.compose-foot { display: flex; align-items: center; gap: .25rem; padding: .625rem 1rem .75rem; flex-shrink: 0; }
.compose-send { font-weight: 500; margin-right: .5rem; }
.compose-tool { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--bs-secondary-color); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.compose-tool:hover, .compose-tool.active { background: rgba(var(--bs-secondary-rgb), .14); color: var(--bs-heading-color); }
/* Render pasted/signature tables like mail clients do (the app's base CSS collapses borders, squaring rounded cards) */
.compose-editor table { border-collapse: separate; }
.compose-row-links { display: inline-flex; flex-shrink: 0; white-space: nowrap; }

/* ── Suggestions: voting ─────────────────────────────────────────────── */
.vote-pill { display: flex; flex-direction: column; align-items: center; width: 3.5rem; padding: .25rem 0; border-radius: .75rem;
  background: rgba(var(--bs-secondary-rgb), .1); transition: background-color .2s; }
.vote-pill.is-up { background: rgba(var(--bs-primary-rgb), .14); }
.vote-pill.is-down { background: rgba(var(--bs-danger-rgb), .12); }
.vote-btn { width: 2.25rem; height: 2rem; border: 0; border-radius: .5rem; background: transparent; color: var(--bs-secondary-color);
  display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background-color .15s, transform .1s; }
.vote-btn:hover:not(:disabled) { background: rgba(var(--bs-secondary-rgb), .16); color: var(--bs-heading-color); }
.vote-btn:active:not(:disabled) { transform: scale(.88); }
.vote-btn:disabled { opacity: .4; }
.vote-pill.is-up .vote-up, .vote-pill.is-up .vote-score { color: var(--bs-primary); }
.vote-pill.is-down .vote-down, .vote-pill.is-down .vote-score { color: var(--bs-danger); }
.vote-score { font-weight: 700; font-size: 1.125rem; line-height: 1.6; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.vote-bump { animation: vote-bump .3s ease; }
@keyframes vote-bump { 50% { transform: scale(1.3); } }

.vote-big-score { font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.vote-panel.is-up .vote-big-score { color: var(--bs-primary); }
.vote-panel.is-down .vote-big-score { color: var(--bs-danger); }
.vote-ratio { display: block; height: .5rem; border-radius: 1rem; background: rgba(var(--bs-danger-rgb), .25); overflow: hidden; }
.vote-ratio > span { display: block; height: 100%; background: var(--bs-success); border-radius: 1rem; transition: width .3s ease; }
.vote-ratio-sm { display: inline-block; width: 3.5rem; height: .375rem; }
.vote-up-btn { background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); border: 0; }
.vote-up-btn:hover:not(:disabled), .vote-up-btn[aria-pressed="true"] { background: var(--bs-primary); color: #fff; }
.vote-down-btn { background: rgba(var(--bs-secondary-rgb), .14); color: var(--bs-secondary-color); border: 0; }
.vote-down-btn:hover:not(:disabled), .vote-down-btn[aria-pressed="true"] { background: var(--bs-danger); color: #fff; }
.vote-up-btn .badge, .vote-down-btn .badge { background: rgba(255, 255, 255, .25); color: inherit; }
.vote-up-btn:not([aria-pressed="true"]):not(:hover) .badge { background: rgba(var(--bs-primary-rgb), .16); }
[data-vote-widget].is-busy { opacity: .7; pointer-events: none; }

.sugg-card { transition: box-shadow .2s ease, transform .2s ease; }
.sugg-card:hover { box-shadow: 0 .5rem 1.25rem rgba(34, 48, 62, .12); }
/* Suggestion cards: a status-coloured top edge, clamped text, the vote control in the footer */
.sugg-card[class*="sugg-status-"] { border-top: 3px solid var(--sugg-accent, transparent); }
.sugg-status-open         { --sugg-accent: var(--bs-info); }
.sugg-status-under_review { --sugg-accent: var(--bs-warning); }
.sugg-status-accepted     { --sugg-accent: var(--bs-primary); }
.sugg-status-implemented  { --sugg-accent: var(--bs-success); }
.sugg-status-rejected     { --sugg-accent: var(--bs-danger); }
.sugg-status-rejected .card-body { opacity: .75; }
.sugg-clamp-2, .sugg-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sugg-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.sugg-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.sugg-needs-vote, .sugg-tabs .badge.sugg-tab-hot { color: var(--bs-warning); background: rgba(var(--bs-warning-rgb), .18); }
.vote-pill-row { flex-direction: row; width: auto; padding: 0 .125rem; }
.vote-pill-row .vote-btn { width: 2rem; height: 2rem; }
.vote-pill-row .vote-score { min-width: 1.75rem; text-align: center; font-size: 1rem; }
.sugg-title { display: block; }
.sugg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sugg-tabs .nav-link { white-space: nowrap; padding: .4rem .85rem; }
.sugg-tabs .badge { background: rgba(var(--bs-secondary-rgb), .16); color: inherit; }
.sugg-tabs .nav-link.active .badge { background: rgba(255, 255, 255, .25); }

/* Where a suggestion stands: open → under review → accepted → implemented */
.sugg-steps { gap: .5rem; counter-reset: step; }
.sugg-steps li { flex: 1; display: flex; flex-direction: column; gap: .375rem; font-size: .8125rem; color: var(--bs-secondary-color); }
.sugg-steps li > span { height: .375rem; border-radius: 1rem; background: rgba(var(--bs-secondary-rgb), .2); }
.sugg-steps li.is-done > span { background: rgba(var(--bs-success-rgb), .55); }
.sugg-steps li.is-now { color: var(--bs-heading-color); font-weight: 600; }
.sugg-steps li.is-now > span { background: var(--bs-success); }
/* Bug path: steps are buttons for people who can edit */
.bug-path-btn { all: unset; display: flex; flex-direction: column; gap: .375rem; width: 100%; cursor: pointer; border-radius: .25rem; }
.bug-path-btn:hover { color: var(--bs-primary); }
.bug-path-btn:hover > span { background: rgba(var(--bs-primary-rgb), .45); }
.bug-path-btn:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 3px; }
.bug-path.is-off li > span, .bug-path.is-off .bug-path-btn > span { background: rgba(var(--bs-secondary-rgb), .2); }
.sugg-steps li > span, .bug-path-btn > span { height: .375rem; border-radius: 1rem; background: rgba(var(--bs-secondary-rgb), .2); display: block; }
.sugg-steps li.is-done .bug-path-btn > span { background: rgba(var(--bs-success-rgb), .55); }

/* ── @mentions ─────────────────────────────────────────────────────── */
.mention-results { position: absolute; z-index: 1065; left: 0; right: 0; top: calc(100% + .25rem); max-height: 16rem; overflow-y: auto; border-radius: .375rem; background: var(--bs-paper-bg, #fff); }
.mention-results .list-group-item { border-left: 0; border-right: 0; }
.mention-results .list-group-item.active small { color: rgba(255, 255, 255, .8) !important; }
.mention { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); border-radius: .25rem; padding: 0 .2rem; font-weight: 500; white-space: nowrap; }

/* ── Tags (test cases) ─────────────────────────────────────────────── */
.tag-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 50rem; font-size: .8125rem; line-height: 1.4; color: var(--bs-body-color); background: rgba(var(--bs-secondary-rgb), .12); border: 1px solid transparent; text-decoration: none; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.tag-chip:hover { color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), .4); }
.tag-chip.is-on { color: #fff; background: var(--bs-primary); }
.tag-chip.is-on:hover { color: #fff; }
.tag-chip-n { font-size: .75rem; opacity: .7; }
.tag-chip-sm { padding: .05rem .5rem; font-size: .75rem; }

/* Compact pill tabs: the theme's hover rule (.nav-pills .nav-item .nav-link:not(.active):hover)
   puts its own bottom padding back, which made a hovered tab taller and pushed the page down */
.mail-tabs .nav-item .nav-link:not(.active):hover { padding-block-end: .35rem; }
.run-filter .nav-item .nav-link:not(.active):hover { padding-block-end: .3rem; }
.sugg-tabs .nav-item .nav-link:not(.active):hover { padding-block-end: .4rem; }

/* ── Tests dashboard ───────────────────────────────────────────────── */
.dash-meter, .dash-bar { height: .375rem; border-radius: 1rem; background: rgba(var(--bs-primary-rgb), .16); overflow: hidden; }
.dash-meter > span, .dash-bar > span { display: block; height: 100%; border-radius: 1rem; background: var(--bs-primary); }
.dash-swatch { width: .625rem; height: .625rem; border-radius: 2px; background: var(--tr); flex-shrink: 0; }
.dash-swatch-empty { background: rgba(var(--bs-secondary-rgb), .16); }
.dash-chart { width: 100%; min-height: 240px; }
.dash-chart svg { display: block; overflow: visible; }
.dash-grid { stroke: var(--bs-border-color); stroke-width: 1; opacity: .5; }
.dash-axis { stroke: var(--bs-border-color); stroke-width: 1; }
.dash-tick { fill: var(--bs-secondary-color); font-size: 11px; font-variant-numeric: tabular-nums; }
.dash-seg { fill: var(--tr); transition: opacity .12s; }
.dash-col.is-dim .dash-seg { opacity: .35; }
.dash-hit { fill: transparent; cursor: default; outline: none; }
.dash-hit:focus-visible { fill: rgba(var(--bs-primary-rgb), .08); stroke: var(--bs-primary); stroke-width: 1; }
.dash-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 8rem; padding: .5rem .75rem; border-radius: .375rem; font-size: .8125rem;
            color: var(--bs-body-color); background: var(--bs-paper-bg, var(--bs-body-bg)); border: 1px solid var(--bs-border-color); box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18); }
.dash-tip-head { color: var(--bs-secondary-color); margin-bottom: .25rem; white-space: nowrap; }
.dash-tip-row { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.dash-tip-row strong { color: var(--bs-heading-color); min-width: 1.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.dash-tip-key { width: .75rem; height: 2px; border-radius: 1px; background: var(--tr); flex-shrink: 0; }

/* ── Bug files: screenshots grid, video, upload ──────────────────────── */
.bug-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }
.bug-shot img { display: block; width: 100%; height: 8rem; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color); background: rgba(var(--bs-secondary-rgb), .08); }
.bug-shot a:hover img { border-color: var(--bs-primary); }
.bug-shot figcaption { margin-top: .25rem; min-width: 0; }
.bug-video { display: block; width: 100%; max-height: 26rem; border-radius: .5rem; background: #000; }
.bug-upload-progress { height: 1.25rem; }
.bug-upload-progress .progress-bar { font-size: .75rem; }