:root {
    /* Layout & Spacing */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-right: env(safe-area-inset-right);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --spacing-small: 6px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --border-radius: 6px;
    --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    --top-chrome: #1a73e8;


    --title-bar-height: calc(var(--title-bar-icons-height) + var(--title-bar-header-height));
    --title-bar-icons-height: 45px;
    --title-bar-header-height: 50px;
    --page-header-height: 50px;

    --cal-header-height: 50px;
    --nav-height: 45px;

    --app-outer-safe-height: calc(var(--current-title-bar-height, var(--title-bar-height)));

    --app-max-width: 1000px;
    --app-spinner-size: 60px;
    --font-family: 'Roboto', sans-serif;

    --font-size-tiny: clamp(0.25rem, 0.25rem + 1vw, 0.44rem);
    --font-size-xs: clamp(0.2rem, 0.2rem + 1vw, 0.5rem);
    --font-size-s: clamp(0.78rem, 0.78rem + 0.78vw, 1.17rem);
    --font-size-s-old: clamp(0.4rem, 0.4rem + 1vw, 0.66rem);
    --font-size-ms: clamp(0.55rem, 0.55rem + 1vw, 0.88rem);
    --font-size-ms-plus: clamp(0.65rem, 0.65rem + 1vw, 1rem);
    --font-size-m: clamp(0.91rem, 0.91rem + 1.3vw, 1.43rem);
    --font-size-modal-button: clamp(0.55rem, 0.55rem + 1.2vw, 1rem);
    --font-size-ml: clamp(0.85rem, 0.85rem + 1vw, 1.2rem);
    --font-size-l: clamp(0.9rem, 0.9rem + .9vw, 1.2rem);
    --font-size-xl: clamp(0.7rem, 0.9rem + 1.1vw, 1.2rem);
    --font-size-xxl: clamp(1.4rem, 0.4rem + 1vw, 1.4rem);
    --font-size-icon: clamp(1.6rem, 1.6rem + 1vw, 1.8rem);
    --font-size-title-bar-icon: clamp(6px, 3.5vw, 13px);

    --font-size-title: clamp(1.6rem, 1rem + 1.5vw, 2.2rem);
    --font-size-calendar-header: clamp(1.08rem, 1.08rem + 0.5vw, 1.44rem);
    --font-size-bridge-select: clamp(0.45rem, 0.45rem + 0.9vw, 1rem);
    --font-size-bridge-select-icon: calc(var(--font-size-bridge-select) * 1.6);
    --font-size-nav: clamp(.75rem, .75rem + 1.8vw, 1.8rem);
    /* Smaller on narrow: starts at 8.8px, scales aggressively */
    --font-size-icon: clamp(1.9rem, 1.8rem + 1vw, 2.2rem);
    --font-size-record-selects: clamp(1.0rem, .9rem + 0.5vw, 1.2rem);
    --font-size-dropdown-item: clamp(1.2rem, 1.1rem + 0.5vw, 1.32rem);
    --font-size-admin-button: clamp(1.95rem, 1.95rem + 1.3vw, 2.21rem);
    --font-size-menu-item: clamp(1.2rem, 1.1rem + 0.8vw, 1.44rem);
    --font-size-close-button: clamp(1.8rem, 1.6rem + 1vw, 2rem);
    --font-size-back-button: clamp(1rem, 0.9rem + 0.8vw, 1.2rem);
    --font-size-page-header: clamp(0.65rem, 0.6rem + 2vw, 1.5rem);
    --font-size-results-header: clamp(0.55rem, 0.55rem + 1.8vw, 1.5rem);

    /* Smaller on narrow: starts at 10.4px, scales aggressively */
    --menu-icon-font-size: 0.5em;
    --icon-info-size: clamp(1.2rem, 1.2rem + 0.5vw, 1.5rem);

    /* Filter Icons - Calendar, Player, Performance */
    --filter-icon-size: 23.4px;
    /* 30% larger than base 18px */

    /* Checkbox Size - Filter inputs */
    --checkbox-size: 24px;

    /* Info Button Styling */
    --info-button-size: var(--icon-info-size);
    --info-button-color: var(--primary-color, #666666);
    --info-button-opacity: 0.35;
    --info-button-opacity-hover: 0.7;

    /* Calendar Button Size - Responsive with clamp */
    --calendar-button-size: clamp(36px, 36px + 1vw, 48px);
    /* Scales from 36px to 48px based on viewport */

    /* Colors - Core */
    --primary-color: #333;
    --secondary-color: #666;
    --accent-color: #1a73e8;
    --title-bar-color: #1a73e8;
    --error-color: red;
    /* Modern blue for all environments */
    --border-color: #ccc;
    --validated-color: #00d26a;
    --not-validated-color: #ff4848;
    --spinner-label-color: red;

    /* Colors - Background */
    --background-color: lightgray;
    --primary-bg-color: lightgray;
    --secondary-bg-color: #f9f9f9;
    --highlight-bg-color: lightgray;

    /* Colors - Buttons */
    --button-color: #2563eb;
    /* Complementary blue instead of red */
    --button-text-color: white;
    --admin-button-color: #2563eb;
    /* Complementary blue for delete/archive buttons */
    --admin-button-text-color: white;
    --user-button-color: black;

    /* Colors - Dropdown */
    --dropdown-bg-color: rgb(236, 232, 232);
    --dropdown-item-color: #f0f0f0;
    --selected-dropdown-bg-color: #bdbdbd;
    --selected-dropdown-color: #333;

    /* Colors - Header */
    --header-color: #b1b1b1;

    /* Colors - Drilldown */
    --drilldown-leader-to-all-boards-color: rgb(192, 191, 191);
    --drilldown-leader-to-all-boards-alt-color: rgb(204, 204, 204);
    --drilldown-travelers-color: #bfd3cf;
    --drilldown-travelers-alt-color: #dee4e2;
    --drilldown-to-cards-color: #daf5ef;
    --board-row-color: #f5e4c7;

    /***** Z-Index Hierarchy *****/
    /* Tour interaction blocker */
    --z-tour: 2147483000;

    /* App spinner - highest, on top of splash */
    --z-spinner: 999999;
    /* Splash screen - below spinner */
    --z-splash: 999998;

    /* Popup dialogs - above everything except spinner/splash */
    --z-index-popup-dialog: 10000;

    --z-index-super-high: 9999;
    /* Tour UI (highest) */
    --z-tour-blocker: 9998;

    /* Modal dialogs */
    --z-modal: 1000;

    --z-index-menu: 900;
    --z-index-sandbox-badge: 800;
    --z-index-modal: 700;
    --z-index-menu-backdrop: 550;

    --z-index-title-bar: 460;
    --z-index-board-row: 455;
    --z-index-nav: 450;

    /* Fixed signup header - above content, below board-row */
    --z-index-signup-line: 250;

    /* Dropdown grids - above drilldown, below signup-line */
    --z-index-dropdown-open: 999;
    --z-index-dropdown-grid: 220;
    --z-index-dropdown: 220;

    --z-index-drilldown: 200;

    /* Dropdown menus */
    --z-dropdown: 100;
    --z-index-overlay: 100;

    /* Tooltips */
    --z-tooltip: 50;



    /***** iPhone-Style Theme *****/
    /* Centralized modern card/list styling used across signups, pairs, movements, results */
    --theme-card-bg: #ffffff;
    --theme-date-header: #eef0f5;
    --theme-card-shadow: rgba(0, 0, 0, 0.1);
    --theme-card-border: rgba(26, 115, 232, 0.1);
    --theme-header-bg: #f8f9fa;
    --page-header-gradient: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%);
    --theme-header-text: #495057;
    --theme-row-hover: #f0f8ff;
    --theme-row-border: rgba(26, 115, 232, 0.08);
    --theme-button-primary: #1a73e8;
    --theme-button-danger: #dc3545;

}



html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* Root never scrolls */
    overscroll-behavior: none;

    width: 100%;
    max-width: none;

    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--font-family);
    color: var(--primary-color);
}

/* Layout Components */
#app-wrapper {
    position: fixed;
    /* glued to viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* margin: 0 auto; */

    width: 100%;
    max-width: var(--app-max-width);

    /* 👇 allow vertical scrolling here */
    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    /* smooth scroll on iOS */
    overscroll-behavior-y: contain;
    /* no pull-to-refresh / bounce if supported */

    outline-offset: -1px;
    scrollbar-width: none;
    padding-top: env(safe-area-inset-top);
}


/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.grid>* {
    min-width: 0;
    overflow-wrap: anywhere;
}

.grid img {
    max-width: 100%;
    height: auto;
}

/* make sure dates fields are not too wide on mobile*/
.modal input[type="date"],
.modal input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 2.4rem;
}


/* Hide scrollbar for Firefox */
html {
    scrollbar-width: none;
}


/* Hide scrollbar for Chrome, Safari, Edge */
#app-wrapper::-webkit-scrollbar {
    display: none;
}

#app-wrapper.overlay-active {
    overflow: hidden;
    /* Prevents background scrolling when modal is active */
}


#app-spinner-wrapper {
    display: none;
}

#app-spinner-label {
    display: none;
}

#app-spinner-overlay {
    display: none;
}

#app-spinner {
    display: none;
}

.offline {
    position: relative;
}

.offline::after {
    content: '✕';
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    font-size: 16px;
    color: white;
    background: red;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}


/* ========================================= */
/* Title Bar - iPhone Style                 */
/* ========================================= */

#title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    max-width: var(--app-max-width);
    height: var(--title-bar-height);
    background: var(--title-bar-color);
    color: white;
    font-size: var(--font-size-page-header);
    display: grid;
    grid-template-rows: var(--title-bar-icons-height) var(--title-bar-header-height);
    grid-template-columns: 10% 10% 60% 10% 10%;
    white-space: nowrap;
    overflow: visible;
    z-index: var(--z-index-title-bar);
    margin: 0;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.calendar-button {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    align-self: center;
    justify-self: center;
    padding-left: 5px;
    font-size: var(--font-size-icon);
    position: relative;
    visibility: hidden;
    /* Hidden until after login */
}

#calendar-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    color: white;
    text-transform: uppercase;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-44%, -59%);
    width: 100%;
    height: 100%;
}

#calendar-date>div:first-child {
    color: var(--title-bar-color);
}



#title-container {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
    align-self: center;
    position: relative;
    /* Enable positioning context for the badge */
}



/* Environment Indicator */
#environment-indicator {
    grid-row: 2;
    grid-column: 2;
    display: none;
    padding: 2px 0;
    font-size: 11px;
    color: yellow;
    justify-self: start;
    align-self: start;
    border: none;
    margin-right: 0;
    margin-left: 0;
    pointer-events: auto;
    cursor: pointer;
    margin-top: -18px;
}


#org-indicator {
    grid-row: 1;
    grid-column: 2;
    display: none;
    line-height: 1.2;
    font-size: var(--font-size-xs);
    font-weight: 400;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    justify-self: start;
    align-self: center;
    margin-left: 0;
    padding-left: 0;
    max-width: 100%;
    pointer-events: auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px;
    word-break: break-word;
    white-space: normal;
    position: relative;
}

.player-count-circle {
    position: absolute;
    top: -10px;
    right: -14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 8px;
    font-weight: bold;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.player-count-circle.two-digit {
    font-size: 6px;
}

/* Make font size aggressively smaller on narrow viewports */
@media (max-width: 480px) {
    #org-indicator {
        font-size: var(--font-size-title-bar-icon);
    }
}

@media (max-width: 320px) {
    #org-indicator {
        font-size: var(--font-size-title-bar-icon);
    }
}



#profile-icon {

    grid-row: 1;
    grid-column: 4;
    display: flex;
    width: clamp(14px, 6vw, 32px);
    height: clamp(14px, 6vw, 32px);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    text-transform: uppercase;
    border: 1px solid #B3D4F8;
    pointer-events: auto;
    font-size: var(--font-size-title-bar-icon);
    font-weight: 600;
}

.favicon-icon {
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-icon-small);
    color: var(--primary-color);
    cursor: pointer;
}

#title-subtitle {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Responsive subtitle sizing */
    font-size: clamp(0.7rem, 2.5vw, var(--font-size-ms));
}

#title {
    font-weight: bold;
    overflow: visible;
    text-overflow: ellipsis;
    font-size: var(--font-size-title);
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#player-count-icon {
    display: none;
    /* Hide the old player count icon */
}

#player-count-badge {
    display: none;
}

#title-subtitle {
    font-size: var(--font-size-ms);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-button {
    position: relative;
}

#message-line {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 100%;
    max-width: var(--app-max-width);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--font-size-m);
    text-align: center;
    display: none;
    overflow: hidden;
    z-index: var(--z-index-menu);
}



/* ============================================================================
   PAGE HEADER CONTAINER - STABLE GRID LAYOUT
   WARNING: DO NOT CHANGE TO FLEXBOX! This layout was tested and works.
   Last stable: Oct 2025 - Simple 3-column grid (1em auto 1em)
   ============================================================================ */

/* ========================================= */
/* Page Header - iPhone Style               */
/* ========================================= */

#page-header-container {
    grid-row: 2;
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%);
    color: #1976d2;
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: var(--page-header-height);
    height: var(--page-header-height);
    border-bottom: 1px solid rgba(25, 118, 210, 0.2);
    font-weight: 400;
}

#page-header {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.hide‑before::before {
    content: none !important;
    display: none !important;
}

#player-menu-icon {
    grid-column: 5;
    grid-row: 1;
    cursor: pointer;
    align-self: center;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-icon);
}

#player-menu-icon>button {
    font-size: var(--font-size-icon);
    color: black;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

#player-menu-icon>button>span.hamburger-label {
    font-size: var(--font-size-l);
    color: white;
    font-weight: bold;
}

.page-section {
    width: 100%;
    max-width: var(--app-max-width);
}

/* For nav bars or fixed elements */
nav {
    position: fixed;
    top: var(--title-bar-height);
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: var(--app-max-width);
    background: var(--primary-bg-color);
    box-sizing: border-box;
    z-index: var(--z-index-nav);
    overflow-x: auto;
    /* allow scrolling if buttons overflow */
}

.event-section {
    width: 100%;
    max-width: var(--app-max-width);
}

#page-overlay-event-content {
    position: absolute;
    top: calc(var(--title-bar-height, 60px) + var(--nav-height, 50px));
    left: 0;
    width: 100%;
    height: 100%;
    background: lightgray;
    transition: opacity 0.3s ease-in-out;
    z-index: var(--z-index-overlay);
    max-width: var(--app-max-width);
    pointer-events: none;
    touch-action: none;
}

.event-offline {
    background-color: lightgray;
    pointer-events: none;
}

.button-bridge {
    /* Changed to inline-flex */
    justify-content: center;
    /* Centers text horizontally */
    align-items: center;
    /* Centers text vertically */
    background-color: var(--admin-button-color);
    color: var(--admin-button-text-color);
    border: none;
    padding: var(--spacing-medium);
    text-align: center;
    font-size: var(--font-size-m);
    cursor: pointer;
    border-radius: var(--border-radius);
    max-width: 150px;
}

.fa {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    color: gray;
    cursor: pointer;
    transition: color 0.2s ease;
}

.red {
    color: red;
}

.green {
    color: green;
}

.gray {
    color: gray;
}

.page-content {
    width: 100%;
    max-width: var(--app-max-width);
    padding-top: calc(var(--title-bar-height) + var(--nav-height));
}

/* Pages without nav (players, performance) - override padding */
#players .page-content,
#performance .page-content,
#players,
#performance {
    padding-top: var(--title-bar-height);
}

/* Chrome, Safari: hide scrollbar */
.page-content::-webkit-scrollbar {
    display: none;
}

/* ============================================================================
   PAGE TITLE - SIMPLE 5-COLUMN GRID (NO MEDIA QUERIES)
   Columns: 5vw (left-icon-1) | 5vw (left-icon-2) | 80vw (text) | 5vw (right-icon) | 5vw (admin-menu)
   ============================================================================ */
.page-title {
    display: grid;
    grid-template-columns: 10% 5% 70% 5% 10%;
    align-items: center;
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
}

/* Left icon container - column 1 & 2 */
.page-title-icons-left {
    grid-column: 1 / 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

/* Center text - column 3 */
.page-title-text {
    grid-column: 1/6;
    grid-row: 1;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right icon container (future use) - column 4 */
.page-title-icons-right {
    grid-column: 5;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Admin menu icon - column 5 */
#admin-menu-icon {
    grid-column: 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: right;
    justify-self: end;
    font-size: var(--font-size-icon);
    cursor: pointer;
}

/* Generic header icon styling */
.header-icon {
    cursor: pointer;
    font-size: 18px;
    padding: 8px;
    border-radius: 4px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Welcome line - spans the text column */
#welcome-line {
    grid-column: 3;
    text-align: center;
    font-size: var(--font-size-l);
}

/* Filter icon specific styling */
.header-filter-icon {
    color: var(--admin-button-color);
    font-size: var(--filter-icon-size);
}

.header-filter-icon:hover {
    color: var(--admin-button-color);
    background: transparent;
}

.header-filter-icon.active {
    color: var(--admin-button-color);
}

/* Add/action button specific styling */
.header-add-button {
    background-color: black;
    color: white;
    padding: 8px 12px;
}

.header-add-button:hover {
    background-color: #333;
}

.page-subtitle {
    font-size: var(--font-size-m);
}

.no-content-message {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-top: 20px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--primary-bg-color);
    padding: var(--spacing-small);
    box-sizing: border-box;
    text-align: center;
    text-align-last: center;
}

.clicked {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Hide scrollbars but allow scrolling */
.scrollable-container {
    overflow: auto;
    scrollbar-width: thin;
}

.scrollable-container::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, and Edge: hide scrollbar */
}

input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--highlight-bg-color);
    color: var(--secondary-color);
    border: 1px solid var(--border-color);
    cursor: not-allowed;
    opacity: 1;
}

#toggle-event-visibility {
    grid-column: 1/-1;
}

/* Events filter styles */
.events-filter-container {
    padding: var(--spacing-medium);
    padding-bottom: var(--spacing-small);
    background-color: var(--primary-bg-color);
}

.events-filter-container .filter-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

#events-filter {
    width: 100%;
    padding: var(--spacing-small);
    padding-right: 65px;
    /* Make room for both help and clear buttons */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: var(--font-size-medium);
    background-color: var(--secondary-bg-color);
    color: var(--primary-color);
    box-sizing: border-box;
}

#events-filter:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.filter-help-toggle {
    position: absolute;
    right: 35px;
    /* Position to the left of the clear button */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--secondary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
}

.filter-help-toggle:hover {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

#clear-events-filter {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    font-size: var(--font-size-admin-button);
    color: var(--secondary-color);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    display: none;
    /* Hidden by default, shown when there's text */
    line-height: 1;
    transition: all 0.2s ease;
}

#clear-events-filter:hover {
    background-color: var(--secondary-bg-color);
    color: var(--primary-color);
}

#clear-events-filter.visible {
    display: block;
}

/* Filter results info */
.events-filter-info {
    text-align: center;
    padding: var(--spacing-small);
    font-size: var(--fint-size-l);
    color: var(--secondary-color);
    font-style: italic;
}

/* Filter checkboxes row (repurposed for counts and actions) */
.filter-checkboxes-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    margin-top: var(--spacing-small);
}

/* Event counts display */
.event-counts-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
    font-size: 16px;
    color: var(--secondary-color);
}

.event-count-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.event-count-display {
    font-weight: bold;
    color: var(--primary-color);
}

/* Legacy filter checkbox styles - kept for backward compatibility */
.filter-checkboxes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-small);
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xsmall);
    cursor: pointer;
    font-size: 18px;
    color: var(--secondary-color);
    user-select: none;
}

.filter-checkbox-label input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--primary-color);
    cursor: pointer;
}

.filter-checkbox-label:hover {
    color: var(--primary-color);
}

.filter-checkbox-label input[type="checkbox"]:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

#landscape-blocker {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #000;
    /* solid black */
    padding: calc(env(safe-area-inset-top) + 16px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
    z-index: var(--z-index-super-high);
    /* over everything */
    pointer-events: auto;
    /* remove blur since you want black, and it can cause stacking issues */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#landscape-blocker .card {
    width: min(90dvw, 420px);
    text-align: center;
    background: white;
    color: #111;
    border-radius: 16px;
    padding: 20px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

#landscape-blocker .icon {
    font-size: var(--font-size-xxl);
    margin-bottom: 8px;
    color: red;
}

/* === Unified Info Button Style === */
.info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 8px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--info-button-size);
    color: var(--info-button-color);
    opacity: var(--info-button-opacity);
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.info-button:hover {
    opacity: var(--info-button-opacity-hover);
    background-color: rgba(0, 0, 0, 0.05);
}

.info-button:active {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Circle Spinner - classic loading spinner */
.circle-spinner {
    border: 4px solid rgba(0, 123, 255, 0.1);
    border-left-color: #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================= */
/* CONSOLIDATED MEDIA QUERIES               */
/* ========================================= */

/* Landscape mode - block on small tablets/phones */
@media (orientation: landscape) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
    #landscape-blocker {
        display: flex;
    }

    body {
        overflow: hidden;
        touch-action: none;
    }
}

/* Narrow devices (max-width: 400px) - reduce vertical whitespace */
@media (max-width: 400px) {
    :root {
        --spacing-small: 3px;
        --spacing-medium: 8px;
        --spacing-large: 12px;
        --font-size-m: clamp(0.75rem, 0.75rem + 1vw, 1.2rem);
    }

    .modal-buttons {
        margin: 6px 0;
    }

    .modal-footer {
        margin-top: 6px;
        padding-top: 5px;
    }

    .form-group {
        margin-bottom: 4px;
    }

    /* Reduce modal field font sizes - keep labels, reduce inputs more */
    .modal-field input,
    .modal-field textarea,
    .modal-field select {
        font-size: clamp(0.55rem, 0.55rem + 0.3vw, 0.75rem);
    }

    .page-subtitle {
        font-size: var(--font-size-s);
    }

    /* Card shuffle spinner adjustments */
    .card-shuffle-spinner {
        --card-width: 12%;
        --card-radius: 0.3em;
    }

    /* Nav buttons - hide icons, allow text wrap */
    .nav-button {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding: 0.25rem 0.2rem;
    }

    .nav-button i {
        display: none;
    }

    /* Menu item vertical spacing - reduce padding */
    .menu-item {
        padding: 2px 4px;
    }

    /* Dropdown items vertical spacing - reduce padding */
    .dropdown-item {
        padding: 4px 8px;
    }

    /* Submenu item min-height */
    .hamburger-submenu-item {
        min-height: 22px;
    }
}

/* Touch devices (no hover) - hide scrollbars */
@media (hover: none) and (pointer: coarse) {
    #performance-content {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    #performance-content::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari/Webkit */
    }

    .performance-grid-scroll {
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

}