/**
 * PWA-ONLY STYLES
 * 
 * These styles ONLY apply when the app is running in PWA (standalone) mode.
 * They do NOT affect the regular desktop/browser experience.
 * 
 * Usage:
 *   - Use .pwa-mode class for PWA-specific styles
 *   - Use .mobile-pwa class for mobile PWA-specific styles
 *   - Use .browser-mode class to override PWA styles in browser
 */

/* ============================================
   PWA MODE: Hide Sidebar and Hamburger Menu
   ============================================ */

/* Hide left sidebar navigation in PWA mode */
.pwa-mode #left-nav {
    display: none !important;
}

/* Hide hamburger menu button in PWA mode */
.pwa-mode .mobile-header-menu-btn {
    display: none !important;
}

/* Hide mobile menu overlay in PWA mode (not needed without hamburger) */
.pwa-mode .mobile-menu-overlay {
    display: none !important;
}

/* Adjust main content to take full width in PWA mode (no sidebar) */
.pwa-mode #main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Ensure page layout uses full width in PWA mode */
.pwa-mode .page-layout {
    flex-direction: column !important;
}

/* ============================================
   PWA MODE: Remove Underline from School Name
   ============================================ */

/* ============================================
   PWA MODE: Consistent & Prominent School Name
   ============================================ */

/* Remove underline/border from school name in mobile header (PWA mode) */
/* Use multiple selectors to ensure it overrides all possible styles */
.pwa-mode .mobile-header-title .school-name,
.pwa-mode .mobile-header .school-name,
.pwa-mode .mobile-header-title span.school-name,
.pwa-mode .mobile-header-title .page-subtitle,
.pwa-mode .mobile-header-title p.page-subtitle,
.pwa-mode .mobile-header-title p,
.pwa-mode span.school-name {
    text-decoration: none !important;
    border-bottom: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
    
    /* Make school name consistent and prominent in PWA mode */
    font-size: 1.15rem !important; /* Slightly larger than before (was 1rem) */
    font-weight: 700 !important; /* Bold (was 600 or regular) */
    color: #1A73E8 !important; /* Cut Alert branded blue - makes it pop! */
    letter-spacing: 0.3px !important; /* Slight letter spacing for readability */
    margin-top: 6px !important; /* Consistent spacing from title */
    line-height: 1.3 !important; /* Better line height */
}

/* Remove any underline from desktop school header in PWA mode */
.pwa-mode .desktop-school-header {
    border-bottom: none !important;
}

/* Remove underline from any element containing school name in PWA mode */
.pwa-mode *[class*="school-name"] {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ============================================
   PWA MODE: Hide Blue School Name Bar/Button
   ============================================ */

/* Hide the blue school name bar/button in PWA mode only (not desktop) */
.pwa-mode .desktop-school-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Also hide any div with blue background that's the school name header */
.pwa-mode #main-content > div.mb-4[style*="background-color: #1a4d7a"],
.pwa-mode div.mb-4[style*="background-color: #1a4d7a"],
.pwa-mode div[style*="background-color: #1a4d7a"].desktop-school-header,
.pwa-mode .desktop-school-header[style*="background-color: #1a4d7a"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Hide any element with the specific blue color used for school headers */
.pwa-mode [style*="background-color: #1a4d7a"] {
    display: none !important;
}

/* ============================================
   PWA MODE: Bottom Navigation Always Visible
   ============================================ */

/* Ensure bottom navigation is always visible in PWA mode (regardless of screen size) */
.pwa-mode .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
}

/* Add padding to main content to account for bottom nav in PWA */
.pwa-mode #main-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; /* Space for bottom nav */
}

/* Ensure bottom nav items are visible in PWA mode */
.pwa-mode .mobile-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   PWA MODE: Compact Layout for Custom Notifications Page
   ============================================ */

/* ============================================
   PWA MODE: Compact Layout for Custom Notifications Page
   ============================================ */

/* Constrain main content width in PWA mode to prevent spreading */
.pwa-mode #main-content {
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 auto !important;
}

/* Make container-fluid more compact in PWA mode */
.pwa-mode #main-content .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* Constrain all cards to prevent spreading */
.pwa-mode #main-content .card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Make notification cards more compact */
.pwa-mode .notification-card {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure notification card content doesn't spread */
.pwa-mode .notification-card-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Make badges wrap better in PWA mode */
.pwa-mode .notification-card-badges {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Ensure filter section doesn't spread */
.pwa-mode .card-body {
    padding: 15px !important;
}

/* Make alert boxes more compact */
.pwa-mode .alert {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* ============================================
   MOBILE BROWSER: Apply PWA-like experience
   ============================================ */

/* Mobile browser should look exactly like PWA (but not desktop browser) */
/* Hide sidebar in mobile browser (same as PWA) */
.mobile-browser #left-nav {
    display: none !important;
}

/* Hide hamburger menu in mobile browser (same as PWA) */
.mobile-browser .mobile-header-menu-btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Adjust header layout when hamburger is hidden in mobile browser */
.mobile-browser .mobile-header-content {
    gap: 0 !important;
    padding-left: 0 !important;
}

/* Hide mobile menu overlay in mobile browser */
.mobile-browser .mobile-menu-overlay {
    display: none !important;
}

/* Adjust main content to take full width in mobile browser */
.mobile-browser #main-content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Hide blue school header in mobile browser */
.mobile-browser .desktop-school-header,
.mobile-browser div[style*="background-color: #1a4d7a"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Remove underline from school name in mobile browser */
.mobile-browser .mobile-header-title .school-name,
.mobile-browser .mobile-header-title .page-subtitle,
.mobile-browser .mobile-header-title p,
.mobile-browser span.school-name {
    text-decoration: none !important;
    border-bottom: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Make school name consistent and prominent (same as PWA) */
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1A73E8 !important;
    letter-spacing: 0.3px !important;
    margin-top: 6px !important;
    line-height: 1.3 !important;
}

/* Show bottom navigation in mobile browser (same as PWA) */
.mobile-browser .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    justify-content: space-around !important;
    align-items: center !important;
    background: #ffffff !important;
    border-top: 1px solid #e9ecef !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom)) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Add padding to main content for bottom nav in mobile browser */
.mobile-browser #main-content {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}

/* Compact layout for custom notifications in mobile browser */
.mobile-browser #main-content .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.mobile-browser #main-content .card {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mobile-browser .notification-card {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================
   Desktop Browser Mode: Ensure PWA styles don't apply
   ============================================ */

/* CRITICAL: Desktop (screen width > 767px) - ALWAYS show desktop school header */
/* This ensures the blue banner is visible on desktop regardless of any classes */
@media (min-width: 768px) {
    /* Always show desktop school header on desktop */
    .desktop-school-header,
    div[style*="background-color: #1a4d7a"].desktop-school-header {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        padding: 15px 20px !important;
        margin-bottom: 1rem !important;
        overflow: visible !important;
        opacity: 1 !important;
    }
    
    /* Only override mobile-browser class effects on desktop - don't touch base layout */
    .mobile-browser #left-nav {
        display: block !important;
    }
    
    .mobile-browser #main-content {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
    }
    
    .mobile-browser .mobile-header-menu-btn {
        display: none !important;
    }
    
    .mobile-browser .mobile-menu-overlay {
        display: none !important;
    }
    
    .mobile-browser .mobile-bottom-nav {
        display: none !important;
    }
}