/* =========================================
   HEADER CSS (Single Source Component Styles)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
:root {
    --ahps-dark-blue: #0b2c52; 
    --ahps-header-bg: #eae8e3;
    --ahps-dropdown-blue: #15314b; 
    --ahps-accent-beige: #C1A776; 
    --ahps-btn-yellow: #fbbb21;
    --ahps-top-btn-bg: rgba(255, 255, 255, 0.15);
    --ahps-nav-link-color: #0b2c52; 
    --ahps-megaphone-color: #ed4a6a; 
    --ahps-hamburger-maroon: #C1A776; 
}

.ahps-master-wrapper {
    font-family: 'Inter', sans-serif;
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 1000;
}

/* TOP BAR */
.ahps-master-wrapper .ahps-top-bar {
    background-color: var(--ahps-dark-blue); height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #fff; font-size: 13px;
}
.ahps-master-wrapper .ahps-marquee-box { flex: 1; overflow: hidden; display: flex; align-items: center; white-space: nowrap; margin-right: 20px; }
.ahps-master-wrapper .ahps-marquee-inner { display: flex; gap: 40px; animation: ahps-marquee-scroll 25s linear infinite; }
.ahps-master-wrapper .ahps-marquee-inner span { display: flex; align-items: center; gap: 8px; }
.ahps-master-wrapper .ahps-marquee-inner i { color: var(--ahps-megaphone-color); font-size: 14px; }
@keyframes ahps-marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ahps-master-wrapper .ahps-top-actions { display: flex; gap: 10px; flex-shrink: 0; }
.ahps-master-wrapper .ahps-top-btn { display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 20px; text-decoration: none; font-weight: 400; font-size: 13px; transition: opacity 0.3s; }
.ahps-master-wrapper .ahps-top-btn:hover { opacity: 0.8; }
.ahps-master-wrapper .ahps-btn-dark { background-color: var(--ahps-top-btn-bg); color: #fff; }
.ahps-master-wrapper .ahps-btn-yellow { background-color: var(--ahps-btn-yellow); color: var(--ahps-dark-blue); font-weight: 600;}

/* MAIN HEADER */
.ahps-main-header,
.ahps-master-wrapper .ahps-main-header { 
    background-color: var(--ahps-header-bg); 
    height: 75px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 25px; 
    position: relative; 
    z-index: 1000; 
    overflow: visible;
    border-bottom: 1px solid #dddcd7; 
}
.ahps-logo-container,
.ahps-master-wrapper .ahps-logo-container { display: flex; align-items: center; gap: 12px; text-decoration: none; height: 100%; flex-shrink: 0; }
.ahps-logo-container img,
.ahps-master-wrapper .ahps-logo-container img { height: 60px; width: auto; object-fit: contain; }
.ahps-school-title,
.ahps-master-wrapper .ahps-school-title { font-family: 'Roboto', sans-serif; color: var(--ahps-dark-blue); font-size: 22px; white-space: nowrap; line-height: 1.1; font-weight: bold; }

/* DESKTOP NAVIGATION & HOVER DROPDOWN BEHAVIOR */
.ahps-nav-desktop,
.ahps-master-wrapper .ahps-nav-desktop { display: flex; align-items: center; gap: 24px; list-style: none; height: 100%; margin: 0 auto; padding-left: 20px; position: relative; z-index: 1001; }
.ahps-nav-desktop > li,
.ahps-master-wrapper .ahps-nav-desktop > li { position: relative; height: 100%; display: flex; align-items: center; }
.ahps-nav-desktop > li > a,
.ahps-master-wrapper .ahps-nav-desktop > li > a { 
    text-decoration: none; 
    color: var(--ahps-nav-link-color); 
    font-size: 11.5px; 
    text-transform: uppercase; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    position: relative; 
    transition: color 0.2s; 
    letter-spacing: 0.5px; 
    cursor: pointer; 
    height: 100%; 
    padding: 0 4px;
}
.ahps-nav-desktop > li:hover > a,
.ahps-master-wrapper .ahps-nav-desktop > li:hover > a { color: var(--ahps-accent-beige); }
.ahps-nav-desktop > li > a::after,
.ahps-master-wrapper .ahps-nav-desktop > li > a::after { content: ''; position: absolute; bottom: 22px; left: 0; width: 100%; height: 2px; background-color: var(--ahps-accent-beige); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.ahps-nav-desktop > li:hover > a::after,
.ahps-master-wrapper .ahps-nav-desktop > li:hover > a::after { transform: scaleX(1); }

.ahps-nav-icon,
.ahps-master-wrapper .ahps-nav-icon { margin-left: 6px; pointer-events: none; }
.ahps-nav-icon::before,
.ahps-master-wrapper .ahps-nav-icon::before { content: '+'; font-size: 15px; font-weight: 600; }
.ahps-nav-desktop > li:hover > a .ahps-nav-icon::before,
.ahps-master-wrapper .ahps-nav-desktop > li:hover > a .ahps-nav-icon::before { content: '\2014'; }

.ahps-dropdown-box,
.ahps-master-wrapper .ahps-dropdown-box { 
    position: absolute; 
    top: 75px; 
    left: -10px; 
    background-color: #ffffff; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
    min-width: 260px; 
    padding: 15px 0; 
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(10px); 
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; 
    list-style: none; 
    z-index: 9999; 
    border-radius: 0 0 8px 8px; 
    pointer-events: none;
}

/* Invisible hover bridge to eliminate gap during cursor movement */
.ahps-dropdown-box::before,
.ahps-master-wrapper .ahps-dropdown-box::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

/* TRIGGER DROPDOWN ON NAVIGATION TITLE HOVER OR DROPDOWN HOVER */
.ahps-nav-desktop > li:hover > .ahps-dropdown-box,
.ahps-master-wrapper .ahps-nav-desktop > li:hover > .ahps-dropdown-box,
.ahps-dropdown-box:hover,
.ahps-master-wrapper .ahps-dropdown-box:hover { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
    pointer-events: auto;
}

.ahps-dropdown-box li a,
.ahps-master-wrapper .ahps-dropdown-box li a { display: block; padding: 12px 25px; color: var(--ahps-dropdown-blue); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 0.2s, color 0.2s; }
.ahps-dropdown-box li a:hover,
.ahps-master-wrapper .ahps-dropdown-box li a:hover { background-color: #f7f9fa; color: var(--ahps-accent-beige); }

/* HAMBURGER ICON */
.ahps-master-wrapper .ahps-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 34px; height: 24px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; margin-left: 15px; }
.ahps-master-wrapper .ahps-hamburger span { display: block; height: 4px; width: 100%; background-color: var(--ahps-hamburger-maroon); border-radius: 10px; transition: 0.3s; }
.ahps-master-wrapper .ahps-hamburger:hover span { background-color: var(--ahps-dark-blue); }

/* SIDEBAR (Slide-in) */
.ahps-master-wrapper .ahps-sidebar { position: fixed; top: 0; right: -100%; width: 420px; max-width: 100%; height: 100vh; background-color: #ffffff; z-index: 2000; transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: -5px 0 25px rgba(0,0,0,0.1); overflow-y: auto; }
.ahps-master-wrapper .ahps-sidebar.active { right: 0; }
.ahps-master-wrapper .ahps-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: 0.4s; }
.ahps-master-wrapper .ahps-sidebar-overlay.active { opacity: 1; visibility: visible; }
.ahps-master-wrapper .ahps-sidebar-close { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 32px; color: #555; cursor: pointer; z-index: 10; transition: color 0.2s;}
.ahps-master-wrapper .ahps-sidebar-close:hover { color: #d93838; }

/* DESKTOP SIDEBAR CONTENT */
.ahps-master-wrapper .desktop-sidebar-content { padding: 40px 30px; display: block; }
.ahps-master-wrapper .ahps-sidebar-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.ahps-master-wrapper .ahps-sidebar-brand img { height: 50px; width: auto; object-fit: contain; }
.ahps-master-wrapper .ahps-sidebar-brand h3 { font-family: 'Quintessential', serif; color: var(--ahps-dark-blue); font-size: 18px; font-weight: normal; line-height: 1; }
.ahps-master-wrapper .ahps-sidebar-text { font-size: 13px; line-height: 1.6; color: #555; margin-bottom: 15px; text-align: justify; }
.ahps-master-wrapper .ahps-sidebar-img { width: 100%; border-radius: 6px; margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.ahps-master-wrapper .ahps-sidebar-contact p { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #444; margin-bottom: 10px; }
.ahps-master-wrapper .ahps-sidebar-contact i { color: var(--ahps-dark-blue); font-size: 16px; width: 20px; text-align: center; } 
.ahps-master-wrapper .ahps-social-icons { display: flex; align-items: center; gap: 12px; margin-top: 15px; border-top: 1px solid #eee; padding-top: 15px; }
.ahps-master-wrapper .ahps-social-icons span { font-size: 13px; font-weight: 600; color: #333; margin-right: 5px; }
.ahps-master-wrapper .ahps-social-icons a { color: var(--ahps-dark-blue); font-size: 16px; transition: color 0.3s; } 
.ahps-master-wrapper .ahps-social-icons a:hover { color: var(--ahps-accent-beige); } 

/* MOBILE SIDEBAR CONTENT (Nav Links) */
/* MOBILE SIDEBAR ACTION BUTTONS (KPI, Admin, Parent, Admission, Fee Payment - 1 BUTTON PER ROW) */
.mobile-sidebar-actions,
.ahps-master-wrapper .mobile-sidebar-actions {
    display: block !important;
    padding: 15px 20px 30px 20px !important;
    border-top: 2px solid #e2e8f0 !important;
    margin-top: 15px !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.mobile-sidebar-actions .mobile-action-btn,
.ahps-master-wrapper .mobile-sidebar-actions .mobile-action-btn {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 16px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
    clear: both !important;
    float: none !important;
}
.mobile-sidebar-actions .btn-kpi,
.ahps-master-wrapper .mobile-sidebar-actions .btn-kpi {
    background: #0f172a !important;
    color: #ffffff !important;
}
.mobile-sidebar-actions .btn-admin,
.ahps-master-wrapper .mobile-sidebar-actions .btn-admin {
    background: #1e3a8a !important;
    color: #ffffff !important;
}
.mobile-sidebar-actions .btn-parent,
.ahps-master-wrapper .mobile-sidebar-actions .btn-parent {
    background: #0b2c52 !important;
    color: #ffffff !important;
}
.mobile-sidebar-actions .btn-admission,
.ahps-master-wrapper .mobile-sidebar-actions .btn-admission {
    background: #15314b !important;
    color: #ffffff !important;
}
.mobile-sidebar-actions .btn-fee,
.ahps-master-wrapper .mobile-sidebar-actions .btn-fee {
    background: #fbbb21 !important;
    color: #0b2c52 !important;
    font-weight: 700 !important;
}
.mobile-sidebar-actions .mobile-action-btn:hover,
.ahps-master-wrapper .mobile-sidebar-actions .mobile-action-btn:hover {
    transform: translateY(-1px) !important;
    opacity: 0.92 !important;
}

.ahps-master-wrapper .mobile-sidebar-nav { display: none; padding-top: 60px; }
.ahps-master-wrapper .ahps-mobile-nav { list-style: none; padding: 0; margin: 0; }
.ahps-master-wrapper .ahps-mobile-nav li { border-bottom: 1px solid #eee; }
.ahps-master-wrapper .ahps-mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: 16px 25px; color: var(--ahps-dark-blue); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.ahps-master-wrapper .ahps-mobile-nav a:hover { color: var(--ahps-accent-beige); background: #fdfdfd; }
.ahps-master-wrapper .ahps-mobile-dropdown { display: none; background: #f7f9fa; list-style: none; padding: 0; }
.ahps-master-wrapper .ahps-mobile-dropdown li { border-bottom: 1px solid #e9e9e9; }
.ahps-master-wrapper .ahps-mobile-dropdown a { padding: 14px 40px; font-size: 13px; text-transform: none; color: #555; font-weight: 500; }
.ahps-master-wrapper .ahps-mobile-nav .has-dropdown > a::after { content: '+'; font-size: 18px; font-weight: 400; transition: transform 0.3s; }
.ahps-master-wrapper .ahps-mobile-nav .has-dropdown.open > a::after { content: '\2014'; color: var(--ahps-accent-beige); }
.ahps-master-wrapper .ahps-mobile-nav .has-dropdown.open > a { color: var(--ahps-accent-beige); }

/* RESPONSIVE MEDIA QUERIES FOR HEADER */
@media (max-width: 1250px) {
    .ahps-master-wrapper .ahps-nav-desktop { gap: 12px; padding-left: 10px; }
    .ahps-master-wrapper .ahps-nav-desktop > li > a { font-size: 11px; }
    .ahps-master-wrapper .ahps-school-title { font-size: 18px; }
}

@media (max-width: 1050px) {
    .ahps-master-wrapper .ahps-nav-desktop { display: none; } 
    .ahps-master-wrapper .desktop-sidebar-content { display: none; }
    .ahps-master-wrapper .mobile-sidebar-nav { display: block; }
}

@media (max-width: 768px) { 
    .ahps-master-wrapper .ahps-top-bar { height: auto; flex-direction: column; padding: 10px; gap: 8px; } 
    .ahps-master-wrapper .ahps-marquee-box { margin-right: 0; width: 100%; } 
    .ahps-master-wrapper .ahps-top-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } 
    .ahps-master-wrapper .ahps-top-actions a[href*="kpi-dashboard"],
    .ahps-master-wrapper .ahps-top-actions a[href*="admin/"],
    .ahps-top-actions a[href*="kpi-dashboard"],
    .ahps-top-actions a[href*="admin/"] { display: none !important; }
    .ahps-master-wrapper .ahps-top-btn { font-size: 11.5px; padding: 5px 10px; } 
    .ahps-master-wrapper .ahps-school-title { font-size: 17px; } 
    .ahps-master-wrapper .ahps-logo-container img { height: 48px; } 
    .ahps-master-wrapper .ahps-sidebar { width: 85%; } 
}

@media (max-width: 480px) {
    .ahps-master-wrapper .ahps-top-btn { font-size: 10.5px; padding: 4px 8px; }
    .ahps-master-wrapper .ahps-school-title { font-size: 15px; }
}