/* =====================================================
   MOBILE-SPECIFIC STYLES FOR TACTICO
   Unified compact header across all pages
   ===================================================== */

/* Hide mobile nav bar on desktop */
.mobile-nav-bar {
    display: none;
}

/* =====================================================
   MOBILE LAYOUT - COMPACT HEADER DESIGN
   ===================================================== */
@media (max-width: 768px) {
    /* Hide the custom mobile toolbar/panel - use desktop elements instead */
    .mobile-toolbar,
    .mobile-panel,
    .mobile-panel-overlay,
    .mobile-top-toolbar,
    .mobile-header-controls {
        display: none !important;
    }

    /* ===== COMPACT HEADER - Single row with logo + user info ===== */
    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        gap: 0 !important;
        background: linear-gradient(135deg, #1a2332 0%, #0d1117 50%, #1a2332 100%) !important;
        border-bottom: 1px solid var(--accent-primary, #00d4aa) !important;
    }

    /* ===== LOGO SECTION - Left side ===== */
    /* Override all page-specific rules with unified styling */
    .header-left,
    .calendar-page .header-left,
    .drills-page .header-left,
    .sessions-page .header-left,
    .team-page .header-left,
    .clients-page .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        flex: 0 0 auto !important;
    }

    /* Hide nav buttons from header-left on mobile - they go in nav bar */
    .header-left .header-drills-btn {
        display: none !important;
    }

    .logo,
    .calendar-page .logo,
    .drills-page .logo,
    .sessions-page .logo,
    .team-page .logo,
    .clients-page .logo {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        transform: none !important;
    }

    /* Consistent logo size - 30px across all pages */
    .logo-img,
    .calendar-page .logo-img,
    .drills-page .logo-img,
    .sessions-page .logo-img,
    .team-page .logo-img,
    .clients-page .logo-img {
        height: 30px !important;
        width: auto !important;
        display: block !important;
    }

    /* Brand text container - inline layout */
    .brand-text {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .brand-name,
    .calendar-page .brand-name,
    .drills-page .brand-name,
    .sessions-page .brand-name,
    .team-page .brand-name,
    .clients-page .brand-name {
        display: block !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    /* Show slogan on mobile - very compact inline style */
    .brand-slogan,
    .calendar-page .brand-slogan,
    .drills-page .brand-slogan,
    .sessions-page .brand-slogan,
    .team-page .brand-slogan,
    .clients-page .brand-slogan {
        display: block !important;
        font-size: 5px !important;
        color: var(--accent-primary, #00d4aa) !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        opacity: 0.8 !important;
        white-space: nowrap !important;
    }

    /* Hide header-center on mobile - mode toggle moved to toolbar */
    .header-center {
        display: none !important;
    }

    /* Page title hidden */
    .header .page-title {
        display: none !important;
    }

    /* ===== USER ACTIONS - Right side, compact ===== */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        flex: 1 1 auto !important;
    }

    /* User info card - shows avatar + name + badge */
    .nav-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 3px 8px 3px 3px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        text-decoration: none !important;
    }

    /* Smaller avatar */
    .nav-user-avatar {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        border: 1.5px solid var(--accent-primary, #00d4aa) !important;
        object-fit: cover !important;
    }

    /* Show user name - smaller */
    .nav-user-name {
        display: block !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        color: var(--text-primary, #fff) !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Plan badge - compact */
    .header-actions .plan-badge,
    .nav-user-info .plan-badge {
        font-size: 7px !important;
        padding: 2px 6px !important;
        border-radius: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px !important;
    }

    /* ===== NOTIFICATION BELL - Bigger icon inside same button ===== */
    .notification-bell {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }

    /* Bigger bell icon SVG */
    .notification-bell svg {
        width: 20px !important;
        height: 20px !important;
        stroke-width: 2.2 !important;
    }

    /* Notification badge position */
    .notification-badge {
        top: -3px !important;
        right: -3px !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        border-width: 1.5px !important;
    }

    /* ===== ACTION BUTTONS ===== */
    .header-actions .btn,
    .header-actions button:not(.notification-bell) {
        padding: 5px 10px !important;
        font-size: 10px !important;
        border-radius: 6px !important;
    }

    /* Sign out button - subtle */
    .header-actions .btn-secondary {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: var(--text-secondary, #a0aec0) !important;
    }

    /* Hide subscription extras on mobile for cleaner look */
    .header-actions .subscription-notice,
    .header-actions .trial-countdown-header,
    .header-actions .cancel-date {
        display: none !important;
    }

    .header-actions .auth-loading-text {
        font-size: 9px !important;
    }

    /* Profile button (if used) */
    .header-actions .btn-profile {
        width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        border-radius: 50% !important;
    }

    .header-actions .btn-profile svg {
        width: 16px !important;
        height: 16px !important;
    }

    .header-actions .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .header-actions .user-name {
        display: block !important;
        font-size: 10px !important;
        max-width: 60px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Mobile Mode Row - between toolbar and canvas */
    .mobile-mode-row {
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 4px 8px !important;
        background: var(--bg-secondary) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .mobile-mode-btn {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 4px !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
    }

    .mobile-mode-btn.active {
        background: var(--accent-primary) !important;
        color: var(--bg-primary) !important;
        border-color: var(--accent-primary) !important;
    }

    .mobile-mode-btn .mode-lock {
        font-size: 8px !important;
        margin-left: 2px !important;
    }

    /* ===== NAVIGATION BAR - Consistent across all pages ===== */
    /* Applies to both .mobile-nav-bar and .header-nav-bar */
    .mobile-nav-bar,
    .header-nav-bar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        background: var(--bg-secondary, #151b24) !important;
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
        border-bottom: none !important;
        width: 100% !important;
        flex-basis: 100% !important;
        order: 10 !important;
    }

    /* Nav bar items - unified styling */
    .mobile-nav-bar .nav-item,
    .header-nav-bar .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 12px !important;
        flex: 1 !important;
        max-width: 80px !important;
        gap: 2px !important;
        background: var(--bg-tertiary, #1a2332) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        color: var(--text-secondary, #a0aec0) !important;
        text-decoration: none !important;
        font-size: 10px !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }

    .mobile-nav-bar .nav-item svg,
    .header-nav-bar .nav-item svg {
        width: 18px !important;
        height: 18px !important;
    }

    .mobile-nav-bar .nav-item .nav-icon,
    .header-nav-bar .nav-item .nav-icon {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .mobile-nav-bar .nav-item .nav-text,
    .mobile-nav-bar .nav-item span,
    .header-nav-bar .nav-item .nav-text,
    .header-nav-bar .nav-item span {
        font-size: clamp(8px, 2.2vw, 10px) !important;
        text-align: center !important;
        white-space: nowrap !important;
        font-weight: 500 !important;
    }

    .mobile-nav-bar .nav-item:hover,
    .mobile-nav-bar .nav-item.active,
    .header-nav-bar .nav-item:hover,
    .header-nav-bar .nav-item.active {
        background: rgba(0, 212, 170, 0.1) !important;
        border-color: rgba(0, 212, 170, 0.3) !important;
        color: var(--accent-primary, #00d4aa) !important;
    }

    /* Legacy header-drills-btn - keep for compatibility but hidden */
    .header-drills-btn {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 12px) !important;
        font-size: 14px !important;
        min-width: clamp(50px, 14vw, 70px) !important;
        max-width: 80px !important;
        gap: 2px !important;
        background: var(--bg-tertiary, #1a2332) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        position: relative !important;
    }

    .header-drills-btn .drills-text {
        display: block !important;
        font-size: clamp(7px, 2vw, 9px) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        color: var(--text-secondary, #a0aec0) !important;
    }

    .header-drills-btn .drills-icon {
        font-size: clamp(14px, 4vw, 18px) !important;
        line-height: 1 !important;
    }

    .header-drills-btn .drills-lock {
        font-size: 7px !important;
        margin-left: 0 !important;
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
    }

    .header-drills-btn:hover,
    .header-drills-btn.active {
        background: rgba(0, 212, 170, 0.1) !important;
        border-color: rgba(0, 212, 170, 0.3) !important;
    }

    .header-drills-btn:hover .drills-text,
    .header-drills-btn:hover .drills-icon,
    .header-drills-btn.active .drills-text,
    .header-drills-btn.active .drills-icon {
        color: var(--accent-primary, #00d4aa) !important;
    }

    /* Settings and Sign Out buttons */
    .header-actions > .btn-secondary {
        padding: clamp(4px, 1vw, 6px) clamp(6px, 1.5vw, 10px);
        font-size: clamp(8px, 2vw, 10px);
    }

    /* ===== MAIN LAYOUT ===== */
    .main-container {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 130px) !important; /* Account for header with controls + nav */
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* ===== TOP TOOLBAR (was left sidebar) ===== */
    .toolbar {
        display: flex !important;
        flex-direction: row !important;
        position: static !important;
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 3px 6px !important;
        gap: 2px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        background: var(--bg-panel) !important;
        border-bottom: 1px solid var(--border-color) !important;
        border-right: none !important;
        flex-shrink: 0 !important;
    }

    .tool-btn {
        width: clamp(28px, 7vw, 36px);
        height: clamp(28px, 7vw, 36px);
        font-size: clamp(12px, 3.5vw, 16px);
        padding: 3px;
        border-radius: 6px;
        min-width: 28px;
    }

    .color-btn {
        width: clamp(20px, 5vw, 26px);
        height: clamp(20px, 5vw, 26px);
        border-radius: 50%;
        border-width: 2px;
    }

    .tool-divider {
        width: 1px;
        height: 20px;
        margin: 0 3px;
    }

    /* ===== CANVAS AREA ===== */
    .canvas-area {
        flex: 1 1 auto !important;
        order: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 150px !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .canvas-wrapper {
        padding: 4px !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #mainCanvas {
        max-width: 100% !important;
        max-height: 100% !important;
        touch-action: none !important;
    }

    /* ===== BOTTOM PANEL (was right sidebar) ===== */
    .right-panel {
        display: block !important;
        position: static !important;
        order: 3 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 55vh !important;
        min-height: 120px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--border-color) !important;
        border-left: none !important;
        background: var(--bg-panel) !important;
        flex-shrink: 0 !important;
        padding-bottom: 200px !important; /* Extra space for timeline + scrolling */
    }

    /* Panel sections - horizontal layout */
    .panel-section {
        padding: 8px 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .panel-title {
        font-size: 10px;
        margin-bottom: 6px;
    }

    /* Player chips - compact grid */
    .team-section {
        margin-bottom: 6px;
    }

    .team-header {
        padding: 2px 0;
        margin-bottom: 3px;
    }

    .team-label {
        font-size: 9px;
    }

    .team-dot {
        width: 6px;
        height: 6px;
    }

    .player-chips {
        display: grid;
        grid-template-columns: repeat(11, 1fr); /* Always show all 11 in one row */
        gap: 3px;
    }

    .player-chip {
        width: clamp(20px, 5vw, 26px);
        height: clamp(20px, 5vw, 26px);
        border-width: 1px;
        padding: 1px;
    }

    .player-chip .player-number {
        font-size: clamp(8px, 2vw, 10px);
        line-height: 1;
    }

    .player-chip .player-position {
        font-size: clamp(5px, 1.2vw, 6px);
        line-height: 1;
        margin-top: 0;
    }

    /* Team colors - compact */
    .team-colors-grid {
        gap: 4px;
    }

    .team-color-row {
        gap: 4px;
        padding: 3px 0;
    }

    .team-color-label {
        font-size: 8px;
        min-width: 40px;
    }

    .team-color-chip {
        width: clamp(18px, 4.5vw, 24px);
        height: clamp(18px, 4.5vw, 24px);
        border-width: 2px;
    }

    .team-color-custom {
        width: clamp(18px, 4.5vw, 24px);
        height: clamp(18px, 4.5vw, 24px);
    }

    /* Equipment - compact grid */
    .equipment-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr); /* All equipment in one row */
        gap: 3px;
    }

    .equipment-item {
        width: clamp(24px, 6vw, 32px);
        height: clamp(24px, 6vw, 32px);
        font-size: clamp(12px, 3.5vw, 16px);
    }

    /* Formations - compact */
    .formations-section {
        padding: 6px 10px;
    }

    .formations-header {
        margin-bottom: 4px;
    }

    .formation-tabs {
        gap: 3px;
        margin-bottom: 6px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .formation-tab {
        padding: 3px 8px;
        font-size: 9px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .formations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
        gap: 3px;
        max-height: 100px;
        overflow-y: auto;
    }

    .formation-card {
        padding: 4px 6px;
    }

    .formation-name {
        font-size: 10px;
    }

    .formation-desc {
        font-size: 7px;
        display: none;
    }

    .save-formation-btn {
        padding: 4px 8px;
        font-size: 9px;
        margin-top: 4px;
    }

    /* Recording section - compact mobile styling */
    .recording-section {
        padding: 10px !important;
        margin: 0 !important;
    }

    .recording-section .panel-title {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .record-controls {
        gap: 8px !important;
    }

    .mic-toggle-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .mic-toggle-btn {
        padding: 6px 10px !important;
        font-size: 8px !important;
    }

    .mic-status {
        font-size: 8px !important;
    }

    .record-status {
        padding: 6px 8px !important;
        font-size: 8px !important;
        gap: 4px !important;
    }

    .record-time {
        font-size: 10px !important;
    }

    .record-buttons {
        gap: 4px !important;
    }

    .record-btn {
        padding: 8px 12px !important;
        font-size: 8px !important;
        flex: 1 !important;
        min-width: 70px !important;
    }

    /* Animation section - compact mobile styling */
    .animation-section {
        padding: 10px !important;
        margin: 0 !important;
    }

    .animation-section .panel-title {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .keyframe-list-header {
        padding: 6px 8px !important;
        font-size: 8px !important;
    }

    .keyframe-count {
        font-size: 8px !important;
    }

    .keyframe-header-actions {
        gap: 4px !important;
    }

    .keyframe-clear-btn,
    .keyframe-add-btn {
        padding: 3px 6px !important;
        font-size: 8px !important;
    }

    .keyframe-list {
        max-height: 120px !important;
    }

    .keyframe-item {
        padding: 6px 8px !important;
        font-size: 8px !important;
    }

    .keyframe-empty {
        padding: 12px !important;
        font-size: 8px !important;
    }

    .keyframe-editor {
        padding: 8px !important;
    }

    .editor-title {
        font-size: 8px !important;
        margin-bottom: 6px !important;
    }

    .editor-row {
        gap: 4px !important;
    }

    .editor-row label {
        font-size: 8px !important;
        min-width: 50px !important;
    }

    .editor-row input {
        padding: 4px 6px !important;
        font-size: 8px !important;
    }

    /* Playback controls - compact */
    .playback-controls {
        padding: 8px !important;
        gap: 4px !important;
    }

    .playback-btn {
        padding: 6px 10px !important;
        font-size: 8px !important;
    }

    .speed-control {
        gap: 4px !important;
    }

    .speed-control label {
        font-size: 8px !important;
    }

    .speed-control select {
        padding: 4px 6px !important;
        font-size: 8px !important;
    }

    /* ===== TIMELINE - Mobile compact layout ===== */
    /* Pinned at bottom - visibility controlled by JS inline style */
    .timeline-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 900 !important;
        background: var(--bg-panel, #1a2332) !important;
        border-top: 2px solid var(--accent-primary, #00d4aa) !important;
        padding: 4px 6px 8px 6px !important; /* extra bottom padding */
        flex-direction: column !important;
        gap: 3px !important;
        max-height: 95px !important;
    }

    /* Timeline track - show first (above controls) */
    .timeline-track-wrapper {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Playback controls - show second */
    .timeline-controls {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        flex-wrap: nowrap !important;
    }

    /* Smaller buttons */
    .timeline-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
        padding: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        background: var(--bg-tertiary, #232d3b) !important;
        border: 1px solid var(--border-color, #3d4a5c) !important;
        border-radius: 4px !important;
    }

    .timeline-btn.play {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .timeline-time {
        font-size: 8px !important;
        min-width: 30px !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .timeline-track {
        flex: 1 !important;
        height: 14px !important;
        min-height: 14px !important;
        position: relative !important;
        background: var(--bg-tertiary, #232d3b) !important;
        border-radius: 4px !important;
    }

    .timeline-progress {
        height: 100% !important;
        background: linear-gradient(90deg, var(--accent, #00d4aa), #00a8ff) !important;
        border-radius: 4px !important;
    }

    .timeline-scrubber {
        width: 12px !important;
        height: 10px !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Keyframe markers in timeline */
    .timeline-keyframes {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none !important;
        display: block !important;
    }

    .keyframe-marker {
        position: absolute !important;
        top: 1px !important;
        width: 3px !important;
        height: 10px !important;
        background: #f59e0b !important;
        border-radius: 2px !important;
        transform: translateX(-50%) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .keyframe-marker:hover,
    .keyframe-marker.selected {
        background: #fbbf24 !important;
        box-shadow: 0 0 8px rgba(251, 191, 36, 0.6) !important;
    }

    /* Actions - show third (bottom) - compact */
    .timeline-actions {
        order: 3 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }

    .timeline-speed {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }

    .timeline-speed select {
        padding: 2px 4px !important;
        font-size: 8px !important;
        background: var(--bg-tertiary, #232d3b) !important;
        border: 1px solid var(--border-color, #3d4a5c) !important;
        border-radius: 3px !important;
        color: #ffffff !important;
    }

    .timeline-btn.capture,
    .timeline-btn.add-kf {
        padding: 3px 6px !important;
        font-size: 8px !important;
        gap: 2px !important;
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
    }

    .timeline-loop {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        font-size: 8px !important;
        color: #ffffff !important;
    }

    .timeline-loop input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
    }

    /* Action buttons - compact row */
    .clear-section {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 10px;
        margin-bottom: 20px; /* Space before bottom padding */
    }

    .clear-section button {
        flex: 1;
        min-width: 80px;
        padding: 10px 8px;
        font-size: 11px;
    }

    .screenshot-btn,
    .share-btn,
    .clear-btn {
        border-radius: 8px !important;
    }

    /* Trash zone - position at left side of canvas on mobile (not on canvas) */
    .trash-zone {
        position: fixed !important;
        left: 5px !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 1000;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        border-radius: 50%;
        background: rgba(255, 71, 87, 0.25) !important;
        border: 2px solid rgba(255, 71, 87, 0.6) !important;
    }

    .trash-zone.visible {
        top: 45% !important; /* Middle of screen, left side */
        left: 5px !important;
        transform: translateY(-50%) !important;
    }

    .trash-zone.drag-over {
        transform: scale(1.15) !important;
    }

    .trash-zone .trash-icon {
        font-size: 20px;
    }

    .trash-zone .trash-text {
        display: none; /* Hide text on mobile, just show icon */
    }

    /* Formations locked - compact for mobile */
    .formations-locked {
        padding: 12px 10px;
    }

    .formations-locked .locked-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .formations-locked h3 {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .formations-locked p {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .btn-unlock {
        padding: 8px 16px;
        font-size: 11px;
    }
}

/* =====================================================
   PORTRAIT MODE - More panel space
   ===================================================== */
@media (max-width: 768px) and (orientation: portrait) {
    .right-panel {
        max-height: 55vh !important;
    }

    .canvas-area {
        min-height: 35vh !important;
    }

    /* Timeline position for portrait */
    .timeline-container[style*="display: flex"],
    .timeline-container[style*="display:flex"] {
        bottom: 0 !important;
    }
}

/* =====================================================
   LANDSCAPE MODE - Smaller bottom panel
   ===================================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        min-height: 32px;
        padding: 3px 6px;
    }

    .logo {
        transform: scale(0.55);
    }

    .toolbar {
        min-height: 34px !important;
        padding: 2px 4px !important;
    }

    .tool-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 10px !important;
    }

    .color-btn {
        width: 18px !important;
        height: 18px !important;
    }

    .right-panel {
        max-height: 40vh !important;
    }

    /* Timeline position for landscape */
    .timeline-container[style*="display: flex"],
    .timeline-container[style*="display:flex"] {
        bottom: 0 !important;
        padding: 3px 6px !important;
        gap: 2px !important;
        max-height: 80px !important;
    }

    .panel-section {
        padding: 3px 6px;
    }

    .player-chips {
        grid-template-columns: repeat(11, 1fr);
    }

    .player-chip {
        width: 18px !important;
        height: 18px !important;
    }

    .player-chip .player-number {
        font-size: 7px !important;
    }

    .player-chip .player-position {
        font-size: 5px !important;
    }

    .team-color-chip {
        width: 16px !important;
        height: 16px !important;
    }

    .equipment-item {
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
    }

    /* Landscape nav buttons - smaller */
    .header-drills-btn {
        min-width: clamp(45px, 12vw, 60px) !important;
        max-width: 65px !important;
        padding: clamp(4px, 1vw, 8px) clamp(6px, 1.5vw, 10px) !important;
    }

    .header-drills-btn .drills-text {
        font-size: clamp(6px, 1.8vw, 8px) !important;
    }

    .header-drills-btn .drills-icon {
        font-size: clamp(12px, 3.5vw, 16px) !important;
    }
}

/* =====================================================
   VERY SMALL SCREENS (< 400px)
   ===================================================== */
@media (max-width: 400px) {
    .toolbar {
        gap: 1px;
        padding: 2px 3px;
        min-height: 36px !important;
    }

    .tool-btn {
        width: 20px !important;
        height: 14px !important;
        font-size: 11px !important;
        padding: 2px !important;
    }

    .color-btn {
        width: 18px !important;
        height: 18px !important;
    }

    .tool-divider {
        margin: 0 1px;
        height: 16px;
    }

    .player-chip {
        width: 18px !important;
        height: 18px !important;
    }

    .player-chip .player-number {
        font-size: 7px !important;
    }

    .player-chip .player-position {
        font-size: 5px !important;
    }

    .team-color-chip {
        width: 16px !important;
        height: 16px !important;
    }

    .equipment-item {
        width: 20px !important;
        height: 14px !important;
        font-size: 8px !important;
    }

    .formation-card {
        padding: 3px 5px;
    }

    .formation-name {
        font-size: 9px;
    }

    .panel-section {
        padding: 4px 6px;
    }

    .panel-title {
        font-size: 8px;
    }

    /* Very small screen nav buttons */
    .header-drills-btn {
        min-width: clamp(40px, 13vw, 55px) !important;
        max-width: 60px !important;
        padding: 5px 6px !important;
    }

    .header-drills-btn .drills-text {
        font-size: clamp(6px, 1.8vw, 7px) !important;
    }

    .header-drills-btn .drills-icon {
        font-size: clamp(12px, 3.5vw, 14px) !important;
    }
}

/* =====================================================
   TOUCH IMPROVEMENTS
   ===================================================== */
@media (max-width: 768px) {
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    #mainCanvas {
        touch-action: none;
    }

    /* Prevent iOS zoom on input focus */
    input, select, textarea {
        font-size: 16px;
    }

    /* Smooth scrolling for panel */
    .right-panel {
        scroll-behavior: smooth;
    }

    .right-panel::-webkit-scrollbar {
        width: 3px;
    }

    .right-panel::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 3px;
    }
}

/* =====================================================
   SAFE AREA (Notched devices)
   ===================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .right-panel {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}

/* =====================================================
   MODAL ADJUSTMENTS
   ===================================================== */
@media (max-width: 768px) {
    .modal {
        width: 95% !important;
        max-width: none !important;
        max-height: 80vh;
        margin: auto;
    }

    .modal-overlay {
        padding: 10px;
        align-items: center;
    }
}

/* =====================================================
   EXTRA SMALL SCREENS - Consistent header sizing
   ===================================================== */
@media (max-width: 480px) {
    /* Slightly smaller logo on very small screens */
    .logo-img {
        height: 26px !important;
    }

    .brand-name {
        font-size: 12px !important;
    }

    .brand-slogan {
        font-size: 4px !important;
    }

    /* Smaller user info */
    .nav-user-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    .nav-user-name {
        font-size: 9px !important;
        max-width: 50px !important;
    }

    .header-actions .plan-badge,
    .nav-user-info .plan-badge {
        font-size: 6px !important;
        padding: 1px 4px !important;
    }
}

@media (max-width: 400px) {
    /* Even smaller for tiny screens */
    .logo-img {
        height: 24px !important;
    }

    .brand-name {
        font-size: 11px !important;
    }

    .brand-slogan {
        display: none !important;
    }

    .nav-user-name {
        display: none !important;
    }

    .nav-user-avatar {
        width: 20px !important;
        height: 20px !important;
    }
}