/* iPad-Specific Optimizations */
/* Optimized for iPad Air, iPad Pro, and iPad Mini */

/* =================================================================
   IPAD DETECTION AND BASE STYLES
   ================================================================= */

/* iPad-specific variables */
:root {
    --ipad-touch-target: 52px;
    --ipad-spacing: 16px;
    --ipad-padding: 16px;
    --ipad-border-radius: 12px;
}

/* =================================================================
   IPAD PORTRAIT MODE (768px - 1024px)
   ================================================================= */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait) {

    /* War Room Layout - 2 columns in portrait */
    .rooms-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--ipad-spacing);
        padding: var(--ipad-padding);
    }

    /* Room containers */
    .room-container {
        padding: var(--ipad-padding);
        border-radius: var(--ipad-border-radius);
        min-height: 280px;
    }

    /* Battle grid - larger slots for touch */
    .battle-grid {
        gap: 14px;
        padding: var(--ipad-padding);
    }

    .grid-slot {
        min-height: 90px;
        min-width: 130px;
        border-radius: 8px;
    }

    /* Assigned players - larger touch targets */
    .assigned-player {
        min-height: 85px;
        padding: 12px;
        font-size: 14px;
    }

    .assigned-name {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .assigned-class {
        font-size: 12px;
        opacity: 0.9;
    }

    .assigned-resonance {
        font-size: 13px;
        font-weight: 600;
        margin-top: 4px;
    }

    /* Holding Zone */
    .holding-zone {
        min-height: 120px;
        padding: var(--ipad-padding);
        gap: 12px;
    }

    .holding-player {
        min-height: 90px;
        min-width: 130px;
        padding: 12px;
        border-radius: 8px;
        font-size: 14px;
    }

    /* Unassigned Pool */
    .unassigned-pool {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: var(--ipad-padding);
    }

    .player-card {
        min-height: 100px;
        padding: var(--ipad-padding);
        font-size: 14px;
    }
}

/* =================================================================
   IPAD LANDSCAPE MODE (768px - 1366px)
   ================================================================= */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px)
  and (orientation: landscape) {

    /* War Room Layout - 3 columns in landscape */
    .rooms-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--ipad-spacing);
        padding: var(--ipad-padding);
    }

    /* Room containers optimized for 3-column layout */
    .room-container {
        padding: 14px;
        border-radius: var(--ipad-border-radius);
        min-height: 300px;
    }

    /* Battle grid */
    .battle-grid {
        gap: 10px;
        padding: 12px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-slot {
        min-height: 85px;
        min-width: 100%;
        border-radius: 8px;
    }

    /* Assigned players */
    .assigned-player {
        min-height: 80px;
        padding: 10px;
        font-size: 13px;
    }

    .assigned-name {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 3px;
    }

    .assigned-class {
        font-size: 11px;
        opacity: 0.9;
    }

    .assigned-resonance {
        font-size: 12px;
        font-weight: 600;
        margin-top: 3px;
    }

    /* Holding Zone - horizontal layout in landscape */
    .holding-zone-container {
        width: 100%;
        margin-bottom: var(--ipad-spacing);
    }

    .holding-zone {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        padding: var(--ipad-padding);
        min-height: 100px;
    }

    .holding-player {
        min-height: 80px;
        padding: 10px;
        border-radius: 8px;
        font-size: 13px;
    }

    /* Unassigned Pool - 4 columns in landscape */
    .unassigned-pool {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        padding: var(--ipad-padding);
    }

    .player-card {
        min-height: 90px;
        padding: 12px;
        font-size: 13px;
    }
}

/* =================================================================
   IPAD PRO 12.9" OPTIMIZATIONS
   ================================================================= */
@media only screen
  and (min-device-width: 1024px)
  and (max-device-width: 1366px) {

    /* Take advantage of larger screen */
    .rooms-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 18px;
    }

    .room-container {
        padding: 16px;
    }

    .battle-grid {
        gap: 12px;
    }

    .assigned-player {
        font-size: 14px;
    }

    /* Unassigned pool - 5 columns on large iPad Pro */
    .unassigned-pool {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* =================================================================
   UNIVERSAL IPAD TOUCH IMPROVEMENTS
   ================================================================= */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px) {

    /* Enhanced touch targets for all buttons */
    button, .btn, .btn-primary, .btn-secondary, .btn-danger {
        min-height: var(--ipad-touch-target);
        min-width: var(--ipad-touch-target);
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 10px;
        touch-action: manipulation;
        cursor: pointer;
    }

    /* Top controls - better layout for iPad */
    .top-controls {
        padding: var(--ipad-padding);
        gap: 12px;
    }

    .controls-row {
        gap: 12px;
        flex-wrap: wrap;
    }

    .controls-row button {
        flex: 1 1 auto;
        min-width: 160px;
    }

    /* Room header - larger and more readable */
    .room-header {
        padding: 12px;
        margin-bottom: 8px;
    }

    .room-title {
        font-size: 16px;
        font-weight: 700;
    }

    .room-stats {
        font-size: 14px;
        gap: 12px;
    }

    .room-count, .room-resonance {
        padding: 6px 10px;
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.3);
    }

    /* Enhanced drag-and-drop visual feedback */
    .sortable-ghost {
        opacity: 0.3 !important;
        background: rgba(196, 30, 58, 0.2) !important;
        border: 3px dashed rgba(196, 30, 58, 0.6) !important;
        transform: scale(1.05) rotate(2deg);
    }

    .sortable-chosen {
        transform: scale(1.05);
        box-shadow: 0 8px 24px rgba(196, 30, 58, 0.4) !important;
        border: 2px solid rgba(196, 30, 58, 0.8) !important;
        z-index: 1000;
    }

    .sortable-drag {
        transform: scale(1.08) rotate(3deg);
        opacity: 0.9;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
    }

    /* Drop zone highlighting for iPad */
    .battle-grid.sortable-ghost-active {
        background: rgba(76, 175, 80, 0.15) !important;
        border: 2px dashed rgba(76, 175, 80, 0.6) !important;
        animation: pulse-drop-zone 1s ease-in-out infinite;
    }

    /* Visual pulse for drop zones */
    @keyframes pulse-drop-zone {
        0%, 100% {
            background: rgba(76, 175, 80, 0.1);
            border-color: rgba(76, 175, 80, 0.4);
        }
        50% {
            background: rgba(76, 175, 80, 0.2);
            border-color: rgba(76, 175, 80, 0.7);
        }
    }

    /* Empty slot visual improvements */
    .grid-slot.empty {
        background: rgba(0, 0, 0, 0.2);
        border: 2px dashed rgba(196, 30, 58, 0.3);
        transition: all 0.3s ease;
    }

    .grid-slot.empty:hover,
    .grid-slot.empty.drag-over {
        background: rgba(76, 175, 80, 0.1);
        border-color: rgba(76, 175, 80, 0.5);
    }

    /* Navigation improvements */
    nav {
        padding: 12px 20px;
        gap: 16px;
    }

    nav a {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Header improvements */
    header h1 {
        font-size: 32px;
        padding: 16px 0;
    }

    /* Checkbox and form controls */
    input[type="checkbox"] {
        min-width: 28px;
        min-height: 28px;
        cursor: pointer;
    }

    label {
        font-size: 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    input[type="text"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 8px;
        touch-action: manipulation;
    }

    /* Holding zone enhancements */
    .holding-zone-section {
        margin-bottom: var(--ipad-spacing);
    }

    .zone-header {
        font-size: 18px;
        padding: 12px;
        margin-bottom: 8px;
    }

    .holding-stats {
        font-size: 14px;
        padding: 8px 12px;
        gap: 16px;
    }

    /* Unassigned section improvements */
    .unassigned-section {
        padding: var(--ipad-padding);
        margin-top: var(--ipad-spacing);
    }

    .unassigned-section h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    /* Prevent text selection during drag */
    .sortable-drag * {
        user-select: none;
        -webkit-user-select: none;
    }

    /* Smooth scrolling for iPad */
    * {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Prevent bounce scrolling on body */
    body {
        overscroll-behavior-y: none;
    }

    /* War room container adjustments */
    .war-room-container {
        padding: var(--ipad-padding);
    }

    .war-room-header {
        padding: var(--ipad-padding);
        margin-bottom: var(--ipad-spacing);
    }

    .war-room-header h2 {
        font-size: 28px;
    }

    /* Message and status displays */
    .success-message,
    .error-message,
    .info-message {
        min-height: 52px;
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Improved spacing for simplified layout */
    .simplified-layout {
        padding: var(--ipad-padding);
        gap: var(--ipad-spacing);
    }

    /* Loading and feedback states */
    .loading {
        font-size: 16px;
        padding: 20px;
    }

    /* Improve tap highlight color */
    * {
        -webkit-tap-highlight-color: rgba(196, 30, 58, 0.2);
    }

    /* Active state for better feedback */
    button:active,
    .btn:active,
    .player-card:active,
    .assigned-player:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* =================================================================
   ACCESSIBILITY AND VISUAL FEEDBACK
   ================================================================= */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px) {

    /* Focus indicators for keyboard navigation (iPad with keyboard) */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 3px solid rgba(196, 30, 58, 0.8);
        outline-offset: 2px;
    }

    /* Visual indicator when dragging is possible */
    .player-card::before,
    .assigned-player::before,
    .holding-player::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Show drag indicator on long press */
    .sortable-chosen::before {
        opacity: 1;
    }

    /* Room capacity indicator */
    .room-count {
        font-weight: 700;
        color: rgba(76, 175, 80, 0.9);
    }

    /* Full room warning */
    .room-count.full {
        color: rgba(255, 193, 7, 0.9);
        animation: pulse-warning 2s ease-in-out infinite;
    }

    @keyframes pulse-warning {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.6;
        }
    }
}

/* =================================================================
   PERFORMANCE OPTIMIZATIONS FOR IPAD
   ================================================================= */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1366px) {

    /* Hardware acceleration for smooth animations */
    .player-card,
    .assigned-player,
    .grid-slot,
    .holding-player {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Optimize scrolling performance */
    .rooms-grid,
    .unassigned-pool,
    .holding-zone {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}