/*
 * Custom color palette (Bootstrap overrides)
 *
 * Navbar:    #731d9e  (deep purple — inline style on <nav>)
 * 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)
 */
:root {
    color-scheme: light only;
}

: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;
}

/* --- 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;
    }
}

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

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

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

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

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

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

.markdown-content iframe, .note-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, .note-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, .note-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"]),
.note-content li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5em;
}

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

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

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

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

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

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

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

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

.notes-list .note-item:last-child {
    margin-bottom: 0;
}

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

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

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

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

.notes-list .note-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 */
.notes-list .note-item[data-own="true"] {
    margin-left: auto;
    margin-right: 0;
    flex-direction: row-reverse;
}

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

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

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

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

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

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

/* Note content - leave space for dropdown menu icon */
.notes-list .note-content {
    font-size: 0.875rem;
    padding-right: 1.5rem;
}

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

/* Session info */
.notes-list .note-session-info {
    opacity: 0.85;
    display: block;
}

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

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

.notes-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 */
.notes-list .note-item[data-color="1"] { --note-color: #fff3e0; --author-color: #e65100; }
.notes-list .note-item[data-color="2"] { --note-color: #e3f2fd; --author-color: #1565c0; }
.notes-list .note-item[data-color="3"] { --note-color: #f3e5f5; --author-color: #7b1fa2; }
.notes-list .note-item[data-color="4"] { --note-color: #e8f5e9; --author-color: #2e7d32; }
.notes-list .note-item[data-color="5"] { --note-color: #fce4ec; --author-color: #c2185b; }
.notes-list .note-item[data-color="6"] { --note-color: #e0f7fa; --author-color: #00838f; }
.notes-list .note-item[data-color="7"] { --note-color: #fff8e1; --author-color: #ff8f00; }
.notes-list .note-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 {
    --plyr-color-main: #fff;
    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);
}

/* 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 .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;
}


/* 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;
    }
}

@media (min-width: 480px) {
    .col-patterns {
        flex: 1 0 0%;
        max-width: 50%;
    }
}

/* 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; }
}