/* Player Explorer: grouped column picker (<details>/<summary>) */
.pe-colpicker-summary {
    list-style: none;
}

.pe-colpicker-summary::-webkit-details-marker {
    display: none;
}

/* Player Explorer controls dropdown styling */
.pe-controls-body {
    display: none !important;
}

.pe-controls.is-open .pe-controls-body {
    display: flex !important;
}

@media (min-width: 768px) {
    .pe-controls-body {
        display: inline-flex !important;
        width: auto !important;
    }
}

@media (max-width: 767px) {
    .pe-controls-body {
        display: none !important;
    }

    .pe-controls.is-open .pe-controls-body {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .pe-controls-body > * {
        width: 100%;
    }

    .pe-controls-item-filters {
        grid-column: 1;
        grid-row: 1;
    }

    .pe-controls-item-export {
        grid-column: 2;
        grid-row: 1;
    }

    .pe-controls-item-percentiles {
        grid-column: 1;
        grid-row: 2;
    }

    .pe-controls-item-adp {
        grid-column: 2;
        grid-row: 2;
    }
}

.pe-colpicker-chevron {
    transition: transform 150ms ease;
}

.pe-colpicker-details[open] .pe-colpicker-chevron {
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .pe-controls-body {
        display: inline-flex !important;
        width: auto !important;
    }
}

/* Player Explorer controls: transparent button backgrounds */
.pe-controls-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.pe-controls-btn:hover,
.pe-controls-btn:focus,
.pe-controls-btn:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.pe-controls-chip {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Mobile dropdown feel for Player Explorer controls */
@media (max-width: 767px) {
    .pe-controls-toggle {
        background: rgba(17, 17, 20, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: none !important;
    }

    .pe-controls-toggle.neo-shadow,
    .pe-controls-toggle.neo-shadow:active {
        box-shadow: none !important;
    }

    .pe-controls-toggle.pe-controls-btn {
        border-color: rgba(255, 255, 255, 0.16) !important;
        background: rgba(17, 17, 20, 0.6) !important;
    }

    .pe-controls.is-open .pe-controls-toggle {
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .pe-controls-chevron {
        transition: transform 200ms ease;
    }

    .pe-controls.is-open .pe-controls-chevron {
        transform: rotate(180deg);
    }

    .pe-controls.is-open .pe-controls-body {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(17, 17, 20, 0.55);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-radius: 12px;
        padding: 0.6rem;
        box-shadow: none;
        animation: pe-controls-drop 180ms ease;
        transform-origin: top center;
    }
}

@keyframes pe-controls-drop {
    from {
        opacity: 0;
        transform: translateY(-4px) scaleY(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
}

/* MLB Stats Guru Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Neutral theme: black/gray UI palette */
    --primary-color: #0b0b0d;
    --secondary-color: #26262b;
    /* Premium accent (UI highlight, not performance semantics) */
    --accent-color: #7f9dbb;
    --accent-rgb: 127, 157, 187;
    --accent2-color: #22d3ee;
    --accent2-rgb: 34, 211, 238;
    --accent3-color: #8b5cf6;
    --accent3-rgb: 139, 92, 246;
    --accent-gradient: linear-gradient(90deg, rgba(var(--accent2-rgb), 1) 0%, rgba(var(--accent-rgb), 1) 100%);
    /* Global semantics: red = better, blue = worse */
    --success-color: #e15759;
    --danger-color: #4c9cdf;
    --warning-color: #ffc107;
    --dark-bg: #000000;
    --dark-bg-2: #050506;
    --card-bg: #111114;
    --card-bg-rgb: 17, 17, 20;
    --hover-bg: #1b1b20;
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-secondary-rgb: 161, 161, 170;
    --border-color: #2a2a2f;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
}

/* Overlay priority arbitration (date picker vs nav search dropdown)
   JS in assets/overlayPriority.js toggles body[data-overlay-top]. */
body {
    --overlay-date-z: 10050;
    --overlay-search-z: 10060;
}

/* Secondary accent for interactive hover/focus states. */
.app-widget button:hover,
.app-widget a:hover {
    color: var(--text-primary);
}

.app-widget button:focus-visible,
.app-widget a:focus-visible,
.app-widget input:focus-visible,
.app-widget textarea:focus-visible,
.app-widget select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.app-widget .Select-control:hover,
.app-widget .Select-control:focus,
.app-widget .Select-control:focus-within {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.app-widget input:focus,
.app-widget textarea:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Input depth: soft inner shadow for dark backgrounds. */
.app-widget input,
.app-widget textarea,
.app-widget .Select-control,
.app-widget .Select__control {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    background-color: rgba(10, 10, 14, 0.65) !important;
}

/* Unified button styling inside widgets. */
.app-widget button {
    border-radius: 10px;
    transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.app-widget button:active {
    transform: translateY(1px);
    filter: brightness(0.98);
}

/* Primary buttons. */
.app-widget button.bg-success,
.app-widget button.bg-primary,
.app-widget button.bg-accent {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 24px rgba(var(--accent3-rgb), 0.28);
}

/* Secondary buttons. */
.app-widget button.bg-secondary {
    border: none;
    box-shadow: none;
}

/* Ghost/neutral buttons. */
.app-widget button.bg-cardBg\/40,
.app-widget button.bg-cardBg\/60,
.app-widget button.bg-cardBg\/50 {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 6px 14px rgba(255, 255, 255, 0.06);
}

/* Chip styling for filters/toggles. */
.app-chip {
    border-radius: 9999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    box-shadow: none;
    transition: box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
}

.app-chip:hover {
    border-color: transparent;
    color: var(--text-primary);
}

.app-chip.is-active,
.app-chip:has(input:checked) {
    border-color: transparent;
    color: var(--text-primary);
    box-shadow:
        0 0 14px rgba(255, 255, 255, 0.18);
}

/* Player Explorer: keep Percentiles label white (chip defaults are gray). */
.pe-controls-item-percentiles,
.pe-controls-item-percentiles span {
    color: var(--text-primary) !important;
}

/* Player Trends: remove shadow box around Percentiles toggle chip. */
#pt-show-percentiles-wrap,
#pt-show-percentiles-wrap:hover,
#pt-show-percentiles-wrap:focus,
#pt-show-percentiles-wrap:focus-visible,
#pt-show-percentiles-wrap:has(input:checked),
#pt-show-percentiles-wrap:has(input:checked):hover {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

#pt-show-percentiles-wrap .form-check,
#pt-show-percentiles-wrap .form-check-input,
#pt-show-percentiles-wrap .form-check-input:focus {
    box-shadow: none !important;
}

#pt-show-percentiles-wrap .text-textSecondary {
    color: var(--text-primary) !important;
}

@media (max-width: 767px) {
    .pt-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.75rem !important;
        align-items: center;
    }

    #pt-open-controls {
        justify-self: start;
    }

    #pt-show-percentiles-wrap {
        justify-self: center;
    }

    #pt-download-chart {
        justify-self: end;
    }

    .pt-trends-widget {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #pt-chart-title {
        display: block;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.9rem;
        line-height: 1.2;
    }
}

body[data-overlay-top="date"] {
    --overlay-date-z: 10060;
    --overlay-search-z: 10050;
}

body[data-overlay-top="search"] {
    --overlay-date-z: 10050;
    --overlay-search-z: 10060;
}

/* Player Trends: ensure the active control card (player vs date)
   is the top stacking context. Without this, the dropdown/calendar
   can render underneath adjacent cards due to backdrop-filter stacking contexts. */
.pt-overlay-card {
    position: relative;
    overflow: visible !important;
}

.pt-player-card {
    z-index: var(--overlay-search-z);
}

.pt-date-card {
    z-index: var(--overlay-date-z);
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(700px circle at 12% 18%, rgba(var(--accent-rgb), 0.14), transparent 60%),
        radial-gradient(600px circle at 86% 14%, rgba(var(--text-secondary-rgb), 0.08), transparent 55%),
        radial-gradient(900px circle at 72% 82%, rgba(var(--accent-rgb), 0.10), transparent 62%),
        linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
    color: var(--text-primary);
    line-height: 1.6;
}

@media (min-width: 768px) {
    body {
        background-attachment: fixed;
    }
}

/* Tooltip styling (Bootstrap removed) */
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    letter-spacing: 0;
    white-space: normal;
    opacity: 1;
}

.tooltip-inner {
    max-width: 320px;
    padding: 0.6rem 0.75rem;
    color: var(--text-secondary);
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.tooltip .tooltip-arrow {
    position: absolute;
    width: 0.8rem;
    height: 0.4rem;
}

.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}

.bs-tooltip-top .tooltip-arrow {
    bottom: 0;
}

.bs-tooltip-top .tooltip-arrow::before {
    top: -1px;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: var(--border-color);
}

.bs-tooltip-bottom .tooltip-arrow {
    top: 0;
}

.bs-tooltip-bottom .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: var(--border-color);
}

/* Enhanced Cards */
.custom-card {
    background-color: rgba(var(--card-bg-rgb), 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Neomorphism (soft UI) utilities: use sparingly on small controls */
.neo-shadow {
    box-shadow:
        6px 6px 14px rgba(0, 0, 0, 0.45),
        -6px -6px 14px rgba(255, 255, 255, 0.06);
}

.neo-shadow:active {
    box-shadow:
        inset 4px 4px 10px rgba(0, 0, 0, 0.55),
        inset -4px -4px 10px rgba(255, 255, 255, 0.06);
}

.card-header {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    color: var(--text-primary);
}

/* Enhanced Form Controls */
.control-group {
    margin-bottom: 1.25rem;
}

.control-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Enhancements */
.Select-control {
    background-color: rgba(var(--card-bg-rgb), 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease;
    min-height: 36px !important;
    height: 36px !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* react-select v5 (Dash 3+). Keep styling aligned with legacy .Select-control. */
.Select__control {
    background-color: rgba(var(--card-bg-rgb), 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease;
    min-height: 36px !important;
    height: 36px !important;
    box-shadow: none !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.Select__control--is-focused {
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

.Select__value-container,
.Select__input-container,
.Select__single-value,
.Select__placeholder {
    min-height: 34px !important;
    line-height: 34px !important;
    color: var(--text-primary) !important;
    font-size: 0.875rem;
}

.Select__input-container input {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.Select__indicator,
.Select__dropdown-indicator,
.Select__clear-indicator {
    color: var(--text-secondary) !important;
}

.Select__indicator-separator {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.Select__menu,
.Select__menu-portal {
    background-color: rgba(var(--card-bg-rgb), 0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: var(--text-primary) !important;
}

/* Posts: align filter row control heights (input, dropdowns, and featured tile) */
.posts-filters-row {
    position: relative;
    z-index: 2147483645;
    overflow: visible !important;
}

.posts-filters-row .pt-player-dropdown {
    position: relative;
    z-index: 2147483646 !important;
    overflow: visible !important;
}

.posts-filters-row .pt-player-dropdown:focus-within {
    z-index: 2147483647 !important;
}

.posts-filters-row .Select-menu-outer,
.posts-filters-row .Select__menu,
.posts-filters-row .Select__menu-portal {
    z-index: 2147483647 !important;
    position: absolute !important;
}

.posts-filters-row .Select-control {
    min-height: 42px !important;
    height: 42px !important;
}

.posts-filters-row .Select-placeholder,
.posts-filters-row .Select-value-label,
.posts-filters-row .Select-control .Select-value,
.posts-filters-row .Select-input input {
    line-height: 40px !important;
}

/* Posts: embedded page widgets (iframes) */
.post-embed-iframe {
    width: 100%;
    border: 0;
    display: block;
    background: rgba(var(--card-bg-rgb), 0.6);
}

/* Posts: Markdown readability + tables */
.post-content {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.02rem;
    line-height: 1.85;
}

.post-content .dash-markdown {
    color: inherit;
}

.post-content p,
.post-content li {
    color: rgba(255, 255, 255, 0.92);
}

/* Ensure Markdown lists actually show bullets/numbers (some global CSS resets can remove markers). */
.post-content ul {
    list-style: disc;
    padding-left: 1.35rem;
    margin: 0.75rem 0 1rem;
}

.post-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 0.75rem 0 1rem;
}

.post-content li {
    margin: 0.25rem 0;
}

/* Markdown lists: restore bullets/numbering (some global resets remove them) */
.post-content ul,
.post-content ol {
    padding-left: 1.25rem;
    margin: 0.75rem 0 1rem;
    list-style-position: outside;
}

.post-content ul {
    list-style-type: disc;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content li {
    display: list-item;
    margin: 0.25rem 0;
}

.post-content a {
    color: var(--accent2-color);
    text-decoration: none;
}

.post-content a:hover {
    text-decoration: underline;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.post-content h2 {
    margin-top: 2.2rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.post-content h3 {
    margin-top: 1.75rem;
}

.post-content hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 2rem 0;
}

/* Markdown tables: real grid with dividers + header styling */
.post-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--card-bg-rgb), 0.35);
}

.post-content thead th {
    background: rgba(var(--card-bg-rgb), 0.85);
    color: var(--text-primary);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: none;
}

.post-content th,
.post-content td {
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    vertical-align: top;
}

.post-content tr:last-child td {
    border-bottom: 0;
}

.post-content th:last-child,
.post-content td:last-child {
    border-right: 0;
}

.post-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 640px) {
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Posts: Roto+ swimlane flowchart */
.post-content .roto-swimlane-graph {
    margin: 1.25rem 0 1.75rem;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(var(--card-bg-rgb), 0.30);
}

.post-content .roto-swimlane-graph__graph {
    width: 100%;
}

.post-content .roto-swimlane {
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 18px;
    margin: 1.25rem 0 1.75rem;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(var(--card-bg-rgb), 0.30);
}

.post-content .roto-swimlane__divider {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.post-content .roto-swimlane__lane {
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(var(--card-bg-rgb), 0.20);
}

.post-content .roto-swimlane__lane-title {
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.86);
    margin: 4px 0 10px;
}

.post-content .roto-swimlane__group {
    position: relative;
    padding: 10px 8px 12px;
    margin: 10px 0 16px;
}

.post-content .roto-swimlane__group-title {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 10px;
}

.post-content .roto-swimlane__inputs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.post-content .roto-swimlane__lane--hitters .roto-swimlane__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-content .roto-swimlane__lane--pitchers .roto-swimlane__inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-content .roto-swimlane__input {
    position: relative;
    padding-bottom: 18px;
}

.post-content .roto-swimlane__wire {
    position: absolute;
    left: 50%;
    top: calc(100% - 18px);
    height: 18px;
    width: 2px;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.22);
}

.post-content .roto-swimlane__wire::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.32);
}

.post-content .roto-swimlane__bus {
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 0 10px;
}

.post-content .roto-swimlane__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(var(--card-bg-rgb), 0.55);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.post-content .roto-swimlane__box--model {
    border-color: rgba(var(--accent2-rgb), 0.55);
    background: linear-gradient(
        90deg,
        rgba(var(--accent2-rgb), 0.18) 0%,
        rgba(var(--accent-rgb), 0.14) 100%
    );
    color: var(--text-primary);
    font-weight: 900;
    letter-spacing: 0.01em;
    width: min(360px, 92%);
}

.post-content .roto-swimlane__box--xref {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    font-weight: 700;
}

.post-content .roto-swimlane__arrow {
    text-align: center;
    margin: 6px 0 10px;
    color: rgba(255, 255, 255, 0.60);
    font-weight: 800;
}

.post-content .roto-swimlane__aggregate {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.post-content .roto-swimlane__box--aggregate {
    width: 100%;
    justify-content: center;
    border-radius: 12px;
    padding: 10px 12px;
    white-space: normal;
    text-align: center;
    border-color: rgba(var(--accent-rgb), 0.40);
    background: rgba(var(--accent-rgb), 0.10);
    font-weight: 900;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .post-content .roto-swimlane {
        grid-template-columns: 1fr;
    }

    .post-content .roto-swimlane__divider {
        display: none;
    }
}

/* react-select v2/v3 (Dash versions vary) */
.posts-filters-row .Select__control {
    min-height: 42px !important;
    height: 42px !important;
}

.posts-filters-row .Select__value-container,
.posts-filters-row .Select__input,
.posts-filters-row .Select__single-value,
.posts-filters-row .Select__placeholder {
    min-height: 40px !important;
}

/* Selected value + placeholder text */
.Select-placeholder,
.Select-value-label,
.Select-control .Select-value,
.Select-input input {
    color: var(--text-primary) !important;
    font-size: 0.875rem;
    line-height: 34px !important;
}

.Select-input input {
    width: auto !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.Select--multi .Select-value {
    line-height: 1.2 !important;
}

.Select-control .Select-value-label {
    color: var(--text-primary) !important;
}

.Select-control:hover {
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.Select-menu-outer {
    background-color: rgba(var(--card-bg-rgb), 0.85) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Player Trends: keep dropdown menu above other cards */
.pt-player-dropdown {
    position: relative;
    z-index: 10050;
    overflow: visible !important;
}

.pt-player-dropdown .Select-input,
.pt-player-dropdown .Select-input input {
    background: transparent !important;
    min-width: 0 !important;
}

.pt-player-dropdown .Select-input input {
    width: auto !important;
    min-width: 24px !important;
}

#pc-open-controls,
#ps-open-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#pc-open-controls:hover,
#ps-open-controls:hover {
    background: transparent !important;
}

/* Player Trends: when maxed at 3 players, make selected chips dark so text stays readable. */
.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value {
    background: rgba(var(--card-bg-rgb), 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value-icon {
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--text-secondary) !important;
}

.pt-player-dropdown.pt-player-dropdown-maxed .Select--multi .Select-value-icon:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

/* When a dropdown is focused/open, raise its stacking context above sibling dropdowns.
   This prevents the menu from rendering behind other player selectors in the same panel. */
.pt-player-dropdown:focus-within {
    z-index: 2147483646 !important;
}

/* Player Profiles: DatePicker popover should overlay cards/graphs.
   Some containers (e.g., backdrop-filter / Plotly) create stacking contexts; force the DatePicker wrapper above. */
.pp-date-picker {
    position: relative;
    z-index: var(--overlay-date-z);
    overflow: visible !important;
}

.pp-date-picker .DateRangePicker,
.pp-date-picker .DateRangePickerInput,
.pp-date-picker .DateInput {
    overflow: visible !important;
}

/* Player Profiles header: keep the DatePicker from overflowing into the Season dropdown.
   Allow it to wrap within its grid cell instead of forcing a single line. */
.pp-date-picker .DateRangePicker {
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
}

/* Player Profiles: the header card uses backdrop-blur which creates a stacking context.
   When the calendar opens, it can overlap the lower grid; keep this card above the rest. */
.pp-profile-header-card {
    position: relative;
    z-index: 10;
    overflow: visible !important;
}

/* Navbar: player profile search dropdown should be able to overlay page content.
   Z-index is dynamically swapped with the date picker based on last interaction. */
.nav-player-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Profiles: season dropdown should overlay the date picker/cards.
   Uses the same overlay priority variables as navbar + date picker. */
.pp-player-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Profiles: when a dropdown is focused/open, keep it above sibling controls. */
.pp-player-dropdown:focus-within {
    z-index: 2147483646 !important;
}

.pp-player-dropdown:focus-within .Select-menu-outer,
.pp-player-dropdown:focus-within .Select__menu,
.pp-player-dropdown:focus-within .Select__menu-portal {
    z-index: 2147483647 !important;
}

.pp-player-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.pp-player-dropdown .Select__menu,
.pp-player-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

/* Player Profiles header: allow the react-select control to shrink inside a tight modal.
   Without this, the internal input can enforce a min-content width and visually overlap the date picker. */
.pp-player-dropdown .Select,
.pp-player-dropdown .Select-control,
.pp-player-dropdown .Select-input,
.pp-player-dropdown .Select-input input {
    min-width: 0 !important;
    width: 100% !important;
}

.pp-date-picker .DateRangePickerInput {
    max-width: 100% !important;
}

.nav-player-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.nav-player-dropdown .Select__menu,
.nav-player-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

/* Player Trends / Player Comparison: season dropdown should overlay the date picker when active.
   Uses the same overlay priority variables as navbar + date picker. */
.pt-season-dropdown,
.pc-season-dropdown,
.pt-matchup-dropdown,
.pc-matchup-dropdown {
    position: relative;
    z-index: var(--overlay-search-z);
    overflow: visible !important;
}

/* Player Comparison/Trends: when dropdowns are focused/open, keep them above sibling controls. */
.pt-season-dropdown:focus-within,
.pc-season-dropdown:focus-within,
.pt-matchup-dropdown:focus-within,
.pc-matchup-dropdown:focus-within {
    z-index: 2147483646 !important;
}

.pt-season-dropdown:focus-within .Select-menu-outer,
.pc-season-dropdown:focus-within .Select-menu-outer,
.pt-matchup-dropdown:focus-within .Select-menu-outer,
.pc-matchup-dropdown:focus-within .Select-menu-outer,
.pt-season-dropdown:focus-within .Select__menu,
.pc-season-dropdown:focus-within .Select__menu,
.pt-matchup-dropdown:focus-within .Select__menu,
.pc-matchup-dropdown:focus-within .Select__menu,
.pt-season-dropdown:focus-within .Select__menu-portal,
.pc-season-dropdown:focus-within .Select__menu-portal,
.pt-matchup-dropdown:focus-within .Select__menu-portal,
.pc-matchup-dropdown:focus-within .Select__menu-portal {
    z-index: 2147483647 !important;
}

.pt-season-dropdown .Select-menu-outer,
.pc-season-dropdown .Select-menu-outer,
.pt-matchup-dropdown .Select-menu-outer,
.pc-matchup-dropdown .Select-menu-outer {
    z-index: calc(var(--overlay-search-z) + 1) !important;
    position: absolute !important;
}

.pt-season-dropdown .Select__menu,
.pt-season-dropdown .Select__menu-portal,
.pc-season-dropdown .Select__menu,
.pc-season-dropdown .Select__menu-portal,
.pt-matchup-dropdown .Select__menu,
.pt-matchup-dropdown .Select__menu-portal,
.pc-matchup-dropdown .Select__menu,
.pc-matchup-dropdown .Select__menu-portal {
    z-index: calc(var(--overlay-search-z) + 1) !important;
}

.pt-player-dropdown .Select-menu-outer {
    z-index: 2147483647 !important;
    position: absolute !important;
}

.pt-player-dropdown .Select,
.pt-player-dropdown .Select-control {
    overflow: visible !important;
}

/* react-select v2/v3 classnames (Dash versions vary) */
.pt-player-dropdown .Select__menu,
.pt-player-dropdown .Select__menu-portal {
    z-index: 2147483647 !important;
}

/* DatePicker can create a competing stacking context; keep it below menus */
.DateRangePicker_picker,
.DateRangePicker_picker__directionLeft,
.DateRangePicker_picker__directionRight {
    /* Must sit above AG Grid, modals, and Plotly modebars */
    z-index: calc(var(--overlay-date-z) + 1) !important;
}

/* Dash sometimes renders SingleDatePicker for certain components */
.SingleDatePicker_picker,
.SingleDatePicker_picker__directionLeft,
.SingleDatePicker_picker__directionRight {
    z-index: calc(var(--overlay-date-z) + 1) !important;
}

/* React-Dates portal modes (used when with_portal / with_full_screen_portal is enabled).
   These must out-rank Plotly graphs which can create their own stacking contexts. */
.DateRangePicker__portal,
.SingleDatePicker__portal,
.DateRangePicker_picker__portal,
.SingleDatePicker_picker__portal,
.DayPicker_portal__horizontal,
.DayPicker_portal__vertical {
    z-index: 2147483647 !important;
}

/* React-Dates calendar popover: dark theme */
.DateRangePicker_picker,
.SingleDatePicker_picker {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
}

.DayPicker,
.DayPicker__withBorder,
.CalendarMonth,
.CalendarMonthGrid,
.CalendarMonthGrid_month__horizontal,
.DayPicker_transitionContainer,
.DayPicker_focusRegion {
    background: var(--card-bg) !important;
}

.CalendarMonth_caption {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
}

.DayPicker_weekHeader {
    color: var(--text-secondary) !important;
}

.DayPickerNavigation_button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
}

.DayPickerNavigation_button:hover {
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    background: rgba(var(--accent-rgb), 0.10) !important;
}

.DayPickerNavigation_svg {
    fill: var(--text-secondary) !important;
}

.CalendarDay__default {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.CalendarDay__default:hover {
    background: rgba(var(--accent-rgb), 0.10) !important;
    border-color: rgba(var(--accent-rgb), 0.65) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__outside {
    color: rgba(var(--text-secondary-rgb), 0.55) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_calendar {
    color: rgba(var(--text-secondary-rgb), 0.35) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: rgba(var(--accent-rgb), 0.35) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.95) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background: rgba(var(--accent-rgb), 0.14) !important;
    border-color: rgba(var(--accent-rgb), 0.35) !important;
    color: var(--text-primary) !important;
}

.CalendarDay__selected_span,
.CalendarDay__selected_span:hover {
    background: rgba(var(--accent-rgb), 0.22) !important;
    border-color: rgba(var(--accent-rgb), 0.45) !important;
    color: var(--text-primary) !important;
}

/* React-Dates: hide the keyboard shortcuts help button (the small '?' triangle) */
.DayPickerKeyboardShortcuts_show,
.DayPickerKeyboardShortcuts_show__bottomRight,
.DayPickerKeyboardShortcuts_show__bottomRight::before,
.DayPickerKeyboardShortcuts_show__bottomRight::after {
    display: none !important;
}

.Select-option {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 10px 12px !important;
}

.Select-option:hover {
    background-color: var(--hover-bg) !important;
}

/* Button Enhancements */
.btn-custom {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-custom:active {
    transform: translateY(0);
}

/* Slider Enhancements */
.rc-slider-track {
    background-color: var(--accent-color) !important;
}

.rc-slider-handle {
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color) !important;
}

.rc-slider-handle:hover {
    box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.2);
}

.rc-slider-mark-text {
    color: var(--text-secondary) !important;
    font-size: 0.75rem;
}

/* Checklist Enhancements */
.custom-checklist label {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.custom-checklist label:hover {
    color: var(--accent-color);
}

.custom-checklist input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Apple-style switch (used for the Percentiles toggle in Player Explorer header) */
.pe-apple-switch .form-check {
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 0;
    padding-left: 0;
}

.pe-apple-switch .form-check-input {
    width: 46px !important;
    height: 26px !important;
    margin: 0 !important;
    cursor: pointer;
    border-radius: 9999px !important;
    border: none !important;
    background-image: none !important;
    background-color: rgba(var(--text-secondary-rgb), 0.28) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, box-shadow 150ms ease;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

.pe-apple-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
    transition: transform 150ms ease;
}

.pe-apple-switch .form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.22) !important;
}

.pe-apple-switch .form-check-input:checked {
    background-color: var(--accent-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18) !important;
}

.pe-apple-switch .form-check-input:checked::before {
    transform: translateX(20px);
}

.pe-apple-switch .form-check-label {
    margin: 0;
    padding: 0;
}

/* Table Enhancements */
.dash-table-container {
    background-color: var(--card-bg) !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dash-spreadsheet-container {
    max-height: 70vh !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table {
    border-spacing: 0;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
    background-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    padding: 1rem 0.75rem !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--accent-color) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td {
    background-color: var(--hover-bg) !important;
    cursor: pointer;
}

/* AG Grid Enhancements */
.ag-theme-alpine-dark {
    --ag-background-color: var(--card-bg);
    --ag-header-background-color: var(--primary-color);
    --ag-odd-row-background-color: rgba(255, 255, 255, 0.02);
    --ag-row-hover-color: var(--hover-bg);
    --ag-border-color: var(--border-color);
    --ag-header-foreground-color: var(--text-primary);
    --ag-foreground-color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

/* Player Explorer tabs (match app theme) */
.pe-view-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.pe-view-tabs .nav-link {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid transparent;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pe-view-tabs .nav-link:hover {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pe-view-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

/* Player Explorer dcc.Tabs (Tailwind migration) */
.pe-view-tabs {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.pe-view-tabs .tab {
    background: transparent !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 0.70rem;
    padding: 6px 10px 10px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    line-height: 1.2 !important;
    min-height: 32px !important;
    height: auto !important;
    position: relative;
}

.pe-view-tabs .tab:hover {
    color: var(--text-primary) !important;
    background-color: rgba(var(--accent-rgb), 0.10) !important;
}

.pe-view-tabs .tab--selected {
    color: var(--text-primary) !important;
    border-bottom-color: transparent !important;
}

.pe-view-tabs .tab--selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

.ag-theme-alpine-dark .ag-header-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.ag-theme-alpine-dark .ag-cell {
    padding: 12px 8px;
}

/* In-cell sparklines (Player Explorer) */
.sparkline-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    line-height: 1;
}

.sparkline-wrap {
    width: 60px;
    height: 18px;
    flex: 0 0 auto;
    opacity: 0.95;
    display: flex;
    align-items: center;
}

.sparkline-svg {
    width: 60px;
    height: 18px;
    display: block;
    vertical-align: middle;
}

.sparkline-svg path {
    stroke: var(--text-secondary);
}

.sparkline-svg.sparkline-up path {
    stroke: var(--success-color);
}

.sparkline-svg.sparkline-down path {
    stroke: var(--danger-color);
}

.sparkline-svg.sparkline-flat path {
    stroke: var(--text-secondary);
    opacity: 0.8;
}

.sparkline-value {
    white-space: nowrap;
}

@media (max-width: 768px) {
    /* Player Explorer: show more columns on mobile by shrinking in-cell charts
       and tightening paddings/fonts (prefer “zoomed out” look vs truncation). */
    /* True zoom-out: keep the grid container full size, but scale the AG Grid
       internals so more columns fit in the viewport. */
    #pe-grid {
        width: 100%;
        max-width: 100%;
    }

    #pe-grid .ag-root-wrapper {
        transform: scale(0.52);
        transform-origin: top left;
        width: calc(100% / 0.52);
        height: calc(100% / 0.52);
    }

    #pe-grid.ag-theme-alpine-dark .ag-header-cell {
        font-size: 0.65rem;
    }

    #pe-grid.ag-theme-alpine-dark .ag-cell {
        padding: 8px 6px;
        font-size: 0.75rem;
    }

    #pe-grid .sparkline-cell {
        gap: 6px;
    }

    #pe-grid .sparkline-wrap {
        width: 34px;
        height: 12px;
    }

    #pe-grid .sparkline-svg {
        width: 34px;
        height: 12px;
    }

    #pe-grid .trend-icon {
        font-size: 0.9em;
        margin-left: 4px;
    }

    /* Player Explorer: hide pagination page size selector on mobile. */
    #pe-grid .ag-paging-panel .ag-paging-page-size {
        display: none;
    }

    /* Player name cell renderer: slightly smaller headshot + tighter spacing */
    #pe-grid .pe-player-name-link + img,
    #pe-grid img.w-6.h-6 {
        width: 20px !important;
        height: 20px !important;
        margin-right: 6px !important;
    }

    /* Player Explorer: stat view selector should be dropdown-only on mobile. */
    #pe-view-tabs {
        display: none;
    }

    #pe-view-dropdown {
        display: block;
    }
}

@media (min-width: 769px) {
    /* Player Explorer: show tabs on desktop, hide dropdown. */
    #pe-view-tabs {
        display: block;
    }

    #pe-view-dropdown {
        display: none;
    }
}

/* Player Explorer: clickable player name (opens profile modal) */
.pe-player-name-link {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.pe-player-name-link:hover {
    text-decoration: underline;
}

/* Per-column Up/Down quick filter controls */
.trend-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    line-height: 1.1;
}

.trend-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-header-controls {
    display: flex;
    gap: 6px;
}

.trend-filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.65rem;
    line-height: 1.3;
}

.trend-filter-btn:hover {
    border-color: var(--accent-color);
    color: var(--text-primary);
}

.trend-filter-btn.active {
    border-color: var(--accent-color);
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Active filters strip (Player Explorer) */
.pe-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
}

/* Modal Enhancements */
.modal-content {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

.modal-header {
    background-color: var(--primary-color) !important;
    border-bottom: 2px solid var(--accent-color) !important;
    border-radius: 12px 12px 0 0 !important;
}

.modal-title {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem !important;
}

/* Navbar Enhancements */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-bottom: 2px solid var(--accent-color);
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nav-link {
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    padding: 0.5rem 1rem !important;
    margin: 0 0.25rem;
    border-radius: 6px;
}

.nav-link:hover {
    color: var(--accent-color) !important;
    background-color: rgba(var(--accent-rgb), 0.1);
}

/* Loading Indicator */
.custom-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(var(--accent-rgb), 0.2);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

/* Player Trends: hide the empty-state while the chart callback is loading.
     (Dash sets data-dash-is-loading="true" on outputs while they update.) */
#pt-chart-empty[data-dash-is-loading="true"] {
    display: none !important;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/* Metric Badges */
.metric-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem;
}

.metric-badge-high {
    background-color: rgba(225, 87, 89, 0.20);
    border: 1px solid var(--success-color);
    color: var(--success-color);
}

.metric-badge-medium {
    background-color: rgba(255, 193, 7, 0.2);
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
}

.metric-badge-low {
    background-color: rgba(76, 156, 223, 0.20);
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

/* Sidebar Enhancements */
.sidebar {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Charts */
.plotly-graph-div {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

/* Accent glow utilities */
.glow-on-hover:hover {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.45));
}

.glow-on-focus:focus-visible,
.glow-on-focus:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
}

/* Apply glow to key interactive elements already tagged with neo-shadow */
.neo-shadow:hover {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.38));
}

.neo-shadow:focus-visible {
    box-shadow:
        6px 6px 14px rgba(0, 0, 0, 0.45),
        -6px -6px 14px rgba(255, 255, 255, 0.06),
        0 0 0 3px rgba(var(--accent-rgb), 0.30);
}

/* Plotly modebar: make it feel native */
.js-plotly-plot .plotly .modebar {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-group {
    background: transparent !important;
}

.js-plotly-plot .plotly .modebar-btn {
    color: var(--text-secondary) !important;
    border-radius: 8px !important;
}

.js-plotly-plot .plotly .modebar-btn:hover {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.10) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.20));
}

/* Home CTAs: subtle glow to reinforce clickability */
.home-tile-link:hover .home-link-button {
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.28));
}

/* Date Picker */
.DateRangePicker {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center !important;
    gap: 0.35rem;
    white-space: nowrap;
}

.DateInput {
    background-color: var(--card-bg) !important;
    flex: 1 1 0;
    width: auto !important;
    min-width: 0 !important;
}

/* Date range arrow/separator (React-Dates) */
.DateRangePickerInput {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.35rem;
    white-space: normal;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.DateRangePickerInput_arrow {
    color: var(--text-secondary) !important;
    padding: 0 0.25rem;
    flex: 0 0 auto;
}

.DateRangePickerInput_arrow_svg {
    fill: var(--text-secondary) !important;
}

.DateInput_input {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    height: 36px !important;
    line-height: 1.2 !important;
    font-size: 0.875rem;
    font-family: inherit;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.DateInput_input:hover {
    border-color: var(--accent-color) !important;
}

.CalendarDay__selected {
    background: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
}

/* Input Fields */
input[type="number"],
input[type="text"] {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    padding: 0.5rem;
    width: 100%;
    transition: border-color 0.2s ease;
}

/* Prevent global input width rules from breaking 3rd-party controls */
input.DateInput_input {
    width: 100% !important;
}

.Select-input input {
    width: auto !important;
}

input[type="number"]:focus,
input[type="text"]:focus {
    border-color: var(--accent-color) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

/* Page Headers */
.page-header {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--accent-color);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--accent-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Summary Cards */
.stat-card {
    background: linear-gradient(135deg, var(--card-bg) 0%, var(--primary-color) 100%);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin-slow {
    display: inline-block;
    transform-origin: 50% 50%;
    animation: spinSlow 10s linear infinite;
}

/* Home hero banner */
.home-hero {
    position: relative;
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    min-height: 282px;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.72) 100%),
        url("oracle_park_night.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    /* Keep home plate near the bottom while showing a bit more above it. */
    background-position: center, 50% 69%;
    border: 1px solid rgba(44, 95, 141, 0.55);
    overflow: hidden;
}

@media (max-width: 640px) {
    .home-hero {
        /* On smaller screens, keep the crop slightly lower to preserve the infield. */
        background-position: center, 50% 75%;
    }
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

/* Feature icon hover cue */
.feature-icon {
    transition: color 0.2s ease, filter 0.2s ease;
}

.custom-card:hover .feature-icon {
    color: var(--accent-color) !important;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35));
}

/* Home page feature tiles: make the whole tile feel clickable.
   Mimic Player Explorer tab hover tint (accent/10) and apply to CTA too. */
.home-tile-link:hover {
    background-color: rgba(var(--accent-rgb), 0.06) !important;
    border-color: rgba(var(--accent-rgb), 0.55) !important;
}

/* Home page: Roto+ snapshot tables
   Goal: keep player names readable on tight widths by shrinking the trendline column. */
.home-snapshot-table {
    table-layout: fixed;
    width: 100%;
}

.home-snapshot-table col.snap-col-rank { width: 2.5rem; }
/* Shrink sparkline/trend/roto columns as the viewport tightens to preserve name width. */
.home-snapshot-table col.snap-col-spark { width: clamp(3.75rem, 10vw, 9rem); }
.home-snapshot-table col.snap-col-trend { width: clamp(3rem, 6vw, 5rem); }
.home-snapshot-table col.snap-col-roto { width: clamp(3.75rem, 7vw, 5rem); }

.home-snapshot-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-snapshot-sparkline {
    width: 100%;
    max-width: 64px;
    height: 18px;
}

/* Tight viewports: reduce padding on non-name columns to preserve name width. */
@media (max-width: 950px) {
    .home-snapshot-table th:nth-child(1),
    .home-snapshot-table td:nth-child(1) { padding-right: 0.5rem !important; }

    .home-snapshot-table th:nth-child(3),
    .home-snapshot-table td:nth-child(3),
    .home-snapshot-table th:nth-child(4),
    .home-snapshot-table td:nth-child(4) { padding-right: 0.5rem !important; }
}

@media (max-width: 850px) {
    .home-snapshot-sparkline { max-width: 52px; height: 16px; }
}

@media (max-width: 700px) {
    .home-snapshot-sparkline { max-width: 46px; height: 14px; }
}

/* Player Profiles: percentile slider rows */
.pp-metric-row {
    display: grid;
    grid-template-columns: 160px 1fr 92px;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pp-metric-row:last-child {
    border-bottom: none;
}

.pp-percentile-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding-top: 13px;
}

#pp-percentiles {
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: visible;
}

.pp-percentile-section {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 12px 6px;
    width: 100%;
    max-width: 560px;
    background: linear-gradient(135deg, var(--pp-section-tint, rgba(127, 157, 187, 0.08)), rgba(0, 0, 0, 0.15));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 11px var(--pp-section-glow, rgba(127, 157, 187, 0.22));
}

.pp-percentile-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.pp-percentile-section-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--pp-section-color, var(--accent-color));
    opacity: 0.78;
    white-space: nowrap;
}

.pp-percentile-section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--pp-section-color, var(--accent-color)), rgba(255, 255, 255, 0));
    opacity: 0.5;
}

.pp-percentile-section-body .pp-metric-row {
    padding: 8px 0;
}

/* App-wide widget styling (card headers + subtle white glow). */
.app-widget {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.app-widget--glass {
    background: linear-gradient(135deg, rgba(26, 26, 32, 0.75) 0%, rgba(10, 10, 14, 0.85) 55%, rgba(6, 6, 9, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* App header matches widget glass styling but stays flush to the viewport edges. */
.app-header {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.app-nav-link {
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 0.01em;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.45);
    outline: none;
}

.app-nav-menu {
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.app-nav-menu-link {
    color: var(--text-primary);
    font-weight: 400;
    transition: color 160ms ease, background 160ms ease;
}

.app-nav-menu-link:hover,
.app-nav-menu-link:focus-visible {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.14);
    outline: none;
}

/* Feature tiles use the same widget glass styling as primary widgets. */
.home-feature-card {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.35);
}

.app-widget-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
}

.app-widget-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.app-widget-title i {
    color: rgba(255, 255, 255, 0.85);
}

.app-widget-header i,
.app-page-title i,
.sub-widget-header i,
.sub-widget-title i,
.app-widget button i,
.app-widget a i,
.app-chip i {
    font-size: 0.95em;
    line-height: 1;
    font-weight: 600;
    -webkit-text-stroke: 0.35px rgba(255, 255, 255, 0.35);
    text-rendering: geometricPrecision;
}


.app-widget-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    opacity: 0.62;
}

.app-page-title {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.app-page-title i {
    color: rgba(255, 255, 255, 0.85);
}

/* Thin separators + spacing rhythm helpers. */
.app-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
    opacity: 0.55;
}

.space-y-12 > * + * {
    margin-top: var(--space-12);
}

.space-y-4 > * + * {
    margin-top: 4px;
}

.space-y-16 > * + * {
    margin-top: var(--space-16);
}

.space-y-24 > * + * {
    margin-top: var(--space-24);
}

.sub-widget-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.sub-widget-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
}

.sub-widget-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    opacity: 0.5;
}

.pp-metric-name {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

.pp-metric-raw {
    text-align: right;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.pp-pct-track {
    position: relative;
    height: 14px;
    border-radius: 9999px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(44, 95, 141, 0.55);
}

.pp-pct-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 9999px;
    opacity: 0.95;
}

.pp-pct-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    min-width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: var(--pp-pct-color, var(--accent-color));
    border: 2px solid rgba(10, 25, 41, 0.92);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 6px;
}

.pp-pct-marker::before {
    content: none;
}

.pp-pct-bubble {
    position: static;
    background: transparent;
    color: var(--text-primary);
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 0;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}

/* Player Splits: compact table rendering so split columns have room.
   This intentionally does NOT change grid column widths; it only reduces
   internal element sizes to avoid overlap. */
#ps-splits-grid .pp-pct-track {
    height: 9px;
    overflow: visible;
}

/* Player Splits: reserve a small buffer between the bar and the raw value. */
#ps-splits-grid .ps-splits-track {
    margin-right: 6px;
}

#ps-splits-grid .pp-pct-marker {
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-width: 1px;
    box-shadow: none;
}

#ps-splits-grid .pp-pct-bubble {
    font-size: 0.45rem;
}

#ps-splits-grid .ps-splits-raw,
#ps-splits-grid .ps-splits-delta {
    font-size: 0.46rem;
    line-height: 1.05;
}

#ps-splits-grid .ps-splits-metric {
    font-size: 0.65rem;
}

/* Player Splits: metric column should blend with page background. */
#ps-splits-grid .ps-splits-metric,
#ps-splits-grid .pc-metric-sticky {
    background: transparent !important;
}

@media (max-width: 768px) {
    /* Player Profiles: Stats selector should be dropdown-only on mobile.
       (Some environments may not include Tailwind responsive utilities.) */
    #pp-stats-tabs {
        display: none;
    }

    #pp-stats-dropdown {
        display: block;
    }

    /* Player Profiles: on very small widths the percentile track can get squeezed
       into a tiny pill by the name/value columns. Stack the track below to give
       it full row width. */
    #pp-percentiles .pp-metric-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name raw"
            "track track";
        align-items: start;
        gap: 6px 10px;
    }

    #pp-percentiles .pp-metric-name {
        grid-area: name;
        font-size: 0.82rem;
        line-height: 1.15;
    }

    #pp-percentiles .pp-metric-raw {
        grid-area: raw;
        white-space: nowrap;
    }

    #pp-percentiles .pp-metric-row > :nth-child(2) {
        grid-area: track;
    }

    #pp-percentiles .pp-pct-track {
        height: 12px;
    }

    #pp-percentiles .pp-pct-marker {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
    }

    #pp-percentiles .pp-pct-bubble {
        font-size: 0.65rem;
    }

    /* Player Comparison: tighten the comparison table on mobile. */
    #pc-comparison-bars .pp-metric-name {
        font-size: 0.75rem;
    }

    #pc-comparison-bars .pp-pct-track {
        height: 12px;
    }

    #pc-comparison-bars .pp-pct-marker {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
    }

    #pc-comparison-bars .pp-pct-bubble {
        font-size: 0.65rem;
    }

    /* Player Comparison: keep the Metric column frozen during horizontal scroll. */
    #pc-comparison-bars .pc-metric-sticky {
        position: sticky;
        left: 0;
        z-index: 20;
        background: var(--dark-bg);
        padding-right: 6px;
    }

    /* Player Splits: match Player Comparison tight mobile layout. */
    #ps-splits-grid .pp-metric-name {
        font-size: 0.65rem;
    }

    #ps-splits-grid .pp-pct-track {
        height: 8px;
        overflow: visible;
    }

    #ps-splits-grid .ps-splits-track {
        margin-right: 5px;
    }

    #ps-splits-grid .pp-pct-marker {
        min-width: 10px;
        height: 10px;
        padding: 0 2px;
        border-width: 1px;
        box-shadow: none;
    }

    #ps-splits-grid .pp-pct-bubble {
        font-size: 0.4rem;
    }

    /* Player Splits: keep the Metric column frozen during horizontal scroll. */
    #ps-splits-grid .pc-metric-sticky {
        position: sticky;
        left: 0;
        z-index: 20;
        background: transparent;
        padding-right: 6px;
    }
}

@media (min-width: 769px) {
    /* Player Profiles: show tabs on desktop, hide dropdown. */
    #pp-stats-tabs {
        display: block;
    }

    #pp-stats-dropdown {
        display: none;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sidebar {
        position: relative;
        top: 0;
        max-height: none;
        margin-bottom: 1rem;
    }
    
    .page-header {
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
}

/* Tooltips */
.custom-tooltip {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Tags */
.tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: rgba(var(--accent-rgb), 0.2);
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 0.125rem;
    color: var(--accent-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 1.125rem;
}