/* Tenement — minimal custom styles (Bootstrap handles the rest) */

/* Typography — Inter for UI text, JetBrains Mono for code. Loaded from
   Google Fonts in base.html; fall back to Bootstrap's native stack if
   the webfonts don't arrive (offline dev, slow networks, CSP blocks). */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

code,
kbd,
pre,
samp,
.font-monospace {
    font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.thumbnail-card img {
    height: 200px;
    object-fit: contain;
    object-position: center;
    width: 100%;
    background-color: #f8f9fa;
}

.confidence-badge {
    font-size: 0.9rem;
}

/* NLS-91: smaller confidence pill for user-mode result cards. */
.thumbnail-card .confidence-badge-sm {
    font-size: 0.7rem;
    padding: 0.15em 0.45em;
}

/* NLS-91: smaller footer for user mode. */
.footer-user small {
    font-size: 0.7rem;
}

.thumbnail-card .user-card-row-meta,
.thumbnail-card .user-card-row-id {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumbnail-card .asset-filename-tag {
    font-size: 0.78rem;
    color: #212529;
    font-weight: 500;
}

.thumbnail-card .asset-id-label {
    font-size: 0.7rem;
    margin-right: 0.25rem;
}

.thumbnail-card .asset-id-tag {
    font-size: 0.7rem;
    color: #495057;
}

/* Per-asset feedback buttons stay compact on the second user-mode row
   so a confidence pill + thumbs trio fit comfortably in the card width. */
.thumbnail-card .user-card-row-feedback .feedback-control {
    gap: 0.2rem;
    margin-top: 0;
}

.nav-tenant-selector {
    min-width: 200px;
}

th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable::after {
    content: " \2195";
    opacity: 0.3;
}

th.sort-asc::after {
    content: " \2191";
    opacity: 0.7;
}

th.sort-desc::after {
    content: " \2193";
    opacity: 0.7;
}

.table-hover-highlight tbody tr > * {
    transition: background-color 0.15s ease-in-out;
}

/* Target cells so the tint beats Bootstrap's table-striped background,
   which is applied at the cell level via --bs-table-bg-state rather
   than on the row. */
.table-hover-highlight tbody tr:hover > * {
    --bs-table-bg-state: rgba(13, 110, 253, 0.12);
    background-color: rgba(13, 110, 253, 0.12);
    cursor: default;
}

/* Feedback controls */

.feedback-control {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.feedback-control .btn-feedback {
    padding: 0.125rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: all 0.15s ease;
}

.feedback-control .btn-feedback:hover {
    transform: scale(1.1);
}

.feedback-control .btn-feedback.active-pos {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.35);
    transform: scale(1.1);
}

.feedback-control .btn-feedback.active-partial {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.35);
    transform: scale(1.1);
}

.feedback-control .btn-feedback.active-neg {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.35);
    transform: scale(1.1);
}

/* Tag picker and note area — force onto their own line in flex layout */
.feedback-tag-picker,
.feedback-note-area {
    flex-basis: 100%;
}

.feedback-tag-picker {
    transition: opacity 0.2s ease, max-height 0.25s ease;
    overflow: hidden;
}

.feedback-tag-picker label {
    cursor: pointer;
    transition: all 0.12s ease;
    font-size: 0.78rem;
}

.feedback-tag-picker label.active {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

/* Note area — smooth reveal */
.feedback-note-area {
    transition: opacity 0.2s ease;
}

.feedback-note-input {
    font-size: 0.8rem;
    resize: vertical;
    min-height: 2.5rem;
}

.feedback-note-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}

/* Saving indicator */
.feedback-control.saving {
    opacity: 0.6;
    pointer-events: none;
}

.feedback-set-card {
    border-left: 3px solid #0d6efd;
}

/* NLS-91 phase 2: large binary thumbs for set-level rating. */
.feedback-thumb-btn {
    width: 60px;
    height: 60px;
    border: 2px solid #dee2e6;
    background: #fff;
    border-radius: 12px;
    font-size: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.feedback-thumb-btn:hover {
    transform: scale(1.06);
}

.feedback-thumb-up.selected {
    background: #198754;
    border-color: #198754;
    color: #fff;
    transform: scale(1.06);
}

.feedback-thumb-down.selected {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    transform: scale(1.06);
}

/* NLS-91 phase 2: search-form lock state. The hint banner and
   ``disabled`` attributes do most of the visual work; this class adds
   a subtle border so the locked state is unmistakable. */
.search-form-locked {
    border-color: #ffc107;
}

.feedback-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1080;
}

/* Describer output — plain preformatted text */
pre.describer-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

/* Role-aware navbar tint — signals which surface the operator is on. */
.navbar-staff {
    background-color: #e9ecef !important;
}

/* Navbar hover — subtle background tint scoped per color mode so the
   effect is visible against both the dark (user) and light (staff)
   navbars. Transitions the background only; color shifts are handled
   by Bootstrap's navbar-light / navbar-dark text utilities. */
.navbar .nav-link {
    border-radius: 0.25rem;
    transition: background-color 0.15s ease-in-out;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.12);
}

.navbar-light .nav-link:hover,
.navbar-light .nav-link:focus {
    background-color: rgba(0, 0, 0, 0.06);
}