/* ==========================================================================
   SHULEVORA PRO - SYSTEM-WIDE RESPONSIVE OVERRIDES
   ========================================================================== 
   This file ensures that all containers, portals, tables, and modules adapt
   fluidly to desktop, tablet, and mobile paradigms. 
*/

/* --------------------------------------------------
   1. GLOBAL FOUNDATIONS & CONTAINER CONSTRAINTS
   -------------------------------------------------- */
* {
    box-sizing: border-box !important;
}

img, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Base Responsive Container Rules - CRITICAL for horizontal overflow prevention */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

.container, 
.app-main-wrapper, 
.app-content-scroll,
.centered-container,
.main-content-flow {
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* Prevent edge bleeding */
    padding-left: clamp(10px, 3vw, 2rem) !important;
    padding-right: clamp(10px, 3vw, 2rem) !important;
}

/* Allow modals to fit viewport securely */
.vibrant-modal,
.glass-panel:not(.sidebar-dropdown-3d),
[id$="Modal"] .vibrant-card,
[id$="Modal"] > div > div {
    max-width: 95vw !important;
    max-height: 95vh !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Scroll Locking Utility */
.body-scroll-lock {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none;
}

/* Flexible Forms / Form Layouts */
.form-group-row, .input-row, .grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 100%;
}
.form-group-row > * {
    flex: 1 1 200px;
}

/* --------------------------------------------------
   2. DATA MATRICES & TABLES RESILIENCE
   -------------------------------------------------- */
/* Ensure tables never break their bounding box */
.premium-table-container,
.table-responsive,
.marks-matrix,
.results-matrix,
.data-table-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Optional: add subtle shadows on x-scroll if needed */
}

/* Force table constraints without breaking design */
.premium-table, table {
    width: 100% !important;
    max-width: none !important; /* Allow internal width to expand only within scroll bounds */
}

/* Ensure inner components don't artificially blow out layout */
.vibrant-card {
    max-width: 100%;
    width: 100%;
    overflow: hidden; /* Contains floats and child bleed */
}

/* --------------------------------------------------
   3. LAPTOPS / SMALL DESKTOPS (max-width: 1280px)
   -------------------------------------------------- */
@media (max-width: 1280px) {
    .premium-header-card {
        padding: 1.25rem 1.5rem !important;
    }
    .metric-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }
}

/* --------------------------------------------------
   4. TABLET RESPONSIVENESS (max-width: 1024px)
   -------------------------------------------------- */
@media (max-width: 1024px) {
    /* Grid adjustments */
    .grid-3-col, 
    .grid-4-col {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Topbar compact */
    .app-topbar-3d {
        padding: 0.5rem 1rem !important;
    }
    
    .hb-info {
        display: none !important; /* Hide long school names in header on tablet */
    }

    .taskbar-search-input {
        width: 150px !important; /* shrink search bar */
    }

    /* Sidebar Drawer Logic - Transform from Grid/Flex to Overlay */
    .app-sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh !important;
        z-index: var(--z-modal, 11000) !important; /* Priority over header and sticky bars */
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        width: 85vw !important; /* Mobile drawer width */
        max-width: 300px;
        box-shadow: 10px 0 30px rgba(0,0,0,0.3) !important;
        background: var(--bg-sidebar, #1a1c1e) !important;
    }

    /* When toggled off */
    .app-sidebar.collapsed {
        transform: translateX(-100%);
        width: 85vw !important; 
        max-width: 300px;
    }

    /* Make sure header elements adapt */
    .premium-header-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    .phc-actions {
        width: 100% !important;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .phc-title {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }
}

/* --------------------------------------------------
   5. MOBILE RESPONSIVENESS (max-width: 768px)
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* Crush everything to single column */
    .grid-2-col, 
    .grid-3-col, 
    .grid-4-col, 
    .metric-card-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Ensure flex headers and actions wrap */
    .header-actions,
    .controls-row,
    .toolbar-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100%;
    }
    
    .toolbar-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Navigation / Header compression */
    .taskbar-search-vessel,
    #headerQuickActions,
    #headerSyncToggle,
    .header-right-3d > div[style*="width: 1px"],
    .hb-tagline,
    #headerProfileTrigger > div:nth-child(2),
    #headerProfileTrigger > i.ph-caret-down {
        display: none !important; /* Strip non-core elements on mobile */
    }
    
    .app-topbar-3d {
        justify-content: space-between !important;
        gap: 0.5rem !important;
    }

    .header-left-3d, .header-right-3d {
        flex: 0 1 auto !important;
    }

    #headerProfileTrigger {
        padding: 4px !important;
    }

    /* Hide decorative floating particles or hero decorations on mobile */
    .command-hero::after,
    .premium-header-card::before {
        display: none !important;
    }

    .command-hero {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }
    
    .vibrant-card {
        padding: 1.25rem 1rem !important;
    }

    /* Form Fields Full Width */
    .input-control, 
    .select-control, 
    textarea.input-control {
        width: 100% !important;
    }

    /* Timetable / Engine Fixes */
    .timetable-grid {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
    }

    /* Typography Scale Down */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1.1rem !important; }

    /* Dropdowns UI Cards */
    #notifDropdown, #userDropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        padding: 1.5rem !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    #userDropdown, #notifDropdown {
        position: fixed !important;
        top: 10vh !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 400px;
    }

    /* --------------------------------------------------
       MOBILE BOTTOM NAVIGATION
       -------------------------------------------------- */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0,0,0,0.05);
        z-index: 9997;
        padding-bottom: env(safe-area-inset-bottom);
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    }

    .bn-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--text-muted);
        transition: all 0.2s;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 12px;
        flex: 1;
    }

    .bn-item i {
        font-size: 1.4rem;
    }

    .bn-item span {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .bn-item.active {
        color: var(--primary);
    }

    .bn-item:active {
        transform: scale(0.92);
        background: rgba(0,0,0,0.03);
    }

    /* Adjust main content for bottom nav */
    .app-content-scroll {
        padding-bottom: 80px !important;
    }
}

/* Default state for Bottom Nav (Hidden on Desktop) */
.mobile-bottom-nav {
    display: none;
}

/* --------------------------------------------------
   SIDEBAR MOBILE OVERLAY
   -------------------------------------------------- */
#mobileSidebarOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: var(--z-overlay, 10000); /* Above content and bottom nav, below sidebar */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#mobileSidebarOverlay.active {
    opacity: 1;
    pointer-events: auto;
}