/* Application styles */

/* Navbar text contrast: color follows --navbar-fg, which is computed from
 * the WCAG luminance of --navbar-bg in BrandingConfig and swapped via
 * [data-bs-theme] to match the dark-mode bg flip. */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar-text,
.navbar .navbar-toggler {
    color: var(--navbar-fg);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .navbar-brand:hover {
    color: var(--navbar-fg);
    opacity: 0.85;
}
.navbar .navbar-toggler {
    border-color: var(--navbar-fg);
}
.navbar .navbar-toggler-icon {
    /* Recolor the stroked-bars SVG via background-image to match --navbar-fg.
     * Bootstrap's default icon is a fixed white SVG, so we override it here. */
    background-image: none;
    position: relative;
}
.navbar .navbar-toggler-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--navbar-fg);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center/100% 100% no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}


/* Status badges -- color is driven by --status-{ENUM} CSS custom properties
 * defined in base.html's inline <style> block, mapped via the [data-status]
 * attribute. Falls back to gray if a status has no configured color. */
.status-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 0.375rem;
    color: #fff;
    white-space: nowrap;
    background-color: var(--status-color, #6c757d);
}

.status-badge[data-status="NEWLY_SUBMITTED"] { --status-color: var(--status-NEWLY_SUBMITTED, #6c757d); }
.status-badge[data-status="STAFF_ASSIGNED"]  { --status-color: var(--status-STAFF_ASSIGNED, #6c757d); }
.status-badge[data-status="MEETING_SCHEDULED"] { --status-color: var(--status-MEETING_SCHEDULED, #6c757d); }
.status-badge[data-status="NEEDS_FOLLOW_UP"] { --status-color: var(--status-NEEDS_FOLLOW_UP, #6c757d); }
.status-badge[data-status="VERIFIED"]        { --status-color: var(--status-VERIFIED, #6c757d); }
.status-badge[data-status="NOT_ELIGIBLE"]    { --status-color: var(--status-NOT_ELIGIBLE, #6c757d); }

/* Dashboard stat cards */
.dashboard-stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.dashboard-stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

/* Status breakdown bar */
.status-bar {
    display: flex;
    border-radius: 0.375rem;
    overflow: hidden;
    height: 1.5rem;
}
.status-bar-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 2rem;
}

/* Clickable table rows */
.table-clickable tr[data-href] {
    cursor: pointer;
}

/* Quick action dropdown -- keep inside row */
.quick-actions .dropdown-toggle::after {
    display: none;
}

/* Requirements card row hover affordance */
.requirement-row {
    cursor: pointer;
}
.requirement-row:hover {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Transient highlight applied when the Resolve button focuses the
 * offending input. The class is added by JS for ~2s, then removed.
 */
.flag-resolve-target {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.25);
    transition: outline-color 0.4s ease, box-shadow 0.4s ease;
}

/* Copy button */
.copy-btn {
    cursor: pointer;
    opacity: 0.6;
}
.copy-btn:hover {
    opacity: 1;
}

/* Rankings */
.rankings-table .sub-rank {
    font-size: 0.75em;
    color: var(--bs-secondary-color);
    margin-left: 0.25em;
}
.rankings-table .winner-row {
    background-color: var(--bs-warning-bg-subtle);
}
.rankings-print-header {
    text-align: center;
    margin-bottom: 1em;
}
.rankings-print-header img {
    max-height: 40px;
}

/* Print styles -- shared. Always force light theme on print; dark backgrounds
 * waste ink and often render as black boxes. */
@media print {
    html,
    html[data-bs-theme="dark"] {
        color-scheme: light !important;
        --bs-body-bg: #fff !important;
        --bs-body-color: #000 !important;
        background-color: #fff !important;
        color: #000 !important;
    }
    .navbar,
    #toast-container,
    #toast-container-center,
    .filter-bar,
    .bulk-action-bar,
    .pagination-controls,
    .btn,
    .quick-actions,
    .no-print {
        display: none !important;
    }
    .container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }
    .nav-tabs {
        display: none !important;
    }
    .table {
        font-size: 0.85em;
    }
}

/* Print styles -- rankings (landscape via named page rule; Chrome/Edge only) */
@page rankings {
    size: landscape;
    margin: 0.5in;
}
#winners-section,
#others-section {
    page: rankings;
}
@media print {
    .rankings-print-header {
        display: block !important;
    }
    .rankings-table {
        font-size: 0.7em;
    }
    .rankings-table .sub-rank {
        font-size: 0.65em;
    }
    .rankings-table .winner-row {
        background-color: #fff3cd !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}

/* -- Navbar global search -- */
.nav-search-form #nav-search {
    min-width: 16rem;
}
/* The dropdown overlays the page below the navbar. The ul gets an opaque
 * theme-aware background and its own border + shadow so the navbar's color
 * never shows through the active row's translucent highlight (the original
 * bug looked like the navbar was "clipping" the first hover result). */
.nav-search-results {
    z-index: 1100;
    max-height: 24rem;
    overflow-y: auto;
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}
.nav-search-results .list-group-item.active {
    background-color: rgba(13, 110, 253, 0.12);
    border-color: var(--bs-border-color, #dee2e6);
    color: inherit;
}
@media (max-width: 767.98px) {
    .nav-search-form {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: inherit;
        padding: 0.5rem 1rem;
        z-index: 1040;
    }
    .nav-search-form #nav-search {
        min-width: 0;
        width: 100%;
    }
}

/* -- User list sortable columns -- */
#users-table th.sortable {
    cursor: pointer;
    user-select: none;
}
#users-table th.sortable:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}
#users-table .sort-indicator {
    display: inline-block;
    min-width: 0.75em;
}

/* -- Branded primary / secondary overrides --
 * Bootstrap 5.3 compiles .btn-primary, .btn-secondary, .page-link etc. with
 * hardcoded hex values, so setting --bs-primary alone only affects
 * .text-primary and .bg-primary. These rules rebind Bootstrap's per-component
 * --bs-btn-* variables (and override link/pagination/focus styles) to the
 * admin-configured --bs-primary / --bs-secondary injected in base.html.
 *
 * Dark-theme values switch automatically because base.html redeclares
 * --bs-primary / --bs-secondary under [data-bs-theme="dark"]. */

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}
.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.link-primary,
a.link-primary {
    color: var(--bs-primary) !important;
    text-decoration-color: var(--bs-primary) !important;
}
.link-secondary,
a.link-secondary {
    color: var(--bs-secondary) !important;
    text-decoration-color: var(--bs-secondary) !important;
}

.page-link {
    color: var(--bs-primary);
}
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Thicker, higher-contrast outlines for unchecked checkboxes/radios so they
 * read clearly on both light and dark surfaces. The :checked rule above
 * overrides this once the user toggles the control. */
.form-check-input {
    border-width: 2px;
    border-color: var(--bs-gray-600);
}
[data-bs-theme="dark"] .form-check-input {
    border-color: var(--bs-gray-400);
}

/* Sticky bottom save bar used by the Questionnaire tab. The bar lives inside
 * the tab pane so its visibility follows the active tab; the .d-none toggle
 * (driven by the Drafts onDirtyChange callback) is what hides it when no
 * fields have been touched. Anchored to the bottom-left so it doesn't span
 * the full viewport width. */
.quest-save-bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    background-color: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    border-top-right-radius: 0.5rem;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    z-index: 1030;
}

/* Centered toast container used by validation errors raised from inside a
 * modal (e.g. the Meeting scheduling modal). Lives above the modal so the
 * editor sees the message without scanning to the top-right toast region. */
#toast-container-center {
    z-index: 1090;
    pointer-events: none;
}
#toast-container-center .toast {
    pointer-events: auto;
    min-width: 22rem;
    font-size: 1rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
#toast-container-center .toast-body {
    padding: 1rem 1.25rem;
}
#toast-container-center .toast-body > i {
    font-size: 1.25rem;
}

/* -- Reusable layout helpers --
 * Replace inline style="max-width: ..." / style="max-height: ..." with
 * these classes so future width/height tweaks happen in one place. */
.input-w-xs   { max-width: 10rem; }
.input-w-sm   { max-width: 12rem; }

/* Revenue tab inline editor: the click-to-edit span and its sibling input
 * swap visibility on the same `<td>`. Pin a min-width on the span so its
 * intrinsic text width ("$1,234,567" vs "--") doesn't reflow neighboring
 * columns when the input is shown. Use inline-block so the min-width is
 * actually applied (default <span> is inline, which ignores it). */
.revenue-pretty {
    display: inline-block;
    min-width: 12rem;
}
.input-w-md   { max-width: 16rem; }
.input-w-lg   { max-width: 22rem; }
.input-w-xl   { max-width: 30rem; }
.preview-h-sm { max-height: 10rem; }
.preview-h-md { max-height: 60vh; }
.preview-img  { max-width: 100%; max-height: 12rem; object-fit: contain; }
.preview-img-lg { max-width: 100%; max-height: 60vh; object-fit: contain; }
.table-cell-truncate {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Visible at <md, hidden >=md. Used for filter labels that should remain
 * legible on phones but collapse to a dense row on desktop. */
.visually-hidden-md { /* default visible */ }
@media (min-width: 768px) {
    .visually-hidden-md {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}