/* Kryton stylesheet. Phase 1 scope: login, account, set-password, error pages.
   Phase 2 will add the report list, cards, threads, etc.
   See SPEC.md §11. */

/* ---------------- DM Sans (self-hosted variable font) ---------------- */
/* SPEC §11.2: no Google Fonts CDN — files committed under public/assets/fonts/. */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                   U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Palette ----------------
   Originally copied from My Pack Shed (a heavy sage-green theme).
   Retuned toward the original mockup's "gently colourful" vibe:
   neutral warm surfaces + a teal-green primary accent, with the
   bold semantic pill colours (red/amber/blue/green/grey) doing the
   colour lifting via the --kr-* vars below. See SPEC §11.1. */
:root {
    --primary: #1D9E75;
    --primary-light: #5DCAA5;
    --primary-dark: #0F6E56;
    --primary-subtle: #E1F5EE;
    --accent: #f59e0b;
    --accent-light: #fbbf24;
    --surface: #ffffff;
    --surface-alt: #FAF8F3;
    --surface-hover: #F1EEE5;
    --page-bg: #F5F1E8;
    --border: #C7C3B9;
    --border-light: #E4E0D5;
    --text: #24201A;
    --text-secondary: #5C584C;
    --text-muted: #8A8578;
    --danger: #dc2626;
    --danger-light: #fde8e8;
    --warning: #d97706;
    --warning-light: #fef3cd;
    --success: #16a34a;
    --success-light: #dcf5e5;
    --info: #0369a1;
    --info-light: #dbeefe;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --radius: 6px;
    --radius-lg: 10px;
    --transition: 150ms ease;
}

/* ---------------- Tracker-specific (kr-) variables ---------------- */
:root {
    /* Priority accents for the bug-card left border (used in Phase 2). */
    --kr-priority-urgent-border: #E24B4A;
    --kr-priority-urgent-bg: #FCEBEB;
    --kr-priority-urgent-text: #A32D2D;
    --kr-priority-high-border: #EF9F27;
    --kr-priority-high-bg: #FAEEDA;
    --kr-priority-high-text: #854F0B;
    --kr-priority-medium-border: #378ADD;
    --kr-priority-medium-bg: #E6F1FB;
    --kr-priority-medium-text: #185FA5;
    --kr-priority-low-border: #888780;
    --kr-priority-low-bg: #F1EFE8;
    --kr-priority-low-text: #5F5E5A;

    --kr-status-open-bg: #FCEBEB;
    --kr-status-open-text: #A32D2D;
    --kr-status-in-progress-bg: #FAEEDA;
    --kr-status-in-progress-text: #854F0B;
    --kr-status-in-testing-bg: #E6F1FB;
    --kr-status-in-testing-text: #185FA5;
    --kr-status-resolved-bg: #EAF3DE;
    --kr-status-resolved-text: #3B6D11;
    --kr-status-wont-fix-bg: #ECECEC;
    --kr-status-wont-fix-text: #5F5E5A;

    /* 6-colour avatar palette (SPEC §11.4). */
    --kr-avatar-0: #9FE1CB;
    --kr-avatar-1: #B5D4F4;
    --kr-avatar-2: #FAC775;
    --kr-avatar-3: #F4B5B5;
    --kr-avatar-4: #C8B5F4;
    --kr-avatar-5: #B5E8B5;
}

/* ---------------- Reset + base ---------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

/* Safety net against horizontal overflow on small screens — any accidental
   wide descendant is clipped rather than introducing a horizontal scrollbar.
   All intentionally-wide content (admin tables, lightbox) has its own scroll
   or overlay container, so nothing relies on the page itself scrolling
   sideways. */
html, body { overflow-x: hidden; }

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    /* Long unbroken tokens (URLs, log lines pasted into descriptions) must
       wrap rather than overflow their container. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Prevent any embedded media from blowing out narrow viewports. */
img, video, svg { max-width: 100%; height: auto; }

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

button { font-family: inherit; cursor: pointer; }

/* ---------------- Page container ---------------- */
.page {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem;
}

@media (max-width: 900px) {
    .page { padding: 1rem; }
}

/* ---------------- Top bar (used post-login) ---------------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.topbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;   /* let long emails / product names wrap inside .page-sub */
    flex: 1 1 auto;
}

.page-title {
    font-size: 18px;
    font-weight: 500;
}

.page-sub {
    font-size: 13px;
    color: var(--text-secondary);
}

.topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.topbar-user {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}

@media (max-width: 600px) {
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .topbar-actions {
        justify-content: flex-start;
    }
    .topbar-user {
        margin-right: 0;
        width: 100%;
    }
    /* Keep the primary "+ Add report" action visually distinct even when
       the bar has wrapped — push it to the end of its row. */
    .topbar-actions > .btn { margin-left: auto; }
}

/* ---------------- Buttons ---------------- */
.btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    transition: background var(--transition);
}

.btn:hover { background: var(--primary-dark); }

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 7px 14px;
    font-size: 13px;
}

.btn-secondary:hover { background: var(--surface-hover); }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }

/* Inline form (e.g. logout button in topbar). */
.inline-form { display: inline; }

/* ---------------- Auth pages (login / set-password / reset request) ---------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    padding: 1rem;
}

.auth-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary);
}

.auth-logo p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.auth-foot {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-foot a { text-decoration: none; }

/* ---------------- Forms ---------------- */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
    color: var(--text);
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 8px 10px;
    /* 16px is the smallest size iOS Safari will render without triggering the
       auto-zoom-on-focus behaviour. Anything smaller here (or in any compact
       override below) must be lifted back to 16px inside the mobile media
       query at the foot of this file. */
    font-size: 16px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.12);
}

.form-textarea { resize: vertical; min-height: 80px; }

.form-error {
    color: var(--danger);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.form-help {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.875rem;
    cursor: pointer;
}

/* ---------------- Banner / flash messages ---------------- */
.banner {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.banner-success { background: var(--success-light); color: #14532d; }
.banner-error   { background: var(--danger-light);  color: #7f1d1d; }
.banner-info    { background: var(--info-light);    color: #0c4a6e; }

/* ---------------- Cards (generic content surface) ---------------- */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

.section-divider {
    height: 1px;
    background: var(--border-light);
    margin: 1.5rem 0;
    border: none;
}

/* ---------------- Error pages ---------------- */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.error-content {
    max-width: 480px;
}

.error-code {
    font-size: 4rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.error-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.5rem 0 0.75rem;
}

.error-body {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* ---------------- Utilities ---------------- */
.text-muted { color: var(--text-muted); }
.text-small { font-size: 0.8125rem; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }

/* ============================================================================
   Phase 2: report list, cards, threads, new-report panel.
   Layout follows an external HTML mockup (not tracked in the repo),
   re-coloured to use the Pack Shed palette (SPEC §11.1).
   ========================================================================== */

/* Stats tiles */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
}
.stat {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 12px 14px;
    cursor: pointer;
    transition: background var(--transition);
    user-select: none;
}
.stat:hover { background: var(--surface-hover); }
.stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.stat-num { font-size: 22px; font-weight: 500; }
.stat-num.red   { color: var(--kr-priority-urgent-text); }
.stat-num.amber { color: var(--kr-priority-high-text); }
.stat-num.teal  { color: var(--kr-status-resolved-text); }
.stat-num.gray  { color: var(--text-secondary); }

@media (max-width: 600px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* Filters */
.filters-section { margin-bottom: 1rem; }
/* The toggle is only rendered on mobile (see the @media block below).
   On desktop it's hidden so the filter chips are always visible and
   behave as before. */
.filters-toggle { display: none; }
.filters {
    display: flex;
    gap: 8px 20px;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.filter-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-group-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    margin-right: 2px;
}
.filters-help {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.filter-chip {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-chip:hover { background: var(--surface-hover); color: var(--text); }
.filter-chip.active {
    background: var(--primary-subtle);
    color: var(--primary);
    border-color: var(--primary);
}
@media (max-width: 400px) {
    .filter-chip { font-size: 11px; padding: 3px 10px; }
    .filter-group-label { font-size: 10px; }
}

/* Column headers */
.col-headers {
    display: grid;
    grid-template-columns: 90px 1fr 120px 130px 36px;
    gap: 12px;
    padding: 0 14px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (max-width: 600px) {
    .col-headers { display: none; }
}

/* Bug card */
.bug-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-left-width: 3px;
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    overflow: hidden;
}
.bug-card.priority-urgent { border-left-color: var(--kr-priority-urgent-border); }
.bug-card.priority-high   { border-left-color: var(--kr-priority-high-border); }
.bug-card.priority-medium { border-left-color: var(--kr-priority-medium-border); }
.bug-card.priority-low    { border-left-color: var(--kr-priority-low-border); }
.bug-card.is-resolved     { opacity: 0.75; }
.bug-card.is-wont-fix     { opacity: 0.65; }
.bug-card.is-internal     { background: linear-gradient(0deg, var(--surface-alt), var(--surface) 4px); }

.bug-row {
    display: grid;
    grid-template-columns: 90px 1fr 120px 130px 36px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
}
.bug-row > * { min-width: 0; }   /* let grid cells shrink so titles/names wrap */
.bug-row:hover { background: var(--surface-alt); }

@media (max-width: 600px) {
    .bug-row {
        grid-template-columns: 1fr 36px;
        gap: 4px 10px;
        padding: 12px;
    }
    /* Every child stacks in column 1; the expand-icon takes column 2 and
       spans the whole row height. Auto-flow places the four stacked cells
       in rows 1-4 automatically because column 2 is reserved. */
    .bug-row > * { grid-column: 1; }
    .bug-row > .expand-icon {
        grid-column: 2;
        grid-row: 1 / span 4;
        align-self: center;
        justify-self: center;
    }
}
@media (max-width: 400px) {
    .bug-row { padding: 10px; }
}

.priority-badge {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
}
.priority-badge.p-urgent { background: var(--kr-priority-urgent-bg); color: var(--kr-priority-urgent-text); }
.priority-badge.p-high   { background: var(--kr-priority-high-bg);   color: var(--kr-priority-high-text); }
.priority-badge.p-medium { background: var(--kr-priority-medium-bg); color: var(--kr-priority-medium-text); }
.priority-badge.p-low    { background: var(--kr-priority-low-bg);    color: var(--kr-priority-low-text); }

.bug-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.bug-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.type-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border: 1px solid var(--border-light);
    padding: 1px 6px;
    border-radius: 3px;
}
.internal-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--warning);
    border: 1px solid var(--warning);
    padding: 1px 6px;
    border-radius: 3px;
}
.bug-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.progress-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 20px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
}
.progress-badge.s-open        { background: var(--kr-status-open-bg);        color: var(--kr-status-open-text); }
.progress-badge.s-in_progress { background: var(--kr-status-in-progress-bg); color: var(--kr-status-in-progress-text); }
.progress-badge.s-in_testing  { background: var(--kr-status-in-testing-bg);  color: var(--kr-status-in-testing-text); }
.progress-badge.s-resolved    { background: var(--kr-status-resolved-bg);    color: var(--kr-status-resolved-text); }
.progress-badge.s-wont_fix    { background: var(--kr-status-wont-fix-bg);    color: var(--kr-status-wont-fix-text); }

.reporter {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: rgba(0,0,0,0.7);
    font-size: 10px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar.c-0 { background: var(--kr-avatar-0); }
.avatar.c-1 { background: var(--kr-avatar-1); }
.avatar.c-2 { background: var(--kr-avatar-2); }
.avatar.c-3 { background: var(--kr-avatar-3); }
.avatar.c-4 { background: var(--kr-avatar-4); }
.avatar.c-5 { background: var(--kr-avatar-5); }
@media (max-width: 400px) {
    .avatar { width: 18px; height: 18px; font-size: 9px; }
}

.expand-icon {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform 0.2s;
    text-align: center;
    user-select: none;
}
.expand-icon.open { transform: rotate(180deg); }

/* Thread */
.thread {
    display: none;
    border-top: 1px solid var(--border-light);
    padding: 16px 14px;
    background: var(--surface-alt);
}
.thread.open { display: block; }

.thread-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 12px;
}
.thread-controls label {
    color: var(--text-secondary);
    margin-right: 4px;
}
.thread-controls .form-select,
.thread-controls .form-input {
    padding: 4px 8px;
    font-size: 12px;
    width: auto;
}
.thread-controls .toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.thread-controls .grow { flex: 1; }
.thread-controls .delete-report {
    background: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}
.thread-controls .delete-report:hover { background: var(--danger); color: #fff; }

.thread-msg {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
}
.thread-msg:last-child { margin-bottom: 0; }
.msg-bubble {
    flex: 1 1 auto;
    min-width: 0;       /* allow bubble to shrink below content width so long text can wrap */
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;    /* long names drop the timestamp onto a new line rather than pushing it off-screen */
    margin-bottom: 4px;
    gap: 4px 8px;
}
.msg-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}
.msg-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.msg-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-wrap;
    /* `anywhere` breaks even inside long URLs / paste dumps; `break-word`
       alone only breaks at word boundaries. */
    overflow-wrap: anywhere;
    word-break: break-word;
}
.msg-actions {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}
.msg-delete {
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.msg-attach {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--info);
    cursor: pointer;
}
.attach-icon {
    width: 20px;
    height: 20px;
    background: var(--info-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    color: var(--info);
}

.thread-reply {
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.reply-input {
    flex: 1;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    background: var(--surface);
    color: var(--text);
    resize: vertical;
    font-family: inherit;
    min-height: 38px;
}
.btn-small {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 7px 14px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-small:hover { background: var(--primary-dark); }

/* Resolved section */
.resolved-section { margin-top: 1.5rem; }
.section-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-label .toggle-arrow { transition: transform 0.2s; }
.resolved-section.open .section-label .toggle-arrow { transform: rotate(180deg); }
.resolved-section .resolved-list { display: none; }
.resolved-section.open .resolved-list { display: block; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    background: var(--surface-alt);
    border-radius: var(--radius-lg);
}

/* Add-panel (slide-down new-report form) */
.add-panel {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.add-panel.open { display: block; }
.add-panel .panel-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 14px;
    color: var(--text);
}

/* Status-highlight (stats tile click — §5.4) */
.bug-list[data-highlight-status] .bug-card { opacity: 0.4; transition: opacity 0.3s; }
.bug-list[data-highlight-status="open"]        .bug-card.status-open,
.bug-list[data-highlight-status="in_progress"] .bug-card.status-in_progress,
.bug-list[data-highlight-status="in_testing"]  .bug-card.status-in_testing { opacity: 1; }

/* Toast (for AJAX failure recovery — §5.6) */
.toast-stack {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}
.toast {
    background: var(--text);
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
    max-width: 320px;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }

/* Disabled-user marker */
.disabled-marker {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.8125rem;
}

/* ============================================================================
   Phase 3: attachments, lightbox, admin pages.
   ========================================================================== */

/* Attachment thumbnails + chips (in threads, SPEC §5.7) */
.msg-attachments {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.image-thumbnail {
    display: inline-block;
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: var(--surface);
    cursor: zoom-in;
    transition: box-shadow var(--transition);
}
.image-thumbnail:hover { box-shadow: var(--shadow-md); }
.image-thumbnail img {
    display: block;
    max-width: 240px;
    max-height: 240px;
    object-fit: contain;
}
.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--transition);
    /* Chip must never be wider than the message bubble it sits in. */
    max-width: 100%;
    min-width: 0;
}
.attachment-chip:hover { background: var(--surface-alt); color: var(--text); }
.attachment-chip .attach-icon {
    width: 32px;
    height: 32px;
    background: var(--info-light);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--info);
    flex-shrink: 0;
}
.attachment-chip .attach-name {
    /* The flex shrink + min-width:0 lets the ellipsis kick in at the actual
       available width, instead of being anchored to a fixed 260px that can
       exceed a narrow viewport. */
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attachment-chip .attach-size {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Reply composer with attach button */
.thread-reply {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.thread-reply .reply-main {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.reply-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    align-self: flex-start;
}
.reply-attach-btn .reply-files { display: none; }
.reply-attach-btn .reply-attach-label {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.reply-attach-btn:hover { color: var(--text); }

/* Staged-file indicator shown after the user picks files but before Send. */
.reply-staged {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    align-self: flex-start;
    max-width: 100%;
}
.reply-staged[hidden] { display: none; }
.reply-staged-list { color: var(--text); word-break: break-word; }
.reply-staged-note { color: var(--warning, #b45309); font-weight: 500; }
.reply-staged-clear {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}
.reply-staged-clear:hover { color: var(--text); }

/* Lightbox overlay */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: zoom-out;
}
.lightbox-body {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.lightbox-body img {
    max-width: 95vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.lightbox-caption {
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 10px;
    border-radius: var(--radius);
    max-width: 90vw;
    text-align: center;
    word-break: break-word;
}
.lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close:hover { background: var(--surface-alt); }
.lightbox-download {
    display: inline-block;
    padding: 6px 14px;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}
.lightbox-download:hover { filter: brightness(1.1); }

/* Admin pages */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: top;
}
.admin-table th {
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface-alt);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr.archived,
.admin-table tr.disabled { opacity: 0.6; }

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.admin-actions form { display: inline; }
.admin-actions .btn,
.admin-actions .btn-secondary,
.admin-actions .btn-danger {
    font-size: 11px;
    padding: 4px 10px;
}
.admin-actions .form-select,
.admin-actions .form-input {
    font-size: 12px;
    padding: 3px 6px;
    width: auto;
}

.pill {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--surface-alt);
    color: var(--text-secondary);
}
.pill.role-admin  { background: var(--primary-subtle); color: var(--primary); }
.pill.role-member { background: var(--info-light);     color: var(--info); }
.pill.status-invited  { background: var(--warning-light); color: var(--warning); }
.pill.status-active   { background: var(--success-light); color: var(--success); }
.pill.status-disabled { background: var(--danger-light);  color: var(--danger); }

@media (max-width: 600px) {
    /* Admin tables are dense; on mobile let the card scroll horizontally
       rather than trying to restack the table semantically. */
    .card { overflow-x: auto; }
    .admin-table { min-width: 640px; }
}

/* ============================================================================
   Responsive refinements
   ---------------------------------------------------------------------------
   Consolidated mobile tuning. The rules above already handle the obvious
   collapses (stats → 2×2, form-row → 1 col, bug-row → stack). This block
   fixes the less-obvious breakage that shows up on a real phone:
     - iOS Safari auto-zooms into any <input>/<select>/<textarea> with a
       font-size below 16px. The dense overrides on .reply-input,
       .thread-controls, and .admin-actions need to be lifted back to 16px
       on narrow viewports.
     - .thread-controls wraps awkwardly when forced onto two lines — stack
       it fully at narrow widths so each row is self-contained.
     - .auth-card's 2.5rem padding is too generous at <360px viewports.
     - .form-actions can exceed the available width with long button labels.
   ========================================================================== */

@media (max-width: 767px) {
    /* iOS anti-zoom: any form control under 16px must be lifted. The visual
       cost on mobile is tiny (bigger tap targets) and it prevents the
       page shifting out from under the user on focus. */
    .reply-input,
    .thread-controls .form-select,
    .thread-controls .form-input,
    .admin-actions .form-select,
    .admin-actions .form-input {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    /* Collapsed filter chips — a lot of vertical space is otherwise eaten
       by four filter-chip rows before a phone user sees the first report.
       The toggle mirrors the Resolved-section idiom: click the header to
       expand; rotate the chevron; sections auto-expand (.open class is
       rendered server-side in filters.php) when any filter is already
       active so shared URLs stay legible. */
    .filters-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        background: var(--surface-alt);
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        padding: 8px 12px;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-secondary);
        text-align: left;
        cursor: pointer;
    }
    .filters-toggle:hover { background: var(--surface-hover); color: var(--text); }
    .filters-toggle .toggle-arrow {
        display: inline-block;
        transition: transform 0.2s;
    }
    .filters-section.open .filters-toggle .toggle-arrow {
        transform: rotate(180deg);
    }
    .filters-count {
        color: var(--primary);
        font-weight: 600;
    }

    /* Body hidden by default; .open reveals it. */
    .filters-section .filters-body { display: none; }
    .filters-section.open .filters-body {
        display: block;
        margin-top: 10px;
    }

    /* Full-bleed stack of the staff control strip — labels on their own
       line, selects full-width, internal toggle and delete each on their
       own row. Much easier to tap than the wrapped flex row. */
    .thread-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .thread-controls .grow { display: none; }
    .thread-controls .form-select,
    .thread-controls .form-input {
        width: 100%;
    }
    .thread-controls label {
        margin-right: 0;
    }
    .thread-controls .toggle {
        padding: 4px 0;
    }
    .thread-controls .delete-report {
        align-self: flex-end;
    }

    /* Prevent the thread from bleeding into the card border at narrow widths. */
    .thread { padding: 12px; }
    .thread-msg { gap: 8px; }

    /* Form actions wrap rather than overflowing when submit/cancel labels
       are long. Stretch on the narrowest screens so both are full width. */
    .form-actions {
        flex-wrap: wrap;
    }

    /* Add-panel matches the reduced gutter. */
    .add-panel { padding: 1rem; }

    /* Auth-card tightens up on phones. */
    .auth-card { padding: 1.75rem; }
}

@media (max-width: 400px) {
    /* Final tightening at iPhone SE / small-Android widths. */
    .page { padding: 0.75rem; }
    .auth-card { padding: 1.25rem; }
    .btn, .btn-secondary, .btn-danger { padding: 8px 12px; font-size: 13px; }
    .form-actions { justify-content: stretch; }
    .form-actions > .btn,
    .form-actions > .btn-secondary,
    .form-actions > .btn-danger { flex: 1 1 auto; }
    .topbar-actions > .btn-secondary,
    .topbar-actions > .btn { padding: 7px 10px; }
    /* Filter-chip wrap already handled at ≤400 up above; ensure the label
       pills wrap onto their own line so they don't push chips off. */
    .filter-group { width: 100%; }
}

/* ============================================================================
   Phase 5: edit + revision history (SPEC §5.8 / §11.6).
   ========================================================================== */

/* "Edited" marker — appears next to the author byline once a row has at least
   one revision. Plain text for non-admins; styled as a button-link for admins
   to open the revision drawer. */
.edited-marker {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    line-height: inherit;
}
button.edited-marker.is-link {
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    color: var(--text-secondary);
}
button.edited-marker.is-link:hover {
    color: var(--primary-dark);
}

/* Edit affordance buttons (description + comments). The .msg-edit button
   sits in the .msg-actions row alongside Delete (when admin). */
.msg-edit {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.msg-edit:hover { color: var(--primary-dark); }

/* Lock gate (SPEC §5.8.2): when the parent report is in the Resolved section,
   hide every Edit button on the report and on its comments — for everyone,
   including admins. Server only renders the buttons when the authorship gate
   passes; CSS handles the lock dynamically so a status flip via the dropdown
   un-locks (or re-locks) without a page reload. */
.bug-card[data-status="resolved"] .msg-edit,
.bug-card[data-status="wont_fix"] .msg-edit { display: none; }

/* Inline edit form — swapped in for the bubble's body when .is-editing
   is set on the bubble. The "view" parts hide in the same toggle. */
.msg-bubble.is-editing .msg-text,
.msg-bubble.is-editing .msg-attachments,
.msg-bubble.is-editing .msg-actions { display: none; }
.msg-bubble.is-editing .edit-form { display: block; }

.edit-form {
    display: none;
    margin-top: 8px;
}
.edit-form-row { margin-bottom: 10px; }
.edit-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.edit-form .form-input,
.edit-form .form-textarea,
.edit-form .form-select {
    width: 100%;
    font-size: 13px;
    padding: 6px 8px;
}
.edit-form-row-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.edit-form-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}
.edit-form-actions .btn-small,
.edit-form-actions .btn-secondary {
    padding: 6px 12px;
    font-size: 12px;
}
.edit-form .form-error.dynamic {
    color: var(--danger);
    font-size: 11px;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .edit-form-row-inline {
        grid-template-columns: 1fr;
    }
}

/* Revision drawer (admin only — SPEC §5.8.4 / §11.6).
   Right-edge slide-in panel; full-screen overlay below 600px. Reuses the
   same backdrop + Esc-to-close pattern as the lightbox. */
:root {
    --kr-drawer-width: 420px;
}
.revisions-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: block;
}
.revisions-drawer[hidden] { display: none; }
.revisions-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.revisions-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--kr-drawer-width);
    max-width: 100%;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.revisions-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    background: var(--surface-alt);
}
.revisions-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.revisions-drawer-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.revisions-drawer-close:hover { color: var(--text); }
.revisions-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 18px;
}
.revision-entry {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px;
    margin-bottom: 12px;
}
.revision-entry.is-current {
    border-color: var(--primary-light);
    background: var(--primary-subtle);
}
.revision-entry-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.revision-entry-when {
    font-size: 12px;
    color: var(--text-muted);
}
.revision-entry-editor {
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
.revision-entry-role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--surface-hover);
    color: var(--text-secondary);
    font-weight: 500;
}
.revision-entry-role.r-admin { background: var(--danger-light); color: var(--danger); }
.revision-entry-role.r-member { background: var(--info-light); color: var(--info); }
.revision-entry-role.r-reporter { background: var(--surface-hover); color: var(--text-secondary); }
.revision-entry-fields {
    display: grid;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.revision-entry-fields .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 500;
}
.revision-entry-fields .value {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--text);
}
.revisions-drawer-loading,
.revisions-drawer-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 1.5rem 0;
}

@media (max-width: 600px) {
    .revisions-drawer-panel {
        width: 100%;
    }
}

/* ---------------- Resolution notification prompt (SPEC §5.6) ---------------- */
.resolution-prompt {
    margin: 8px 0 12px;
    padding: 12px 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.resolution-prompt-title {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.resolution-prompt-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}

.resolution-prompt-option input[type=radio] {
    margin-top: 3px;
    flex-shrink: 0;
}

.resolution-prompt-option small {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 1px;
}

.resolution-prompt-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}