/* Kursus App — penyesuaian tampilan di atas Bootstrap 5. */

:root {
    --app-topbar-height: 56px;
    --app-sidebar-width: 240px;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--app-sidebar-width) 1fr;
    grid-template-rows: var(--app-topbar-height) 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
}

.app-topbar {
    grid-area: topbar;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.app-sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--bs-border-color);
}

.app-sidebar .nav-link {
    color: var(--bs-body-color);
    border-radius: 0.375rem;
}

.app-sidebar .nav-link.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.nav-section-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Dropdown user di topbar. */
.app-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 10rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.25rem 0;
    z-index: 1040;
}

.app-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.35rem 1rem;
    background: none;
    border: 0;
    text-align: left;
}

.app-dropdown .dropdown-item:hover {
    background: var(--bs-tertiary-bg);
}

[x-cloak] {
    display: none !important;
}

/* Badge role. */
.badge.role-badge-admin {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}

.badge.role-badge-staff {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

.badge.role-badge-instructor {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}

.app-content {
    grid-area: content;
    background: var(--bs-tertiary-bg);
}

/* Responsif: sidebar turun ke bawah konten pada layar sempit. */
@media (max-width: 767.98px) {
    .app-shell {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "content"
            "sidebar";
    }

    .app-sidebar {
        border-right: 0;
        border-top: 1px solid var(--bs-border-color);
    }
}

/* Styling Khusus Cetak (Print CSS) untuk Kuitansi, Sertifikat & Laporan */
@media print {
    .app-topbar,
    .app-sidebar,
    .btn,
    .no-print,
    header,
    aside,
    nav {
        display: none !important;
    }

    body, .app-shell, .app-content {
        background: #fff !important;
        color: #000 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    a {
        text-decoration: none !important;
        color: inherit !important;
    }
}