/*
 * Custom color palette (Bootstrap overrides)
 *
 * Navbar:    #731d9e  (deep purple — inline style on <nav>)
 * Suggestion:#731d9e  (same purple — .btn-suggestion, computed-aid pills)
 * Primary:   #2563eb  (blue)
 * Secondary: #6d6875  (warm slate)
 * Success:   #2d6a4f  (forest green)
 * Danger:    #b5303f  (dark rose)
 * Warning:   #ebb000  (warm gold)
 * Info:      #17a2b8  (teal)
 * Light:     #f8f9fa  (Bootstrap default)
 * Dark:      #2b2f33  (charcoal)
 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation-duration: 150ms;
}
::view-transition-new(root) {
    animation-duration: 150ms;
}

:root {
    /*
     * Declare support for both schemes so Android WebView (the Google app's
     * in-app browser, browser auto-dark, ...) treats us as owning our own dark
     * theme and backs off its algorithmic darkening. A `light only` declaration
     * is read as "no dark theme -> darken me" and is exactly what wrecks the
     * target renderer's colours on dark-themed Android phones.
     *
     * No real dark theme yet (ROADMAP: "well controlled dark mode"): we force the
     * used scheme back to light when dark is preferred, so the app still renders
     * light everywhere while WebView keeps its hands off. Swap the block below for
     * an actual dark theme when that lands.
     */
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }
}

:root, [data-bs-theme="light"] {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-secondary: #6d6875;
    --bs-secondary-rgb: 109, 104, 117;
    --bs-success: #2d6a4f;
    --bs-success-rgb: 45, 106, 79;
    --bs-danger: #b5303f;
    --bs-danger-rgb: 181, 48, 63;
    --bs-warning: #ebb000;
    --bs-warning-rgb: 235, 176, 0;
    --bs-info: #17a2b8;
    --bs-info-rgb: 23, 162, 184;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #2b2f33;
    --bs-dark-rgb: 43, 47, 51;
    --bs-link-color: #2563eb;
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: #1e50bc;
    --bs-link-hover-color-rgb: 30, 80, 188;
}

/* --- Primary #2563eb --- */
.btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #1e50bc;
    --bs-btn-hover-border-color: #1a4ab0;
    --bs-btn-active-bg: #1a4ab0;
    --bs-btn-active-border-color: #1744a4;
    --bs-btn-disabled-bg: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}
.btn-outline-primary {
    --bs-btn-color: #2563eb;
    --bs-btn-border-color: #2563eb;
    --bs-btn-hover-bg: #2563eb;
    --bs-btn-hover-border-color: #2563eb;
    --bs-btn-active-bg: #1e50bc;
    --bs-btn-active-border-color: #1e50bc;
    --bs-btn-disabled-color: #2563eb;
    --bs-btn-disabled-border-color: #2563eb;
}
.alert-primary {
    --bs-alert-color: #0f3780;
    --bs-alert-bg: #cfe2ff;
    --bs-alert-border-color: #b6d4fe;
    --bs-alert-link-color: #0f3780;
}
.text-bg-primary {
    background-color: #cfe2ff !important;
    color: #0f3780 !important;
}

/* --- Secondary #6d6875 --- */
.btn-secondary {
    --bs-btn-bg: #6d6875;
    --bs-btn-border-color: #6d6875;
    --bs-btn-hover-bg: #5c5963;
    --bs-btn-hover-border-color: #55515d;
    --bs-btn-active-bg: #55515d;
    --bs-btn-active-border-color: #4e4a56;
    --bs-btn-disabled-bg: #6d6875;
    --bs-btn-disabled-border-color: #6d6875;
}
.btn-outline-secondary {
    --bs-btn-color: #6d6875;
    --bs-btn-border-color: #6d6875;
    --bs-btn-hover-bg: #6d6875;
    --bs-btn-hover-border-color: #6d6875;
    --bs-btn-active-bg: #5c5963;
    --bs-btn-active-border-color: #5c5963;
    --bs-btn-disabled-color: #6d6875;
    --bs-btn-disabled-border-color: #6d6875;
}
.alert-secondary {
    --bs-alert-color: #41383e;
    --bs-alert-bg: #e2e3e5;
    --bs-alert-border-color: #d3d3d6;
    --bs-alert-link-color: #41383e;
}
.text-bg-secondary {
    background-color: #e2e3e5 !important;
    color: #41383e !important;
}

/* --- Success #2d6a4f --- */
.btn-success {
    --bs-btn-bg: #2d6a4f;
    --bs-btn-border-color: #2d6a4f;
    --bs-btn-hover-bg: #255843;
    --bs-btn-hover-border-color: #21503d;
    --bs-btn-active-bg: #21503d;
    --bs-btn-active-border-color: #1d4837;
    --bs-btn-disabled-bg: #2d6a4f;
    --bs-btn-disabled-border-color: #2d6a4f;
}
.btn-outline-success {
    --bs-btn-color: #2d6a4f;
    --bs-btn-border-color: #2d6a4f;
    --bs-btn-hover-bg: #2d6a4f;
    --bs-btn-hover-border-color: #2d6a4f;
    --bs-btn-active-bg: #255843;
    --bs-btn-active-border-color: #255843;
    --bs-btn-disabled-color: #2d6a4f;
    --bs-btn-disabled-border-color: #2d6a4f;
}
.alert-success {
    --bs-alert-color: #122a20;
    --bs-alert-bg: #c0e3d0;
    --bs-alert-border-color: #9bd5b5;
    --bs-alert-link-color: #122a20;
}
.text-bg-success {
    background-color: #c0e3d0 !important;
    color: #122a20 !important;
}

/* --- Danger #b5303f --- */
.btn-danger {
    --bs-btn-bg: #b5303f;
    --bs-btn-border-color: #b5303f;
    --bs-btn-hover-bg: #9a2936;
    --bs-btn-hover-border-color: #902632;
    --bs-btn-active-bg: #902632;
    --bs-btn-active-border-color: #86232e;
    --bs-btn-disabled-bg: #b5303f;
    --bs-btn-disabled-border-color: #b5303f;
}
.btn-outline-danger {
    --bs-btn-color: #b5303f;
    --bs-btn-border-color: #b5303f;
    --bs-btn-hover-bg: #b5303f;
    --bs-btn-hover-border-color: #b5303f;
    --bs-btn-active-bg: #9a2936;
    --bs-btn-active-border-color: #9a2936;
    --bs-btn-disabled-color: #b5303f;
    --bs-btn-disabled-border-color: #b5303f;
}
.alert-danger {
    --bs-alert-color: #6b1d26;
    --bs-alert-bg: #f3d5d9;
    --bs-alert-border-color: #ecc2c8;
    --bs-alert-link-color: #6b1d26;
}
.text-bg-danger {
    background-color: #f3d5d9 !important;
    color: #6b1d26 !important;
}

/* --- Warning #ebb000 --- */
.btn-warning {
    --bs-btn-bg: #ebb000;
    --bs-btn-border-color: #ebb000;
    --bs-btn-color: #000;
    --bs-btn-hover-bg: #c89600;
    --bs-btn-hover-border-color: #bc8d00;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #bc8d00;
    --bs-btn-active-border-color: #b08400;
    --bs-btn-active-color: #000;
    --bs-btn-disabled-bg: #ebb000;
    --bs-btn-disabled-border-color: #ebb000;
}
.btn-outline-warning {
    --bs-btn-color: #ebb000;
    --bs-btn-border-color: #ebb000;
    --bs-btn-hover-bg: #ebb000;
    --bs-btn-hover-border-color: #ebb000;
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #c89600;
    --bs-btn-active-border-color: #c89600;
    --bs-btn-active-color: #000;
    --bs-btn-disabled-color: #ebb000;
    --bs-btn-disabled-border-color: #ebb000;
}
.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fdf3cd;
    --bs-alert-border-color: #fbe9a2;
    --bs-alert-link-color: #664d03;
}
.text-bg-warning {
    background-color: #fdf3cd !important;
    color: #664d03 !important;
}

/* --- Info #17a2b8 --- */
.btn-info {
    --bs-btn-bg: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #138a9c;
    --bs-btn-hover-border-color: #117e8f;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #117e8f;
    --bs-btn-active-border-color: #0f7283;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #17a2b8;
    --bs-btn-disabled-border-color: #17a2b8;
}
.btn-outline-info {
    --bs-btn-color: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-bg: #17a2b8;
    --bs-btn-hover-border-color: #17a2b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #138a9c;
    --bs-btn-active-border-color: #138a9c;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #17a2b8;
    --bs-btn-disabled-border-color: #17a2b8;
}
.alert-info {
    --bs-alert-color: #055160;
    --bs-alert-bg: #cff4fc;
    --bs-alert-border-color: #b6effb;
    --bs-alert-link-color: #055160;
}
.text-bg-info {
    background-color: #cff4fc !important;
    color: #055160 !important;
}

/* --- Suggestion #731d9e (the navbar's deep purple — computed-aid pills:
   sight advice, "centre my group"; distinct from every target-face color) --- */
.btn-suggestion {
    --bs-btn-bg: #731d9e;
    --bs-btn-border-color: #731d9e;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #5f1883;
    --bs-btn-hover-border-color: #59167a;
    --bs-btn-active-bg: #59167a;
    --bs-btn-active-border-color: #521571;
    --bs-btn-active-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-disabled-bg: #731d9e;
    --bs-btn-disabled-border-color: #731d9e;
    --bs-btn-disabled-color: #fff;
}

/* --- Light #f8f9fa (Bootstrap default — too subtle on white, but unused) --- */
.btn-light {
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-bg: #e9ecef;
    --bs-btn-hover-border-color: #e2e6ea;
    --bs-btn-active-bg: #e2e6ea;
    --bs-btn-active-border-color: #dde0e3;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.btn-check:checked + .btn-light {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.btn-outline-light {
    --bs-btn-color: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: #e9ecef;
    --bs-btn-disabled-color: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}
.alert-light {
    --bs-alert-color: #636464;
    --bs-alert-bg: #fefefe;
    --bs-alert-border-color: #fdfdfe;
    --bs-alert-link-color: #636464;
}
.text-bg-light {
    background-color: #f8f9fa !important;
    color: #636464 !important;
}

/* --- Dark #2b2f33 --- */
.alert-dark {
    --bs-alert-color: #e9ecef;
    --bs-alert-bg: #2b2f33;
    --bs-alert-border-color: #3d4246;
    --bs-alert-link-color: #e9ecef;
}
.text-bg-dark {
    background-color: #2b2f33 !important;
    color: #e9ecef !important;
}

/* Close button: use dark icon on light toast/alert backgrounds */
.toast:not(.text-bg-dark) .btn-close-white,
.alert:not(.alert-dark) .btn-close-white {
    filter: none;
}

/* UX Icons: match Bootstrap Icons vertical alignment */
svg.ux-icon {
    vertical-align: -.125em;
}

/* Bigger icons in offcanvas titles */
.offcanvas-title svg.ux-icon {
    width: 1.5rem;
    height: 1.5rem;
}

html {
    overflow-y: scroll;
    touch-action: manipulation;
}

.cursor-pointer {
    cursor: pointer;
}

/* Smaller h1 on mobile screens */
@media (max-width: 575.98px) {
    h1 {
        font-size: 1.5rem !important;
    }
}

.form-label .badge {
    font-weight: normal !important;
}

abbr {
    text-decoration: none !important;
    cursor: text !important;
}

/* Fused badge group (like btn-group but for badges) */
.badge-group {
    display: inline-flex;
}

.badge-group > .badge {
    border-radius: 0;
}

.badge-group > .badge:first-child {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

.badge-group > .badge:last-child {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.badge-group > .badge:only-child {
    border-radius: var(--bs-border-radius);
}

/* Remove rounding from stacked progress bars */
.progress-stacked,
.progress-stacked > .progress,
.progress-stacked > .progress > .progress-bar {
    border-radius: 0;
}

/* Flex line break utility */
.flex-basis-100 {
    flex-basis: 100%;
}

/* Cursor pointer on mobile only (below lg breakpoint) */
@media (max-width: 991.98px) {
    .cursor-pointer-mobile {
        cursor: pointer;
    }
}



/* Force user dropdown to float at all screen sizes */
.navbar .dropdown {
    position: relative;
}
.navbar .dropdown-menu {
    position: absolute;
    background-color: #f0f4f8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    font-size: 1.05rem;
}

.navbar .dropdown-menu .dropdown-item {
    padding: 0.5rem 1.25rem;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
    background-color: #dce4ed;
    color: var(--bs-dropdown-link-color) !important;
}

.navbar .dropdown-menu .dropdown-item i {
    margin-right: 0.25rem;
}

/* Larger nav icons and spacing on desktop */
@media (min-width: 992px) {
    .navbar-nav .nav-link i.bi,
    .navbar-nav .nav-link svg.ux-icon {
        font-size: 1.5rem;
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: -.2em;
    }

    .navbar-nav .nav-item {
        margin-left: .4rem;
    }
}

/* Mobile nav link with proper colors */
.nav-link-mobile {
    color: var(--bs-navbar-color);
}

.nav-link-mobile:hover {
    color: var(--bs-navbar-hover-color);
}


@media (max-width: 991.98px) {
    .navbar-nav {
        gap: 0.5rem;
    }

    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.8);
        padding: 0.25rem 0.75rem;
        border: var(--bs-border-width) solid rgba(255, 255, 255, 0.1);
        border-radius: var(--bs-border-radius);
    }

    .navbar-nav .nav-link i,
    .navbar-nav .nav-link svg.ux-icon {
        font-size: 1.25rem;
        width: 1.25rem;
        height: 1.25rem;
        vertical-align: -.175em;
    }

    .navbar-nav .nav-link.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }
}

@media (max-width: 429.98px) {
    .navbar-logo-admin {
        height: 32px;
    }
}

@media (max-width: 429.98px) {
    .navbar-logo-full {
        height: 32px;
    }

    .navbar-brand {
        margin-right: 0 !important;
    }
}

@media (max-width: 399.98px) {
    .navbar-nav {
        gap: 0.35rem;
    }

    .navbar-nav .nav-link {
        padding: 0.25rem 0.6rem;
    }

}

@media (max-width: 359.98px) {
    .navbar-nav {
        gap: 0.25rem;
    }

    .navbar-nav .nav-link {
        padding: 0.25rem 0.5rem;
    }
}

/* Smaller navbar brand on mobile */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 0.9rem;
    }
}

/* Allow dropdowns to overflow table-responsive containers */
.table-responsive:has(.dropdown) {
    overflow: visible;
}

/* Compact tables on small screens (opt-in via .table-compact-mobile) */
@media (max-width: 991.98px) {
    .table-compact-mobile th,
    .table-compact-mobile td {
        padding: 0.3rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* Arrow-performance card: status column collapses based on the card's actual
   width (not the viewport), so Bootstrap's container snaps don't suddenly
   crush the progress bar. */
.arrow-perf-card {
    container-type: inline-size;
    container-name: arrowperf;
}
/* Progressive column collapse as the card narrows. Arrow # and dispersion
   (the bar) always stay visible — the bar is the strongest visual signal and
   the arrow # is the identity. Hidden columns surface in the detail block's
   summary line so the aggregate stats are never out of reach. */
@container arrowperf (max-width: 750px) {
    .arrow-perf-status-col {
        display: none !important;
    }
}
@container arrowperf (max-width: 600px) {
    .arrow-perf-count-col {
        display: none !important;
    }
}
@container arrowperf (max-width: 508px) {
    .arrow-perf-minmax-col {
        display: none !important;
    }
}
/* On very narrow cards, shrink the arrow # and avg pill so they don't dominate
   the row visually — rather than dropping the avg entirely. */
@container arrowperf (max-width: 360px) {
    .arrow-perf-arrow-col,
    .arrow-perf-avg-col {
        font-size: 0.78rem;
    }
}

/* Make disabled buttons dimmer */
.btn:disabled {
    opacity: 0.3;
}

/* Markdown content styling (used for rendered markdown in messages, etc.) */
.markdown-content h1, .message-content h1 { font-size: 1.5rem; font-weight: 700; }
.markdown-content h2, .message-content h2 { font-size: 1.35rem; font-weight: 700; }
.markdown-content h3, .message-content h3 { font-size: 1.2rem; font-weight: 600; }
.markdown-content h4, .message-content h4 { font-size: 1.1rem; font-weight: 600; }
.markdown-content h5, .message-content h5 { font-size: 1.05rem; font-weight: 600; }
.markdown-content h6, .message-content h6 { font-size: 1rem; font-weight: 600; }

.markdown-content table, .message-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.markdown-content table th, .message-content table th,
.markdown-content table td, .message-content table td {
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.markdown-content table th, .message-content table th {
    background-color: var(--bs-tertiary-bg);
    font-weight: 600;
}

.markdown-content table tr:nth-child(even), .message-content table tr:nth-child(even) {
    background-color: var(--bs-tertiary-bg);
}

.markdown-content iframe, .message-content iframe {
    max-width: 100% !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    border: 0;
    border-radius: var(--bs-border-radius);
}

.markdown-content img, .message-content img {
    max-width: 100%;
    max-height: 500px;
    height: auto;
    border-radius: var(--bs-border-radius);
    object-fit: contain;
}

.media-grid img {
    max-height: none;
}

.pswp img {
    max-height: none;
}

.markdown-content blockquote, .message-content blockquote {
    border-left: 3px solid var(--bs-border-color);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Markdown help modal: remove last row border */
#markdownHelpModal table tr:last-child td {
    border-bottom: 0;
}

/* Task list styling - remove bullets for checkbox items */
.markdown-content li:has(> input[type="checkbox"]),
.message-content li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5em;
}

/* Clickable checkboxes in markdown content */
.markdown-content input[type="checkbox"],
.message-content input[type="checkbox"] {
    cursor: pointer;
    pointer-events: auto;
    margin-right: 0.4em;
}

.markdown-content input[type="checkbox"].offline-disabled,
.message-content input[type="checkbox"].offline-disabled {
    cursor: not-allowed;
}

/* Equipment cards — keep header height stable when toggling between rendered
   name (h2) and inline-edit input, and between bi-star / bi-star-fill glyphs
   whose intrinsic metrics differ slightly. */
.arrow-set-card-header {
    /* form-control-sm height (1.5em + 0.5rem + 2px) + card-header's vertical padding
       (2 × 0.5rem). Keeps the row stable when the heading flips to an input. */
    min-height: calc(1.5em + 0.5rem + 2px + 1rem);
}
.arrow-set-default-star-slot {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}
.arrow-set-default-star-slot .arrow-set-default-star {
    line-height: 1;
}

/* Arrow status selector — min-width sized to fit the longest translated label
   ("Retraitée" in fr) plus the chevron. Same rule covers the equipment page rows
   and the scoring popover. */
.arrow-status-select {
    min-width: 7rem;
}

/* Fixed-width slot for the per-row identifier column. Wrapping both the static
   chip and the inline-edit input in the same-width container is what keeps the
   downstream status select from shifting when the user clicks to edit. Sized
   to fit "#99b" (worst-case 3-char identifier with the leading hash). */
.arrow-row-identifier-slot {
    flex: 0 0 2.75rem;
    width: 2.75rem;
}

/* Drop Bootstrap's invalid-state icon on the identifier input — the slot is
   too narrow to fit it. The red border alone signals the error. */
.arrow-row-identifier-input.is-invalid {
    background-image: none;
    padding-right: 0.25rem;
}

/* Arrow rows — auto-fill grid so cards reflow based on available width instead of
   fixed Bootstrap breakpoints. The 11rem floor matches the row's intrinsic content
   width (checkbox + #N + 6rem-min select + paddings), keeping the status selector
   from ever bleeding past the colored card background. */
.arrow-rows-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.5rem;
}

/* Offline notice — reusable inline message for disabled-offline controls */
.offline-notice {
    display: inline-block;
    font-size: 0.75rem;
    color: #856404;
    background: #fff8e1;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

.offline-notice::before {
    content: '\f61b'; /* Bootstrap Icons bi-wifi-off */
    font-family: 'bootstrap-icons';
    margin-right: 0.35rem;
}

/* ============================================
   Conversation - WhatsApp-style chat layout
   ============================================ */

.conversation-list {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 1rem;
}

.conversation-list .message-item {
    display: flex;
    gap: 0.75rem;
    max-width: 65%;
    margin-right: auto;
    margin-bottom: 0.5rem;
}

@media (max-width: 1199.98px) {
    .conversation-list .message-item {
        max-width: 75%;
    }
}

@media (max-width: 991.98px) {
    .conversation-list .message-item {
        max-width: 82%;
    }
}

@media (max-width: 767.98px) {
    .conversation-list .message-item {
        max-width: 92%;
    }
}

@media (max-width: 575.98px) {
    .conversation-list .message-item {
        max-width: 100%;
    }
}

.conversation-list .message-item:last-child {
    margin-bottom: 0;
}

/* Actions button in top right */
.conversation-list .message-actions {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.conversation-list .message-actions > a {
    color: rgba(0, 0, 0, 0.4);
    font-size: 1.1rem;
    padding: 0.25rem;
}

.conversation-list .message-actions > a:hover {
    color: rgba(0, 0, 0, 0.7);
}

.conversation-list .message-item .card {
    flex: 1;
    border: none;
    border-radius: 0 1rem 1rem 1rem;
    background: var(--note-color, #f0f0f0);
    position: relative;
}

.conversation-list .message-item .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid var(--note-color, #f0f0f0);
    border-left: 8px solid transparent;
}

/* Current user: right-aligned with green background */
.conversation-list .message-item[data-own="true"] {
    margin-left: auto;
    margin-right: 0;
    flex-direction: row-reverse;
}

.conversation-list .message-item[data-own="true"] .card {
    background: #dcf8c6;
    border-radius: 1rem 0 1rem 1rem;
}

.conversation-list .message-item[data-own="true"] .card::before {
    left: auto;
    right: -8px;
    border-top-color: #dcf8c6;
    border-left: none;
    border-right: 8px solid transparent;
}

/* Author name */
.conversation-list .message-author {
    font-weight: 600;
    color: var(--author-color, #075e54);
}

.conversation-list .message-item[data-own="true"] .message-author {
    display: none;
}

/* Recipient name (for messages sent to others) */
.conversation-list .message-recipient {
    font-weight: 600;
    color: var(--author-color, #075e54);
    display: block;
}

/* Message content wrapper - needs relative positioning for timestamp */
.conversation-list .message-item .card-body {
    position: relative;
    padding: 0.5rem 0.75rem 1rem 0.75rem;
}

/* Message content - leave space for dropdown menu icon */
.conversation-list .message-content {
    font-size: 0.875rem;
    padding-right: 1.5rem;
}

/* Metadata row: session info at bottom left */
.conversation-list .message-meta {
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 0.25rem;
}

/* Context info */
.conversation-list .message-context-info {
    opacity: 0.85;
    display: block;
}

/* Timestamp floats bottom-right */
.conversation-list .message-timestamp {
    position: absolute;
    bottom: 0.25rem;
    right: 0.5rem;
}

/* Date separator (WhatsApp-style) */
.conversation-list .date-separator {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.conversation-list .date-separator span {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    text-transform: capitalize;
}

/* User color palette */
.conversation-list .message-item[data-color="1"] { --note-color: #fff3e0; --author-color: #e65100; }
.conversation-list .message-item[data-color="2"] { --note-color: #e3f2fd; --author-color: #1565c0; }
.conversation-list .message-item[data-color="3"] { --note-color: #f3e5f5; --author-color: #7b1fa2; }
.conversation-list .message-item[data-color="4"] { --note-color: #e8f5e9; --author-color: #2e7d32; }
.conversation-list .message-item[data-color="5"] { --note-color: #fce4ec; --author-color: #c2185b; }
.conversation-list .message-item[data-color="6"] { --note-color: #e0f7fa; --author-color: #00838f; }
.conversation-list .message-item[data-color="7"] { --note-color: #fff8e1; --author-color: #ff8f00; }
.conversation-list .message-item[data-color="8"] { --note-color: #ede7f6; --author-color: #512da8; }

/* Video player with panzoom support */
.panzoom-container {
    overflow: hidden;
    touch-action: none;
}

.panzoom-container video.panzoom-enabled {
    touch-action: none;
}

/* Media grid for consecutive images/videos */
.media-grid {
    margin: 0.5rem 0;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    background: #fff;
    overflow: hidden;
}

.media-grid-row {
    display: flex;
}

.media-grid-row:not(:last-child) {
    border-bottom: 1px solid #dee2e6;
}

.media-grid-cell {
    flex: 1;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-grid-cell:first-child:not(:last-child) {
    border-right: 1px solid #dee2e6;
}

.media-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.media-grid-cell .plyr {
    width: 100%;
    height: 100%;
}

.media-grid-cell .plyr video {
    object-fit: contain;
}

.media-grid-cell-empty {
    background: repeating-linear-gradient(
        -45deg,
        #f8f9fa,
        #f8f9fa 10px,
        #fff 10px,
        #fff 20px
    );
}

/* Dark variant for video-only grids */
.media-grid-dark {
    background: #000;
}

.media-grid-dark .media-grid-cell {
    background: #000;
}

.media-grid-dark .media-grid-cell-empty {
    background: repeating-linear-gradient(
        -45deg,
        #1a1a1a,
        #1a1a1a 3px,
        #000 3px,
        #000 20px
    );
}

/* Plyr video player max height */
.plyr--max-height {
    max-height: 500px !important;
}

.plyr--max-height video {
    max-height: 500px !important;
    object-fit: contain;
}

/* PhotoSwipe video container */
.pswp-video-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pswp-video-container .plyr {
    width: 90vw;
    max-width: 1200px;
    max-height: 80vh;
}

.pswp-video-container .plyr video {
    max-height: 80vh;
}

/* JSON syntax highlighting */
.json-key {
    color: #881391;
}

.json-string {
    color: #1a1aa6;
}

.json-number {
    color: #1c00cf;
}

.json-boolean {
    color: #0d47a1;
    font-weight: 600;
}

/* Remove blue background from Bootstrap accordion buttons */
.accordion-button:focus {
    box-shadow: none;
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: inherit;
}

/* Search highlighting */
mark.search-highlight {
    background-color: #fff59d;
    padding: 0 0.2em;
    border-radius: 2px;
}

/* Date separator for scorings list */
.list-group .date-separator {
    text-align: center;
    margin: 1rem 0;
    position: relative;
}

.list-group .date-separator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #dee2e6;
}

.list-group .date-separator span {
    background-color: #fff;
    padding: 0 1rem;
    position: relative;
    color: #6c757d;
    font-size: 0.875rem;
    text-transform: capitalize;
}

/* Inline radio buttons for form fields */
.inline-radio-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.inline-radio-group .form-check {
    margin-bottom: 0;
}

/* Scorecard table: fixed layout fills container, columns share space equally */
.scorecard-table {
    table-layout: fixed;
    width: 100%;
    max-width: 850px;
}

/* Responsive scorecard column hiding (class-based, applied by responsive_scorecard_controller) */
.scorecard-table.hide-col-end .col-end { display: none !important; }
.scorecard-table.hide-col-end .show-when-end-hidden { display: inline !important; }
.scorecard-table.hide-col-tenx .col-tenx,
.scorecard-table.hide-col-tenx .col-x { display: none !important; }
.scorecard-table.hide-col-cumulative .col-cumulative { display: none !important; }
.scorecard-table.hide-col-sum .col-sum:not(.col-end-total) { display: none !important; }

/* Mini-scorecard in scoring list */
.mini-scorecard .badge {
    font-size: 0.7rem;
    padding: 0.2em 0.4em;
    font-weight: normal;
}

/* Incomplete scoring indicator */
.scoring-incomplete {
    border-left: 3px solid var(--bs-warning) !important;
}

/* Custom text color for sun icon (outdoors) */
.text-orange {
    color: #e67e22;
}

/* TomSelect placeholder styling for single-select */
.ts-wrapper.single .ts-control .item[data-value=""] {
    color: var(--bs-secondary);
}

/* TomSelect: show placeholder on mobile where controlInput is null (no <input> to carry native placeholder) */
.ts-wrapper.multi:not(.has-items) .ts-control[data-placeholder]::before {
    content: attr(data-placeholder);
    color: var(--bs-secondary);
}

/* Stats filter labels: uniform width for horizontal alignment */
.stats-filter-label {
    flex-shrink: 0;
    width: 120px;
}

/* Stats filters: make TomSelect fill available width */
.stats-filter-label ~ .ts-wrapper,
.setup-filter-wrapper .ts-wrapper {
    flex-grow: 1;
}

/* Prevent setup filter TomSelect from resizing on open */
.setup-filter-wrapper .ts-wrapper.single .ts-control > input {
    width: 0 !important;
    min-width: 0 !important;
}

/* Score inputs: custom validation styling without layout shift */
.score-input-wrapper input.score-saved {
    border-color: var(--bs-success);
}

.score-input-wrapper input.score-error {
    border-color: var(--bs-danger);
}

/* Score inputs: show checkmark icon inside the input */
.score-input-wrapper {
    position: relative;
    display: inline-block;
}

.score-input-wrapper input {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.score-input-wrapper .score-check {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-success);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    font-size: 0.875rem;
}

.score-input-wrapper .score-check.visible {
    opacity: 1;
}

/* Hide number input spinners */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Arrow scale slider: darker track for visibility on light background */
.arrow-scale-slider::-webkit-slider-runnable-track { background-color: #ced4da; border-radius: 4px; }
.arrow-scale-slider::-moz-range-track { background-color: #ced4da; border-radius: 4px; }

/* Target wrapper: cap width at 75% on desktop for better visual balance */
@media (min-width: 992px) {
    .target-wrapper {
        max-width: 75% !important;
    }
}

/* Scorecard preview: compact version for form previews */
.scorecard-preview {
    font-size: 0.65rem;
    line-height: 1.4;
}
.scorecard-preview .badge {
    font-size: 0.55rem;
}
.scorecard-preview td,
.scorecard-preview th {
    padding: 0 !important;
}
.scorecard-preview tfoot td.text-end {
    padding-right: 0.25rem !important;
}
.scorecard-preview tfoot .fst-italic {
    font-size: 0.55rem;
}

/* Flatpickr: dot indicator for days with activity */
.flatpickr-day.has-activity::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--bs-primary);
}

.flatpickr-day.has-activity.selected::after,
.flatpickr-day.has-activity.today::after {
    background-color: #fff;
}

/* Flatpickr: date range presets panel */

/* Desktop: side panel to the right */
@media (min-width: 576px) {
    .flatpickr-calendar.has-presets {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .flatpickr-presets {
        position: absolute;
        left: 100%;
        top: -1px;
        bottom: -1px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 12px 16px;
        gap: 8px;
        background: #fff;
        border-radius: 0 5px 5px 0;
        box-shadow: 4px 2px 6px -1px rgba(0, 0, 0, 0.1);
        border: 1px solid #e6e6e6;
    }
}

/* Mobile: panel below the calendar */
@media (max-width: 575.98px) {
    .flatpickr-calendar.has-presets {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .flatpickr-presets {
        position: absolute;
        top: 100%;
        left: -1px;
        right: -1px;
        display: flex;
        flex-direction: column;
        padding: 8px;
        gap: 2px;
        background: #fff;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border: 1px solid #e6e6e6;
    }
}

.flatpickr-presets button {
    display: block;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
    color: #484848;
}

.flatpickr-presets button:hover {
    background: #f0f0f0;
}

/* Force the presets panel below the calendar regardless of viewport.
   Used by narrow containers (e.g. the arrow-counter offcanvas) where
   the desktop side-panel layout would overflow horizontally. */
.flatpickr-calendar.has-presets.has-presets-below {
    border-right: 1px solid #e6e6e6;
    border-top-right-radius: 5px;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.flatpickr-calendar.has-presets.has-presets-below .flatpickr-presets {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    bottom: auto;
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
    background: #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid #e6e6e6;
}


/* Arrow stats summary cards: compact on mobile */
@media (max-width: 429.98px) {
    .arrow-stats-cards > div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .arrow-stats-cards > div > div {
        padding: 0.4rem 1rem !important;
        border-radius: 0 !important;
    }

    .arrow-stats-cards > div:first-child > div {
        border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    }

    .arrow-stats-cards > div:last-child > div {
        border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    }

    .arrow-stats-cards .fs-2 {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 399.98px) {
    .arrow-stats-archer-select {
        flex-direction: column;
        align-items: stretch !important;
    }

    .arrow-stats-archer-select label {
        margin-bottom: 0.25rem;
    }

    /* Stack each filter's label above its field on very small screens —
       the fixed 120px label + field side-by-side gets too cramped. */
    .d-flex:has(> .stats-filter-label) {
        flex-direction: column;
        align-items: stretch !important;
    }

    .stats-filter-label {
        width: auto;
        margin-bottom: 0.25rem;
    }

    .stats-page-back-btn {
        display: none !important;
    }
}

/* Arrow stats calendar */

.arrow-calendar {
    font-size: 0.8rem;
}

.arrow-calendar th {
    font-size: 0.75rem;
    font-weight: normal;
    white-space: nowrap;
}

.arrow-calendar-month-col {
    width: 1.5rem;
}

.arrow-calendar-month-cell {
    background-color: var(--bs-tertiary-bg);
}

.arrow-calendar-month-name {
    font-size: 0.7rem;
    text-transform: capitalize;
    line-height: 1.2;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-orientation: mixed;
    white-space: nowrap;
}

.arrow-calendar-week-col {
    width: 2rem;
}


.arrow-calendar-day {
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s;
}

.arrow-calendar-day:hover {
    background-color: var(--bs-tertiary-bg);
}

.arrow-calendar-day-active {
    background-color: var(--bs-primary-bg-subtle) !important;
}

.arrow-calendar-count {
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
}

.arrow-calendar-dots {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

.arrow-calendar-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.arrow-calendar-day-empty {
    cursor: default;
}

.arrow-calendar td.arrow-calendar-day-out-of-range {
    --bs-table-bg: var(--bs-tertiary-bg);
}

.arrow-calendar-popover .popover-body {
    padding: 0.5rem 0.75rem;
}

.arrow-calendar-popover .arrow-calendar-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .arrow-calendar {
        font-size: 0.7rem;
    }

    .arrow-calendar-count {
        font-size: 0.7rem;
    }

    .arrow-calendar-dot {
        width: 5px;
        height: 5px;
    }

    .arrow-calendar-month-name {
        font-size: 0.6rem;
    }
}

@media (max-width: 479.98px) {
    .arrow-calendar-week-col {
        display: none;
    }
}

@media (max-width: 449.98px) {
    .arrow-calendar-delta-col {
        display: none;
    }
}

@media (max-width: 399.98px) {
    .arrow-calendar-total-col {
        display: none;
    }
}


/* Collapse menu blending: trigger button joins with panel items */
.btn-group-vertical > .btn[aria-expanded="true"] {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 0;
}

.btn-group-vertical + .collapse.show > .btn-group-vertical > .btn-check:first-child + .btn,
.btn-group-vertical + .collapse.show > .btn-group-vertical > .btn:first-child,
.btn-group-vertical + .collapsing > .btn-group-vertical > .btn-check:first-child + .btn,
.btn-group-vertical + .collapsing > .btn-group-vertical > .btn:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Prevent content shift when Bootstrap modal opens */
body.modal-open {
    padding-right: 0 !important;
    overflow: auto !important;
}

/* ============================================
   Tabata Timer
   ============================================ */

.timer-background {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    background-color: #333;
}

.timer-content {
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    user-select: none;
}

.timer-phase-name {
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.timer-countdown {
    font-size: 14rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.timer-info {
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.9;
}

.timer-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 575.98px) {
    .timer-controls .btn-lg {
        padding: 0.5rem 1.25rem;
    }

    .timer-controls-secondary {
        width: 100%;
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
}

.timer-elapsed {
    margin-top: 1.5rem;
    font-size: 1rem;
    opacity: 0.6;
}

/* Flicker animation for last 3 seconds — black overlay instead of opacity to avoid showing content behind */
.timer-flicker::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: black;
    animation: timer-flicker 0.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes timer-flicker {
    0% { opacity: 0; }
    100% { opacity: 0.45; }
}

/* Responsive: smaller countdown on mobile */
@media (max-width: 575.98px) {
    .timer-countdown {
        font-size: 8rem;
    }

    .timer-phase-name {
        font-size: 2rem;
    }

    .timer-info {
        font-size: 1.2rem;
    }
}

/* Done screen */
.timer-done-icon {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.timer-done-elapsed {
    font-size: 2rem;
    font-weight: 500;
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* Floating badge (minimized timer) */
.timer-badge {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1040;
    border-radius: 0.5rem;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    cursor: grab;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    user-select: none;
    touch-action: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    background-color: #333;
}

.timer-badge-countdown {
    font-size: 2.5rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.timer-badge-phase {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.timer-badge-info {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Badge needs position context for the expand button and flicker overlay */
.timer-badge {
    position: fixed;
    overflow: hidden;
}

.timer-badge-expand {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background: none;
    border: none;
    color: #fff;
    opacity: 0.6;
    font-size: 1.25rem;
    padding: 0.5rem;
    line-height: 1;
    cursor: pointer;
}

.timer-badge-expand:hover {
    opacity: 1;
}

/* Phase colors — must come after .timer-background and .timer-badge to override their defaults */
.timer-bg-danger { background-color: var(--bs-danger); }
.timer-bg-success { background-color: var(--bs-success); }
.timer-bg-warning { background-color: var(--bs-warning); }
.timer-bg-primary { background-color: var(--bs-primary); }
.timer-bg-info { background-color: var(--bs-info); }
.timer-bg-secondary { background-color: var(--bs-secondary); }



/* Changelog: filter bar */
.changelog-filter { margin-top: 0.5rem; }

/* Changelog: tighten list spacing from CommonMark paragraph wrapping */
.changelog-content li > p { margin-bottom: 0; }
.changelog-content > ul > li + li { margin-top: 0.5rem; }
.changelog-content h2 { font-size: 1.5rem; }
.changelog-content hr { margin: 1.75rem 0; }
.changelog-content hr:first-child { margin-top: 0; }
.changelog-content { overflow-wrap: break-word; }
.changelog-content > ul { padding-left: 0; list-style: none; }
.changelog-content ul ul { padding-left: 1rem; }

/* Color picker dots (phase editor) */
.color-picker-trigger {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    padding: 0;
}

.color-picker-menu {
    gap: 0.4rem;
    padding: 0.5rem;
    min-width: auto;
}

.color-picker-menu.show {
    display: flex;
}

.color-picker-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.color-picker-dot.active {
    border-color: #333;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Phase drag handle */
.phase-drag-handle {
    cursor: grab;
    color: var(--bs-secondary);
    display: flex;
    align-items: center;
}

.phase-row.sortable-ghost {
    opacity: 0.5;
}

/* Phase row styling in config */
.phase-row select,
.phase-row input {
    font-size: 0.875rem;
}

.phase-row select[data-field="unit"] {
    padding-left: 0.4rem !important;
    padding-right: 1.25rem !important;
    background-position: right 0.15rem center !important;
    background-size: 12px !important;
}

@media (max-width: 575.98px) {
    .phase-row {
        flex-wrap: wrap;
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem !important;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .phase-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0.5rem !important;
    }

    .phase-row input[data-field="name"] {
        max-width: none !important;
        flex: 1;
    }
}

.notification-prefs-table tbody tr:not(.table-light):hover > * {
    background-color: var(--bs-table-hover-bg);
}

/* --- Score comparison --- */

.sc-highlights {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bs-warning-bg-subtle);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}

.sc-highlight-rank {
    text-align: center;
    min-width: 4.5rem;
    flex-shrink: 0;
}

.sc-rank-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.sc-rank-suffix {
    font-size: 0.85rem;
    font-weight: 600;
}

.sc-rank-total {
    font-size: 0.75rem;
    color: var(--bs-secondary);
}

.sc-highlight-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.sc-highlight-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sc-table-highlight > td {
    background-color: var(--bs-warning-bg-subtle) !important;
}

th.sc-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sc-sortable:hover {
    background-color: var(--bs-light);
}

.sc-sort-icon {
    font-size: 0.75em;
    opacity: 0.25;
}

th.sc-sort-active .sc-sort-icon {
    opacity: 1;
}

.sc-rank-badge {
    display: inline-block;
    min-width: 1.5em;
    padding: 0.05em 0.3em;
    font-size: 0.7em;
    font-weight: 700;
    border-radius: 0.25rem;
    text-align: center;
    vertical-align: middle;
}

.sc-rank-1 { background: #ffd700; color: #000; }
.sc-rank-2 { background: #c0c0c0; color: #000; }
.sc-rank-3 { background: #cd7f32; color: #fff; }
.sc-rank-other { background: var(--bs-light); color: var(--bs-secondary); }

.sc-filter-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.sc-filter-label {
    font-size: 0.85rem;
    color: var(--bs-secondary);
    margin-bottom: 0;
    white-space: nowrap;
}

.sc-card {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--bs-body-bg);
}

.sc-card.sc-card-highlight {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

.sc-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.sc-card-stat {
    text-align: center;
    padding: 0.2rem 0;
    background: var(--bs-light);
    border-radius: 0.25rem;
}

.sc-stat-value { font-weight: 600; }

.sc-stat-label {
    font-size: 0.65rem;
    color: var(--bs-secondary);
    text-transform: uppercase;
}

.sc-desktop { display: block; }
.sc-mobile { display: none; }

@media (max-width: 767.98px) {
    .sc-desktop { display: none; }
    .sc-mobile { display: block; }

    .sc-highlights {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .sc-highlight-rank { min-width: 3.5rem; }
    .sc-rank-number { font-size: 1.5rem; }
    .sc-rank-suffix { font-size: 0.75rem; }

    .sc-highlight-details {
        font-size: 0.78rem;
        gap: 0.2rem 0.5rem;
    }

    .sc-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .sc-filter-bar .d-flex { width: 100%; }
    .sc-filter-bar .form-select { flex: 1; }
    .sc-filter-bar .ms-auto { margin-left: 0 !important; }
}

/* Admin dashboard cards */
.hover-shadow {
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(115, 29, 158, 0.25);
}
.hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(115, 29, 158, 0.35) !important;
}
@media (max-width: 767.98px) {
    .hover-shadow .card-body {
        padding: 1.5rem 1rem;
    }
    .hover-shadow .card-body svg {
        width: 36px;
        height: 36px;
    }
    .hover-shadow .card-body .mb-4 {
        margin-bottom: 0.75rem !important;
    }
    .hover-shadow .card-title {
        font-size: 1rem;
    }
    .hover-shadow .card-text {
        font-size: 0.85rem;
    }
}

/* Front dashboard grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.dashboard-grid > div > a,
.dashboard-grid > div > button {
    display: block;
    height: 100%;
}
.dashboard-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(115, 29, 158, 0.25);
}
.dashboard-card:hover {
    box-shadow: 0 .5rem 1rem rgba(115, 29, 158, 0.35) !important;
}
@media (max-width: 767.98px) {
    .dashboard-card .card-body svg,
    .dashboard-card .card-body .ux-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .dashboard-card .card-title {
        font-size: 1rem;
    }
    .dashboard-card .card-text {
        font-size: 0.85rem;
    }
}

/* ============================================
   SIGHT-ADVICE PILL (the "adjust your sight?" nudge in the scoring controls)
   ============================================ */
/* The arrow band above the pill supplies the top gap via its own mb-3; when the
   band is hidden the pill must supply its own so it doesn't abut the target. */
[data-controller="arrow-band"].d-none + .sight-advice-pill {
    margin-top: 1rem;
}

/* ============================================
   VOICE COMMANDS CARD (heard/parsed log + recording indicator)
   ============================================ */
/* Chevron in a card-header collapse toggle: points right when the body is
   collapsed, rotates down when expanded. Shared by the voice-commands and
   sight-movements cards. */
.card-collapse-chevron {
    transition: transform 0.15s ease;
}
[aria-expanded="true"] > .card-collapse-chevron {
    transform: rotate(90deg);
}
/* The whole header of a collapsible card is a click surface (bare clicks toggle
   the body; nested controls act on their own — see collapse-header.js). */
.card-collapse-header {
    cursor: pointer;
}

/* WhatsApp-style voice memo button: a lock track floats above the button while
   held; sliding up onto it latches hands-free recording. */
.voice-lock-track {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.4rem);
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    border-radius: 999px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
    color: var(--bs-secondary-color);
}
.voice-lock-chevron {
    animation: voice-lock-bob 1s infinite;
}
@keyframes voice-lock-bob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(-3px); opacity: 1; }
}
.voice-lock-track--armed {
    color: #fff;
    background: var(--bs-danger);
    border-color: var(--bs-danger);
}
.voice-lock-track--armed .voice-lock-chevron {
    animation: none;
}

/* The live partial transcript reserves no space when idle — collapse it so it
   doesn't leave a gap above the empty-log placeholder. */
.voice-interim:empty {
    display: none;
}

.voice-log {
    max-height: 15rem;
    overflow-y: auto;
}
.voice-log-entry {
    padding: 0.35rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed var(--bs-border-color);
}
.voice-log-entry:last-child {
    border-bottom: none;
}
.voice-log-entry .badge {
    margin-right: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: 1px;
}
.voice-log-transcript {
    color: var(--bs-secondary-color);
    font-style: italic;
}
.voice-log-detail {
    color: var(--bs-body-color);
    margin-top: 0.15rem;
}

/* ============================================
   SIGHT-MOVEMENT ENTRY MODAL (knobs, readouts, live target preview)
   ============================================ */
/* Target preview beside the one-tap centre pill; collapses (no stray margin)
   when the WA gate hides both. */
.sight-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.sight-hero:has(> :not(.d-none)) {
    margin-bottom: 0.75rem;
}
/* The app's "why" when no correction is due — or when it's already applied: a
   compact purple alert, the non-clickable twin of the purple .btn-suggestion
   pill above it (same #731d9e computed-aid hue). */
.sight-advice-reason {
    display: inline-block;
    max-width: 100%;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgba(115, 29, 158, 0.1);
    border: 1px solid rgba(115, 29, 158, 0.35);
    color: #731d9e;
}

.sight-knobs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.sight-knobwrap {
    text-align: center;
}

.sight-knob {
    /* A dark physical dial, independent of the page light/dark theme. */
    --sight-knob-rim: #14161a;
    --sight-knob-face: #33373c;
    --sight-knob-detent: #6b7178;
    width: 8rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.sight-knob:active {
    cursor: grabbing;
}
.sight-knob:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
    border-radius: 50%;
}

/* ◀▶ / ▲▼ sit below the knob, bottom-most where the thumb already is. */
.sight-knob-mini {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}
.sight-knob-mini .btn {
    width: 2.5rem;
    padding: 0.125rem 0;
    line-height: 1;
}

/* Fixed height so a two-line magnitude ("1 turn + 4 clicks") never changes the
   box height and shoves the knob below it. */
.sight-readout {
    height: 3.75rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}
.sight-readout-value {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.15;
}
.sight-readout-value [aria-hidden="true"] {
    color: var(--bs-primary);
}
.sight-readout-raw {
    font-size: 0.7rem;
    color: var(--bs-secondary);
    margin-top: 0.1rem;
    min-height: 0.9rem;
}
.sight-readout.is-zero .sight-readout-value {
    color: var(--bs-secondary);
    font-weight: 600;
}

.sight-target-preview {
    width: 14rem;
    max-width: 100%;
    /* The target is square; reserve that height up front (the box is un-hidden
       before the modal fades in) so the async renderer fills the reserved square
       instead of growing the centred dialog and jolting everything vertically. */
    aspect-ratio: 1;
}
.sight-target-preview svg {
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 0 1px var(--bs-border-color);
}

/* =========================================================================
   "What if?" card (scoring detail) — assets/controllers/scoring_what_if_controller.js
   ========================================================================= */
.what-if-card {
    /* Fixed hues, not theme tokens, so they stay legible on any ring colour and
       in both themes: the band/curve blue, and the ring gain/loss strokes. */
    --what-if-band: #2a78d6;
    --what-if-curve: #2a78d6;
    --what-if-gain: #0ca30c;
    --what-if-loss: #d03b3b;
}

/* Column heading — the "Et si..." question continued, atop each counterfactual. */
.what-if-section-head {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Divider between the two counterfactual columns — vertical while they sit
   side by side (≥lg), horizontal once they stack one under the other. */
@media (min-width: 992px) {
    .what-if-col-divider {
        border-left: 1px solid var(--bs-border-color);
    }
}
@media (max-width: 991.98px) {
    .what-if-col-divider {
        border-top: 1px solid var(--bs-border-color);
        padding-top: 1rem;
    }
}

/* Sliders (epsilon + shift) share one look. */
.what-if-slider {
    width: 100%;
    accent-color: var(--bs-primary);
}
.what-if-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.66rem;
    color: var(--bs-secondary-color);
    margin-top: -2px;
    margin-bottom: 16px;
}

/* Column intro question, above each slider. Its height is pinned to two lines
   so the group's live-updating text can't reflow (1↔2 lines) and jog everything
   below it as the slider moves. */
.what-if-intro {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    min-height: 2.8em;
    color: var(--bs-body-color);
    margin: 0 0 8px;
}
/* The line-cutter counts (slider-dependent), under the histogram. Framed as
   potential and coloured like the target: arrows that can still catch a higher
   ring read green, arrows that can still drop their own read red. */
.what-if-cutters-summary {
    font-size: 0.8rem;
    color: var(--bs-body-color);
    margin: 18px 0 0;
}
.what-if-cutters-summary .gain {
    color: var(--what-if-gain);
    font-weight: 600;
}
.what-if-cutters-summary .loss {
    color: var(--what-if-loss);
    font-weight: 600;
}
/* The re-roll button + one draw's total/delta, as a headline over the histogram. */
.what-if-example-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.what-if-example {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.what-if-example .label {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}
.what-if-example .value {
    font-size: 1.4rem;
    font-weight: 650;
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Distribution histogram — capped so it never upscales past its viewBox (which
   would balloon the SVG text); it fills narrower columns and centres in wider. */
.what-if-histogram svg {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Mini target — the real renderer, auto-zoomed to the group. Dots slide to their
   shifted position with a short transition. */
.what-if-stage {
    text-align: center;
}
.what-if-stage svg {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.what-if-stage svg .dot {
    transition: cx 0.2s ease, cy 0.2s ease;
}

/* Shift readout: the shifted total, a signed delta chip, and a plain description. */
.what-if-shift-readout {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.what-if-shift-readout .value {
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--bs-body-color);
}
.what-if-chip {
    font-weight: 650;
}
.what-if-chip.up {
    color: var(--what-if-gain);
}
.what-if-chip.down {
    color: var(--what-if-loss);
}

.what-if-curve-wrap svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   Match chrome (scoreboard strip, set dots, pairing table)
   ========================================================================== */

.match-strip {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.match-side-name {
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-side-opponent {
    color: #e8553d;
}

.match-set-dots {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
}

.match-set-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    background: transparent;
}

.match-set-dot.won-self {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.match-set-dot.won-opponent {
    background: #e8553d;
    border-color: #e8553d;
}

.match-set-dot.draw {
    background: linear-gradient(90deg, var(--bs-primary) 50%, #e8553d 50%);
    border-color: transparent;
}

.match-badge-blue {
    background-color: #0d6efd;
    color: #fff;
}

/* Per-archer breakdown rows inside a team match's pairing-table cells and
   reveal sheet: one slot-labelled line per archer under the folded side
   total. */
.match-per-archer {
    line-height: 1.5;
}

.match-per-archer + .match-per-archer {
    margin-top: 0.1rem;
}

/* Side-toggle buttons: the opponent side uses the coral accent the rest of
   the match chrome uses (`.match-side-opponent`). */
.btn-match-opponent {
    --bs-btn-bg: #e8553d;
    --bs-btn-border-color: #e8553d;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #d44a33;
    --bs-btn-hover-border-color: #d44a33;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #d44a33;
    --bs-btn-active-border-color: #d44a33;
    --bs-btn-active-color: #fff;
}

.btn-outline-match-opponent {
    --bs-btn-color: #e8553d;
    --bs-btn-border-color: #e8553d;
    --bs-btn-hover-bg: #e8553d;
    --bs-btn-hover-border-color: #e8553d;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #e8553d;
    --bs-btn-active-border-color: #e8553d;
    --bs-btn-active-color: #fff;
}

/* Read-only NAC opponent target behind the side toggle: a plain SVG view,
   never an editor — pointer events are off so clicks add nothing. */
.match-side-opponent-view .match-opponent-target {
    max-width: 420px;
    margin: 0 auto;
}

.match-opponent-target svg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* End-result bottom sheet — same slide-up pattern as the keypad drawer, but
   above it (the drawer handle sits at z-index 1030). */
.match-end-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    transform: translateY(110%);
    transition: transform 0.3s ease;
}

.match-end-sheet.open {
    transform: translateY(0);
}

/* ==================== Tournaments ==================== */
/* Placement ceremony + qualification-ranking window (design doc D9, slice 4).
   The big frozen score, the ranked-list rows with the user highlighted / the
   replaced archer struck through, and the slide-in reveal driven by
   animation-sequencer. Bracket + standings styles follow (slice 5). */

/* The create form's competition picker can hold >100 datasets; cap it to ~5
   rows so the filters and the Start button stay reachable without a long scroll. */
.tournament-dataset-list {
    max-height: 21rem;
    overflow-y: auto;
}

.ceremony-score {
    font-size: 3rem;
    font-weight: 800;
    color: var(--bs-primary);
    line-height: 1.1;
}

.ranking-row {
    transition: background-color 0.6s, opacity 0.6s, transform 0.6s;
}

.ranking-row.user-row {
    background: var(--bs-primary-bg-subtle);
    font-weight: 600;
    border-left: 4px solid var(--bs-primary);
}

.ranking-row.replaced {
    opacity: 0.35;
    text-decoration: line-through;
}

.you-name {
    color: var(--bs-primary);
    font-weight: 700;
}

@keyframes tournament-slide-in {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.slide-in {
    animation: tournament-slide-in 0.5s ease-out;
}

/* Scorings-list nested containers (design doc D9, slice 4 Half B). Each
   tournament carries a per-record `--t-color` (set inline from `tournamentColor`);
   the band is the colored left border, the tag a soft tint of it. `color-mix`
   against `--bs-body-bg` keeps the tint theme-aware (the mockup hardcoded white). */

.tournament-container,
.tournament-band {
    border-left: 5px solid var(--t-color) !important;
}

.tournament-tag {
    display: inline-block;
    font-size: 0.72em;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.1em 0.45em;
    border-radius: 0.375rem;
    color: var(--t-color);
    background: color-mix(in srgb, var(--t-color) 14%, var(--bs-body-bg));
    border: 1px solid color-mix(in srgb, var(--t-color) 35%, var(--bs-body-bg));
}

.tournament-member-rows .list-group-item {
    padding: 0.4rem 0.75rem;
    font-size: 0.88rem;
    border-left: 3px solid color-mix(in srgb, var(--t-color) 45%, var(--bs-body-bg)) !important;
}

.tournament-member-date {
    min-width: 3.9rem;
    font-size: 0.75rem;
}

.tournament-member-role {
    min-width: 5.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--t-color);
}

/* Bracket (design doc D9, slice 5). Round columns in a mobile-first horizontal
   scroll; the user's match highlighted, resolved matches tappable for a
   set-by-set sheet, not-yet-reachable pairings dashed "winner of…" silhouettes.
   Theme-aware equivalents of the mockup's hardcoded light colors. */

.bracket-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}

.bracket {
    display: flex;
    gap: 1.5rem;
    min-width: max-content;
    align-items: stretch;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 0.5rem;
    min-width: 190px;
}

.bracket-round h6 {
    text-align: center;
}

.bracket-match {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-body-bg);
    font-size: 0.8rem;
    overflow: hidden;
}

.bracket-match .side {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.5rem;
    gap: 0.5rem;
    white-space: nowrap;
}

.bracket-match .side.winner {
    font-weight: 700;
    background: var(--bs-success-bg-subtle);
}

.bracket-match .side.loser {
    color: var(--bs-secondary-color);
}

.bracket-match .side .flag {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
}

.bracket-match.user-match {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
}

.bracket-match.pending-match {
    border-style: dashed;
    color: var(--bs-secondary-color);
}

.bracket-match.tappable {
    cursor: pointer;
}

.bracket-match.tappable:hover {
    border-color: var(--bs-primary);
}

.set-pill {
    display: inline-block;
    min-width: 2.2em;
    text-align: center;
}

/* Set-by-set sheet — a lightweight fixed overlay (no Bootstrap JS), rendered into
   the controller's own host so opening it never disturbs the bracket scroll. */

.tournament-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.tournament-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1055;
    width: min(90vw, 420px);
    max-height: 80vh;
    overflow-y: auto;
}

/* Match-page back-to-bracket bar (design doc D8). */

.tournament-back-bar {
    border-left: 5px solid var(--t-color) !important;
}

.tournament-back-bar i.bi-trophy {
    color: var(--t-color);
}