/* ======================================
   PRISTINE WORLD - MOBILE RESPONSIVE FIXES
   Complete mobile layout corrections
   ====================================== */

/* FORCE RESPONSIVE CONTAINER BEHAVIOR */
@media (max-width: 1024px) {
    .container_main {
        flex-direction: row !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        gap: 5px !important;
    }
    
    .container_left, .container_right {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
    }
    
    .container_mid {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Keep 3-column layout on tablet */
    .container_main {
        flex-direction: row !important;
        gap: 3px !important;
        padding: 0 3px !important;
    }
    
    .container_left, .container_right {
        flex: 0 0 150px !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }
    
    .left_box, .right_box, .center_box {
        margin-bottom: 8px !important;
    }
    
    .left_box .title span, 
    .right_box .title span {
        font-size: 11px !important;
        letter-spacing: 0.8px !important;
    }
    
    .center_box .title span {
        font-size: 12px !important;
    }
    
    .rise-up-content {
        padding: 10px !important;
        min-height: 60px !important;
    }
    
    .left_box a, .right_box a {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 600px) {
    /* Switch to mobile stack layout */
    .container_main {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
    
    .container_left, .container_right {
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
    }
    
    .container_mid {
        order: 1 !important;
        width: 100% !important;
        flex: none !important;
    }
    
    /* Horizontal scroll for sidebar menus on mobile */
    .container_left, .container_right {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    
    .left_box, .right_box {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        margin-bottom: 0 !important;
    }
    
    .center_box {
        width: 100% !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    /* Ultra-compact mobile layout */
    .container_main {
        padding: 0 5px !important;
        gap: 8px !important;
    }
    
    .left_box, .right_box {
        flex: 0 0 180px !important;
        width: 180px !important;
        min-width: 180px !important;
    }
    
    .left_box .title span, 
    .right_box .title span {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
    
    .center_box .title span {
        font-size: 11px !important;
    }
    
    .rise-up-content {
        padding: 8px !important;
        min-height: 50px !important;
    }
    
    .left_box a, .right_box a {
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
    
    /* Compact table styling for mobile */
    table, .sinfotable {
        font-size: 8px !important;
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        white-space: nowrap !important;
    }
    
    table td, table th,
    .sinfotable td, .sinfotable th {
        padding: 3px 5px !important;
        min-width: 40px !important;
    }
}

/* FORCE CONTAINER ALIGNMENT */
body .logo_and_main .container_main {
    display: flex !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* FORCE SIDEBAR WIDTHS ON DESKTOP */
@media (min-width: 769px) {
    body .logo_and_main .container_main .container_left {
        flex: 0 0 204px !important;
        width: 204px !important;
        min-width: 204px !important;
        max-width: 204px !important;
    }
    
    body .logo_and_main .container_main .container_right {
        flex: 0 0 204px !important;
        width: 204px !important;
        min-width: 204px !important;
        max-width: 204px !important;
    }
    
    body .logo_and_main .container_main .container_mid {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* LOGO RESPONSIVE FIXES */
@media (max-width: 768px) {
    .top_logo {
        padding: 15px 10px !important;
        text-align: center !important;
    }
    
    .top_logo img {
        max-width: 90% !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .top_logo {
        padding: 10px 5px !important;
    }
    
    .top_logo img {
        max-width: 85% !important;
    }
}

/* TABLE RESPONSIVE IMPROVEMENTS */
@media (max-width: 768px) {
    table, .sinfotable {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    table thead, table tbody, table th, table td, table tr,
    .sinfotable thead, .sinfotable tbody, .sinfotable th, .sinfotable td, .sinfotable tr {
        display: block !important;
    }
    
    table tr, .sinfotable tr {
        border: 1px solid rgba(139,69,19,0.4) !important;
        margin-bottom: 5px !important;
        padding: 5px !important;
    }
    
    table th, .sinfotable th {
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
    
    table td, .sinfotable td {
        border: none !important;
        position: relative !important;
        padding-left: 50% !important;
        white-space: normal !important;
        text-align: left !important;
    }
    
    table td:before, .sinfotable td:before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 6px !important;
        width: 45% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        font-weight: bold !important;
        color: #d4af37 !important;
    }
}

/* SCROLLBAR IMPROVEMENTS FOR MOBILE */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #8b6914 !important;
        border-radius: 3px !important;
    }
}