/* ==========================================================
   SKCTC Institute Management System - Custom & Print Styles
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+Gujarati:wght@400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter', 'Noto Sans Gujarati', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Active Nav State - White, Blue & Yellow Theme */
.nav-item.active {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 4px 14px -2px rgba(37, 99, 235, 0.35);
    border-left: 4px solid #facc15;
}
.nav-item.active svg {
    color: #fef08a !important;
}

/* Modern Dynamic Theme Classes */
:root {
    --theme-white: #ffffff;
    --theme-blue-primary: #1d4ed8;
    --theme-blue-deep: #1e3a8a;
    --theme-yellow-vibrant: #f59e0b;
    --theme-yellow-bright: #facc15;
    --theme-yellow-light: #fef9c3;
}

/* Top Accent Line for Header / Cards */
.border-theme-top-yellow {
    border-top: 3px solid #f59e0b;
}
.border-theme-top-blue {
    border-top: 3px solid #2563eb;
}

/* Dynamic Yellow Glow & Collect Fee Spotlight */
.btn-collect-fee-theme {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0f172a !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 4px 14px -2px rgba(245, 158, 11, 0.45) !important;
    font-weight: 800 !important;
}
.btn-collect-fee-theme:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px -2px rgba(217, 119, 6, 0.5) !important;
}

/* Modal Animation */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(5px);
    transition: opacity 0.2s ease-out;
}

/* Printable Fee Receipt, Marksheet, Certificates and Official Reports */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 10mm 12mm 10mm;
    }
    .print-landscape @page {
        size: A4 landscape;
        margin: 8mm 10mm;
    }
    html, body {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        font-family: 'Inter', 'Noto Sans Gujarati', system-ui, -apple-system, sans-serif !important;
    }
    /* Hide all main elements so zero blank/phantom pages are created */
    body > * {
        display: none !important;
    }
    /* Show ONLY modal-print-container and make it full bleed */
    body > #modal-print-container {
        display: block !important;
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    #modal-print-container > div {
        max-width: 100% !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        background: transparent !important;
    }
    #printable-receipt {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    #printable-receipt * {
        visibility: visible !important;
    }
    #pdf-report-root {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: #ffffff !important;
    }
    .print-clean-wrapper {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    #pdf-report-print-sheet {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        display: block !important;
    }
    thead {
        display: table-header-group !important;
    }
    tfoot {
        display: table-row-group !important;
    }
    tr, .kpi-grid, .report-banner, .report-footer-sign {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    .no-print {
        display: none !important;
    }
}

/* Smooth badge glow */
.badge-pulse {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
    100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
    }
}

/* ==========================================================
   MOBILE & RESPONSIVE DESIGN UTILITIES
   ========================================================== */

/* Safe area padding for modern iPhones & Android navigation bars */
.safe-bottom-padding {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.bottom-nav-safe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Smooth Touch Scrolling on iOS, Android & PC */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
}

/* Slide-Over Drawer Transitions */
#mobile-nav-drawer {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#mobile-drawer-backdrop {
    transition: opacity 0.25s ease-out;
}

/* Mobile FAB Quick Actions Menu Animation */
#mobile-fab-menu {
    transform-origin: bottom right;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active touch feedback */
.touch-btn:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

/* Modern Form Input Polish */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Table Horizontal Scroll Hint Shadow & Fluid Vertical Pass-Through */
.table-scroll-wrap {
    overflow-x: auto;
    overflow-y: visible;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
                linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
                radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)),
                radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.table-scroll-wrap table {
    touch-action: pan-x pan-y;
}

/* Mobile Bottom Nav Theme - White, Blue & Yellow */
.bottom-nav-btn.active {
    color: #1d4ed8 !important;
}
.bottom-nav-btn.active svg {
    color: #1d4ed8 !important;
}

/* Mobile FAB Speed Dial Theme - Royal Blue with Golden Yellow Ring */
#mobile-fab-btn {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    border: 2px solid #facc15 !important;
    box-shadow: 0 10px 25px -4px rgba(37, 99, 235, 0.45), 0 0 0 3px rgba(250, 204, 21, 0.25) !important;
}

/* Modern Student Directory Table Polish (Spreadsheet Sheet Style) */
.student-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.student-table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #334155;
    background: #f1f5f9;
    border-bottom: 2px solid #cbd5e1;
}
.student-table td {
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
}
.student-table tbody tr {
    transition: background-color 0.12s ease;
}
.student-table tbody tr:hover {
    background-color: #f8fafc;
}
.student-table tr:last-child td {
    border-bottom: none;
}
.lead-table td {
    vertical-align: middle;
}

/* Action Dropdown Menu (Students & Leads CRM) */
.student-action-menu, .lead-action-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 190px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.15), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
    padding: 5px;
    z-index: 45;
    animation: menuFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.student-action-item, .lead-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    border-radius: 8px;
    transition: all 0.12s ease;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
}
.student-action-item:hover, .lead-action-item:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}
.student-action-item.delete-item, .lead-action-item.delete-item {
    color: #e11d48;
}
.student-action-item.delete-item:hover, .lead-action-item.delete-item:hover {
    background-color: #fff1f2;
    color: #be123c;
}

/* ==========================================================
 * PROTECTED RECORDING CLASS VIDEO PLAYER (PRIVATE EMBED)
 * 100% Hidden YouTube UI + Custom Academy Controls & Deterrence
 * ========================================================== */
#academyPlayerContainer {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 160px);
    background-color: #000000;
    border-radius: 1rem;
    overflow: hidden !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.75);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#academyPlayerContainer:fullscreen,
#academyPlayerContainer:-webkit-full-screen {
    border-radius: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background-color: #000000;
}

/* Eliminate all internal scrolling inside video player */
#academyPlayerContainer,
#academyPlayerContainer * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#academyPlayerContainer::-webkit-scrollbar,
#academyPlayerContainer *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.academy-iframe-crop,
.academy-drive-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Google Drive Player: Standard 100% Fit */
#academyPlayerContainer iframe.academy-drive-iframe,
.academy-drive-wrapper iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    overflow: hidden !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* YouTube Embedded Player: Full 100% Viewport (Zero Over-Cropping, Complete Lecture Slides & Notes Visible) */
.academy-iframe-crop iframe#academyYoutubeMount,
#academyPlayerContainer .academy-iframe-crop iframe#academyYoutubeMount {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

@media (max-width: 640px) {
    .academy-iframe-crop iframe#academyYoutubeMount,
    #academyPlayerContainer .academy-iframe-crop iframe#academyYoutubeMount {
        transform: none !important;
    }
}

@media (min-width: 1024px) {
    .academy-iframe-crop iframe#academyYoutubeMount,
    #academyPlayerContainer .academy-iframe-crop iframe#academyYoutubeMount {
        transform: none !important;
    }
}

/* Auto-hiding clean control bar */
#academyCustomControls {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

#academyPlayerContainer.controls-hidden #academyCustomControls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
}

#academyPlayerContainer.controls-hidden {
    cursor: none;
}

/* Dynamic Anti-Piracy / Security Watermark (Disabled / Hidden for distraction-free viewing) */
.academy-security-watermark,
#academySecurityWatermark,
#academyTopBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Custom Seek Range Input Styling */
.academy-seek-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    outline: none;
    cursor: pointer;
    transition: height 0.15s ease;
}
.academy-seek-slider:hover {
    height: 8px;
}
.academy-seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #38bdf8;
    border: 2px solid #ffffff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
    cursor: pointer;
}

.lecture-progress-bar {
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 9999px;
    overflow: hidden;
}
.lecture-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #10b981);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ==========================================================
 * MOBILE-FIRST RESPONSIVE & OVERLAP PREVENTION ENGINE
 * Ensures clean, non-overlapping layouts on all mobile phones
 * ========================================================== */

/* Universal touch responsiveness & viewport safety */
@media (max-width: 767px) {
    /* 1. Header Cleanup: Prevent horizontal button clutter and overlap */
    #btn-new-admission,
    #btn-collect-fee,
    #btn-admin-role-rights-header,
    #export-dropdown-wrapper,
    #academic-year-selector-wrapper,
    #btn-admin-change-password-header,
    #header-edit-pill,
    #current-branch-badge,
    #current-branch-bullet {
        display: none !important;
    }

    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body, #app-shell {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    #branch-selector-wrapper {
        padding: 0.25rem 0.4rem !important;
        max-width: 110px !important;
        background-color: #f8fafc !important;
    }

    #branch-selector {
        font-size: 11px !important;
        max-width: 95px !important;
        text-overflow: ellipsis !important;
    }
}

/* Header safety on intermediate laptop screens (768px - 1399px) */
@media (min-width: 768px) and (max-width: 1399px) {
    #branch-selector-wrapper {
        max-width: 155px;
    }
    #branch-selector {
        max-width: 140px;
        text-overflow: ellipsis;
    }
    #academic-year-selector-wrapper {
        max-width: 125px;
    }
    #academic-year-selector {
        max-width: 110px;
    }
}

/* Ensure brand text never wraps vertically */
header h1, header h1 span {
    white-space: nowrap !important;
}

    /* 2. Main Content & Safe Padding */
    .safe-bottom-padding {
        padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 3. Floating Action Button & Bottom Nav Positioning */
    #mobile-bottom-nav {
        z-index: 40 !important;
        padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px)) !important;
    }

    #mobile-fab-container {
        z-index: 45 !important;
        bottom: 4.75rem !important;
        right: 1rem !important;
    }

    /* 4. Filter Bars & Toolbars on Mobile */
    .tab-pane .flex.flex-wrap {
        gap: 0.5rem !important;
    }

    #student-search,
    #admissions-search,
    #fee-search,
    #lead-search,
    #exam-search,
    #lecture-search-input {
        width: 100% !important;
        font-size: 13px !important;
    }

    /* 5. Mobile Tables: Smooth horizontal touch scroll & fluid vertical pass-through */
    .table-scroll-wrap {
        -webkit-overflow-scrolling: touch !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        touch-action: pan-x pan-y !important;
        overscroll-behavior-y: auto !important;
    }

    .table-scroll-wrap table {
        min-width: 580px;
        touch-action: pan-x pan-y !important;
    }

    /* Compact buttons in table rows on mobile */
    .tab-pane table td button,
    .tab-pane table td a {
        padding: 0.35rem 0.5rem !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /* 6. Dashboard KPI Grid adjustments */
    #dashboard-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.625rem !important;
    }
}

/* Dedicated Mobile Modal Architecture (< 640px) */
@media (max-width: 639px) {
    /* Modal Backdrop as Mobile Bottom Sheet / Full Height Container */
    .modal-backdrop {
        padding: 0 !important;
        align-items: flex-end !important;
        justify-content: center !important;
        z-index: 60 !important;
        overflow: hidden !important;
    }

    /* All Modal dialog cards on mobile phones */
    .modal-backdrop > div:not(#printable-receipt-card):not(#pdf-report-root):not(#login-screen > div) {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        max-height: 92dvh !important;
        margin: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 1.25rem !important;
        border-top-right-radius: 1.25rem !important;
        padding: 1rem 1rem 0.75rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.3) !important;
        animation: mobileModalSlideUp 0.22s ease-out;
    }

    @keyframes mobileModalSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.5;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Sticky Modal Headers */
    .modal-backdrop .sticky.top-0 {
        position: sticky !important;
        top: 0 !important;
        background-color: #ffffff !important;
        z-index: 20 !important;
        padding-bottom: 0.75rem !important;
        margin-top: -0.25rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    /* Scrollable Modal Forms & Content Structure */
    .modal-backdrop form {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        flex: 1 1 0% !important;
        overflow: hidden !important;
    }

    /* Modal Form Body: independently scrollable */
    .modal-backdrop form > div:not(.sticky):not(:last-child) {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 0.25rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Pinned Bottom Action Buttons Footer */
    .modal-backdrop .sticky.bottom-0,
    .modal-backdrop form > div.sticky.bottom-0,
    .modal-backdrop form > div:last-child {
        flex-shrink: 0 !important;
        position: relative !important;
        background-color: #ffffff !important;
        z-index: 20 !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-top: 0.75rem !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
        margin-top: 0.25rem !important;
        margin-bottom: 0 !important;
    }

    /* Multi-column grid rows inside modals */
    .modal-backdrop .grid-cols-4,
    .modal-backdrop .sm\:grid-cols-4,
    .modal-backdrop .md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .modal-backdrop .grid-cols-2,
    .modal-backdrop .sm\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* Keep compact date & time or fee pairs side-by-side where appropriate */
    .modal-backdrop .grid.grid-cols-2.keep-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Form input sizes on mobile */
    .modal-backdrop input,
    .modal-backdrop select,
    .modal-backdrop textarea {
        font-size: 14px !important; /* Prevents auto-zoom on iOS */
    }

    /* Printable Slip viewer modal on mobile */
    #modal-print-container > div {
        max-width: 96vw !important;
        max-height: 92vh !important;
        padding: 0.75rem !important;
        overflow-x: auto !important;
    }
}

/* ==========================================================
 * COMPARATIVE PERFORMANCE VIEW & MOBILE POLISH STYLES
 * ========================================================== */
.comparative-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.comparative-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(15, 23, 42, 0.08);
}

.comparative-progress-track {
    background-color: #f1f5f9;
    border-radius: 9999px;
    height: 0.625rem;
    overflow: hidden;
    display: flex;
}

.comparative-kheda-bar {
    background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
}

.comparative-vaso-bar {
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
}

@media (max-width: 640px) {
    .comparative-grid {
        grid-template-columns: 1fr !important;
    }
    .kpi-mobile-col2 {
        grid-column: span 2 / span 2 !important;
    }
}

/* ==========================================================
   PREMIUM SAAS MODERN NAVIGATION BAR (SKCTC ERP)
   ========================================================== */
#app-erp-top-nav {
    background: linear-gradient(90deg, #0F4C81 0%, #1E40AF 45%, #2563EB 100%) !important;
}

#app-erp-top-nav .top-nav-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#app-erp-top-nav .top-nav-btn.active {
    background-color: #ffffff !important;
    color: #2563eb !important;
    box-shadow: 0 10px 25px -5px rgba(15, 76, 129, 0.35), 0 0 14px 0 rgba(59, 130, 246, 0.45) !important;
    position: relative;
}

#app-erp-top-nav .top-nav-btn.active svg {
    color: #2563eb !important;
    stroke: #2563eb !important;
    filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.2));
}

#app-erp-top-nav .top-nav-btn.active span {
    color: #2563eb !important;
    font-weight: 800 !important;
}

#app-erp-top-nav .top-nav-btn.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
    filter: drop-shadow(0 2px 3px rgba(15, 76, 129, 0.25));
    z-index: 10;
}

#app-erp-top-nav .top-nav-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

#app-erp-top-nav .top-nav-btn:not(.active):hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    transform: translateY(-1px);
}

/* ==========================================================
   TOP NAVIGATION DROPDOWNS: GUARANTEED HIGH CONTRAST
   Prevents any white-on-white text in Fees, Settings, Exams etc.
   ========================================================== */
#app-erp-top-nav [id$="-menu"] {
    color: #0f172a !important;
}
#app-erp-top-nav [id$="-menu"] a,
#app-erp-top-nav [id$="-menu"] button {
    color: #0f172a !important;
    text-shadow: none !important;
}
#app-erp-top-nav [id$="-menu"] a:hover,
#app-erp-top-nav [id$="-menu"] button:hover {
    color: #1d4ed8 !important;
    background-color: #eff6ff !important;
}
#app-erp-top-nav [id$="-menu"] .text-emerald-700 {
    color: #047857 !important;
}
#app-erp-top-nav [id$="-menu"] .text-amber-700 {
    color: #b45309 !important;
}
#app-erp-top-nav [id$="-menu"] .text-blue-600 {
    color: #2563eb !important;
}
#app-erp-top-nav [id$="-menu"] .text-slate-600 {
    color: #475569 !important;
}

/* ==========================================================
   SKCTC CORPORATE BLUE & BENTO GRID HOMEPAGE DESIGN SYSTEM
   Brand Palette: White, Royal Blue (#2457D6), Deep Navy (#142B59), Primary Red (#E63946)
   ========================================================== */
:root {
    --sk-royal-blue: #2457D6;
    --sk-royal-blue-hover: #1b44aa;
    --sk-deep-navy: #142B59;
    --sk-deep-navy-dark: #0d1e3f;
    --sk-primary-red: #E63946;
    --sk-primary-red-hover: #c92a37;
    --sk-white: #FFFFFF;
    --sk-light-bg: #F3F7FF;
    --sk-text-main: #182230;
    --sk-text-secondary: #667085;
    --sk-border: #E4EAF3;
    --sk-card-hover: #F8FAFF;
    --sk-shadow-card: 0 4px 20px -2px rgba(20, 43, 89, 0.06), 0 2px 6px -1px rgba(20, 43, 89, 0.04);
    --sk-shadow-card-hover: 0 16px 32px -4px rgba(20, 43, 89, 0.12), 0 6px 12px -2px rgba(20, 43, 89, 0.06);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Typography Hierarchy with clamp */
.sk-hero-title {
    font-size: clamp(2rem, 4.5vw + 1rem, 3.5rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.sk-section-title {
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.sk-section-subtitle {
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1.0625rem);
    line-height: 1.6;
    color: var(--sk-text-secondary);
}

/* Bento Grid System */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bento-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bento-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .bento-col-span-2 {
        grid-column: span 2 / span 2;
    }
    .bento-row-span-2 {
        grid-row: span 2 / span 2;
    }
}

/* Bento Card Base */
.bento-card {
    background-color: var(--sk-white);
    border: 1px solid var(--sk-border);
    border-radius: 1.25rem;
    box-shadow: var(--sk-shadow-card);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    box-shadow: var(--sk-shadow-card-hover);
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* Corporate Buttons */
.sk-btn-primary {
    background-color: var(--sk-royal-blue);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 4px 14px -1px rgba(36, 87, 214, 0.35);
    min-height: 44px;
}

.sk-btn-primary:hover {
    background-color: var(--sk-royal-blue-hover);
    box-shadow: 0 6px 18px -1px rgba(36, 87, 214, 0.45);
    color: #ffffff;
}

.sk-btn-primary:active {
    transform: scale(0.98);
}

.sk-btn-secondary {
    background-color: #ffffff;
    color: var(--sk-deep-navy);
    border: 1.5px solid var(--sk-border);
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    min-height: 44px;
}

.sk-btn-secondary:hover {
    background-color: var(--sk-light-bg);
    border-color: #cbd5e1;
    color: var(--sk-royal-blue);
}

.sk-btn-secondary:active {
    transform: scale(0.98);
}

.sk-btn-danger {
    background-color: var(--sk-primary-red);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 4px 14px -1px rgba(230, 57, 70, 0.35);
    min-height: 44px;
}

.sk-btn-danger:hover {
    background-color: var(--sk-primary-red-hover);
    box-shadow: 0 6px 18px -1px rgba(230, 57, 70, 0.45);
    color: #ffffff;
}

.sk-btn-whatsapp {
    background-color: #25D366;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 4px 14px -1px rgba(37, 211, 102, 0.35);
    min-height: 44px;
}

.sk-btn-whatsapp:hover {
    background-color: #20ba59;
    box-shadow: 0 6px 18px -1px rgba(37, 211, 102, 0.45);
    color: #ffffff;
}

/* Badges */
.sk-badge-blue {
    background-color: #EEF4FF;
    color: var(--sk-royal-blue);
    border: 1px solid #D0E1FD;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.sk-badge-red {
    background-color: #FFF1F2;
    color: var(--sk-primary-red);
    border: 1px solid #FFE4E6;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Accordion Component */
.sk-accordion-item {
    border: 1px solid var(--sk-border);
    border-radius: 1rem;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.sk-accordion-item:hover {
    border-color: #cbd5e1;
}

.sk-accordion-header {
    width: 100%;
    padding: 1.125rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-weight: 700;
    color: var(--sk-text-main);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.sk-accordion-header:hover {
    color: var(--sk-royal-blue);
}

.sk-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
    color: var(--sk-text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.sk-accordion-item.active .sk-accordion-content {
    max-height: 600px;
    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.sk-accordion-icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sk-accordion-item.active .sk-accordion-icon {
    transform: rotate(180deg);
    color: var(--sk-royal-blue);
}

/* Mobile Sticky Bottom CTA Bar (Matching Mockup 3-Action Design) */
.sk-mobile-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
}

@media (min-width: 640px) {
    .sk-mobile-sticky-bar {
        display: none !important;
    }
}

/* Student Achievements Carousel Slider */
.achievement-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.achievement-slider-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    will-change: transform;
}

@media (min-width: 768px) {
    .achievement-slider-track {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
        transform: none !important;
    }
    .achievement-slider-arrow,
    .achievement-slider-dots-container {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .achievement-slide-card {
        min-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 0.25rem !important;
    }
}

/* Carousel circular arrow buttons */
.achievement-slider-arrow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #ffffff;
    border: 1px solid var(--sk-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sk-navy);
    font-size: 1.125rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 20;
    flex-shrink: 0;
}

.achievement-slider-arrow:hover {
    background-color: var(--sk-royal-blue);
    color: #ffffff;
    border-color: var(--sk-royal-blue);
    transform: scale(1.05);
}

/* Accessible Focus States */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--sk-royal-blue) !important;
    outline-offset: 2px !important;
}

/* Responsive Touch Target utility */
.touch-target-44 {
    min-height: 44px;
    min-width: 44px;
}

/* Instant Zero-Delay Top Nav Dropdown System */
.top-nav-menu {
    display: none;
    pointer-events: none;
}
.group:hover > .top-nav-menu,
.group:focus-within > .top-nav-menu,
.top-nav-menu.force-show {
    display: block !important;
    pointer-events: auto !important;
}

/* Ensure seamless hover transition bridge */
.top-nav-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}