/*
 * Responsive Design for Retro Components
 * Optimized for mobile and tablet devices
 */

/* =============================================================================
   BREAKPOINTS
   - Mobile: < 576px
   - Tablet: 576px - 991px  
   - Desktop: >= 992px
   ============================================================================= */

/* =============================================================================
   MOBILE FIRST APPROACH - Base styles for mobile
   ============================================================================= */

/* Retro Panel - Full width on mobile */
.retro-panel {
    padding: 10px;
    margin: 0 -15px; /* Extend to screen edges */
}

/* Retro Windows - Stack vertically on mobile */
.retro-window {
    margin-bottom: 15px;
}

.retro-window-title {
    font-size: 14px;
    padding: 6px 10px;
    /* Make window titles easier to tap */
    min-height: 40px;
    display: flex;
    align-items: center;
}

.retro-window-content {
    padding: 10px;
}

/* Retro Buttons - Larger touch targets */
.retro-btn {
    min-height: 44px; /* Apple's recommended touch target */
    padding: 10px 16px !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    margin: 4px 2px !important;
}

.retro-btn-small {
    min-height: 36px;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

/* Tables - Horizontal scroll on mobile */
.retro-table-wrapper,
.retro-table-container,
.django-tables2-container,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin: 0 -10px; /* Extend to content edges */
    padding: 0 10px;
}

/* Prevent table from being too wide */
table.table {
    min-width: 600px; /* Force horizontal scroll rather than squishing */
}

/* Make table cells more compact on mobile */
@media (max-width: 575px) {
    table.table td,
    table.table th {
        padding: 6px 8px !important;
        font-size: 14px;
    }
    
    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none !important;
    }
}

/* Forms - Full width on mobile */
.retro-form input[type="text"],
.retro-form input[type="email"],
.retro-form input[type="password"],
.retro-form textarea,
.retro-form select {
    width: 100%;
    font-size: 16px; /* Prevent iOS zoom */
    padding: 10px;
    margin-bottom: 10px;
}

/* Breadcrumbs - Smaller on mobile */
.retro-breadcrumb {
    font-size: 14px;
    padding: 8px;
    white-space: nowrap;
    overflow-x: auto;
}

/* =============================================================================
   RESPONSIVE COLUMN SYSTEM
   ============================================================================= */

/* Mobile first - all columns are 100% by default */
.retro-col-1, .retro-col-2, .retro-col-3, .retro-col-4, .retro-col-5, .retro-col-6,
.retro-col-7, .retro-col-8, .retro-col-9, .retro-col-10, .retro-col-11, .retro-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 10px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .retro-col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .retro-col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .retro-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .retro-col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .retro-col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .retro-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .retro-col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .retro-col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .retro-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .retro-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .retro-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .retro-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .retro-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .retro-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .retro-col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .retro-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .retro-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .retro-col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .retro-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .retro-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .retro-col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .retro-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .retro-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .retro-col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .retro-col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .retro-col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .retro-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .retro-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .retro-col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .retro-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .retro-col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .retro-col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .retro-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .retro-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .retro-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .retro-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* =============================================================================
   TABLET STYLES (576px - 991px)
   ============================================================================= */

@media (min-width: 576px) and (max-width: 991px) {
    /* Retro columns - 2 column layout on tablet */
    .retro-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    
    /* Tables can be slightly wider */
    table.table {
        font-size: 15px;
    }
    
    table.table td,
    table.table th {
        padding: 8px 10px !important;
    }
}

/* =============================================================================
   DESKTOP STYLES (>= 992px) - Use existing retro styles
   ============================================================================= */

@media (min-width: 992px) {
    /* Restore original retro column widths */
    .retro-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -15px;
    }
    
    /* Fixed column widths for non-responsive columns */
    .retro-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .retro-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .retro-col-3 { flex: 0 0 25%; max-width: 25%; }
    .retro-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .retro-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .retro-col-6 { flex: 0 0 50%; max-width: 50%; }
    .retro-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .retro-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .retro-col-9 { flex: 0 0 75%; max-width: 75%; }
    .retro-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .retro-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .retro-col-12 { flex: 0 0 100%; max-width: 100%; }
    
    [class*="retro-col-"] {
        padding: 0 15px;
    }
    
    /* Restore button sizes */
    .retro-btn {
        min-height: auto;
        padding: 4px 10px !important;
        font-size: 14px !important;
    }
}

/* =============================================================================
   MOBILE NAVIGATION - Sidebar becomes overlay
   ============================================================================= */

@media (max-width: 991px) {
    /* Hide sidebar by default on mobile/tablet */
    .sidebar,
    .col-md-3.sidebar,
    .col-lg-2.sidebar,
    #main-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* Hidden off-screen */
        width: 250px !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        background: #c0c0c0 !important;
        display: block !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Show sidebar when active */
    .sidebar.active {
        left: 0 !important;
        transform: translateX(0) !important;
    }
    
    /* Overlay when sidebar is open */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Main content takes full width */
    main.col-md-9,
    main.col-md-9.ms-sm-auto.col-lg-10 {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-top: 60px !important; /* Space for hamburger menu */
    }
    
    /* Add menu toggle button */
    .mobile-menu-toggle {
        display: block !important;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 1060;
        background: #c0c0c0;
        border: 2px solid;
        border-color: #dfdfdf #404040 #404040 #dfdfdf;
        padding: 8px 12px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 2px 2px 0px #000;
        min-width: 44px;
        min-height: 44px;
    }
    
    .mobile-menu-toggle:active {
        border-color: #404040 #dfdfdf #dfdfdf #404040;
        box-shadow: inset 1px 1px 0px #000;
    }
}

/* Hide menu toggle on desktop */
@media (min-width: 992px) {
    .mobile-menu-toggle,
    .sidebar-overlay {
        display: none !important;
    }
    
    /* Ensure sidebar is visible and positioned correctly on desktop */
    .sidebar,
    #main-sidebar {
        position: relative !important;
        left: 0 !important;
        top: auto !important;
        height: auto !important;
        min-height: 100vh !important;
        visibility: visible !important;
        transform: none !important;
    }
}

/* Extra specificity for mobile sidebar hiding */
@media (max-width: 991px) {
    body .container-fluid .row .sidebar#main-sidebar {
        left: -300px !important;
        position: fixed !important;
    }
    
    body .container-fluid .row .sidebar#main-sidebar.active {
        left: 0 !important;
    }
    
    /* Override any Bootstrap display utilities */
    .sidebar[class*="d-block"],
    .sidebar[class*="d-md-block"],
    .sidebar[class*="d-lg-block"],
    #main-sidebar[class*="d-block"],
    #main-sidebar[class*="d-md-block"],
    #main-sidebar[class*="d-lg-block"] {
        left: -300px !important;
        position: fixed !important;
        display: block !important;
    }
    
    .sidebar.active[class*="d-block"],
    .sidebar.active[class*="d-md-block"],
    .sidebar.active[class*="d-lg-block"],
    #main-sidebar.active[class*="d-block"],
    #main-sidebar.active[class*="d-md-block"],
    #main-sidebar.active[class*="d-lg-block"] {
        left: 0 !important;
    }
}

/* =============================================================================
   RESPONSIVE UTILITIES
   ============================================================================= */

/* Text alignment utilities */
@media (max-width: 767px) {
    .retro-text-right {
        text-align: left !important; /* Left align on mobile */
    }
    
    .retro-text-center {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .retro-text-md-right {
        text-align: right !important;
    }
    
    .retro-text-md-center {
        text-align: center !important;
    }
}

/* =============================================================================
   MOBILE-SPECIFIC COMPONENT ADJUSTMENTS
   ============================================================================= */

@media (max-width: 575px) {
    /* Stack all columns vertically on mobile */
    [class*="retro-col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Forum topic list - more compact */
    .topic-window .retro-window-content {
        padding: 8px;
    }
    
    /* Event cards - stack date and actions */
    .retro-event-upcoming .retro-row,
    .retro-event-today .retro-row {
        display: block;
    }
    
    .retro-event-upcoming .retro-col-8,
    .retro-event-today .retro-col-8 {
        margin-bottom: 10px;
    }
    
    /* Pagination - smaller buttons */
    .retro-page-link {
        padding: 6px 10px;
        font-size: 14px;
        margin: 2px;
    }
    
    /* Modal/drawer adjustments */
    .drawer {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Command input - stack with button */
    #header-command-form .input-group {
        flex-direction: column;
    }
    
    #header-command-input {
        width: 100% !important;
        margin-bottom: 10px;
    }
    
    #chat-message-submit {
        width: 100%;
    }
}

/* =============================================================================
   CARD-BASED TABLE LAYOUT FOR MOBILE
   ============================================================================= */

@media (max-width: 575px) {
    /* Option to convert tables to cards on very small screens */
    .mobile-cards table.table {
        display: block;
        border: none;
    }
    
    .mobile-cards table.table thead {
        display: none;
    }
    
    .mobile-cards table.table tbody {
        display: block;
    }
    
    .mobile-cards table.table tbody tr {
        display: block;
        margin-bottom: 15px;
        border: 2px solid #808080;
        box-shadow: inset -1px -1px #404040, inset 1px 1px #dfdfdf;
        padding: 10px;
        background: #ffffff;
    }
    
    .mobile-cards table.table tbody td {
        display: block;
        text-align: left;
        border: none;
        padding: 5px 0;
        position: relative;
        padding-left: 40%;
    }
    
    .mobile-cards table.table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 35%;
        font-weight: bold;
        text-align: left;
    }
}

/* =============================================================================
   TOUCH OPTIMIZATIONS
   ============================================================================= */

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .retro-btn:hover,
    .retro-list-item:hover,
    table.table tbody tr:hover {
        /* Reset hover states */
        background-color: inherit !important;
        color: inherit !important;
    }
    
    /* Add active states for touch feedback */
    .retro-btn:active {
        border-color: #404040 #dfdfdf #dfdfdf #404040 !important;
        background: #b0b0b0 !important;
    }
}

/* =============================================================================
   LANDSCAPE PHONE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 812px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .retro-window {
        margin-bottom: 10px;
    }
    
    .retro-window-title {
        min-height: 32px;
        padding: 4px 10px;
    }
    
    .retro-panel {
        padding: 8px;
    }
    
    /* Hide less critical elements to save space */
    .retro-breadcrumb {
        display: none;
    }
}

/* =============================================================================
   ACCESSIBILITY IMPROVEMENTS FOR MOBILE
   ============================================================================= */

/* Ensure focus indicators are visible on mobile */
.retro-btn:focus,
.retro-list-item:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 3px solid #0052cc !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .retro-window-title {
        border-bottom: 3px solid #000000;
    }
    
    .retro-btn {
        border-width: 3px !important;
    }
}