/* Custom overrides for CHL Applicants on top of Adminto */

.page-container {
    max-width: 1440px;
}

.card h1,
.card h2,
.card h3 {
    margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
    .page-container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .btn-lg {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .registration-mobile-actions .btn {
        width: 100%;
    }
}

.online-course-card-img {
    height: 160px;
    object-fit: cover;
}

.online-course-card-placeholder {
    height: 160px;
    background: rgba(255, 255, 255, 0.04);
}

.registration-mobile-card .badge {
    font-size: 0.75rem;
}

.app-topbar {
    display: flex;
    align-items: center;
    min-height: 60px;
    position: relative;
    z-index: 1050;
}

.app-topbar .dropdown-menu {
    z-index: 1060;
}

.app-topbar .topbar-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.app-topbar .topbar-auth-btn {
    white-space: nowrap;
}

.app-topbar .topbar-login-btn {
    background-color: var(--bs-secondary, #6c757d);
    border-color: var(--bs-secondary, #6c757d);
    color: #fff;
}

.app-topbar .topbar-login-btn:hover,
.app-topbar .topbar-login-btn:focus,
.app-topbar .topbar-login-btn.show {
    background-color: var(--bs-secondary-border-subtle, #5c636a);
    border-color: var(--bs-secondary-border-subtle, #5c636a);
    color: #fff;
}

.app-topbar .topbar-login-dropdown {
    min-width: 16rem;
}

.button-toggle-menu {
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    color: var(--bs-body-color, #f1f5f9);
    transition: opacity 0.2s ease;
}

.button-toggle-menu:hover {
    opacity: 0.8;
}

/* Sidebar Responsive Layout & Off-canvas Drawer */
@media (min-width: 992px) {
    .wrapper {
        display: grid;
        grid-template-areas:
            "topbar topbar"
            "sidebar content";
        grid-template-columns: 240px 1fr;
        min-height: 100vh;
    }

    .app-topbar {
        grid-area: topbar;
    }

    .sidenav-menu {
        grid-area: sidebar;
        border-right: 1px solid var(--bs-border-color, #334155);
        padding: 1rem 0;
        background-color: var(--bs-body-bg, #1c1d27);
    }

    .page-content {
        grid-area: content;
        min-width: 0;
    }

    .layout-home .wrapper {
        display: block;
    }

    .layout-home .sidenav-menu {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .wrapper {
        display: block;
    }

    .sidenav-menu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -280px;
        width: 280px;
        z-index: 1100;
        background-color: var(--bs-body-bg, #1c1d27);
        border-right: 1px solid var(--bs-border-color, #334155);
        box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
    }

    html.sidebar-enable .sidenav-menu {
        left: 0 !important;
    }
}

/* Profile Accordion Styling */
#profileAccordion .accordion-item {
    background-color: var(--bs-card-cap-bg, #1e293b);
    border: 1px solid var(--bs-border-color, #334155);
    border-radius: 0.5rem;
    overflow: hidden;
}

#profileAccordion .accordion-button {
    background-color: var(--bs-card-cap-bg, #1e293b);
    color: var(--bs-body-color, #f1f5f9);
    padding: 1rem 1.25rem;
    box-shadow: none;
}

#profileAccordion .accordion-button:not(.collapsed) {
    background-color: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

@media (max-width: 575.98px) {
    .app-topbar .topbar-menu {
        gap: 0.25rem;
    }

    .app-topbar .topbar-link {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .app-topbar .topbar-auth-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ==========================================================================
   ADA Compliance / WCAG 2.1 AA Contrast Fixes for Dark Theme
   ========================================================================== */

[data-bs-theme="dark"],
html.dark,
body[data-bs-theme="dark"] {
    --bs-body-color: #f1f5f9;
    --bs-secondary-color: #cbd5e1;
    --bs-muted-color: #cbd5e1;
    --bs-link-color: #60a5fa;
    --bs-link-hover-color: #93c5fd;
    --bs-border-color: #334155;
    --bs-card-cap-bg: #1e293b;
    --bs-secondary-rgb: 203, 213, 225;
}

/* General Body & Typography Contrast */
[data-bs-theme="dark"] body {
    color: #f1f5f9;
}

/* Muted & Secondary Text (Fixes WCAG AA low contrast failures) */
[data-bs-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] small.text-muted,
[data-bs-theme="dark"] div.text-muted,
[data-bs-theme="dark"] span.text-muted,
[data-bs-theme="dark"] p.text-muted,
[data-bs-theme="dark"] .text-muted * {
    color: #cbd5e1 !important; /* High contrast light slate (WCAG AA ratio > 7:1) */
}

/* Headings & Semi-bold text */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .fw-semibold,
[data-bs-theme="dark"] .fw-bold {
    color: #f8fafc;
}

/* Links & Action Text */
[data-bs-theme="dark"] a:not(.btn):not(.badge) {
    color: #60a5fa;
}

[data-bs-theme="dark"] a:not(.btn):not(.badge):hover,
[data-bs-theme="dark"] a:not(.btn):not(.badge):focus {
    color: #93c5fd;
    text-decoration: underline;
}

/* Sidebar Navigation Links */
[data-bs-theme="dark"] .side-nav .side-nav-link,
[data-bs-theme="dark"] .side-nav-link,
[data-bs-theme="dark"] .side-nav-title,
[data-bs-theme="dark"] .topbar-link,
[data-bs-theme="dark"] .nav-link {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .side-nav .side-nav-link:hover,
[data-bs-theme="dark"] .side-nav-link:hover,
[data-bs-theme="dark"] .topbar-link:hover,
[data-bs-theme="dark"] .nav-link:hover {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .side-nav .side-nav-item.active > .side-nav-link,
[data-bs-theme="dark"] .side-nav-link.active,
[data-bs-theme="dark"] .nav-link.active {
    color: #60a5fa !important;
    font-weight: 600;
}

/* Footer Contrast */
[data-bs-theme="dark"] footer,
[data-bs-theme="dark"] .footer,
[data-bs-theme="dark"] .footer-text,
[data-bs-theme="dark"] footer .text-muted,
[data-bs-theme="dark"] footer p,
[data-bs-theme="dark"] footer span {
    color: #cbd5e1 !important;
}

/* Button Overrides for Dark Theme */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: #e2e8f0;
    border-color: #64748b;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover,
[data-bs-theme="dark"] .btn-outline-secondary:focus,
[data-bs-theme="dark"] .btn-outline-secondary:active {
    color: #ffffff;
    background-color: #475569;
    border-color: #64748b;
}

[data-bs-theme="dark"] .btn-outline-primary {
    color: #60a5fa;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .btn-outline-primary:hover,
[data-bs-theme="dark"] .btn-outline-primary:focus {
    color: #ffffff;
    background-color: #2563eb;
    border-color: #2563eb;
}

/* Forms & Inset Boxes */
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] label {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .bg-light {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Dark utility background fix */
[data-bs-theme="dark"] .bg-dark {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .bg-dark .text-muted,
[data-bs-theme="dark"] .bg-dark.text-muted {
    color: #cbd5e1 !important;
}