/* ============================================
   Improvement Log / Feedback Inbox
   Re-skinned onto the Clarify suite (suite.css --s-* tokens). Monochrome
   ink chrome; colour appears ONLY for status (addressed = ok-green,
   won't-fix = danger-red, open = neutral). Every class name here is still
   the contract feedback.js renders against — only the look changed.
   ============================================ */

.feedback-page {
    /* The .s-page wrapper already centres + pads; keep this transparent so
       it reads as one suite page. */
    max-width: var(--s-page-max, 1160px);
    margin: 0 auto;
}

/* --- Filters bar --- */
.fb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--s-surface-2);
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-md);
    margin-bottom: 1.25rem;
}
.fb-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--s-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Scope the suite select down to filter size without touching the kit. */
.fb-filters .s-select {
    width: auto;
    min-width: 168px;
    height: 36px;
    padding: 0.35rem 2.1rem 0.35rem 0.7rem;
    font-size: 0.85rem;
    border-radius: var(--s-r-sm);
}
.fb-filter-showall-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: none;
    letter-spacing: 0;
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--s-text-2);
    cursor: pointer;
}
.fb-filter-showall-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--s-accent);
}

/* --- List --- */
.fb-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fb-item {
    border: 1px solid var(--s-border);
    border-radius: var(--s-r-lg);
    padding: 1rem 1.1rem;
    background: var(--s-surface);
    box-shadow: var(--s-shadow-xs);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    transition: background var(--s-t-fast), border-color var(--s-t-fast), box-shadow var(--s-t-fast);
}
.fb-item.not-feedback {
    background: var(--s-surface-2);
    opacity: 0.72;
}
.fb-item.fb-item-selected {
    background: var(--s-accent-soft);
    border-color: var(--s-accent-border);
}
.fb-item-checkbox-col {
    display: flex;
    align-items: flex-start;
    padding-top: 0.2rem;
}
.fb-row-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--s-accent);
}

/* --- Bulk action toolbar (appears when 1+ selected) ---
   The one allowed dark pill (matches the suite toast / edit-bubble). Its
   inner buttons are ghost-on-dark; the destructive one tints toward danger. */
.fb-bulk-toolbar {
    position: sticky;
    top: var(--s-topbar-h, 60px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background: #1c1c1e;
    color: #fff;
    border-radius: var(--s-r-md);
    margin-bottom: 0.75rem;
    box-shadow: var(--s-shadow-lg);
}
.fb-bulk-toolbar .btn-secondary,
.fb-bulk-toolbar .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 32px;
    padding: 0 0.75rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--s-r-sm);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background var(--s-t-fast), border-color var(--s-t-fast);
}
.fb-bulk-toolbar .btn-secondary:hover,
.fb-bulk-toolbar .btn-sm:hover {
    background: rgba(255, 255, 255, 0.22);
}
.fb-bulk-danger {
    background: rgba(217, 45, 32, 0.24) !important;
    border-color: rgba(217, 45, 32, 0.5) !important;
}
.fb-bulk-danger:hover {
    background: rgba(217, 45, 32, 0.42) !important;
}
.fb-bulk-selectall {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.fb-bulk-selectall input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #fff;
}
.fb-bulk-spacer {
    flex: 1;
}

/* --- "Select all visible" row above the list --- */
.fb-select-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.4rem 0.6rem;
    font-size: 0.8rem;
    color: var(--s-text-2);
}
.fb-select-all-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-weight: 500;
}
.fb-select-all-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--s-accent);
}
.fb-select-hint { color: var(--s-text-3); }
.fb-select-hint kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--s-border-strong);
    border-radius: 5px;
    background: var(--s-surface-3);
    font-family: var(--s-mono);
    font-size: 0.72rem;
    color: var(--s-text);
    margin: 0 0.1rem;
}

.fb-item-main {
    min-width: 0;
}
.fb-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
}
/* Badges follow the kit: feature/category are monochrome ink chips (chrome
   stays neutral); STATUS carries the only colour, and only because it
   communicates state (open / addressed / won't-fix). */
.fb-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--s-r-pill);
    background: var(--s-surface-3);
    color: var(--s-text-2);
    border: 1px solid var(--s-border);
    font-weight: 700;
}
.fb-badge.feature {
    background: var(--s-accent-soft);
    color: var(--s-accent);
    border-color: var(--s-accent-border);
}
.fb-badge.category {
    background: var(--s-surface-3);
    color: var(--s-text-2);
    border-color: var(--s-border);
}
/* Category sub-variants stay monochrome — these classify content, not state. */
.fb-badge.category.layout,
.fb-badge.category.copy,
.fb-badge.category.accuracy,
.fb-badge.category.style,
.fb-badge.category.compliance {
    background: var(--s-surface-3);
    color: var(--s-text-2);
    border-color: var(--s-border);
}
/* Status = the only stateful colour. */
.fb-badge.status.open        { background: var(--s-surface-3); color: var(--s-text-2); border-color: var(--s-border); }
.fb-badge.status.addressed   { background: var(--s-ok-soft); color: var(--s-ok); border-color: var(--s-ok-border); }
.fb-badge.status.wontfix     { background: var(--s-danger-soft); color: var(--s-danger); border-color: var(--s-danger-border); }
.fb-badge.is-not-feedback    { background: var(--s-warn-soft); color: var(--s-warn); border-color: var(--s-warn-border); }

.fb-message {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--s-text);
    margin: 0 0 0.4rem;
    font-family: var(--s-mono);
    background: var(--s-surface-2);
    border: 1px solid var(--s-border);
    padding: 0.6rem 0.75rem;
    border-radius: var(--s-r-sm);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.fb-interpretation {
    font-size: 0.85rem;
    color: var(--s-text-2);
    margin: 0;
    font-style: italic;
}

.fb-meta {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: var(--s-text-3);
}

.fb-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
}
.fb-item-actions select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.35rem 1.8rem 0.35rem 0.55rem;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-sm);
    background: var(--s-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2390909a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--s-text);
    cursor: pointer;
    transition: border-color var(--s-t-fast), box-shadow var(--s-t-fast);
}
.fb-item-actions select:focus {
    outline: none;
    border-color: var(--s-accent);
    box-shadow: 0 0 0 3px var(--s-focus);
}
.fb-item-actions button {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--s-border-strong);
    border-radius: var(--s-r-sm);
    background: var(--s-surface);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s-text);
    cursor: pointer;
    transition: background var(--s-t-fast), border-color var(--s-t-fast);
}
.fb-item-actions button:hover { background: var(--s-surface-2); border-color: var(--s-text-3); }

.fb-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--s-text-2);
    font-size: 0.9rem;
}

@media (max-width: 720px) {
    .fb-item {
        grid-template-columns: auto 1fr;
    }
    .fb-item-actions {
        flex-direction: row;
        grid-column: 1 / -1;
    }
    .fb-bulk-toolbar {
        flex-wrap: wrap;
    }
    .fb-bulk-spacer {
        flex-basis: 100%;
        height: 0;
    }
    .fb-filters .s-select { min-width: 0; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fb-item, .fb-bulk-toolbar .btn-secondary, .fb-item-actions select,
    .fb-item-actions button {
        transition: none;
    }
}