/* General Reset */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background-color: #f4faff; overflow-x: hidden; }
body.nav-active { overflow: hidden; }

/* --- Unified Sidebar --- */
.side-bar {
    width: 280px; background: linear-gradient(180deg, #002366 0%, #001a4d 100%); color: white;
    height: 100vh; padding: 20px; display: flex; flex-direction: column; align-items: center;
    position: fixed; top: 0; left: 0; box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1); z-index: 1001;
    transition: transform 0.3s ease-out;
    overflow-y: auto; /* Default overflow */
    transform: translateX(0);
}
.logo-name { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; text-align: center; width: 100%; }
.logo { width: 180px; height: auto; margin-bottom: 15px; opacity: 0.9; transition: opacity 0.3s ease, transform 0.3s ease; }
.logo:hover { opacity: 1; transform: scale(1.05); }
.animated-text { font-size: 1.1rem; margin: 10px 0 5px 0; color: #ffffff; font-weight: 600; }
.animated-subtext { font-size: 0.85rem; color: rgba(255,255,255,0.8); margin-bottom: 15px; }

.side-bar ul {
    list-style: none; width: 100%; padding: 0 10px; margin: 0;
    /* Removed flex-grow: 1; */
}
.side-bar ul li { margin: 10px 0; }

.nav-item { text-decoration: none; color: rgba(255, 255, 255, 0.85); font-weight: 500; padding: 12px 18px; display: flex; align-items: center; text-align: left; border-radius: 8px; background: transparent; border: 1px solid transparent; transition: all 0.25s ease-out; position: relative; overflow: hidden; }
.nav-item i { margin-right: 15px; font-size: 1.1em; min-width: 25px; text-align: center; transition: transform 0.3s ease; color: rgba(255, 255, 255, 0.85); }
.nav-item .nav-text { color: inherit; transition: color 0.25s ease-out; }
.nav-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; transform: translateX(5px); }
.nav-item:hover i { transform: scale(1.1); }
.nav-item.active { background: #0054a6; color: #ffffff; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.nav-item.active i { color: #ffffff; }

/* Ripple effect */
.ripple:before { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255,255,255,0.5); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.5s ease-out, opacity 0.5s ease-out; opacity: 1; pointer-events: none; }
.ripple:active:before { transform: translate(-50%, -50%) scale(100); opacity: 0; transition: 0s; }

/* Bottom Links Container */
.sidebar-bottom-links { margin-top: auto; padding: 15px 10px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); width: 100%; flex-shrink: 0; display: block; /* Default display */ }
.bottom-nav-item { display: flex; align-items: center; padding: 10px 15px; color: rgba(255, 255, 255, 0.8); text-decoration: none; border-radius: 6px; transition: background-color 0.2s ease; font-size: 0.9rem; }
.bottom-nav-item:hover { background-color: rgba(255, 255, 255, 0.1); color: #fff; }
.bottom-nav-item i { margin-right: 10px; width: 20px; text-align: center; }

/* --- Mobile Menu Specific --- */
.mobile-menu-icon { display: none; background: rgba(0, 84, 166, 0.8); border: none; color: white; font-size: 22px; padding: 0; cursor: pointer; position: fixed; top: 10px; left: 10px; z-index: 1002; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; width: 44px; height: 44px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); align-items: center; justify-content: center; }
.mobile-menu-icon.active { background-color: rgba(255, 255, 255, 0.9); color: #0054a6; }
.mobile-menu-icon:hover { background-color: rgba(0, 84, 166, 1); }
.mobile-menu-icon.active:hover { background-color: rgba(255, 255, 255, 1); }
.nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0s 0.3s linear; }
.nav-overlay.show { display: block; opacity: 1; visibility: visible; transition: opacity 0.3s ease-out, visibility 0s 0s linear; }

/* --- Main Content --- */
.main-content { width: calc(100% - 280px); margin-left: 280px; padding: 40px 50px; min-height: calc(100vh - 40px); transition: margin-left 0.3s ease-out, width 0.3s ease-out; padding-bottom: 80px; display: flex; flex-direction: column; }

/* --- Coaches Page Specific Styles --- */
.coaches-header { text-align: center; margin-bottom: 40px; }
.section-title { font-size: 2.2rem; color: #002366; margin-bottom: 10px; font-weight: 600; }
.section-subtitle { font-size: 1.1rem; color: #555777; max-width: 600px; margin: 0 auto 15px auto; line-height: 1.6; }
.coaches-hierarchy { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 1000px; margin: 0 auto; }
.coach-level { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; width: 100%; }
.coach-box { background: white; border-radius: 15px; padding: 25px; width: 300px; text-align: center; box-shadow: 0 5px 20px rgba(0, 35, 102, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; border: 1px solid #e8f0f8; display: flex; flex-direction: column; }
.coach-box:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 35, 102, 0.15); }
.coach-image { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto 15px auto; display: block; border: 4px solid #e6f3ff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); flex-shrink: 0; }
.coach-box h3 { font-size: 1.4rem; color: #002366; margin-bottom: 5px; font-weight: 600; }
.coach-box h4 { font-size: 1rem; color: #0054a6; margin-bottom: 15px; font-weight: 500; flex-grow: 0; }
.coach-box p { font-size: 0.9rem; color: #666; line-height: 1.5; margin-bottom: 0; flex-grow: 1; text-align: left; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }
.assistants-section { width: 100%; margin-top: 20px; padding-top: 30px; border-top: 1px solid #e0e0e0; }
.assistants-section > h3 { text-align: center; font-size: 1.5rem; color: #003366; margin-bottom: 25px; font-weight: 600; }

/* --- Footer Styling --- */
.footer { text-align: center; padding: 15px; background-color: #001a4d; color: rgba(255, 255, 255, 0.7); width: calc(100% - 280px); margin-left: 280px; font-size: 0.85rem; z-index: 100; margin-top: auto; transition: margin-left 0.3s ease-out, width 0.3s ease-out; position: static; flex-shrink: 0; }

/* --- SweetAlert Coach Popup --- */
.coach-popup.swal2-popup { padding: 20px !important; max-width: 500px !important; width: 90% !important; border-radius: 15px !important; }
.coach-popup-image.swal2-image { width: 150px !important; max-width: 40% !important; height: auto !important; border-radius: 50% !important; object-fit: cover; margin: 0 auto 15px auto !important; border: 3px solid #eee !important; display: block !important; }
.coach-popup-container.swal2-html-container { text-align: center !important; padding: 0 5px !important; margin-top: 0 !important; overflow-x: hidden; }
.coach-popup .swal2-title { font-size: 1.6rem !important; color: #002366 !important; margin-bottom: 8px !important; padding: 0 10px !important; word-wrap: break-word; }
.coach-role { font-size: 1.1rem; color: #0054a6; font-weight: 500; margin-bottom: 15px; }
.coach-description { font-size: 0.95rem; color: #555; line-height: 1.6; text-align: justify; overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; margin-top: 10px; }


/* --- Responsive --- */

/* Medium devices (Tablets & Smaller Desktops) */
@media screen and (max-width: 992px) {
    .side-bar {
        transform: translateX(-105%);
        /* FIX: Force scrollbar visibility for diagnosis on mobile */
        /* You might want to revert to 'auto' after testing */
        overflow-y: scroll !important;
    }
    .side-bar.active {
        transform: translateX(0);
        /* Ensure sidebar itself is displayed correctly when active */
        display: flex !important;
    }
    .mobile-menu-icon { display: flex; }
    .nav-overlay { display: block; }
    .main-content { width: 100%; margin-left: 0; padding: 80px 20px 40px 20px; }
    .footer { width: 100%; margin-left: 0; position: static; margin-top: 30px; }
    .coach-box { width: calc(50% - 15px); max-width: 300px; }
    .coach-level { gap: 20px; }

    /* FIX: Explicitly set display and visibility for bottom links container */
    .side-bar.active .sidebar-bottom-links {
        display: block !important; /* Or flex if needed, block is usually fine */
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important; /* Ensure height isn't restricting it */
    }
     /* Also ensure individual links are visible */
     .side-bar.active .bottom-nav-item {
         display: flex !important;
         visibility: visible !important;
         opacity: 1 !important;
     }
}

/* Small devices (Mobile phones) */
@media screen and (max-width: 768px) {
    .main-content { padding: 75px 15px 30px 15px; }
    .section-title { font-size: 1.8rem; }
    .section-subtitle { font-size: 1rem; max-width: 95%; }
    .coach-level { flex-direction: column; align-items: center; gap: 25px; }
    .coach-box { width: 90%; max-width: 380px; }
    .coach-image { width: 140px; height: 140px; }
    .coach-box h3 { font-size: 1.3rem; }
    .coach-box h4 { font-size: 0.95rem; }
    .coach-box p { font-size: 0.85rem; text-align: justify; }
    .assistants-section > h3 { font-size: 1.3rem; }
    .footer { padding: 10px; font-size: 0.8rem; }
    /* MOBILE MODAL STYLES */
    .coach-popup.swal2-popup { padding: 15px !important; width: 92% !important; }
    .coach-popup-image.swal2-image { width: 120px !important; max-width: 35% !important; margin-bottom: 10px !important; }
    .coach-popup .swal2-title { font-size: 1.4rem !important; }
    .coach-role { font-size: 1rem !important; margin-bottom: 10px !important; }
    .coach-description { font-size: 0.9rem !important; text-align: left; }
    .coach-popup-container.swal2-html-container { padding: 0 2px !important; }
}

/* Extra small devices */
@media screen and (max-width: 480px) {
      .main-content { padding: 70px 10px 20px 10px; }
      .section-title { font-size: 1.6rem; }
      .section-subtitle { font-size: 0.9rem; }
      .coach-image { width: 110px; height: 110px; }
      .coach-box { width: 95%; }
      .coach-box h3 { font-size: 1.2rem; }
      .coach-box h4 { font-size: 0.9rem; }
      .coach-box p { font-size: 0.8rem; }
    /* X-SMALL MODAL STYLES */
    .coach-popup.swal2-popup { padding: 10px !important; }
    .coach-popup-image.swal2-image { width: 100px !important; max-width: 30% !important; }
    .coach-popup .swal2-title { font-size: 1.25rem !important; }
    .coach-role { font-size: 0.9rem !important; }
    .coach-description { font-size: 0.85rem !important; }
}

/* Landscape orientation fixes */
@media screen and (max-height: 500px) and (orientation: landscape) {
   .side-bar { overflow-y: auto; } /* Keep auto or scroll as needed */
   .coach-popup-container.swal2-html-container { max-height: 60vh; overflow-y: auto; }
}

/* Touch-friendly adjustments */
@media (hover: none) {
    .nav-item:hover { background: transparent; transform: none; }
    .nav-item:active { background: rgba(255, 255, 255, 0.1); }
    .coach-box:hover { transform: none; box-shadow: 0 5px 20px rgba(0, 35, 102, 0.1); }
    .coach-box:active { transform: scale(0.98); }
}