/* ============================================
   Base Styles & Reset
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Dynamic viewport dimensions - updated via JavaScript */
    /* Use svh (small viewport height) as default - this is the viewport when Safari's UI is visible */
    /* JavaScript will update this to the actual visual viewport height dynamically */
    /* Fallback to vh for older browsers that don't support svh */
    --viewport-height: 100svh;
    --viewport-width: 100vw;
    --available-height: 100svh;
    --header-height: 48px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    
    /* ============================================
       Color Variables - Light Theme (Default)
       ============================================ */
    
    /* Background Colors */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --bg-hover: #f0f0f0;
    --bg-active: #e9ecef;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-modal: #ffffff;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-drawer-overlay: rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #2c3e50;
    --text-tertiary: #6c757d;
    --text-muted: #7f8c8d;
    --text-placeholder: #95a5a6;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-primary: #e9ecef;
    --border-secondary: #dee2e6;
    --border-tertiary: #ddd;
    --border-input: #ddd;
    --border-focus: #27ae60;
    
    /* Primary Brand Colors */
    --color-primary: #3498db;
    --color-primary-hover: #2980b9;
    --color-primary-light: #e3f2fd;
    --color-primary-dark: #1976d2;
    
    /* Success/Green Colors */
    --color-success: #27ae60;
    --color-success-hover: #229954;
    --color-success-light: #d4edda;
    --color-success-bg: #e8f5e9;
    --color-success-text: #2e7d32;
    
    /* Warning/Yellow Colors */
    --color-warning: #ffc107;
    --color-warning-text: #856404;
    
    /* Error/Red Colors */
    --color-error: #e74c3c;
    --color-error-hover: #c0392b;
    --color-error-light: #fee;
    --color-error-border: #fcc;
    
    /* Info/Blue Colors */
    --color-info: #3498db;
    --color-info-hover: #2980b9;
    
    /* Purple Colors */
    --color-purple: #9b59b6;
    --color-purple-hover: #8e44ad;
    --color-purple-light: #f4ecf7;
    
    /* Orange Colors */
    --color-orange: #f39c12;
    --color-orange-hover: #d68910;
    
    /* Teal Colors */
    --color-teal: #16a085;
    --color-teal-hover: #138d75;
    
    /* Gray Colors */
    --color-gray: #95a5a6;
    --color-gray-hover: #7f8c8d;
    --color-gray-light: #ecf0f1;
    
    /* Court Colors */
    --court-bg: #e8dcc6;
    --court-border: #8b7355;
    --net-bg: #ffffff;
    --net-line: #333333;
    --attack-line: #8b7355;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.1);
    --shadow-md: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.2);
    --shadow-xl: rgba(0, 0, 0, 0.3);
    
    /* Player Label Text Shadow */
    --player-label-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

/* ============================================
   Dark Theme
   ============================================ */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #252525;
    --bg-hover: #3a3a3a;
    --bg-active: #404040;
    --bg-card: #2d2d2d;
    --bg-input: #2d2d2d;
    --bg-modal: #2d2d2d;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-drawer-overlay: rgba(0, 0, 0, 0.7);
    
    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #f5f5f5;
    --text-tertiary: #b0b0b0;
    --text-muted: #888888;
    --text-placeholder: #666666;
    --text-inverse: #1a1a1a;
    
    /* Border Colors */
    --border-primary: #404040;
    --border-secondary: #4a4a4a;
    --border-tertiary: #505050;
    --border-input: #505050;
    --border-focus: #4caf50;
    
        /* Primary Brand Colors */
        --color-primary: #64b5f6;
        --color-primary-hover: #42a5f5;
        --color-primary-light: #2d4a6b;
        --color-primary-dark: #64b5f6;
    
    /* Success/Green Colors */
    --color-success: #4caf50;
    --color-success-hover: #66bb6a;
    --color-success-light: #1b5e20;
    --color-success-bg: #2e4d32;
    --color-success-text: #81c784;
    
    /* Warning/Yellow Colors */
    --color-warning: #ffb74d;
    --color-warning-text: #1a1a1a;
    
    /* Error/Red Colors */
    --color-error: #ef5350;
    --color-error-hover: #e57373;
    --color-error-light: #3d1f1f;
    --color-error-border: #5d2f2f;
    
    /* Info/Blue Colors */
    --color-info: #64b5f6;
    --color-info-hover: #42a5f5;
    
    /* Purple Colors */
    --color-purple: #ba68c8;
    --color-purple-hover: #ab47bc;
    --color-purple-light: #4a2c4a;
    
    /* Orange Colors */
    --color-orange: #ffb74d;
    --color-orange-hover: #ffa726;
    
    /* Teal Colors */
    --color-teal: #4db6ac;
    --color-teal-hover: #26a69a;
    
    /* Gray Colors */
    --color-gray: #757575;
    --color-gray-hover: #616161;
    --color-gray-light: #424242;
    
    /* Court Colors (slightly darker for dark mode) */
    --court-bg: #695630;
    --court-border: #111111;
    --net-bg: #dddddd;
    --net-line: #333333;
    --attack-line: #333333;
    
    /* Shadow Colors */
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --shadow-xl: rgba(0, 0, 0, 0.7);
    
    /* Player Label Text Shadow */
    --player-label-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* System theme preference - respects OS/browser setting */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        /* Background Colors */
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --bg-tertiary: #252525;
        --bg-hover: #3a3a3a;
        --bg-active: #404040;
        --bg-card: #2d2d2d;
        --bg-input: #2d2d2d;
        --bg-modal: #2d2d2d;
        --bg-overlay: rgba(0, 0, 0, 0.7);
        --bg-drawer-overlay: rgba(0, 0, 0, 0.7);
        
        /* Text Colors */
        --text-primary: #e0e0e0;
        --text-secondary: #f5f5f5;
        --text-tertiary: #b0b0b0;
        --text-muted: #888888;
        --text-placeholder: #666666;
        --text-inverse: #1a1a1a;
        
        /* Border Colors */
        --border-primary: #404040;
        --border-secondary: #4a4a4a;
        --border-tertiary: #505050;
        --border-input: #505050;
        --border-focus: #4caf50;
        
        /* Primary Brand Colors */
        --color-primary: #64b5f6;
        --color-primary-hover: #42a5f5;
        --color-primary-light: #2d4a6b;
        --color-primary-dark: #90caf9;
        
        /* Success/Green Colors */
        --color-success: #4caf50;
        --color-success-hover: #66bb6a;
        --color-success-light: #1b5e20;
        --color-success-bg: #2e4d32;
        --color-success-text: #81c784;
        
        /* Warning/Yellow Colors */
        --color-warning: #ffb74d;
        --color-warning-text: #1a1a1a;
        
        /* Error/Red Colors */
        --color-error: #ef5350;
        --color-error-hover: #e57373;
        --color-error-light: #3d1f1f;
        --color-error-border: #5d2f2f;
        
        /* Info/Blue Colors */
        --color-info: #64b5f6;
        --color-info-hover: #42a5f5;
        
        /* Purple Colors */
        --color-purple: #ba68c8;
        --color-purple-hover: #ab47bc;
        --color-purple-light: #4a2c4a;
        
        /* Orange Colors */
        --color-orange: #ffb74d;
        --color-orange-hover: #ffa726;
        
        /* Teal Colors */
        --color-teal: #4db6ac;
        --color-teal-hover: #26a69a;
        
        /* Gray Colors */
        --color-gray: #757575;
        --color-gray-hover: #616161;
        --color-gray-light: #424242;
        
        /* Court Colors */
        --court-bg: #c9b99a;
        --court-border: #6b5d3f;
        --net-bg: #ffffff;
        --net-line: #333333;
        --attack-line: #6b5d3f;
        
        /* Shadow Colors */
        --shadow-sm: rgba(0, 0, 0, 0.3);
        --shadow-md: rgba(0, 0, 0, 0.4);
        --shadow-lg: rgba(0, 0, 0, 0.5);
        --shadow-xl: rgba(0, 0, 0, 0.7);
        
        /* Player Label Text Shadow */
        --player-label-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    /* Improve touch responsiveness on mobile */
    -webkit-tap-highlight-color: transparent;
}

/* Improve button touch handling on mobile */
button {
    touch-action: manipulation; /* Remove 300ms delay on mobile taps */
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   Loading Overlay
   ============================================ */
.app-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.app-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-primary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.app-loading-text {
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

.app-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: var(--available-height, 100svh);
    max-height: var(--available-height, 100svh);
    height: var(--available-height, 100svh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hide app content when auth is required */
.app-container.auth-required {
    display: none;
}

/* Mobile Header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-sm);
    z-index: 1000;
    align-items: center;
    padding: 0 16px;
}

.mobile-menu-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.2s;
    border-radius: 4px;
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: var(--bg-hover);
}

.mobile-menu-btn svg {
    width: 24px !important;
    height: 24px !important;
}

.mobile-header-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mobile-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Retina display optimization - using 512x512 source for crisp display on high-DPI screens */
    /* Browser automatically uses higher resolution when source is larger than display size */
}

.mobile-header-spacer {
    width: 48px; /* Same width as menu button to center logo */
    flex-shrink: 0;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    color: var(--text-secondary);
    font-size: 2.5em;
}

.main-content {
    display: flex;
    gap: 0;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* ============================================
   Drawer Overlay
   ============================================ */
.drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-drawer-overlay);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================
   Sidebar
   ============================================ */
.sidebar {
    flex: 0 0 350px;
    background: var(--bg-secondary);
    padding: 0;
    border-radius: 0;
    box-shadow: 2px 0 10px var(--shadow-sm);
    /* height: var(--available-height, 100vh);
    max-height: var(--available-height, 100vh); */
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative;
}

/* Sidebar content area (scrollable) - must be able to shrink */
.sidebar-content {
    flex: 1;
    flex-shrink: 1; /* Explicitly allow shrinking to accommodate footer */
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow-x: hidden;
}

.sidebar-content > .accordion:first-child {
    margin-top: 0;
}

/* Sidebar Footer */
.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    padding: 0;
}

.profile-section {
    position: relative;
}

.profile-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.profile-button:hover {
    background: var(--bg-tertiary);
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-avatar svg {
    width: 20px !important;
    height: 20px !important;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--text-tertiary);
}

.profile-section.active .profile-chevron {
    transform: rotate(180deg);
}

.profile-menu {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-md);
    margin-bottom: 8px;
    overflow: hidden;
    z-index: 10;
}

.profile-menu.hidden {
    display: none;
}

.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-primary);
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-item:hover {
    background: var(--bg-tertiary);
}

.profile-menu-item svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--text-tertiary);
}

/* ============================================
   Profile Menu Theme Section
   ============================================ */
.profile-menu-theme-section {
    display: flex;
    flex-direction: column;
}

.profile-menu-item-toggle {
    position: relative;
}

.profile-menu-item-toggle.active {
    background: var(--bg-tertiary);
}

.profile-menu-item-toggle.active .profile-menu-chevron {
    transform: rotate(90deg);
}

.profile-menu-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    width: 16px !important;
    height: 16px !important;
}

.profile-menu-theme-options {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
}

.profile-menu-theme-options .profile-menu-item-sub:last-child {
    border-bottom: none;
}

.profile-menu-item-sub {
    padding-left: 48px; /* Align with icon + gap from parent */
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-menu-item-sub svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--text-tertiary);
}

.accordion {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.accordion.active {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ============================================
   State Indicator
   ============================================ */
.state-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.current-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.item-badge svg {
    width: 12px !important;
    height: 12px !important;
}

.item-badge.position {
    background: var(--color-primary);
    color: var(--text-inverse);
}

.item-badge.scenario {
    background: var(--color-purple);
    color: var(--text-inverse);
}

.item-badge.sequence {
    background: var(--color-teal);
    color: var(--text-inverse);
}

.item-name {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modified-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modified-indicator.hidden {
    display: none !important;
}

.modified-indicator .badge {
    background: var(--color-warning);
    color: var(--color-warning-text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.modified-indicator button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-save {
    background: var(--color-success);
    color: var(--text-inverse);
}

.btn-save:hover {
    background: var(--color-success-hover);
}

.btn-save-as {
    background: var(--color-primary);
    color: var(--text-inverse);
}

.btn-save-as:hover {
    background: var(--color-primary-hover);
}

.btn-discard {
    background: var(--color-gray);
    color: var(--text-inverse);
}

.btn-discard:hover {
    background: var(--color-gray-hover);
}


/* ============================================
   Accordion
   ============================================ */
.accordion {
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 4px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.accordion-header:hover {
    background: var(--bg-active);
}

.accordion-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ============================================
   Lucide Icons - Global Sizing
   ============================================ */
svg[data-lucide] {
    width: 16px !important;
    height: 16px !important;
}

.accordion-header h3 svg[data-lucide] {
    width: 16px !important;
    height: 16px !important;
}

.accordion-icon {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s;
    color: var(--text-tertiary);
}

.accordion-icon svg {
    width: 16px !important;
    height: 16px !important;
}

.accordion.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--bg-secondary);
}

.accordion.active .accordion-content {
    /* Fill the sidebar height minus padding and other accordion headers */
    /* max-height: calc(var(--available-height) - 210px);  */
    /* Fill the entire sidebar height */
    max-height: 100%; 

    transition: max-height 0.3s ease-in;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ============================================
   Accordion Content Styles
   ============================================ */
.search-filter-bar {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.search-input-wrapper {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.search-filter-bar input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.tag-filter-btn {
    padding: 8px 10px;
    background: var(--color-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}

.tag-filter-btn:hover {
    background: var(--color-primary-hover);
}

.tag-filter-btn svg {
    width: 16px;
    height: 16px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.selected-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    border: 1px solid;
}

.selected-tag-chip .remove-tag-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
    width: 16px;
    height: 16px;
    color: inherit;
}

.selected-tag-chip:hover .remove-tag-btn {
    opacity: 1;
}

.selected-tag-chip .remove-tag-btn svg {
    width: 12px;
    height: 12px;
}

.tag-filter-dropdown {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-tertiary);
    border-radius: 4px;
    box-shadow: 0 4px 12px var(--shadow-md);
    z-index: 1000;
    min-width: 200px;
    max-width: 300px;
    max-height: 300px;
    overflow-y: auto;
}

.tag-filter-list {
    padding: 4px;
}

.tag-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.2s;
    min-height: 44px; /* Minimum touch target size for mobile */
}

.tag-filter-item:hover {
    background: var(--bg-hover);
}

.tag-filter-item.selected {
    background: var(--color-primary-light);
}

.tag-filter-item input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    pointer-events: auto;
}

.tag-filter-item label {
    cursor: pointer;
    flex: 1;
    font-size: 16px;
    user-select: none;
}

.new-position-btn {
    width: 100%;
    padding: 8px;
    background: var(--color-success);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.new-position-btn:hover {
    background: var(--color-success-hover);
}

.create-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.create-form input,
.create-form select {
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.create-form select[multiple] {
    min-height: 80px;
}

.create-form button {
    padding: 8px;
    background: var(--color-success);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.create-form button:hover {
    background: var(--color-success-hover);
}

.items-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.item-card {
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--border-primary);
    position: relative;
    width: 100%;
    transition: all 0.2s;
    cursor: pointer;
}

.item-card:hover {
    background: var(--bg-active);
    border-color: var(--border-secondary);
}

.item-card.active {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.item-card-name {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 13px;
    width: 100%;
}

.item-card-actions {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: none;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 8px var(--shadow-lg);
    z-index: 10;
    backdrop-filter: blur(4px);
}

.item-card:hover .item-card-actions {
    display: flex;
}

.item-card-actions button {
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.item-card-actions button svg {
    width: 14px !important;
    height: 14px !important;
}

.btn-load {
    background: var(--color-primary);
    color: var(--text-inverse);
}

.btn-load:hover {
    background: var(--color-primary-hover);
}

.btn-play {
    background: var(--color-purple);
    color: var(--text-inverse);
}

.btn-play:hover {
    background: var(--color-purple-hover);
}

.btn-edit {
    background: var(--color-orange);
    color: var(--text-inverse);
}

.tag-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid var(--color-primary-light);
}

/* ============================================
   Modal Styles
   ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container {
    background: var(--bg-modal);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--shadow-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.modal-btn-primary {
    background: var(--color-success);
    color: var(--text-inverse);
}

.modal-btn-primary:hover {
    background: var(--color-success-hover);
}

.modal-btn-secondary {
    background: var(--color-gray);
    color: var(--text-inverse);
}

.modal-btn-secondary:hover {
    background: var(--color-gray-hover);
}

.modal-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--color-success-light);
}

.edit-menu {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border-tertiary);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 8px var(--shadow-md);
    z-index: 1000;
    min-width: 120px;
}

.edit-menu button {
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    transition: background 0.2s;
    color: var(--text-primary);
}

.edit-menu button:hover {
    background: var(--bg-hover);
}

.btn-edit:hover {
    background: #d68910;
}

.btn-delete {
    background: var(--color-error);
    color: var(--text-inverse);
}

.btn-delete:hover {
    background: var(--color-error-hover);
}

/* ============================================
   Add Player Form
   ============================================ */
.add-player-form {
    display: flex;
    flex-direction: row;
    gap: 6px;
    /* margin-bottom: 10px; */
    align-items: center;
}

.add-player-form input {
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.add-player-form #player-name {
    flex: 1;
}

.add-player-form .jersey-input {
    width: 60px;
    flex-shrink: 0;
}

.add-player-form button {
    padding: 8px 12px;
    background: var(--color-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.add-player-form button:hover {
    background: var(--color-primary-hover);
}

.lineup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-top: 10px;
}

.player-lineup-item {
    padding: 6px 8px;
    background: var(--color-gray-light);
    border-radius: 4px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid transparent;
    touch-action: pan-y; /* Allow vertical scrolling but enable drag */
    -webkit-user-select: none;
    user-select: none;
}

.player-lineup-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-md);
    border-color: var(--color-primary);
}

.player-lineup-item:active {
    cursor: grabbing;
}

.player-jersey {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0;
}

.player-name {
    flex: 1;
    font-size: 11px;
    color: var(--text-secondary);
}

.player-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.edit-player-btn {
    background: var(--color-orange);
    color: var(--text-inverse);
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    width: 24px;
    height: 24px;
}

.edit-player-btn:hover {
    background: var(--color-orange-hover);
}

.edit-player-btn svg {
    width: 14px;
    height: 14px;
}

.delete-player-btn {
    background: var(--color-error);
    color: var(--text-inverse);
    border: none;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-player-btn:hover {
    background: var(--color-error-hover);
}

/* ============================================
   Data Management
   ============================================ */
.data-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.data-buttons button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.data-buttons button:nth-child(1) {
    background: var(--color-purple);
    color: var(--text-inverse);
}

.data-buttons button:nth-child(1):hover {
    background: var(--color-purple-hover);
}

.data-buttons button:nth-child(2) {
    background: var(--color-primary);
    color: var(--text-inverse);
}

.data-buttons button:nth-child(2):hover {
    background: var(--color-primary-hover);
}

.data-buttons button:nth-child(3) {
    background: var(--color-teal);
    color: var(--text-inverse);
}

.data-buttons button:nth-child(3):hover {
    background: var(--color-teal-hover);
}

.data-info {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================
   Court Section
   ============================================ */
.court-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-secondary);
    border-radius: 0;
    box-shadow: none;
    padding: 15px;
    gap: 15px;
    overflow: hidden;
}

.court-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    gap: 15px;
}

.court-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.court-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.court {
    position: relative;
    width: min(600px, calc(var(--available-height) - 300px), 100%);
    height: min(600px, calc(var(--available-height) - 300px), 100%);
    aspect-ratio: 1;
    background: var(--court-bg);
    border: 3px solid var(--court-border);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    touch-action: none; /* Enable touch dragging on court */
    /* Font-size will be set via CSS variable --court-font-size by JavaScript */
    font-size: var(--court-font-size, 16px);
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ============================================
   Court Net
   ============================================ */
.net {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25em; /* 4px / 16px = 0.25em - scales with court font-size */
    background: repeating-linear-gradient(
        to right,
        var(--net-bg) 0,
        var(--net-bg) 0.5em,
        var(--net-line) 0.5em,
        var(--net-line) 0.75em
    );
    z-index: 10;
}

/* ============================================
   Attack Line (10ft Line)
   ============================================ */
.attack-line {
    position: absolute;
    top: 33.333%; /* 1/3 of the way down from top - scales with court height */
    left: 0;
    width: 100%;
    height: 0.125em; /* 2px / 16px = 0.125em - scales with court font-size */
    background: var(--attack-line);
    z-index: 5;
}

/* ============================================
   Court Rotation Button
   ============================================ */
.court-rotate-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--court-bg);
    color: var(--text-primary);
    border: 2px solid var(--court-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--shadow-md);
    z-index: 1000;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.court-rotate-btn:hover {
    background: var(--court-border);
    color: var(--court-bg);
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--shadow-lg);
}

.court-rotate-btn:active {
    transform: scale(0.95);
}

.court-rotate-btn i {
    width: 24px;
    height: 24px;
}

/* ============================================
   Court Rotation States
   ============================================ */
/* Net rotation states */
.court[data-rotation="0"] .net {
    top: 0;
    left: 0;
    width: 100%;
    height: 0.25em;
    transform: none;
    background: repeating-linear-gradient(
        to right,
        var(--net-bg) 0,
        var(--net-bg) 0.5em,
        var(--net-line) 0.5em,
        var(--net-line) 0.75em
    );
}

.court[data-rotation="90"] .net {
    top: 0;
    right: 0;
    left: auto;
    width: 0.25em;
    height: 100%;
    transform: none;
    background: repeating-linear-gradient(
        to bottom,
        var(--net-bg) 0,
        var(--net-bg) 0.5em,
        var(--net-line) 0.5em,
        var(--net-line) 0.75em
    );
}

.court[data-rotation="180"] .net {
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: 0.25em;
    transform: none;
    background: repeating-linear-gradient(
        to right,
        var(--net-bg) 0,
        var(--net-bg) 0.5em,
        var(--net-line) 0.5em,
        var(--net-line) 0.75em
    );
}

.court[data-rotation="270"] .net {
    top: 0;
    left: 0;
    width: 0.25em;
    height: 100%;
    transform: none;
    background: repeating-linear-gradient(
        to bottom,
        var(--net-bg) 0,
        var(--net-bg) 0.5em,
        var(--net-line) 0.5em,
        var(--net-line) 0.75em
    );
}

/* Attack line rotation states */
.court[data-rotation="0"] .attack-line {
    top: 33.333%;
    left: 0;
    width: 100%;
    height: 0.125em;
    transform: none;
}

.court[data-rotation="90"] .attack-line {
    top: 0;
    right: 33.333%;
    left: auto;
    width: 0.125em;
    height: 100%;
    transform: none;
}

.court[data-rotation="180"] .attack-line {
    bottom: 33.333%;
    top: auto;
    left: 0;
    width: 100%;
    height: 0.125em;
    transform: none;
}

.court[data-rotation="270"] .attack-line {
    top: 0;
    left: 33.333%;
    width: 0.125em;
    height: 100%;
    transform: none;
}

/* ============================================
   Player Container
   ============================================ */
.player-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em; /* 4px / 16px = 0.25em - scales with court font-size */
    z-index: 20;
    user-select: none;
}

.player-container.animating {
    transition: left 1s ease, top 1s ease;
    z-index: 30;
}

.player-container.dragging {
    opacity: 0.7;
    z-index: 100;
}

.player-container.removing {
    opacity: 0.4;
    filter: grayscale(100%);
}

.player-container.removing .player-on-court {
    background: #e74c3c;
    border-color: #c0392b;
    cursor: not-allowed;
}

/* ============================================
   Player on Court
   ============================================ */
.player-on-court {
    position: relative;
    width: 3.125em; /* 50px / 16px = 3.125em - scales with court font-size */
    height: 3.125em;
    aspect-ratio: 1; /* Maintain circle shape */
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.125em; /* 18px / 16px = 1.125em - scales with court font-size */
    cursor: move;
    border: 0.1875em solid var(--text-inverse); /* 3px / 16px = 0.1875em - scales with court font-size */
    touch-action: none; /* Enable touch dragging */
    -webkit-user-select: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 4px var(--shadow-sm);
}

.player-label {
    font-size: 0.6875em; /* 11px / 16px = 0.6875em - scales with court font-size */
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    text-shadow: var(--player-label-shadow);
    max-width: 5em; /* 80px / 16px = 5em - scales with court font-size */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Animation Controls
   ============================================ */
.animation-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 44px; /* Fixed height to prevent layout shift when buttons appear/disappear */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.animation-buttons.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    display: flex !important; /* Keep display: flex to maintain layout space */
}

.animation-buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.animation-buttons button svg {
    width: 16px !important;
    height: 16px !important;
}

#play-animation-btn {
    background: var(--color-purple);
    color: var(--text-inverse);
}

#play-animation-btn:hover {
    background: var(--color-purple-hover);
}

#next-scenario-btn {
    background: var(--color-teal);
    color: var(--text-inverse);
}

#next-scenario-btn:hover {
    background: var(--color-teal-hover);
}

#refresh-position-btn {
    background: var(--color-orange);
    color: var(--text-inverse);
}

#refresh-position-btn:hover {
    background: var(--color-orange-hover);
}

.sequence-progress {
    padding: 6px 12px;
    background: var(--color-success-bg);
    border-radius: 4px;
    font-weight: 600;
    color: var(--color-success-text);
    font-size: 12px;
    white-space: nowrap;
}

/* ============================================
   Position Drop Zones
   ============================================ */
.position-drop-zones-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.position-drop-zones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
}

.drop-zone {
    position: relative;
    border: 2px dashed var(--color-gray);
    border-radius: 6px;
    padding: 12px;
    background: var(--bg-tertiary);
    touch-action: none; /* Enable touch dragging to drop zones */
    transition: all 0.2s;
    min-height: 86px; /* Fixed height to prevent layout shift when position name and tags are added */
    display: flex;
    flex-direction: column;
}

.drop-zone.drag-over {
    border-color: var(--color-purple);
    background: var(--color-purple-light);
    border-style: solid;
}

.drop-zone.has-content {
    border-color: var(--color-success);
    border-style: solid;
    background: var(--color-success-bg);
}

.drop-zone-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.drop-zone-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
}

.drop-zone-placeholder {
    color: #95a5a6;
    font-size: 12px;
    font-style: italic;
}

.drop-zone-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.drop-zone-position-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
}

.drop-zone-position-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.drop-zone-clear {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--shadow-sm);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}

.drop-zone-clear:hover {
    background: var(--shadow-md);
}

.drop-zone-clear svg {
    width: 12px !important;
    height: 12px !important;
}

/* ============================================
   Sequence Timeline
   ============================================ */
.sequence-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.timeline-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-container {
    border: 2px dashed var(--color-gray);
    border-radius: 6px;
    padding: 8px;
    background: var(--bg-tertiary);
    min-height: 80px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    transition: all 0.2s;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gray) var(--bg-tertiary);
}

.timeline-container::-webkit-scrollbar {
    height: 8px;
}

.timeline-container::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.timeline-container::-webkit-scrollbar-thumb {
    background: var(--color-gray);
    border-radius: 4px;
}

.timeline-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-placeholder);
}

.timeline-container.drag-over {
    border-color: var(--color-purple);
    background: var(--color-purple-light);
    border-style: solid;
}

.timeline-placeholder {
    color: var(--text-placeholder);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding: 20px;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border-tertiary);
    border-top: 3px solid var(--color-primary-dark);
    border-radius: 6px;
    cursor: grab;
    transition: all 0.2s;
    position: relative;
    width: 100px;
    flex-shrink: 0;
    height: 88px;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.timeline-item.drag-insert-after {
    overflow: visible;
}

.timeline-item:active {
    cursor: grabbing;
}

.timeline-item.dragging {
    opacity: 0.5;
}

.timeline-item.drag-over {
    border-color: var(--color-purple);
    background: var(--color-purple-light);
}

.timeline-item.drag-insert-before::before {
    content: '';
    position: absolute;
    left: -8px;
    top: -4px;
    bottom: -4px;
    width: 6px;
    background: var(--color-success);
    border-radius: 3px;
    z-index: 10;
    box-shadow: 0 0 8px var(--color-success);
}

.timeline-item.drag-insert-after::after {
    content: '';
    position: absolute;
    right: -8px;
    top: -4px;
    bottom: -4px;
    width: 6px;
    background: var(--color-success);
    border-radius: 3px;
    z-index: 100;
    box-shadow: 0 0 8px var(--color-success);
    pointer-events: none;
}

.timeline-item.drag-insert-before {
    margin-left: 8px;
}

.timeline-item.drag-insert-after {
    margin-right: 8px;
}

.timeline-item.active .timeline-item-bottom {
    border-top: 4px solid var(--color-success);
    background: var(--color-success-bg);
}

.timeline-item.active-start .timeline-item-bottom,
.timeline-item.active-start .timeline-scenario-start {
    border-top: 4px solid var(--color-success);
    background: var(--color-success-bg);
}

.timeline-item.active-end .timeline-item-bottom,
.timeline-item.active-end .timeline-scenario-end {
    border-top: 4px solid var(--color-success);
    background: var(--color-success-bg);
}

.timeline-item-scenario {
    width: 200px; /* 2 × 100px for the two position cards */
    /* height: 100px; */
    border-top: 3px solid var(--color-purple);
}

.timeline-item-bottom {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    min-height: 0;
}

.timeline-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.timeline-item-name {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    max-width: 100%;
}

.timeline-item-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border: none;
    background: var(--shadow-sm);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
    opacity: 0.6;
    z-index: 10;
}

.timeline-item-remove:hover {
    background: var(--color-error-light);
    opacity: 1;
}

.timeline-item-remove svg {
    width: 10px !important;
    height: 10px !important;
}

/* Position header (for solo positions) */
.timeline-position-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--border-tertiary);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-primary-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-position-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-dark);
}

.timeline-position-icon i {
    width: 12px;
    height: 12px;
}

.timeline-position-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scenario-specific styles */
.timeline-scenario-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-purple-light);
    border-bottom: 1px solid var(--border-tertiary);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-purple);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-scenario-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-purple);
}

.timeline-scenario-icon i {
    width: 12px;
    height: 12px;
}

.timeline-scenario-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.timeline-scenario-positions {
    display: flex;
    flex: 1;
    gap: 0;
}

.timeline-scenario-position {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-right: 1px solid var(--border-tertiary);
    background: var(--bg-secondary);
    min-height: 0;
}

.timeline-scenario-position:last-child {
    border-right: none;
}

.timeline-scenario-start.active-start {
    border-top: 4px solid var(--color-success);
    background: var(--color-success-bg);
}

.timeline-scenario-end.active-end {
    border-top: 4px solid var(--color-success);
    background: var(--color-success-bg);
}

/* ============================================
   Draggable Item Cards
   ============================================ */
.item-card.draggable {
    cursor: grab;
    touch-action: pan-y; /* Allow vertical scrolling but enable drag */
    -webkit-user-select: none;
    user-select: none;
}

.item-card.draggable:active {
    cursor: grabbing;
}

.item-card.dragging {
    opacity: 0.5;
}

/* Touch drag preview - visual element that follows touch */
.touch-drag-preview {
    pointer-events: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    transform: scale(1.1) rotate(2deg);
}

/* Use drop-shadow for player circles in preview to maintain circular shadow */
/* .touch-drag-preview.player-on-court,
.touch-drag-preview .player-on-court {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)) !important;
    box-shadow: none !important;
} */

/* Remove box-shadow from player container previews to avoid square shadow */
/* .touch-drag-preview.player-container {
    box-shadow: none !important;
} */

/* Reordering visual feedback for item cards */
.item-card.drag-insert-before::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 10;
}

.item-card.drag-insert-after::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 10;
}

.item-card.drag-insert-before,
.item-card.drag-insert-after {
    border-color: var(--color-primary);
}

/* Reordering visual feedback for player lineup items */
.player-lineup-item.drag-insert-before::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 10;
}

.player-lineup-item.drag-insert-after::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
    z-index: 10;
}

.player-lineup-item.drag-insert-before,
.player-lineup-item.drag-insert-after {
    border-color: var(--color-primary);
}

/* ============================================
   Clear Scenario Button
   ============================================ */
#clear-scenario-btn {
    background: var(--color-error);
    color: var(--text-inverse);
}

#clear-scenario-btn:hover {
    background: var(--color-error-hover);
}

/* ============================================
   Utility Classes - Display & Visibility
   ============================================ */
.hidden {
    display: none !important;
}

.show-flex {
    display: flex !important;
}

.show-inline-flex {
    display: inline-flex !important;
}

/* ============================================
   Legacy Position Indicator
   ============================================ */
.legacy-indicator {
    font-size: 10px;
    color: var(--text-tertiary);
}

/* ============================================
   Tag Badge Styles
   ============================================ */
.tag-badge-dynamic {
    /* Base styles for tag badges - colors are set via CSS classes */
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    border: 1px solid;
}

/* ============================================
   Tag Color Classes (Light Mode)
   ============================================ */
.tag-color-0 {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #bbdefb;
}

.tag-color-1 {
    background: #f3e5f5;
    color: #7b1fa2;
    border-color: #e1bee7;
}

.tag-color-2 {
    background: #e8f5e9;
    color: #388e3c;
    border-color: #c8e6c9;
}

.tag-color-3 {
    background: #fff3e0;
    color: #f57c00;
    border-color: #ffe0b2;
}

.tag-color-4 {
    background: #fce4ec;
    color: #c2185b;
    border-color: #f8bbd0;
}

.tag-color-5 {
    background: #e0f2f1;
    color: #00796b;
    border-color: #b2dfdb;
}

.tag-color-6 {
    background: #fff9c4;
    color: #f9a825;
    border-color: #fff59d;
}

.tag-color-7 {
    background: #e1f5fe;
    color: #0277bd;
    border-color: #b3e5fc;
}

/* ============================================
   Tag Color Classes (Dark Mode)
   ============================================ */
[data-theme="dark"] .tag-color-0 {
    background: #1e3a5f;
    color: #64b5f6;
    border-color: #2d4a6b;
}

[data-theme="dark"] .tag-color-1 {
    background: #4a2c4a;
    color: #ba68c8;
    border-color: #5a3c5a;
}

[data-theme="dark"] .tag-color-2 {
    background: #1b5e20;
    color: #81c784;
    border-color: #2e4d32;
}

[data-theme="dark"] .tag-color-3 {
    background: #5d3f1f;
    color: #ffb74d;
    border-color: #6d4f2f;
}

[data-theme="dark"] .tag-color-4 {
    background: #5d2f3f;
    color: #f48fb1;
    border-color: #6d3f4f;
}

[data-theme="dark"] .tag-color-5 {
    background: #1a4d47;
    color: #4db6ac;
    border-color: #2a5d57;
}

[data-theme="dark"] .tag-color-6 {
    background: #5d4f1f;
    color: #ffcc80;
    border-color: #6d5f2f;
}

[data-theme="dark"] .tag-color-7 {
    background: #1e3a5f;
    color: #64b5f6;
    border-color: #2d4a6b;
}

/* System theme preference for tag colors */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .tag-color-0 {
        background: #1e3a5f;
        color: #64b5f6;
        border-color: #2d4a6b;
    }
    
    :root:not([data-theme]) .tag-color-1 {
        background: #4a2c4a;
        color: #ba68c8;
        border-color: #5a3c5a;
    }
    
    :root:not([data-theme]) .tag-color-2 {
        background: #1b5e20;
        color: #81c784;
        border-color: #2e4d32;
    }
    
    :root:not([data-theme]) .tag-color-3 {
        background: #5d3f1f;
        color: #ffb74d;
        border-color: #6d4f2f;
    }
    
    :root:not([data-theme]) .tag-color-4 {
        background: #5d2f3f;
        color: #f48fb1;
        border-color: #6d3f4f;
    }
    
    :root:not([data-theme]) .tag-color-5 {
        background: #1a4d47;
        color: #4db6ac;
        border-color: #2a5d57;
    }
    
    :root:not([data-theme]) .tag-color-6 {
        background: #5d4f1f;
        color: #ffcc80;
        border-color: #6d5f2f;
    }
    
    :root:not([data-theme]) .tag-color-7 {
        background: #1e3a5f;
        color: #64b5f6;
        border-color: #2d4a6b;
    }
}

.tag-badge-small {
    font-size: 10px;
    padding: 2px 6px;
}

.tag-badge-no-tags {
    font-size: 10px;
    color: var(--text-muted);
}

/* ============================================
   Item Card Tag Container
   ============================================ */
.item-card-tags-container {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* ============================================
   Item Card Metadata
   ============================================ */
.item-card-metadata {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ============================================
   Play Button Styles
   ============================================ */
.btn-play-active {
    background: var(--color-success) !important;
}

.btn-play-inactive {
    background: var(--color-purple) !important;
}

.btn-play-sequence {
    background: var(--color-purple);
}

/* ============================================
   Modal Form Styles
   ============================================ */
.modal-form-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal-form-group {
    display: flex;
    flex-direction: column;
}

.modal-label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.modal-input-full {
    width: 100%;
}

.modal-input-with-padding {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border-input);
    border-radius: 4px;
    font-size: 14px;
    background: var(--bg-input);
    color: var(--text-primary);
}

.modal-body-text {
    margin: 0;
    line-height: 1.5;
}

.modal-body-text-with-margin {
    margin: 0 0 12px 0;
    line-height: 1.5;
}

/* ============================================
   Settings Modal Styles
   ============================================ */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-primary);
}

.settings-section .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-section .form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.settings-section .form-group input[disabled] {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.form-help {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: -4px;
}

.settings-error {
    padding: 12px;
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    border-radius: 6px;
    color: var(--color-error);
    font-size: 14px;
    display: none;
}

.settings-error:not(:empty) {
    display: block;
}

.settings-section .data-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.settings-section .data-info {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
    padding-top: 8px;
}

/* ============================================
   Tag Selector Container
   ============================================ */
.tag-selector-container {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    max-height: 150px;
    overflow-y: auto;
}

.tag-selector-header {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
    font-weight: 500;
}

.tag-selector-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tag-selector-btn {
    padding: 10px 16px;
    border: 1px solid var(--border-tertiary);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    min-height: 44px; /* Minimum touch target size for mobile */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag-selector-btn.selected {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}

/* ============================================
   Theme Selector Styles
   ============================================ */
.theme-selector-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
}

.theme-option:hover {
    border-color: var(--color-primary);
    background: var(--bg-tertiary);
}

.theme-option.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.theme-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.theme-option-content {
    flex: 1;
}

.theme-option-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.theme-option-description {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ============================================
   Mobile Positions Bucket - Hidden by default
   ============================================ */
.mobile-positions-bucket {
    display: none;
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */
@media (max-width: 1024px) and (orientation: portrait) {
    body {
        padding-top: 0; /* Removed - using fixed positioning instead */
        overflow: hidden; /* Prevent body scroll */
    }
    
    .app-container {
        padding: 0;
        max-width: 100%;
        height: var(--available-height, 100vh);
        max-height: var(--available-height, 100vh);
    }
    
    .sidebar {
        border-radius: 0;
        box-shadow: none;
    }
    
    .court-section {
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        height: 100%;
        max-height: 100%;
        flex: 1;
        min-height: 0;
    }
    
    /* Show mobile header */
    .mobile-header {
        display: flex;
    }
    
    /* Show drawer overlay only when active */
    .drawer-overlay {
        display: block;
    }
    
    .drawer-overlay:not(.active) {
        pointer-events: none;
    }
    
    /* Adjust main content for mobile header */
    .main-content {
        margin-top: 48px; /* Space for fixed mobile header */
        gap: 0;
        flex-direction: column;
        height: calc(var(--available-height, 100vh) - 48px);
        max-height: calc(var(--available-height, 100vh) - 48px);
        overflow: hidden;
    }
    
    /* Sidebar as drawer */
    .sidebar {
        position: fixed;
        top: 48px; /* Match mobile header height */
        left: 0;
        width: 300px;
        max-width: 85vw;
        height: calc(var(--available-height, 100vh) - 48px);
        max-height: calc(var(--available-height, 100vh) - 48px);
        transform: translateX(-100%);
        z-index: 1000;
        border-radius: 0;
        box-shadow: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    /* Show sidebar footer on mobile/tablet portrait - ensure it's visible in drawer */
    .sidebar-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* Ensure sidebar content can scroll when footer is present */
    .sidebar-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
    }
    
    /* Court section takes full width */
    /* .court-section {
        width: 100%;
        padding: 10px;
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
    } */
    
    /* Court container scales to fit available space */
    /* .court-container {
        width: 100%;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
    } */
    
    /* Court scales to fit available space while maintaining aspect ratio */
    .court {
        width: min(800px, calc(var(--available-height) - 260px), calc(100% - 12px));
        height: min(800px, calc(var(--available-height) - 260px), calc(100% - 12px));
        aspect-ratio: 1;
    }
    
    /* Court top bar adjustments */
    .court-top-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px;
        flex-shrink: 0;
    }
    
    .animation-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .animation-buttons button {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .animation-buttons button span {
        display: none;
    }
    
    /* Position drop zones stack vertically on mobile */
    .position-drop-zones {
        grid-template-columns: 1fr;
    }
    
    /* Accordion content adjustments */
    .accordion.active .accordion-content {
        max-height: calc(var(--available-height) - 300px);
    }
    
    /* Hide scenario sections when no scenario is loaded (using class-based approach) */
    .position-drop-zones-container.empty {
        display: none !important;
    }
    
    /* Hide animation buttons spacer when hidden on mobile */
    .animation-buttons.hidden {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* width: 0 !important; */
        /* max-width: 0 !important; */
        overflow: hidden !important;
        /* flex: 0 0 0 !important; */
    }
    
    /* Ensure buttons inside don't take up space when parent is hidden on mobile */
    .animation-buttons.hidden button {
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* State indicator on mobile - keep horizontal layout for iPad */
    .state-indicator {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .current-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    .item-name {
        font-size: 13px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Reduce court section padding and spacing on mobile */
    .court-section {
        padding: 8px;
        gap: 0;
        min-height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        max-height: 100%;
    }
    
    /* Add padding when mobile positions bucket is visible */
    .court-section.has-mobile-bucket {
        padding-bottom: calc(40vh + 8px);
    }
    
    .court-top-bar {
        padding: 8px;
        gap: 8px;
        flex-shrink: 0;
    }
    
    /* .court-container {
        flex: 1;
        min-height: 0;
    } */
    
    /* Mobile positions bucket at bottom - show on mobile when not hidden */
    .mobile-positions-bucket {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 2px solid var(--border-primary);
        box-shadow: 0 -2px 10px var(--shadow-sm);
        z-index: 200;
        max-height: 34vh;
        display: flex !important;
        flex-direction: column;
        overflow: hidden;
        touch-action: pan-y;
    }
    
    .mobile-positions-bucket.hidden {
        display: none !important;
    }
    
    .mobile-positions-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-primary);
        background: var(--bg-tertiary);
        flex-shrink: 0;
        touch-action: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    .mobile-positions-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        flex: 1;
    }
    
    .mobile-tag-filter-btn {
        padding: 6px 8px;
        background: var(--color-primary);
        color: var(--text-inverse);
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        flex-shrink: 0;
        position: relative;
        min-width: 32px;
        height: 32px;
    }
    
    .mobile-tag-filter-btn:hover,
    .mobile-tag-filter-btn:active {
        background: var(--color-primary-hover);
    }
    
    .mobile-tag-filter-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .mobile-tag-filter-btn .tag-filter-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        background: var(--color-warning);
        color: var(--color-warning-text);
        border-radius: 10px;
        min-width: 18px;
        height: 18px;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        padding: 0 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .mobile-positions-list {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .mobile-position-item {
        padding: 10px 12px;
        background: var(--bg-tertiary);
        border-radius: 6px;
        border: 1px solid var(--border-primary);
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        gap: 4px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        position: relative;
        z-index: 1;
    }
    
    .mobile-position-item:active {
        background: var(--bg-active);
        transform: scale(0.98);
    }
    
    .mobile-position-item.active {
        background: var(--color-success-light);
        border-color: var(--color-success);
    }
    
    .mobile-position-name {
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.2;
    }
    
    .mobile-position-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .mobile-position-tag {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: 500;
        border: 1px solid;
    }
}

/* ============================================
   Phone-Specific Styles (max-width: 767px portrait)
   ============================================ */
/* Sidebar footer is visible on phones - no need to hide it */

@media (max-width: 767px) and (orientation: portrait) {
    /* Accordion content takes full height on phones in sidebar/drawer */
    .accordion.active .accordion-content {
        max-height: calc(var(--available-height) - 60px - 200px); /* Full height minus header and accordion headers */
    }
    
    /* Constrain court width so it's not as tall - prevent cutoff */
    /* Use viewport width as primary constraint, with more aggressive height constraint */
    .court {
        width: min(calc(var(--viewport-width) - 16px), calc(var(--available-height) - 420px));
        height: min(calc(var(--viewport-width) - 16px), calc(var(--available-height) - 420px));
        max-width: calc(var(--viewport-width) - 16px);
        max-height: calc(var(--available-height) - 420px);
    }
    
    /* Disable dragging cursor on phones - read-only mode */
    .player-on-court {
        cursor: default !important;
        touch-action: auto !important;
    }
    
    .player-container {
        pointer-events: auto;
    }
    
    /* Position drop zones side by side on phones (override mobile stacking) */
    .position-drop-zones {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Court top bar stacks on phones */
    .court-top-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Stack state indicator and animation buttons vertically */
    .state-indicator {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .animation-buttons {
        width: 100%;
        justify-content: center;
    }
    
    .current-item {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    /* Modified indicator stacks buttons on phones */
    .modified-indicator {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Reduce positions bucket height on phones */
    .mobile-positions-bucket {
        max-height: 28vh;
    }
    
    /* Adjust padding when mobile positions bucket is visible on phones */
    .court-section.has-mobile-bucket {
        padding-bottom: calc(28vh + 8px);
    }
    
    /* Reduce header font size on phones */
    .mobile-positions-header h3 {
        font-size: 12px;
    }
    
    /* Reduce header padding on phones */
    .mobile-positions-header {
        padding: 8px 12px;
    }
    
    /* Smaller cards with more columns to fit more positions */
    .mobile-positions-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        padding: 6px;
    }
    
    /* Smaller position cards on phones */
    .mobile-position-item {
        padding: 6px 8px;
    }
    
    /* Smaller font size for position names on phones */
    .mobile-position-name {
        font-size: 11px;
    }
    
    /* Smaller tags on phones */
    .mobile-position-tag {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    /* Smaller mobile tag filter button on phones */
    .mobile-tag-filter-btn {
        min-width: 28px;
        height: 28px;
        padding: 4px 6px;
    }
    
    .mobile-tag-filter-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .mobile-tag-filter-btn .tag-filter-badge {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        top: -3px;
        right: -3px;
    }
    
    /* Scenario bucket and sequence timeline positioned at bottom on phones (like positions bucket) */
    .position-drop-zones-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 2px solid var(--border-primary);
        box-shadow: 0 -2px 10px var(--shadow-sm);
        z-index: 200;
        max-height: 28vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 8px;
        gap: 8px;
    }
    
    .position-drop-zones-container.empty {
        display: none !important;
    }
    
    .sequence-timeline {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 2px solid var(--border-primary);
        box-shadow: 0 -2px 10px var(--shadow-sm);
        z-index: 200;
        max-height: 28vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 8px;
        gap: 8px;
    }
    
    .sequence-timeline.hidden {
        display: none !important;
    }
    
    /* Adjust court section padding when scenario/sequence buckets are visible */
    /* Note: Using class-based approach instead of :has() for better browser support */
    .court-section.has-scenario-bucket,
    .court-section.has-sequence-bucket {
        padding-bottom: calc(28vh + 8px);
    }
    
    /* Disable timeline drag/drop on phones - read-only */
    .timeline-item {
        cursor: default !important;
        touch-action: auto !important;
    }
    
    .timeline-container {
        touch-action: auto !important;
    }
}

/* ============================================
   iPad-Specific Optimizations (768px - 1024px portrait)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Increase court section padding and ensure it takes up more vertical space */
    .court-section {
        padding: 15px;
        gap: 12px;
        flex: 1;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }
    
    /* Reduce bucket height to give more room to court - use percentage of available height */
    .mobile-positions-bucket {
        max-height: 28vh;
    }
    
    /* Adjust padding when mobile positions bucket is visible */
    /* Using available height variable for better responsiveness to browser UI changes */
    .court-section.has-mobile-bucket {
        padding-bottom: calc(28vh + 15px);
    }
    
    /* Increase grid columns for positions bucket - 4 columns on iPad */
    .mobile-positions-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 12px;
    }
    
    /* Slightly larger items for iPad */
    .mobile-position-item {
        padding: 12px;
    }
    
    .mobile-position-name {
        font-size: 14px;
    }
    
    /* Court scales responsively using CSS - more flexible calculation */
    /* Use available height minus header, top bar, and some padding */
    .court {
        width: min(600px, calc(var(--available-height) - 220px), calc(100% - 30px));
        height: min(600px, calc(var(--available-height) - 220px), calc(100% - 30px));
        aspect-ratio: 1;
        /* Ensure court doesn't exceed container */
        max-width: 100%;
        max-height: 100%;
    }
    
    /* Court container uses flex to better handle dynamic sizing */
    .court-container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Court top bar can have more padding on iPad */
    .court-top-bar {
        padding: 12px;
        gap: 12px;
        flex-shrink: 0;
    }
}

/* ============================================
   iPad Landscape - Sidebar Footer Fix
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Constrain app-container to viewport height on iPad landscape */
    .app-container {
        height: var(--available-height, 100vh);
        max-height: var(--available-height, 100vh);
    }
    
    /* Ensure sidebar is properly constrained on iPad landscape */
    .sidebar {
        height: var(--available-height, 100vh);
        max-height: var(--available-height, 100vh);
    }
    
    /* Constrain main-content to viewport height on iPad landscape */
    .main-content {
        height: var(--available-height, 100vh);
        max-height: var(--available-height, 100vh);
        overflow: hidden;
    }
    
    /* Make sure sidebar content can scroll when footer is present */
    .sidebar-content {
        flex: 1 1 auto;
        flex-shrink: 1; /* Allow shrinking to accommodate footer */
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Ensure footer doesn't cause overflow and stays fixed at bottom */
    .sidebar-footer {
        flex-shrink: 0;
    }
    
    /* Ensure sidebar itself doesn't exceed viewport due to footer */
    .sidebar {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Ensure court-section is properly constrained */
    .court-section {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        min-height: 0; /* Allow flex shrinking */
        padding: 10px; /* Reduced from 15px to prevent overflow */
        gap: 10px; /* Reduced from 15px to prevent overflow */
    }
    
    /* Ensure court-container can shrink to fit available space */
    .court-container {
        min-height: 0;
        flex: 1 1 auto; /* Allow shrinking if needed */
    }
}

/* ==================== Authentication Modal ==================== */

.auth-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000;
    animation: fadeIn 0.2s ease-out;
}

.auth-modal-container {
    background: var(--bg-modal);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow-xl);
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.2s ease-out;
}

.auth-modal-header {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-primary);
}

.auth-modal-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-modal-header p {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 14px;
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-primary);
}

.auth-tab {
    flex: 1;
    padding: 15px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

.auth-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.auth-content {
    padding: 30px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    padding: 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
    background: var(--bg-input);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-group small {
    font-size: 12px;
    color: var(--text-tertiary);
}

.auth-error {
    color: var(--color-error);
    font-size: 14px;
    padding: 10px;
    background: var(--color-error-light);
    border-radius: 6px;
    border: 1px solid var(--color-error-border);
    min-height: 20px;
    display: none; /* Hidden by default */
}

.auth-error:not(:empty) {
    display: block; /* Show when it has content */
}

.auth-submit-btn {
    padding: 14px;
    background: var(--color-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 10px;
}

.auth-submit-btn:hover {
    background: var(--color-primary-hover);
}

.auth-submit-btn:active {
    transform: scale(0.98);
}

/* Team Code Input Styling */
#team-code-input {
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
}

/* View-Only Mode */
.view-only-indicator {
    margin-bottom: 10px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.view-only-indicator .badge {
    background: var(--color-warning);
    color: var(--color-warning-text);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.view-only-logout-btn {
    background: transparent;
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.view-only-logout-btn:hover {
    background: var(--color-warning);
    color: var(--color-warning-text);
}

.view-only-logout-btn:active {
    transform: scale(0.95);
}

.view-only-mode .player-lineup-item,
.view-only-mode .item-card {
    cursor: default;
}

.view-only-mode .player-lineup-item[draggable],
.view-only-mode .item-card[draggable] {
    cursor: default;
}

/* Team Code Display in Settings */
.team-code-display-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.team-code-input {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 600;
}

.copy-code-btn {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.copy-code-btn:hover {
    background: var(--bg-hover);
}

.copy-code-btn i {
    width: 16px;
    height: 16px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.team-code-url-wrapper {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .auth-modal-container {
        width: 95%;
        max-height: 95vh;
    }
    
    .auth-modal-header {
        padding: 20px 20px 15px;
    }
    
    .auth-content {
        padding: 20px;
    }
    
}