/* Native Bootstrap 5.3 enhancements for the SIAKAD interface. */
:root {
    --siakad-radius: .75rem;
    --siakad-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    --siakad-control-height: 34px;
    --siakad-header-bg: #f1f5f9;
    --siakad-header-border: #dbe4ef;
    --siakad-header-text: #172033;
    --siakad-primary: #0b6aa8;
}

.card,
.modal-content,
.dropdown-menu {
    border-radius: var(--siakad-radius);
}

.card {
    box-shadow: var(--siakad-shadow);
}

.table-responsive {
    border-radius: .65rem;
    -webkit-overflow-scrolling: touch;
}

.form-control,
.form-select,
.btn,
.input-group-text {
    min-height: var(--siakad-control-height);
}

.form-control,
.form-select {
    border-color: #cbd5e1;
    border-radius: .45rem;
    font-size: 12px;
    line-height: 1.35;
    padding: .38rem .65rem;
}

.form-control:not(textarea):not(.form-control-sm),
.form-select:not([multiple]):not(.form-select-sm) {
    height: var(--siakad-control-height) !important;
}

.form-control-sm:not(textarea),
.form-select-sm:not([multiple]) {
    height: 30px !important;
    min-height: 30px;
    padding-block: .25rem;
    font-size: 11px;
}

.form-select {
    padding-inline-end: 2rem;
    background-position: right .65rem center;
    background-size: 12px 9px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #38a3d1;
    box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .15);
}

.form-label {
    margin-bottom: .3rem;
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}

.input-group-text {
    min-width: var(--siakad-control-height);
    padding: .35rem .55rem;
    justify-content: center;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #42627b;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: .55rem;
    padding: .5rem .9rem;
    font-weight: 650;
    line-height: 1.2;
    vertical-align: middle;
    min-height: 36px;
}

.btn-sm {
    min-height: 32px;
    padding: .35rem .7rem;
    border-radius: .45rem;
}

.btn i,
.btn svg {
    flex: 0 0 auto;
}

.btn-icon {
    width: 36px;
    min-width: 36px;
    padding: 0;
    aspect-ratio: 1;
}

.btn-icon.btn-sm {
    width: 32px;
    min-width: 32px;
}

.btn-group > .btn {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    border-start-start-radius: .55rem;
    border-end-start-radius: .55rem;
}

.btn-group > .btn:last-child {
    border-start-end-radius: .55rem;
    border-end-end-radius: .55rem;
}

.form-check-input {
    cursor: pointer;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
    border-color: #94a3b8;
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-height: 1.5rem;
    padding-inline-start: 0;
}

.form-check .form-check-input {
    float: none;
    margin-inline-start: 0;
    flex: 0 0 auto;
}

.form-check-label {
    line-height: 1.35;
}

.form-switch {
    align-items: center;
}

.form-switch .form-check-input {
    width: 2.4rem;
    height: 1.25rem;
    margin-inline-start: 0;
    background-size: .95rem;
    border-width: 1px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, background-position .18s ease;
}

.form-switch .form-check-input:checked {
    background-color: #0891b2;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, .14);
}

.btn-group-toggle .form-check-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
}

/* One neutral header system, based on the student list card. */
.card > .card-header:not([style*="background"]),
.modal-content > .modal-header:not([style*="background"]) {
    background: var(--siakad-header-bg) !important;
    border-bottom: 1px solid var(--siakad-header-border);
    color: var(--siakad-header-text) !important;
    padding: .85rem 1rem;
    font-weight: 700;
}

.card > .card-header:not([style*="background"]) .text-white,
.card > .card-header:not([style*="background"]) .text-white-50 {
    color: var(--siakad-header-text) !important;
}

.table > thead > tr > th,
.table-custom > thead > tr > th {
    background: var(--siakad-header-bg) !important;
    border-bottom: 2px solid var(--siakad-header-border) !important;
    color: var(--siakad-header-text) !important;
    padding: .45rem .5rem;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .01em;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: .34rem .5rem;
    line-height: 1.25;
    vertical-align: middle;
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border: 1px solid rgba(148, 163, 184, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

.language-switcher .language-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 32px;
    padding: .3rem .62rem;
    border: 0;
    border-radius: 999px;
    color: inherit;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.language-switcher .language-option:hover {
    background: rgba(14, 165, 233, .12);
}

.language-switcher .language-option.active {
    background: #fff;
    color: #0f4c6e;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .16);
}

.language-flag {
    display: inline-flex;
    width: 20px;
    height: 14px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    line-height: 1;
}

.language-flag svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-language-item .dropdown-menu {
    min-width: 13rem;
    padding: .45rem;
}

.topbar-language-item .dropdown-item {
    gap: .55rem;
    border-radius: .5rem;
    padding: .6rem .7rem;
}

.topbar-language-item .dropdown-item.active {
    background: #e0f2fe;
    color: #075985;
}

.modal-header .btn-close {
    margin-inline-start: auto;
}

.select2-container {
    width: 100% !important;
    min-width: 0;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: var(--siakad-control-height) !important;
    border-color: var(--bs-border-color);
}

.select2-container .select2-selection--single {
    height: var(--siakad-control-height) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px !important;
    padding-inline-start: .65rem;
    font-size: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

.select2-container--default .select2-selection--multiple {
    padding: 2px 5px;
    font-size: 12px;
}

.modal .form-control,
.modal .form-select,
.modal .input-group-text,
.modal .select2-container .select2-selection {
    min-height: var(--siakad-control-height) !important;
}

.note-editor.note-frame {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* Compact segmented view selector used by student, lecturer, and staff lists. */
.view-toolbar {
    gap: .75rem;
    flex-wrap: wrap;
}

.view-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: .7rem;
    background: #f8fafc;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.view-mode-switch > .btn {
    min-height: 30px;
    padding: .34rem .62rem;
    border: 0 !important;
    border-radius: .5rem !important;
    background: transparent;
    color: #42627b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none !important;
}

.view-mode-switch > .btn i {
    width: 1em;
    font-size: 11px;
    text-align: center;
}

.view-mode-switch > .btn:hover,
.view-mode-switch > .btn:focus-visible {
    background: #e0f2fe;
    color: #075985;
}

.view-mode-switch > .btn.active,
.view-mode-switch > .btn:has(input:checked) {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(8, 145, 178, .22) !important;
}

/* Table action buttons retain a comfortable, consistent click target. */
.table td .btn-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
}

.table td .btn-group > .btn,
.table td .btn-group > .btn-sm {
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0 !important;
    padding: 0;
    border-radius: .45rem !important;
}

/* Consistent compact action controls across every data table. */
.table .table-action-heading,
.table .table-action-cell {
    text-align: center;
    white-space: nowrap;
}

.table .table-action-cell {
    font-size: 0;
}

.table .table-action-cell .btn-group {
    width: auto;
    flex-wrap: nowrap;
    gap: 2px;
}

.table .table-action-cell .btn {
    font-size: .75rem;
}

.table .table-nowrap-column {
    min-width: max-content;
    white-space: nowrap !important;
}

.table .table-action-cell .btn-icon,
.table .table-action-cell .btn-group > .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    flex: 0 0 27px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: .3rem !important;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.table .table-action-cell .btn-icon i,
.table .table-action-cell .btn-icon svg {
    margin: 0 !important;
    font-size: .68rem;
}

.table .table-action-cell .btn-icon:hover,
.table .table-action-cell .btn-icon:focus-visible {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 4px 8px rgba(15, 23, 42, .18);
}

/* Roomier, consistent modal widths on desktop while retaining mobile safety. */
@media (min-width: 768px) {
    .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
        max-width: min(88vw, 760px);
    }

    .modal-dialog.modal-lg {
        max-width: min(92vw, 1040px);
    }

    .modal-dialog.modal-xl {
        max-width: min(95vw, 1240px);
    }
}

/* Site configuration follows a compact, bordered three-column form. */
.institution-config-page .site-config-body {
    padding: .75rem;
}

.institution-config-page .site-config-shell {
    padding: 0;
}

.institution-config-page fieldset.custom-fieldset {
    min-width: 0;
    margin: 0;
    padding: 1.45rem 1rem 1rem;
    border: 1px solid #cbd5e1;
    border-top: 2px solid #0ea5b7;
    border-radius: .35rem;
    background: #fff;
    color: #475569;
}

.institution-config-page fieldset.custom-fieldset legend {
    float: none;
    width: auto;
    margin: 0 0 0 .15rem;
    padding: .18rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: 0;
    background: #fff;
    color: #475569;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.2;
}

.institution-config-page .site-config-grid {
    --bs-gutter-x: 1.8rem;
    --bs-gutter-y: 0;
}

.institution-config-page .site-config-grid > [class*="col-"] {
    margin-bottom: .85rem !important;
}

.institution-config-page .site-config-grid label:not(.form-check-label) {
    display: inline-block;
    margin-bottom: .32rem;
    color: #475569;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
}

.institution-config-page .site-config-grid .input-group-text {
    width: 32px;
    min-height: 30px !important;
    justify-content: center;
    padding: .25rem;
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #0891b2;
    font-size: .78rem;
}

.institution-config-page .site-config-grid .form-control,
.institution-config-page .site-config-grid .form-select {
    min-height: 30px !important;
    height: 30px !important;
    padding: .28rem .55rem;
    border-color: #cbd5e1;
    border-radius: .2rem;
    font-size: .8rem;
}

.institution-config-page .site-config-grid textarea.form-control {
    min-height: 46px !important;
    height: 46px !important;
    resize: vertical;
}

.institution-config-page .site-config-grid input[type="file"].form-control {
    padding: .17rem .3rem;
}

.institution-config-page .site-config-grid .form-check.form-switch {
    min-height: 24px;
    margin: .08rem 0 0;
}

.institution-config-page .site-config-grid .form-check-label {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}

.institution-config-page .site-config-grid small {
    font-size: .72rem;
    line-height: 1.35;
}

.institution-config-page .site-config-logo {
    display: block;
    width: auto;
    max-width: 62px;
    height: 50px;
    object-fit: contain;
}

.institution-config-page .site-config-footer {
    margin: .25rem -1rem -1rem;
    padding: .65rem 1rem;
    border-top: 1px solid #dbe4ef;
    background: #f8fafc !important;
}

.institution-config-page .menu-group-config {
    margin: .25rem 0 1rem;
    padding: .85rem;
    border: 1px solid #dbe4ef;
    border-radius: .55rem;
    background: linear-gradient(135deg, #f8fafc, #f0f9ff);
}

.institution-config-page .menu-group-config-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid #dbe4ef;
}

.institution-config-page .menu-group-config-heading h3 {
    margin: 0 0 .18rem;
    color: #0f172a;
    font-size: .92rem;
    font-weight: 800;
}

.institution-config-page .menu-group-config-heading h3 i {
    color: #0891b2;
}

.institution-config-page .menu-group-config-heading p {
    margin: 0;
    color: #64748b;
    font-size: .75rem;
}

.institution-config-page .menu-group-config-badge {
    flex: 0 0 auto;
    padding: .32rem .55rem;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
    font-size: .7rem;
    font-weight: 800;
}

.institution-config-page .menu-group-module {
    display: block;
    height: 100%;
    padding: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: .42rem;
    background: rgba(255, 255, 255, .82);
}

.institution-config-page .menu-group-module-name {
    display: flex;
    align-items: center;
    gap: .48rem;
    margin-bottom: .38rem;
    color: #334155;
    font-size: .77rem;
}

.institution-config-page .menu-group-module-name > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: .35rem;
    background: #e0f2fe;
    color: #0284c7;
}

.institution-config-page .menu-group-module .input-group-text,
.institution-config-page .menu-group-module .form-control {
    min-height: 30px !important;
    height: 30px !important;
    border-color: #cbd5e1;
    font-size: .78rem;
}

.institution-config-page .menu-group-module .input-group-text {
    width: 32px;
    justify-content: center;
    padding: .2rem;
    color: #0891b2;
}

html[data-theme="dark"] .institution-config-page fieldset.custom-fieldset,
html[data-theme="dark"] .institution-config-page fieldset.custom-fieldset legend {
    border-color: #475569;
    background: #172033;
    color: #e2e8f0;
}

html[data-theme="dark"] .institution-config-page .site-config-grid label:not(.form-check-label) {
    color: #e2e8f0;
}

html[data-theme="dark"] .institution-config-page .site-config-grid .input-group-text {
    border-color: #475569;
    background: #243249;
    color: #22d3ee;
}

html[data-theme="dark"] .institution-config-page .site-config-footer {
    border-color: #475569;
    background: #111827 !important;
}

html[data-theme="dark"] .institution-config-page .menu-group-config {
    border-color: #3b4a61;
    background: linear-gradient(135deg, #111827, #172033);
}

html[data-theme="dark"] .institution-config-page .menu-group-config-heading {
    border-color: #3b4a61;
}

html[data-theme="dark"] .institution-config-page .menu-group-config-heading h3,
html[data-theme="dark"] .institution-config-page .menu-group-module-name {
    color: #e2e8f0;
}

html[data-theme="dark"] .institution-config-page .menu-group-config-heading p {
    color: #94a3b8;
}

html[data-theme="dark"] .institution-config-page .menu-group-config-badge {
    border-color: rgba(34, 211, 238, .25);
    background: rgba(8, 145, 178, .15);
    color: #67e8f9;
}

html[data-theme="dark"] .institution-config-page .menu-group-module {
    border-color: #3b4a61;
    background: rgba(30, 41, 59, .7);
}

@media (max-width: 767.98px) {
    .institution-config-page .site-config-body {
        padding: .5rem;
    }

    .institution-config-page fieldset.custom-fieldset {
        padding-inline: .75rem;
    }

    .institution-config-page .site-config-grid {
        --bs-gutter-x: 1rem;
    }
}

/* 2026-08-24: one left-aligned title/subtitle geometry for every page hero. */
body[class*="navigation-layout-"] :is(
    .siakad-page-hero,
    .card-header.position-relative.text-white[style*="linear-gradient"],
    .pddikti-hero,
    .pds-hero,
    .audit-hero,
    .grad-hero,
    .health-hero
) {
    text-align: left !important;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex {
    width: 100%;
}

body[class*="navigation-layout-"] .card > .card-header.position-relative.text-white[style*="linear-gradient"] {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child {
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-content: center;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child,
body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) > div:first-of-type {
    min-width: 0;
    text-align: left !important;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child > h1,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child > h2,
body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) h2 {
    text-align: left !important;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child > p,
body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) > div:first-of-type > p {
    margin-top: .2rem !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .position-absolute,
body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.health-hero) > :is(.position-absolute,.pddikti-hero-watermark,.health-watermark) {
    position: absolute !important;
    right: 1.2rem !important;
    z-index: 0 !important;
    pointer-events: none;
}

/* 2026-08-24: one symmetric, responsive frame for every application table. */
body[class*="navigation-layout-"] .table-responsive {
    padding: .65rem .7rem .7rem !important;
    scrollbar-gutter: stable;
}

body[class*="navigation-layout-"] .table-responsive > .table,
body[class*="navigation-layout-"] .table-responsive > .dataTables_wrapper > .table,
body[class*="navigation-layout-"] .table-responsive > .dataTables_wrapper > table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body[class*="navigation-layout-"] .table-responsive > .dataTables_wrapper {
    min-width: 100%;
}

body[class*="navigation-layout-"] .dataTables_wrapper > .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body[class*="navigation-layout-"] .dataTables_wrapper > .row:first-child {
    margin-bottom: .65rem !important;
}

body[class*="navigation-layout-"] .dataTables_wrapper > .row:last-child {
    margin-top: .65rem !important;
}

body[class*="navigation-layout-"] .dataTables_wrapper > .row > [class*="col-"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_length,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_info,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_paginate {
    margin: 0 !important;
    padding-top: 0 !important;
}

body[class*="navigation-layout-"] .pddikti-panel {
    overflow: hidden;
    border: 1px solid var(--siakad-border) !important;
    border-radius: .65rem !important;
    background: var(--siakad-surface) !important;
}

body[class*="navigation-layout-"] .pddikti-panel > .card-header {
    border-bottom: 1px solid var(--siakad-border) !important;
    background: var(--siakad-surface-soft) !important;
    color: var(--siakad-text) !important;
}

body[class*="navigation-layout-"] .pddikti-panel > .table-responsive {
    border: 0 !important;
    border-radius: 0 !important;
}

body[class*="navigation-layout-"] .pddikti-panel > .table-responsive > .pddikti-table {
    overflow: hidden;
    border: 1px solid var(--siakad-border) !important;
    border-radius: .5rem;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel > .table-responsive {
    border-color: #3b4d65 !important;
    background: #172338 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel > .card-header {
    border-color: #3b4d65 !important;
    background: #1e3048 !important;
    color: #eef6ff !important;
}

@media (max-width: 767.98px) {
    body[class*="navigation-layout-"] .table-responsive {
        padding: .5rem !important;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper > .row:first-child {
        margin-bottom: .5rem !important;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper > .row:last-child {
        margin-top: .5rem !important;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_length,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_info,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_paginate {
        width: 100%;
        text-align: left !important;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter label,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_length label {
        display: flex;
        align-items: center;
        gap: .4rem;
        width: 100%;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Global breadcrumb bar, shared by every authenticated page. */
.content-wrapper > nav[aria-label="breadcrumb"] {
    width: 100%;
    margin: 0 0 1rem;
}

.content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
    min-height: 37px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    padding: .55rem .85rem;
    overflow-x: auto;
    border: 1px solid #d7e0ea;
    border-radius: .3rem;
    background: #edf1f5 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .07);
    color: #526276;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    scrollbar-width: thin;
}

.content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: #087ea4;
    text-decoration: none;
    transition: color .16s ease;
}

.content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: #075985;
}

.content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item i {
    margin-right: .25rem;
}

html[data-theme="dark"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
    border-color: #3b4a61;
    background: #1a2538 !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .2);
    color: #cbd5e1;
}

html[data-theme="dark"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: #67e8f9 !important;
}

html[data-theme="dark"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: #a5f3fc !important;
}

@media (max-width: 767.98px) {
    .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
        min-height: 35px;
        padding: .48rem .65rem;
        font-size: .73rem;
    }
}

/* Bootstrap 5 modal headers: close control is always in the top-right corner. */
.modal-header {
    position: relative;
    min-height: 52px;
    padding-inline-end: 3.35rem !important;
}

.modal-header > .btn-close,
.modal-header > [data-bs-dismiss="modal"].btn-close-white {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 30px;
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    margin: 0 !important;
    padding: .55rem;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: .82;
}

.modal-header > .btn-close:hover,
.modal-header > [data-bs-dismiss="modal"].btn-close-white:hover {
    background-color: rgba(15, 23, 42, .08);
    opacity: 1;
}

/* Precise topbar alignment and balanced spacing around the sidebar trigger. */
.navbar {
    min-height: 56px;
    padding: .55rem .9rem !important;
}

.navbar #desktopSidebarToggle,
.navbar #mobileSidebarToggle {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    margin-inline-end: .8rem !important;
    padding: 0;
    border-radius: .55rem;
}

.navbar .navbar-nav {
    align-items: center;
    gap: 2px;
}

.navbar:not(.top-navigation) .navbar-nav > .nav-item:not(.topbar-language-item) > .nav-link:not(#userDropdown),
.navbar .theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    border-radius: 50%;
    font-size: .9rem;
    line-height: 1;
}

.navbar .nav-link > i,
.navbar .theme-toggle-btn > i {
    width: 1em;
    font-size: .9rem;
    line-height: 1;
    text-align: center;
}

.navbar .badge-counter {
    position: absolute;
    top: 1px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 2px 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: .58rem;
    line-height: 9px;
}

.navbar .topbar-notification-item .nav-link {
    position: relative;
}

.navbar .topbar-semester-form .form-select {
    min-height: 34px;
    padding-block: .3rem;
}

.navbar .language-switcher {
    padding: 2px;
}

.navbar .language-switcher .language-option {
    min-height: 28px;
    padding: .25rem .48rem;
}

/* Full card-mode coverage in dark theme, including nested and generated cards. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .student-card,
html[data-theme="dark"] .teacher-card,
html[data-theme="dark"] .staff-card,
html[data-theme="dark"] [id^="card"][id$="View"],
html[data-theme="dark"] [id^="grid"][id$="View"],
html[data-theme="dark"] .custom-card,
html[data-theme="dark"] .custom-card-box1,
html[data-theme="dark"] .custom-card-box2,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .list-group-item {
    background-color: #162033 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html[data-theme="dark"] .card-header:not([style*="background"]),
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table-custom > thead > tr > th {
    background: #243044 !important;
    border-color: #475569 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6,
html[data-theme="dark"] .student-card p,
html[data-theme="dark"] .teacher-card p,
html[data-theme="dark"] .staff-card p {
    color: #f8fafc;
}

html[data-theme="dark"] .view-mode-switch {
    background: #0f172a;
    border-color: #475569;
    box-shadow: none;
}

html[data-theme="dark"] .view-mode-switch > .btn {
    color: #cbd5e1;
}

html[data-theme="dark"] .view-mode-switch > .btn:hover,
html[data-theme="dark"] .view-mode-switch > .btn:focus-visible {
    background: #243044;
    color: #fff;
}

/* Keep ON/OFF states unmistakable on dark backgrounds. */
html[data-theme="dark"] body .form-switch .form-check-input {
    background-color: #334155 !important;
    border-color: #64748b !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    opacity: 1;
}

html[data-theme="dark"] body .form-switch .form-check-input:checked {
    background-color: #06b6d4 !important;
    border-color: #67e8f9 !important;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, .24), 0 0 12px rgba(6, 182, 212, .3) !important;
    opacity: 1;
}

html[data-theme="dark"] body .form-switch .form-check-input:checked:disabled {
    background-color: #0ea5a8 !important;
    border-color: #5eead4 !important;
    opacity: .88;
}

html[data-theme="dark"] body .form-switch .form-check-input:focus {
    border-color: #67e8f9 !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .22) !important;
}

html[data-theme="dark"] .modal-header > .btn-close:hover {
    background-color: rgba(255, 255, 255, .12);
}

/* Theme-safe tabs for pages and AJAX-loaded modal forms. */
.nav-tabs {
    gap: 3px;
    padding: 4px 4px 0;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
    border-radius: .6rem .6rem 0 0;
}

.nav-tabs .nav-link {
    min-height: 34px;
    margin-bottom: -1px;
    padding: .5rem .75rem;
    border: 1px solid transparent !important;
    border-radius: .48rem .48rem 0 0;
    background: transparent !important;
    color: #52677c !important;
    font-weight: 650;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #075985 !important;
    transform: translateY(-1px);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: #fff !important;
    border-color: #cbd5e1 #cbd5e1 #fff !important;
    color: #075985 !important;
    box-shadow: 0 -3px 0 #0891b2 inset, 0 3px 10px rgba(15, 23, 42, .06);
}

.nav-pills {
    gap: 4px;
}

.nav-pills .nav-link {
    border-radius: .5rem;
    color: #52677c;
    transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: #0891b2;
    color: #fff;
    box-shadow: 0 4px 12px rgba(8, 145, 178, .2);
}

.tab-content {
    color: inherit;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .modal .nav-tabs {
    background: #0f172a !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .modal .nav-tabs .nav-link {
    background: transparent !important;
    border-color: transparent !important;
    color: #a9b8ca !important;
}

html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus-visible,
html[data-theme="dark"] .modal .nav-tabs .nav-link:hover,
html[data-theme="dark"] .modal .nav-tabs .nav-link:focus-visible {
    background: #243044 !important;
    border-color: #475569 !important;
    color: #e0f2fe !important;
}

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
html[data-theme="dark"] .modal .nav-tabs .nav-link.active {
    background: linear-gradient(180deg, #164e63, #0e3a50) !important;
    border-color: #22d3ee #22d3ee #164e63 !important;
    color: #fff !important;
    box-shadow: 0 -3px 0 #67e8f9 inset, 0 6px 16px rgba(6, 182, 212, .16) !important;
}

html[data-theme="dark"] .nav-pills .nav-link {
    color: #cbd5e1;
}

html[data-theme="dark"] .nav-pills .nav-link:hover {
    background: #243044;
    color: #fff;
}

html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link {
    background: #0891b2 !important;
    color: #fff !important;
}

html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane {
    background-color: #162033 !important;
    border-color: #475569 !important;
    color: #e5e7eb !important;
}

/* Explicit light reset prevents any previous Bootstrap dark palette from lingering. */
html[data-theme="light"][data-bs-theme="light"] .nav-tabs,
html[data-theme="light"][data-bs-theme="light"] .modal .nav-tabs {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"][data-bs-theme="light"] .tab-content,
html[data-theme="light"][data-bs-theme="light"] .tab-pane,
html[data-theme="light"][data-bs-theme="light"] .card-body,
html[data-theme="light"][data-bs-theme="light"] .table-responsive,
html[data-theme="light"][data-bs-theme="light"] .dataTables_wrapper {
    background-color: transparent !important;
    color: #172033 !important;
}

html[data-theme="light"][data-bs-theme="light"] .modal-content,
html[data-theme="light"][data-bs-theme="light"] .modal-body,
html[data-theme="light"][data-bs-theme="light"] .modal-footer {
    background-color: #fff !important;
    border-color: #dee2e6 !important;
    color: #172033 !important;
}

html[data-theme="light"][data-bs-theme="light"] .table > tbody > tr > td {
    background-color: transparent !important;
    border-color: #dbe4ef !important;
    color: #172033 !important;
}

/* Elegant profile dropdown with expand/collapse motion. */
.user-dropdown-menu {
    min-width: 220px;
    padding: .5rem;
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, .18) !important;
    border-radius: .8rem !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .18) !important;
    transform-origin: top right;
}

.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid rgba(14, 165, 233, .18);
    border-left: 1px solid rgba(14, 165, 233, .18);
    transform: rotate(45deg);
}

.user-dropdown-menu .dropdown-header {
    padding: .65rem .7rem;
    border-radius: .55rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, .09), rgba(251, 191, 36, .08));
}

.user-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    min-height: 36px;
    margin: 2px 0;
    padding: .55rem .7rem;
    border-radius: .5rem;
    font-weight: 600;
    transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item:focus {
    transform: translateX(3px);
}

.user-dropdown-menu.show,
.user-dropdown-menu.siakad-dropdown-opening {
    animation: siakadDropdownExpand .2s cubic-bezier(.2, .8, .2, 1) both;
}

.user-dropdown-menu.siakad-dropdown-closing {
    display: block !important;
    pointer-events: none;
    animation: siakadDropdownCollapse .16s ease both;
}

html[data-theme="dark"] .user-dropdown-menu {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .user-dropdown-menu .dropdown-header {
    background: linear-gradient(135deg, rgba(6, 182, 212, .16), rgba(245, 158, 11, .1));
}

@keyframes siakadDropdownExpand {
    from { opacity: 0; transform: translateY(-8px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes siakadDropdownCollapse {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(.97); }
}

/* Smooth theme handoff without animating layout dimensions. */
html.theme-transitioning body,
html.theme-transitioning .navbar,
html.theme-transitioning .sidebar,
html.theme-transitioning .content-wrapper,
html.theme-transitioning .card,
html.theme-transitioning .card-header,
html.theme-transitioning .card-body,
html.theme-transitioning .table,
html.theme-transitioning .table th,
html.theme-transitioning .table td,
html.theme-transitioning .modal-content,
html.theme-transitioning .dropdown-menu,
html.theme-transitioning .form-control,
html.theme-transitioning .form-select,
html.theme-transitioning .nav-link,
html.theme-transitioning .tab-content {
    transition: background-color .24s ease, border-color .24s ease, color .24s ease, box-shadow .24s ease !important;
}

@media (max-width: 767.98px) {
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid {
        --bs-gutter-x: 1rem;
    }

    .form-control,
    .form-select,
    .select2-search__field {
        font-size: 16px;
    }

    .form-control:not(textarea):not(.form-control-sm),
    .form-select:not([multiple]):not(.form-select-sm) {
        height: 38px !important;
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-dialog-scrollable {
        height: calc(100% - 1rem);
    }

    .btn-group-responsive,
    .card-header .btn-group {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        gap: .375rem;
    }

    .page-actions,
    .form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .language-switcher .language-label-long {
        display: none;
    }

    .view-toolbar {
        align-items: stretch !important;
    }

    .view-toolbar > div:last-child {
        max-width: 100%;
        margin-inline-start: auto;
    }

    .view-mode-switch > .btn {
        padding-inline: .55rem;
    }

    .navbar {
        padding-inline: .65rem !important;
    }

    .dataTables_wrapper .row > [class*="col-"] {
        width: 100%;
        text-align: start !important;
        margin-bottom: .5rem;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: start;
        overflow-x: auto;
    }

    .input-group {
        flex-wrap: nowrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        min-width: 0;
    }
}

/* Optional horizontal application navigation. */
.navigation-layout-topbar > .d-flex,
.navigation-layout-topbar .app-main-shell {
    width: 100%;
    min-width: 0;
}

.navigation-layout-topbar > .d-flex,
.navigation-layout-topbar .app-main-shell {
    min-height: 100vh;
}

.navigation-layout-topbar .content-wrapper {
    flex: 1 0 auto;
    width: auto;
    margin-inline: clamp(14px, 1.8vw, 28px);
}

.navigation-layout-topbar .top-navigation {
    width: auto;
    margin: 10px clamp(14px, 1.8vw, 28px) 0;
    border-radius: .8rem;
    overflow: visible;
}

.navigation-layout-topbar .app-main-shell > footer {
    width: auto;
    margin-inline: clamp(14px, 1.8vw, 28px);
    border-radius: .7rem .7rem 0 0;
}

.navigation-layout-topbar .app-utility-navbar {
    position: relative;
    top: auto;
    z-index: 1030;
}

.top-navigation {
    position: sticky !important;
    top: 0;
    z-index: 1035;
    min-height: 54px;
    padding: .42rem .8rem !important;
    border-bottom: 1px solid rgba(34, 211, 238, .28);
    background: radial-gradient(circle at 12% 0%, rgba(6, 182, 212, .2), transparent 28%), linear-gradient(105deg, #0f172a 0%, #172554 58%, #0f3b55 100%) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .2);
}

.top-navigation-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 220px;
    margin-right: .5rem;
    color: #f8fafc !important;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.2;
}

.top-navigation-brand img {
    width: 34px;
    height: 34px;
    margin-right: .55rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .24));
}

.top-navigation-list {
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.navbar.top-navigation .navbar-collapse {
    min-width: 0;
    flex-basis: auto;
}

/* Tailwind's visibility utility named .collapse must not hide Bootstrap navigation. */
.navigation-layout-topbar .top-navigation .navbar-collapse.collapse,
.navigation-layout-topbar .top-navigation .navbar-collapse.collapsing {
    visibility: visible !important;
}

.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .42rem;
    width: auto !important;
    min-width: max-content;
    height: auto !important;
    min-height: 36px;
    padding: .5rem .68rem !important;
    border: 1px solid transparent;
    border-radius: .45rem;
    color: #dbeafe !important;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #67e8f9;
    border-radius: .35rem;
    background: rgba(8, 145, 178, .16);
    font-size: .72rem;
    line-height: 1;
}

.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link:hover,
.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link:focus,
.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link.show {
    color: #fff !important;
    border-color: rgba(103, 232, 249, .25);
    background: rgba(30, 41, 59, .72);
    transform: translateY(-1px);
}

.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link.active,
.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link.active-parent {
    color: #fff !important;
    border-color: rgba(103, 232, 249, .42);
    background: linear-gradient(135deg, rgba(8, 145, 178, .65), rgba(30, 64, 175, .55));
    box-shadow: 0 5px 14px rgba(8, 145, 178, .18);
}

.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link.active > i:first-child,
.navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link.active-parent > i:first-child {
    color: #0f172a;
    background: linear-gradient(135deg, #67e8f9, #fbbf24);
}

.top-navigation-dropdown {
    min-width: 235px;
    max-height: min(68vh, 520px);
    padding: .45rem;
    overflow-y: auto;
    border: 1px solid #dbe4ef;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .2);
}

.top-navigation-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 36px;
    padding: .52rem .62rem;
    border-radius: .45rem;
    color: #334155;
    font-size: .76rem;
    font-weight: 650;
    white-space: normal;
}

.top-navigation-dropdown .dropdown-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: .4rem;
    background: #ecfeff;
    color: #0891b2;
    font-size: .72rem;
}

.top-navigation-dropdown .dropdown-item:hover,
.top-navigation-dropdown .dropdown-item:focus,
.top-navigation-dropdown .dropdown-item.active {
    background: #e0f2fe;
    color: #075985;
}

.top-navigation-nested {
    position: relative;
}

.top-navigation-module-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.top-navigation-module-toggle::after {
    margin-left: auto;
    transform: rotate(-90deg);
    transition: transform .18s ease;
}

.top-navigation-module-toggle[aria-expanded="true"]::after {
    transform: rotate(0deg);
}

.top-navigation-module-toggle.active-parent {
    background: #e0f2fe;
    color: #075985;
}

.top-navigation-submenu {
    top: -.45rem;
    left: calc(100% + .38rem);
    min-width: 235px;
    max-height: min(68vh, 520px);
    padding: .45rem;
    overflow-y: auto;
    border: 1px solid #dbe4ef;
    border-radius: .7rem;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .2);
}

@media (min-width: 992px) {
    .top-navigation-dropdown {
        overflow: visible;
    }

    .top-navigation-nested > .top-navigation-submenu {
        display: none;
        margin: 0;
    }

    .top-navigation-nested:hover > .top-navigation-submenu,
    .top-navigation-nested:focus-within > .top-navigation-submenu,
    .top-navigation-nested > .top-navigation-submenu.show {
        display: block;
        animation: topNavigationSubmenuIn .16s ease-out both;
    }

    .top-navigation-nested.is-open-left > .top-navigation-submenu {
        right: calc(100% + .38rem);
        left: auto;
    }

    .top-navigation-nested:hover > .top-navigation-module-toggle,
    .top-navigation-nested:focus-within > .top-navigation-module-toggle {
        background: #e0f2fe;
        color: #075985;
    }

    .top-navigation-nested:hover > .top-navigation-module-toggle::after,
    .top-navigation-nested:focus-within > .top-navigation-module-toggle::after,
    .top-navigation-nested > .top-navigation-module-toggle[aria-expanded="true"]::after {
        transform: rotate(-90deg);
    }
}

@keyframes topNavigationSubmenuIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.top-navigation-toggler {
    width: 36px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    border: 1px solid rgba(103, 232, 249, .4) !important;
    color: #ecfeff !important;
    box-shadow: none !important;
}

.navigation-layout-topbar #pageLoader .skeleton-sidebar {
    display: none;
}

.navigation-layout-topbar #pageLoader .loader-content {
    grid-template-columns: minmax(0, 1fr);
}

.navigation-layout-topbar #pageLoader .skeleton-main {
    width: 100%;
    grid-column: 1;
}

.skeleton-navigation {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 10px 20px;
    overflow: hidden;
    border-bottom: 1px solid rgba(34, 211, 238, .22);
    background: linear-gradient(105deg, #0f172a 0%, #172554 58%, #0f3b55 100%);
}

.skeleton-navigation-brand,
.skeleton-navigation-menu {
    display: flex;
    align-items: center;
    gap: 9px;
}

.skeleton-navigation-brand {
    flex: 0 0 165px;
    padding-right: 8px;
}

.skeleton-navigation-menu {
    min-width: 0;
    flex: 1 1 auto;
}

.skeleton-navigation .skeleton-circle {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background: rgba(148, 163, 184, .28);
}

.skeleton-navigation .skeleton-line,
.skeleton-navigation .skeleton-pill {
    flex: 0 0 auto;
    background: rgba(148, 163, 184, .25);
}

.skeleton-navigation .skeleton-pill {
    height: 34px;
    border-radius: .45rem;
}

html[data-theme="dark"] .top-navigation {
    border-bottom-color: rgba(34, 211, 238, .22);
    background: radial-gradient(circle at 12% 0%, rgba(6, 182, 212, .16), transparent 28%), linear-gradient(105deg, #020617 0%, #0f172a 58%, #082f49 100%) !important;
}

html[data-theme="dark"] .top-navigation-dropdown {
    border-color: #3b4a61;
    background: #172033;
}

html[data-theme="dark"] .top-navigation-submenu {
    border-color: #3b4a61;
    background: #172033;
}

html[data-theme="dark"] .top-navigation-module-toggle.active-parent {
    background: rgba(8, 145, 178, .24);
    color: #ecfeff;
}

@media (min-width: 992px) {
    html[data-theme="dark"] .top-navigation-nested:hover > .top-navigation-module-toggle,
    html[data-theme="dark"] .top-navigation-nested:focus-within > .top-navigation-module-toggle {
        background: rgba(8, 145, 178, .24);
        color: #ecfeff;
    }
}

html[data-theme="dark"] .top-navigation-dropdown .dropdown-item {
    color: #dbe7f5;
}

html[data-theme="dark"] .top-navigation-dropdown .dropdown-item i {
    background: rgba(8, 145, 178, .16);
    color: #67e8f9;
}

html[data-theme="dark"] .top-navigation-dropdown .dropdown-item:hover,
html[data-theme="dark"] .top-navigation-dropdown .dropdown-item:focus,
html[data-theme="dark"] .top-navigation-dropdown .dropdown-item.active {
    background: rgba(8, 145, 178, .24);
    color: #ecfeff;
}

html[data-theme="dark"] .skeleton-navigation {
    border-bottom-color: rgba(34, 211, 238, .16);
    background: linear-gradient(105deg, #020617 0%, #0f172a 58%, #082f49 100%);
}

/* Navigasi antar-record khusus modal detail/view. */
.modal-view-navigation {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
    padding: .65rem .9rem;
    border-top: 1px solid #dbe7f3;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, .045);
}

.modal-view-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: fit-content;
    min-width: 132px;
    min-height: 38px;
    padding: .42rem .72rem;
    border: 1px solid #bae6fd;
    border-radius: .72rem;
    background: #fff;
    color: #075985;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .01em;
    box-shadow: 0 4px 12px rgba(14, 116, 144, .1);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.modal-view-nav-prev {
    justify-self: center;
}

.modal-view-nav-next {
    justify-self: center;
    border-color: transparent;
    background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 5px 14px rgba(37, 99, 235, .2);
}

.modal-view-nav-button:not(:disabled):hover,
.modal-view-nav-button:not(:disabled):focus-visible {
    transform: translateY(-1px);
    border-color: #38bdf8;
    background: #ecfeff;
    color: #075985;
    box-shadow: 0 7px 16px rgba(14, 116, 144, .16);
}

.modal-view-nav-next:not(:disabled):hover,
.modal-view-nav-next:not(:disabled):focus-visible {
    border-color: transparent;
    background: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%);
    color: #fff;
}

.modal-view-nav-button:disabled {
    border-color: #dbe3ec;
    background: #edf1f5;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .72;
}

.modal-view-nav-icon {
    display: inline-grid;
    width: 25px;
    height: 25px;
    place-items: center;
    flex: 0 0 25px;
    border-radius: 50%;
    background: rgba(8, 145, 178, .11);
    font-size: .68rem;
}

.modal-view-nav-next .modal-view-nav-icon {
    background: rgba(255, 255, 255, .18);
}

.modal-view-nav-position {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 31px;
    padding: .3rem .7rem;
    border: 1px solid #dbe7f3;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #64748b;
    font-size: .7rem;
    white-space: nowrap;
}

.modal-view-nav-position strong {
    color: #0f172a;
    font-size: .76rem;
}

.modal-view-navigation.is-loading .modal-view-nav-position::before {
    width: .75rem;
    height: .75rem;
    content: '';
    border: 2px solid #bae6fd;
    border-top-color: #0284c7;
    border-radius: 50%;
    animation: modal-view-nav-spin .6s linear infinite;
}

@keyframes modal-view-nav-spin {
    to { transform: rotate(360deg); }
}

html[data-theme="dark"] .modal-view-navigation {
    border-top-color: #34445a;
    background: linear-gradient(180deg, #172033 0%, #111a2b 100%);
    box-shadow: 0 -8px 20px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .modal-view-nav-button {
    border-color: #31566b;
    background: #1b2a3d;
    color: #a5f3fc;
}

html[data-theme="dark"] .modal-view-nav-next {
    border-color: transparent;
    background: linear-gradient(135deg, #0e7490 0%, #1d4ed8 100%);
    color: #fff;
}

html[data-theme="dark"] .modal-view-nav-button:disabled {
    border-color: #334155;
    background: #202b3b;
    color: #64748b;
}

html[data-theme="dark"] .modal-view-nav-position {
    border-color: #34445a;
    background: rgba(15, 23, 42, .72);
    color: #94a3b8;
}

html[data-theme="dark"] .modal-view-nav-position strong {
    color: #e2e8f0;
}

@media (max-width: 575.98px) {
    .modal-view-navigation {
        grid-template-columns: auto auto;
        grid-template-areas:
            "position position"
            "previous next";
        justify-content: center;
        gap: .42rem .55rem;
        padding: .55rem .6rem;
    }

    .modal-view-nav-prev {
        grid-area: previous;
    }

    .modal-view-nav-next {
        grid-area: next;
    }

    .modal-view-nav-position {
        grid-area: position;
        justify-self: center;
    }

    .modal-view-nav-button {
        min-width: 0;
        min-height: 36px;
        padding: .35rem .48rem;
        border-radius: .62rem;
    }

    .modal-view-nav-position {
        padding-inline: .48rem;
    }

    .modal-view-nav-position-label {
        display: none;
    }

}

/* Final cross-page contracts: action groups, aligned buttons, mobile heroes. */
table .table-action-cell > .table-action-btn-group,
table .table-action-cell .table-action-btn-group {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    vertical-align: middle;
}

table .table-action-cell .table-action-btn-group > form {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
}

table .table-action-cell .table-action-btn-group :is(.btn, a.btn, button.btn) {
    min-height: 27px;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
}

.siakad-adjacent-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 2px !important;
}

.siakad-adjacent-actions > :is(.btn, a.btn, button.btn),
.siakad-adjacent-actions > form > :is(.btn, button.btn) {
    min-height: 34px;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero),
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] {
        text-align: right !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex {
        align-items: flex-end !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) > div:first-of-type,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) h1,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) h2,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) h3,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] :is(h1,h2,h3,p),
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) p {
        margin-right: 0 !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] .text-end,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero) .text-end {
        text-align: right !important;
    }

    .siakad-filter-toggle,
    .siakad-filter-toolbar > .siakad-filter-toggle,
    .siakad-page-actionbar > :is(.siakad-filter-toggle,#toggleFilter,[data-bs-toggle="collapse"]) {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .siakad-adjacent-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Topbar notification dropdown: complete light/dark surface contract. */
#notifDropdownMenu {
    border: 1px solid #dbe4ef;
    background: #fff;
    color: #172033;
}

#notifDropdownMenu .dropdown-header {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: .7rem .7rem 0 0;
    background: #f8fafc;
    color: #172033;
    font-weight: 800;
}

#notifDropdownMenu > hr {
    margin: 0;
    border-color: #dbe4ef;
    opacity: 1;
}

#notifDropdownMenu .notif-title {
    color: #172033;
}

#notifDropdownMenu .notif-content {
    color: #475569 !important;
}

#notifDropdownMenu .notif-time {
    color: #64748b !important;
}

#notifDropdownMenu #notifList > .dropdown-item:last-child {
    border-top: 1px solid #dbe4ef;
    background: #f8fafc;
    color: #475569 !important;
}

html[data-theme="dark"] #notifDropdownMenu {
    border-color: #334155;
    background: #0f172a;
    color: #e2e8f0;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] #notifDropdownMenu .dropdown-header {
    border-color: #334155;
    background: #162238;
    color: #f8fafc;
}

html[data-theme="dark"] #notifDropdownMenu > hr {
    border-color: #334155;
}

html[data-theme="dark"] #notifDropdownMenu .notif-item {
    border-bottom-color: #334155;
    color: #e2e8f0;
}

html[data-theme="dark"] #notifDropdownMenu .notif-unread {
    background: #17304d;
}

html[data-theme="dark"] #notifDropdownMenu .notif-read {
    background: #111c2f;
}

html[data-theme="dark"] #notifDropdownMenu .notif-item:hover,
html[data-theme="dark"] #notifDropdownMenu .notif-item:focus {
    background: #1e3a5f;
    color: #fff;
}

html[data-theme="dark"] #notifDropdownMenu .notif-title {
    color: #f8fafc;
}

html[data-theme="dark"] #notifDropdownMenu .notif-content {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #notifDropdownMenu .notif-time {
    color: #94a3b8 !important;
}

html[data-theme="dark"] #notifDropdownMenu #notifList > .dropdown-item:last-child,
html[data-theme="dark"] #notifDropdownMenu #notifList > .dropdown-item:only-child {
    border-top-color: #334155;
    background: #162238;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #notifDropdownMenu #notifList > .dropdown-item:last-child:hover,
html[data-theme="dark"] #notifDropdownMenu #notifList > .dropdown-item:last-child:focus {
    background: #1e3a5f;
    color: #fff !important;
}

html[data-theme="dark"] #notifList {
    color-scheme: dark;
    scrollbar-color: #475569 #0f172a;
}

.control-panel-menu-section + .control-panel-menu-section {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid #dbe4ef;
}

.control-panel-menu-group-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .55rem;
    color: #475569;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.control-panel-menu-group-title i {
    color: #0891b2;
}

html[data-theme="dark"] .control-panel-menu-section + .control-panel-menu-section {
    border-top-color: #334155;
}

html[data-theme="dark"] .control-panel-menu-group-title {
    color: #cbd5e1;
}

html[data-theme="dark"] .control-panel-menu-group-title i {
    color: #67e8f9;
}

/* ========================================================================== 
   SIAKAD unified application UI
   Visual language follows the compact PDDikti Readiness/Integration modules.
   Scoped to the authenticated application so print layouts stay unchanged.
   ========================================================================== */
body[class*="navigation-layout-"] {
    --siakad-app-bg: #f3f7fb;
    --siakad-surface: #ffffff;
    --siakad-surface-soft: #f7fafc;
    --siakad-surface-muted: #edf3f8;
    --siakad-border: #dce6f0;
    --siakad-border-strong: #c9d7e5;
    --siakad-text: #152238;
    --siakad-muted: #64748b;
    --siakad-brand: #2454a6;
    --siakad-accent: #089db3;
    --siakad-hero: linear-gradient(120deg, #152a69 0%, #3155a6 48%, #0aa6b7 100%);
    --siakad-card-shadow: 0 7px 22px rgba(30, 58, 95, .075);
    --siakad-card-shadow-hover: 0 11px 28px rgba(30, 58, 95, .12);
    min-width: 320px;
    background: var(--siakad-app-bg);
    color: var(--siakad-text);
    font-family: "Roboto", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -.004em;
}

body[class*="navigation-layout-"] .app-main-shell {
    min-width: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(8, 157, 179, .045), transparent 25rem),
        var(--siakad-app-bg);
}

body[class*="navigation-layout-"] .content-wrapper {
    width: 100%;
    min-width: 0;
    padding: clamp(.75rem, 1.25vw, 1.25rem);
}

body[class*="navigation-layout-"] .content-wrapper > .container,
body[class*="navigation-layout-"] .content-wrapper > .container-fluid,
body[class*="navigation-layout-"] .siakad-page-container {
    width: 100%;
    max-width: 1780px;
    margin-inline: auto;
    padding-inline: 0;
}

body[class*="navigation-layout-"] .content-wrapper > nav[aria-label="breadcrumb"] {
    max-width: 1780px;
    margin-inline: auto;
}

body[class*="navigation-layout-"] h1,
body[class*="navigation-layout-"] h2,
body[class*="navigation-layout-"] h3,
body[class*="navigation-layout-"] h4,
body[class*="navigation-layout-"] h5,
body[class*="navigation-layout-"] h6,
body[class*="navigation-layout-"] .siakad-heading {
    color: inherit;
    font-family: inherit;
    font-weight: 750;
    letter-spacing: -.018em;
}

body[class*="navigation-layout-"] .card {
    border: 1px solid var(--siakad-border);
    border-radius: .78rem;
    background: var(--siakad-surface);
    box-shadow: var(--siakad-card-shadow);
}

body[class*="navigation-layout-"] .card.shadow,
body[class*="navigation-layout-"] .card.shadow-sm {
    box-shadow: var(--siakad-card-shadow) !important;
}

body[class*="navigation-layout-"] .card > .card-header:not(.pddikti-hero):not(.pds-hero):not(.siakad-page-hero) {
    min-height: 44px;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--siakad-border);
    background: linear-gradient(180deg, #f9fbfd 0%, #f1f6fa 100%) !important;
    color: var(--siakad-text) !important;
}

body[class*="navigation-layout-"] .card > .card-header:not(.siakad-page-hero) h3,
body[class*="navigation-layout-"] .card > .card-header:not(.siakad-page-hero) h4,
body[class*="navigation-layout-"] .card > .card-header:not(.siakad-page-hero) h5,
body[class*="navigation-layout-"] .card > .card-header:not(.siakad-page-hero) h6 {
    margin: 0;
    font-size: .9rem;
    line-height: 1.3;
}

body[class*="navigation-layout-"] .card-body {
    padding: clamp(.8rem, 1.15vw, 1.1rem);
}

body[class*="navigation-layout-"] .card-footer {
    padding: .7rem .9rem;
    border-top: 1px solid var(--siakad-border);
    background: var(--siakad-surface-soft);
}

body[class*="navigation-layout-"] .siakad-page-shell {
    overflow: hidden;
    border: 0;
}

body[class*="navigation-layout-"] .siakad-page-hero,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] {
    min-height: 88px;
    padding: 1rem 1.15rem !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: .72rem .72rem 0 0 !important;
    background: var(--siakad-hero) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body[class*="navigation-layout-"] .siakad-page-hero::after,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"]::after {
    position: absolute;
    top: -85%;
    right: 7%;
    width: 18rem;
    height: 18rem;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 66%);
    pointer-events: none;
}

body[class*="navigation-layout-"] .siakad-page-hero > *,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > * {
    position: relative;
    z-index: 1;
}

body[class*="navigation-layout-"] .siakad-page-hero h1,
body[class*="navigation-layout-"] .siakad-page-hero h2,
body[class*="navigation-layout-"] .siakad-page-hero h3,
body[class*="navigation-layout-"] .siakad-page-hero h4,
body[class*="navigation-layout-"] .siakad-page-hero h5,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h1,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h2,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h3 {
    margin-bottom: .22rem !important;
    color: #fff !important;
    font-size: clamp(1.08rem, 1.5vw, 1.28rem) !important;
    font-weight: 800 !important;
    line-height: 1.24;
}

body[class*="navigation-layout-"] .siakad-page-hero p,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] p {
    max-width: 65rem;
    color: rgba(255, 255, 255, .72) !important;
    font-size: .76rem;
    line-height: 1.4;
}

body[class*="navigation-layout-"] .siakad-page-hero .badge,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] .badge {
    padding: .42rem .62rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94) !important;
    color: #17305f !important;
    font-size: .68rem;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(4, 19, 48, .12);
}

body[class*="navigation-layout-"] .siakad-page-hero > .position-absolute,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .position-absolute {
    top: -1.5rem !important;
    right: 1.2rem !important;
    color: #fff;
    font-size: 6rem !important;
    opacity: .065 !important;
}

body[class*="navigation-layout-"] .form-label,
body[class*="navigation-layout-"] label:not(.btn):not(.form-check-label) {
    color: var(--siakad-text);
    font-size: .75rem;
    font-weight: 700;
}

body[class*="navigation-layout-"] .form-control,
body[class*="navigation-layout-"] .form-select,
body[class*="navigation-layout-"] .input-group-text,
body[class*="navigation-layout-"] .select2-container .select2-selection {
    border-color: var(--siakad-border-strong);
    background-color: var(--siakad-surface);
    color: var(--siakad-text);
}

body[class*="navigation-layout-"] .form-control:hover,
body[class*="navigation-layout-"] .form-select:hover {
    border-color: #9db4ca;
}

body[class*="navigation-layout-"] .form-control:focus,
body[class*="navigation-layout-"] .form-select:focus {
    border-color: #2b9fba;
    box-shadow: 0 0 0 .18rem rgba(8, 157, 179, .13);
}

body[class*="navigation-layout-"] .btn {
    border-radius: .5rem;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

body[class*="navigation-layout-"] .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(30, 64, 110, .12);
}

body[class*="navigation-layout-"] .btn:focus-visible,
body[class*="navigation-layout-"] a:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

body[class*="navigation-layout-"] .table-responsive {
    border: 1px solid var(--siakad-border);
    border-radius: .65rem;
    background: var(--siakad-surface);
}

body[class*="navigation-layout-"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--siakad-text);
    --bs-table-border-color: var(--siakad-border);
    margin-bottom: 0;
    font-size: .755rem;
}

body[class*="navigation-layout-"] .table > thead > tr > th,
body[class*="navigation-layout-"] .table-custom > thead > tr > th {
    height: 36px;
    padding: .42rem .48rem;
    border-bottom: 1px solid #9dc9d5 !important;
    background: #edf4f8 !important;
    color: #17233a !important;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.2;
}

body[class*="navigation-layout-"] .table > tbody > tr > td {
    height: 38px;
    padding: .34rem .48rem;
    line-height: 1.25;
}

body[class*="navigation-layout-"] .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: rgba(8, 157, 179, .055);
}

body[class*="navigation-layout-"] .dataTables_wrapper .row {
    align-items: center;
    row-gap: .55rem;
}

body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_length,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_info,
body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_paginate {
    color: var(--siakad-muted);
    font-size: .72rem;
}

body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter input {
    min-width: 150px;
    margin-inline-start: .4rem;
}

body[class*="navigation-layout-"] .pagination {
    gap: 2px;
    margin-bottom: 0;
}

body[class*="navigation-layout-"] .page-link {
    min-width: 31px;
    min-height: 31px;
    padding: .32rem .52rem;
    border-color: var(--siakad-border);
    color: var(--siakad-brand);
    font-size: .72rem;
    text-align: center;
}

body[class*="navigation-layout-"] .nav-tabs,
body[class*="navigation-layout-"] .nav-pills {
    gap: .22rem;
}

body[class*="navigation-layout-"] .nav-tabs {
    padding: .2rem .2rem 0;
    border-bottom-color: var(--siakad-border-strong);
}

body[class*="navigation-layout-"] .nav-tabs .nav-link {
    padding: .5rem .7rem;
    border-radius: .48rem .48rem 0 0;
    color: var(--siakad-muted);
    font-size: .76rem;
    font-weight: 700;
}

body[class*="navigation-layout-"] .nav-tabs .nav-link:hover {
    border-color: transparent;
    background: rgba(8, 157, 179, .07);
    color: var(--siakad-brand);
}

body[class*="navigation-layout-"] .nav-tabs .nav-link.active {
    border-color: var(--siakad-border-strong) var(--siakad-border-strong) var(--siakad-surface);
    background: var(--siakad-surface);
    color: #075985;
    box-shadow: inset 0 3px 0 #06a2bc;
}

body[class*="navigation-layout-"] .modal-dialog {
    padding-inline: .5rem;
}

body[class*="navigation-layout-"] .modal-content {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .4);
    border-radius: .8rem;
    background: var(--siakad-surface);
    color: var(--siakad-text);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

body[class*="navigation-layout-"] .modal-content > .modal-header {
    min-height: 52px;
    padding: .75rem 1rem;
    border: 0;
    background: linear-gradient(120deg, #1a3978 0%, #2c6ba8 55%, #159eb2 100%) !important;
    color: #fff !important;
}

body[class*="navigation-layout-"] .modal-header .modal-title {
    color: #fff !important;
    font-size: .95rem;
    font-weight: 800;
}

body[class*="navigation-layout-"] .modal-header .btn-close {
    margin: 0 0 0 auto;
    filter: brightness(0) invert(1);
    opacity: .8;
}

body[class*="navigation-layout-"] .modal-body {
    padding: 1rem;
}

body[class*="navigation-layout-"] .modal-footer {
    gap: .35rem;
    padding: .65rem 1rem;
    border-top-color: var(--siakad-border);
    background: var(--siakad-surface-soft);
}

body[class*="navigation-layout-"] .alert {
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: .65rem;
    font-size: .76rem;
}

body[class*="navigation-layout-"] .dropdown-menu:not(.top-navigation-dropdown):not(.top-navigation-submenu) {
    padding: .4rem;
    border: 1px solid var(--siakad-border);
    background: var(--siakad-surface);
    box-shadow: 0 14px 35px rgba(15, 23, 42, .16);
}

body[class*="navigation-layout-"] .dropdown-menu .dropdown-item {
    border-radius: .42rem;
    font-size: .76rem;
}

body[class*="navigation-layout-"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
    border: 1px solid var(--siakad-border);
    border-radius: .6rem;
    background: linear-gradient(180deg, #f8fbfd, #edf3f7);
    box-shadow: 0 3px 10px rgba(30, 58, 95, .04);
}

/* The optional desktop topbar receives the same page width and rhythm. */
body.navigation-layout-topbar .content-wrapper,
body.navigation-layout-topbar .top-navigation,
body.navigation-layout-topbar .app-main-shell > footer {
    width: auto;
    margin-inline: clamp(.75rem, 1.6vw, 1.5rem);
}

body.navigation-layout-topbar .content-wrapper {
    padding-inline: 0;
}

body.navigation-layout-topbar .top-navigation {
    top: .5rem;
    margin-top: .65rem;
    border: 1px solid rgba(103, 232, 249, .18);
    border-radius: .75rem;
}

body.navigation-layout-topbar .top-navigation > .container-fluid {
    max-width: 1780px;
    margin-inline: auto;
    padding-inline: .65rem;
}

body.navigation-layout-topbar .top-navigation-list {
    gap: .12rem;
}

body.navigation-layout-topbar .navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link {
    padding-inline: .58rem !important;
}

body.navigation-layout-topbar .app-main-shell > footer {
    margin-top: .75rem;
}

html[data-theme="dark"] body[class*="navigation-layout-"] {
    --siakad-app-bg: #0f1725;
    --siakad-surface: #172338;
    --siakad-surface-soft: #131f32;
    --siakad-surface-muted: #1d2b42;
    --siakad-border: #33445b;
    --siakad-border-strong: #43566e;
    --siakad-text: #e5edf8;
    --siakad-muted: #9fb0c5;
    --siakad-card-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    background: var(--siakad-app-bg);
    color: var(--siakad-text);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .app-main-shell {
    background:
        radial-gradient(circle at 100% 0, rgba(8, 157, 179, .055), transparent 25rem),
        var(--siakad-app-bg);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .card > .card-header:not(.pddikti-hero):not(.pds-hero):not(.siakad-page-hero),
html[data-theme="dark"] body[class*="navigation-layout-"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
    border-color: var(--siakad-border);
    background: linear-gradient(180deg, #1b2a40 0%, #162236 100%) !important;
    color: var(--siakad-text) !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .table > thead > tr > th,
html[data-theme="dark"] body[class*="navigation-layout-"] .table-custom > thead > tr > th {
    border-bottom-color: #2a8ca1 !important;
    background: #1e3048 !important;
    color: #eaf2fb !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-hover-bg: rgba(34, 211, 238, .055);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .nav-tabs .nav-link.active {
    border-color: var(--siakad-border-strong) var(--siakad-border-strong) var(--siakad-surface);
    background: var(--siakad-surface);
    color: #a5f3fc;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .form-control,
html[data-theme="dark"] body[class*="navigation-layout-"] .form-select,
html[data-theme="dark"] body[class*="navigation-layout-"] .input-group-text,
html[data-theme="dark"] body[class*="navigation-layout-"] .select2-container .select2-selection {
    border-color: var(--siakad-border-strong);
    background-color: #111c2d;
    color: var(--siakad-text);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .form-control::placeholder {
    color: #74869c;
}

@media (max-width: 991.98px) {
    body[class*="navigation-layout-"] {
        font-size: .79rem;
    }

    body[class*="navigation-layout-"] .content-wrapper,
    body.navigation-layout-topbar .content-wrapper {
        width: 100%;
        margin: 0;
        padding: .7rem;
    }

    body.navigation-layout-topbar .top-navigation {
        display: none !important;
    }

    body.navigation-layout-topbar .app-main-shell > footer,
    body.navigation-layout-sidebar .app-main-shell > footer {
        margin-inline: .55rem;
    }

    body[class*="navigation-layout-"] .siakad-page-hero,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] {
        min-height: 78px;
        padding: .85rem .9rem !important;
    }

    body[class*="navigation-layout-"] .siakad-page-hero .d-flex,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] .d-flex {
        gap: .55rem;
    }

    body[class*="navigation-layout-"] .siakad-page-hero .text-end,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] .text-end {
        width: 100%;
        margin-top: .45rem !important;
        text-align: start !important;
    }

    body[class*="navigation-layout-"] .view-toolbar,
    body[class*="navigation-layout-"] .card-body > .d-flex.justify-content-between,
    body[class*="navigation-layout-"] .card-header.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .55rem;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_length,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_info,
    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        width: 100%;
        text-align: start !important;
    }

    body[class*="navigation-layout-"] .dataTables_wrapper .dataTables_filter input {
        width: min(100%, 260px);
        min-width: 0;
    }

    body[class*="navigation-layout-"] .modal-dialog,
    body[class*="navigation-layout-"] .modal-dialog.modal-lg,
    body[class*="navigation-layout-"] .modal-dialog.modal-xl {
        width: auto;
        max-width: calc(100vw - 12px);
        margin: 6px;
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    body[class*="navigation-layout-"] .content-wrapper,
    body.navigation-layout-topbar .content-wrapper {
        padding: .55rem;
    }

    body[class*="navigation-layout-"] .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
        min-height: 32px;
        margin-bottom: .55rem;
        padding: .4rem .55rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    body[class*="navigation-layout-"] .card {
        border-radius: .68rem;
    }

    body[class*="navigation-layout-"] .card-body {
        padding: .72rem;
    }

    body[class*="navigation-layout-"] .siakad-page-hero,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] {
        border-radius: .62rem .62rem 0 0 !important;
    }

    body[class*="navigation-layout-"] .siakad-page-hero h1,
    body[class*="navigation-layout-"] .siakad-page-hero h2,
    body[class*="navigation-layout-"] .siakad-page-hero h3,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h1,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h2,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h3 {
        font-size: 1.04rem !important;
    }

    body[class*="navigation-layout-"] .siakad-page-hero p,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] p {
        font-size: .71rem;
    }

    body[class*="navigation-layout-"] .btn-group.view-mode-switch,
    body[class*="navigation-layout-"] .btn-group-toggle.view-mode-switch {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    body[class*="navigation-layout-"] .view-mode-switch .btn {
        min-width: 0;
        padding-inline: .42rem;
        white-space: nowrap;
    }

    body[class*="navigation-layout-"] .modal-body {
        padding: .72rem;
    }

    body[class*="navigation-layout-"] .modal-footer {
        justify-content: stretch;
    }

    body[class*="navigation-layout-"] .modal-footer > .btn {
        flex: 1 1 auto;
    }

    body[class*="navigation-layout-"] .table-action-cell {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[class*="navigation-layout-"] *,
    body[class*="navigation-layout-"] *::before,
    body[class*="navigation-layout-"] *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Final modal-record navigation alignment.
 * Keep this contract at the end of the stylesheet so legacy page rules and
 * Bootstrap utilities cannot pull the Previous/Next pair to the left. */
body[class*="navigation-layout-"] .modal-content > .modal-view-navigation {
    display: grid !important;
    grid-template-columns: max-content max-content max-content !important;
    place-content: center !important;
    place-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

body[class*="navigation-layout-"] .modal-view-navigation > .modal-view-nav-button,
body[class*="navigation-layout-"] .modal-view-navigation > .modal-view-nav-position {
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    justify-self: center !important;
}

@media (max-width: 991.98px) {
    body[class*="navigation-layout-"] .modal-content > .modal-view-navigation {
        grid-template-columns: max-content max-content !important;
        grid-template-areas:
            "position position"
            "previous next" !important;
        column-gap: .55rem !important;
        row-gap: .42rem !important;
        justify-content: center !important;
    }

    body[class*="navigation-layout-"] .modal-view-nav-prev {
        grid-area: previous !important;
    }

    body[class*="navigation-layout-"] .modal-view-nav-next {
        grid-area: next !important;
    }

    body[class*="navigation-layout-"] .modal-view-nav-position {
        grid-area: position !important;
    }
}

@media (max-width: 991.98px) {
    .navigation-layout-topbar .content-wrapper,
    .navigation-layout-topbar .app-main-shell > footer {
        margin-inline: 8px;
    }

    .navigation-layout-topbar .top-navigation {
        margin-inline: 8px;
        border-radius: .65rem;
    }

    .top-navigation {
        padding-inline: .65rem !important;
    }

    .top-navigation-brand {
        max-width: calc(100% - 54px);
    }

    .top-navigation .navbar-collapse {
        max-height: calc(100vh - 116px);
        margin-top: .55rem;
        padding: .55rem;
        overflow-y: auto;
        border: 1px solid rgba(103, 232, 249, .18);
        border-radius: .65rem;
        background: rgba(2, 6, 23, .6);
    }

    .top-navigation-list {
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 3px;
    }

    .navbar.top-navigation .navbar-nav > .nav-item > .nav-link.top-navigation-link {
        width: 100% !important;
        min-width: 0;
        justify-content: flex-start;
    }

    .top-navigation-dropdown {
        max-height: none;
        margin: .25rem 0 .45rem 1rem;
        border-color: rgba(148, 163, 184, .22);
        background: rgba(15, 23, 42, .94);
        box-shadow: none;
    }

    .top-navigation-nested .top-navigation-submenu {
        position: static;
        width: auto;
        min-width: 0;
        margin: .2rem 0 .35rem 1.1rem;
        border-color: rgba(148, 163, 184, .18);
        background: rgba(2, 6, 23, .35);
        box-shadow: none;
    }

    .top-navigation-dropdown .dropdown-item {
        color: #dbe7f5;
    }

    .skeleton-navigation {
        min-height: 54px;
        padding: 9px 14px;
    }

    .skeleton-navigation-brand {
        flex: 1 1 auto;
    }

    .skeleton-navigation-menu .skeleton-pill:not(:last-child) {
        display: none;
    }

    .skeleton-navigation-menu {
        flex: 0 0 36px;
    }
}

/* --------------------------------------------------------------------------
 * Canonical mobile shell
 * The database setting controls desktop navigation only. Tablet and mobile
 * always use the same CMS-style drawer for a predictable application shell.
 * -------------------------------------------------------------------------- */
.mobile-app-identity,
.mobile-navigation-close,
.skeleton-mobile-navigation-trigger {
    display: none;
}

@media (min-width: 992px) {
    body.navigation-layout-topbar .app-navigation-drawer {
        display: none !important;
    }

    body.navigation-layout-sidebar .app-navigation-drawer {
        display: block;
    }
}

@media (max-width: 991.98px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    body > .d-flex,
    .app-main-shell {
        width: 100%;
        min-width: 0;
        flex: 0 0 100%;
    }

    .app-navigation-drawer,
    body.sidebar-collapsed .app-navigation-drawer {
        display: block !important;
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(286px, 86vw) !important;
        max-width: 86vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 14px 12px 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform .25s cubic-bezier(.2, .8, .2, 1) !important;
        border-right: 1px solid rgba(125, 211, 252, .2);
        border-left: 0;
        border-radius: 0 14px 14px 0;
        box-shadow: 22px 0 48px rgba(15, 23, 42, .34);
        visibility: hidden;
        z-index: 1060;
    }

    body.sidebar-open .app-navigation-drawer,
    body.sidebar-open.sidebar-collapsed .app-navigation-drawer {
        transform: translate3d(0, 0, 0) !important;
        visibility: visible;
    }

    .mobile-navigation-close {
        display: inline-grid !important;
        position: absolute;
        top: 12px;
        right: 11px;
        width: 31px;
        height: 31px;
        padding: 0;
        place-items: center;
        border: 1px solid rgba(125, 211, 252, .22);
        border-radius: 50%;
        background: rgba(15, 23, 42, .48);
        color: #e0f2fe;
        font-size: .78rem;
        transition: background-color .16s ease, transform .16s ease;
        z-index: 2;
    }

    .mobile-navigation-close:hover,
    .mobile-navigation-close:focus-visible {
        background: rgba(8, 145, 178, .5);
        color: #fff;
        transform: rotate(90deg);
    }

    .app-navigation-drawer .sidebar-header {
        padding: 1px 38px 0 4px;
        text-align: left !important;
    }

    .app-navigation-drawer .sidebar-header > a {
        flex-direction: row !important;
        justify-content: flex-start;
        gap: .65rem;
        width: 100%;
    }

    .app-navigation-drawer .sidebar-header .logo-img {
        flex: 0 0 39px;
        width: 39px;
        height: 39px;
        margin: 0 !important;
        object-fit: contain;
    }

    .app-navigation-drawer .sidebar-header .logo-text {
        display: block !important;
        min-width: 0;
        overflow: hidden;
        font-size: .82rem;
        line-height: 1.25;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.sidebar-collapsed .app-navigation-drawer .logo-text,
    body.sidebar-collapsed .app-navigation-drawer .nav-text,
    body.sidebar-collapsed .app-navigation-drawer .chevron-icon,
    body.sidebar-collapsed .app-navigation-drawer .sidebar-menu-group-label span {
        display: inline-flex !important;
    }

    body.sidebar-collapsed .app-navigation-drawer .sidebar-menu-group-label {
        justify-content: flex-start;
        min-height: 23px;
        margin: 7px 9px 3px;
    }

    body.sidebar-collapsed .app-navigation-drawer .sidebar-menu-group-label::after {
        flex: 1 1 auto;
        background: linear-gradient(90deg, rgba(34, 211, 238, .34), transparent);
    }

    .app-navigation-drawer .user-info,
    body.sidebar-collapsed .app-navigation-drawer .user-info {
        width: auto;
        min-height: auto;
        margin-inline: 2px;
        padding: 11px 10px;
    }

    .app-navigation-drawer .user-img,
    body.sidebar-collapsed .app-navigation-drawer .user-img {
        width: 46px;
        height: 46px;
    }

    .overlay-mobile {
        display: block !important;
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, .62);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility .22s ease;
        backdrop-filter: blur(3px);
        z-index: 1055;
    }

    body.sidebar-open .overlay-mobile {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .top-navigation {
        display: none !important;
    }

    .app-utility-navbar {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-height: 54px;
        padding: .48rem .65rem !important;
        padding-top: max(.48rem, env(safe-area-inset-top)) !important;
        z-index: 1035;
    }

    .app-main-shell {
        padding-top: calc(54px + env(safe-area-inset-top));
    }

    .app-utility-navbar #mobileSidebarToggle {
        display: inline-grid !important;
        flex: 0 0 34px;
        margin: 0 .5rem 0 0 !important;
        place-items: center;
    }

    .mobile-app-identity {
        display: inline-flex !important;
        align-items: center;
        min-width: 0;
        max-width: clamp(82px, 26vw, 170px);
        gap: .45rem;
        color: #0f172a;
        font-size: .73rem;
        font-weight: 800;
        line-height: 1.15;
        text-decoration: none;
    }

    .mobile-app-identity img {
        flex: 0 0 27px;
        width: 27px;
        height: 27px;
        object-fit: contain;
    }

    .mobile-app-identity span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html[data-theme="dark"] .mobile-app-identity {
        color: #e2e8f0;
    }

    .app-utility-navbar > .navbar-nav {
        flex: 0 0 auto;
        margin-left: auto !important;
        gap: 1px;
    }

    .app-utility-navbar > .navbar-nav > .nav-item {
        margin-inline: 0 !important;
    }

    .app-utility-navbar .dropdown-menu {
        max-width: calc(100vw - 16px);
    }

    #notifDropdownMenu {
        position: fixed !important;
        top: 56px !important;
        right: 8px !important;
        left: auto !important;
        width: min(390px, calc(100vw - 16px)) !important;
        max-height: calc(100dvh - 70px);
        overflow-y: auto;
        transform: none !important;
    }

    .navigation-layout-topbar .content-wrapper,
    .navigation-layout-sidebar .content-wrapper {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 10px;
    }

    .navigation-layout-topbar .app-main-shell > footer,
    .navigation-layout-sidebar .app-main-shell > footer {
        width: auto;
        margin: 0 8px;
        border-radius: .65rem .65rem 0 0;
    }

    .content-wrapper > nav[aria-label="breadcrumb"] {
        margin-bottom: .65rem;
    }

    .content-wrapper > nav[aria-label="breadcrumb"] .breadcrumb {
        min-height: 34px;
        padding: .45rem .62rem;
        font-size: .72rem;
    }

    .content-wrapper .container,
    .content-wrapper .container-fluid,
    .content-wrapper [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .content-wrapper .row {
        min-width: 0;
    }

    .content-wrapper .input-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .content-wrapper .card {
        min-width: 0;
        max-width: 100%;
        border-radius: .65rem;
    }

    .content-wrapper .card-header {
        gap: .5rem;
        min-width: 0;
    }

    .content-wrapper .card-header h1,
    .content-wrapper .card-header h2,
    .content-wrapper .card-header h3,
    .content-wrapper .card-header h4,
    .content-wrapper .card-header h5 {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .table-responsive,
    .dataTables_wrapper,
    .dataTables_scroll,
    .dataTables_scrollBody {
        width: 100% !important;
        max-width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: auto;
        max-width: calc(100vw - 16px);
        margin: 8px;
    }

    .modal-content {
        max-height: calc(100dvh - 16px);
        border-radius: .72rem;
    }

    .modal-body {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .floating-panel-grid {
        inset: 64px 8px 68px !important;
        width: auto !important;
        max-width: none !important;
    }

    .app-control-fab {
        right: 14px !important;
        bottom: 14px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .skeleton-sidebar,
    .skeleton-navigation {
        display: none !important;
    }

    #pageLoader .loader-content,
    body.sidebar-collapsed #pageLoader .loader-content,
    .navigation-layout-topbar #pageLoader .loader-content {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .skeleton-mobile-navigation-trigger {
        display: block;
    }

    .skeleton-desktop-navigation-trigger {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .topbar-website-item,
    .topbar-ai-item {
        display: none !important;
    }

    .mobile-app-identity {
        max-width: 31px;
    }

    .mobile-app-identity span {
        display: none;
    }

    .app-utility-navbar {
        padding-inline: .5rem !important;
    }

    .app-utility-navbar .language-switcher {
        padding: 2px;
    }

    .app-utility-navbar .language-option {
        min-width: 29px;
        padding: .25rem .28rem;
        font-size: .66rem;
    }

    .content-wrapper .card-body,
    .content-wrapper .card-header,
    .content-wrapper .card-footer {
        padding-right: .72rem;
        padding-left: .72rem;
    }

    footer .container-fluid {
        padding: .7rem;
        font-size: .7rem;
        line-height: 1.4;
        text-align: center;
    }
}

/* 2026-08-24: restore the original typography and complete integration themes. */
body[class*="navigation-layout-"] {
    font-family: "Segoe UI", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
}

body[class*="navigation-layout-"] h1,
body[class*="navigation-layout-"] h2,
body[class*="navigation-layout-"] h3,
body[class*="navigation-layout-"] h4,
body[class*="navigation-layout-"] h5,
body[class*="navigation-layout-"] h6,
body[class*="navigation-layout-"] .siakad-heading {
    font-family: inherit;
    letter-spacing: normal;
}

/* One page-header geometry for legacy pages and both PDDikti module groups. */
body[class*="navigation-layout-"] .siakad-page-hero,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"],
body[class*="navigation-layout-"] .pddikti-hero,
body[class*="navigation-layout-"] .pds-hero,
body[class*="navigation-layout-"] .audit-hero,
body[class*="navigation-layout-"] .grad-hero {
    min-height: 86px;
    padding: 1rem 1.15rem !important;
    border: 0 !important;
    border-radius: .65rem .65rem 0 0 !important;
    background: linear-gradient(120deg, #152a69 0%, #3155a6 48%, #0aa6b7 100%) !important;
    color: #fff !important;
}

body[class*="navigation-layout-"] .pds-hero {
    border-radius: .65rem !important;
}

body[class*="navigation-layout-"] .audit-hero,
body[class*="navigation-layout-"] .grad-hero {
    border-radius: .65rem !important;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .16) !important;
}

body[class*="navigation-layout-"] .siakad-page-hero h1,
body[class*="navigation-layout-"] .siakad-page-hero h2,
body[class*="navigation-layout-"] .siakad-page-hero h3,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h1,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h2,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h3,
body[class*="navigation-layout-"] .pddikti-hero h2,
body[class*="navigation-layout-"] .pds-hero h2,
body[class*="navigation-layout-"] .audit-hero h2,
body[class*="navigation-layout-"] .grad-hero h2 {
    margin: 0 0 .25rem !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    line-height: 1.25;
}

body[class*="navigation-layout-"] .siakad-page-hero p,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] p,
body[class*="navigation-layout-"] .pddikti-hero p,
body[class*="navigation-layout-"] .pds-hero p,
body[class*="navigation-layout-"] .audit-hero p,
body[class*="navigation-layout-"] .grad-hero p {
    margin: .2rem 0 0 !important;
    color: rgba(255, 255, 255, .78) !important;
    font-size: .78rem !important;
    line-height: 1.4;
}

body[class*="navigation-layout-"] .siakad-page-hero h2 > i:first-child,
body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h2 > i:first-child,
body[class*="navigation-layout-"] .pds-hero h2 > i:first-child {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: .55rem !important;
    place-items: center;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .14);
    color: #ffd43b !important;
    font-size: 1rem;
    vertical-align: middle;
}

/* PDDikti Integration: all cards, grouped modules, filters, logs and dialogs. */
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-nav,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .card-body,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .card-footer,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-module,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-context-filters,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .table-responsive,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card details,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-json {
    border-color: #3b4d65 !important;
    background: #172338 !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .card-header,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .bg-body-tertiary,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .bg-light {
    border-color: #3b4d65 !important;
    background: #1e3048 !important;
    color: #eef6ff !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card strong,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card label,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card summary,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-module strong,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-module .small,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .form-label {
    color: #eef6ff !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-help,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .text-muted,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .form-text,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-module .pds-help {
    color: #aebdd0 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-nav .nav-link:not(.active) {
    color: #cbd8e8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-nav .nav-link:not(.active):hover {
    background: rgba(34, 211, 238, .1) !important;
    color: #fff !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-table {
    --bs-table-bg: #172338;
    --bs-table-striped-bg: #1c2b43;
    --bs-table-hover-bg: #21334e;
    --bs-table-color: #e5edf8;
    --bs-table-border-color: #3b4d65;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .modal-content,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .modal-body,
html[data-theme="dark"] body[class*="navigation-layout-"] .pds-card .modal-footer {
    border-color: #3b4d65 !important;
    background: #172338 !important;
    color: #e5edf8 !important;
}

/* PDDikti Readiness: cover light utility blocks inside every submodule. */
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-shell .bg-light,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .bg-light,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .bg-body-tertiary,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .border.rounded {
    border-color: #3b4d65 !important;
    background: #1e3048 !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel strong,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel label,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .small:not(.text-muted) {
    color: #eef6ff !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-help,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .text-muted,
html[data-theme="dark"] body[class*="navigation-layout-"] .pddikti-panel .form-text {
    color: #aebdd0 !important;
}

@media (max-width: 767.98px) {
    body[class*="navigation-layout-"] .siakad-page-hero,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"],
    body[class*="navigation-layout-"] .pddikti-hero,
    body[class*="navigation-layout-"] .pds-hero,
    body[class*="navigation-layout-"] .audit-hero,
    body[class*="navigation-layout-"] .grad-hero {
        min-height: 0;
        padding: .9rem !important;
    }

    body[class*="navigation-layout-"] .siakad-page-hero h1,
    body[class*="navigation-layout-"] .siakad-page-hero h2,
    body[class*="navigation-layout-"] .siakad-page-hero h3,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h1,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h2,
    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] h3,
    body[class*="navigation-layout-"] .pddikti-hero h2,
    body[class*="navigation-layout-"] .pds-hero h2,
    body[class*="navigation-layout-"] .audit-hero h2,
    body[class*="navigation-layout-"] .grad-hero h2 {
        font-size: 1.15rem !important;
    }
}
/* Responsive filter system -------------------------------------------------
 * Legacy pages used an absolutely-positioned 300px dropdown.  Keeping the
 * panel in the normal document flow prevents clipping and gives tables the
 * full width once the filter is collapsed.
 */
.siakad-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.siakad-filter-toolbar > .siakad-filter-toggle {
    order: -1;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.siakad-filter-toggle-row {
    width: 100%;
    justify-content: flex-start;
}

.siakad-filter-toggle {
    display: inline-flex !important;
    min-height: 34px;
    margin: 0 0 .65rem auto !important;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    border-width: 1px !important;
    border-radius: .5rem !important;
    font-weight: 700 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    padding: .5rem .8rem !important;
    white-space: nowrap !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

.siakad-filter-toggle:hover,
.siakad-filter-toggle:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 .3rem .75rem rgba(14, 165, 233, .16);
}

.siakad-filter-count {
    display: inline-flex;
    min-width: 1.35rem;
    min-height: 1.35rem;
    margin-left: .25rem;
    align-items: center;
    justify-content: center;
    padding: .15rem .4rem;
    font-size: .68rem;
    line-height: 1;
}

.siakad-active-filter-summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .65rem 1rem;
    padding: .65rem .75rem;
    border: 1px solid #bae6fd;
    border-radius: .65rem;
    background: linear-gradient(135deg, #f0f9ff, #ecfeff);
    box-shadow: 0 .25rem .75rem rgba(14, 165, 233, .08);
}

.siakad-active-filter-summary.is-empty {
    min-height: 2.75rem;
    color: #64748b;
}

.siakad-active-filter-empty {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .76rem;
    font-weight: 700;
}

.siakad-active-filter-heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
    color: #075985;
    font-size: .78rem;
    font-weight: 800;
}

.siakad-filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: #dc2626;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}

.siakad-filter-clear-all:hover,
.siakad-filter-clear-all:focus-visible {
    color: #991b1b;
    text-decoration: underline;
}

.siakad-active-filter-chips {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.siakad-filter-chip {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .3rem;
    padding: .32rem .42rem .32rem .55rem;
    border: 1px solid #bae6fd;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: .74rem;
    line-height: 1.2;
    box-shadow: 0 .15rem .4rem rgba(15, 23, 42, .06);
}

.siakad-filter-chip-label {
    color: #64748b;
    font-weight: 700;
}

.siakad-filter-chip strong {
    overflow: hidden;
    max-width: 14rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siakad-filter-chip > a {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #64748b;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.siakad-filter-chip > a:hover,
.siakad-filter-chip > a:focus-visible {
    background: #fee2e2;
    color: #dc2626;
    transform: scale(1.06);
}

.siakad-filter-card:has(> .siakad-responsive-filter:not(.show):not(.collapsing)) {
    margin: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.siakad-filter-card:has(> .siakad-responsive-filter:not(.show):not(.collapsing)) > .siakad-filter-card-header {
    display: none !important;
}

.filter-dropdown.siakad-filter-panel {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 .75rem !important;
    padding: .75rem !important;
    overflow: visible !important;
    z-index: auto !important;
    border: 1px solid #dbe4ef !important;
    border-radius: .65rem !important;
    background: #f8fafc !important;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .07) !important;
}

.filter-dropdown.siakad-filter-panel.hide {
    display: none;
}

.siakad-filter-panel > form > .card-body,
.siakad-filter-panel .custom-card-filter,
.siakad-responsive-filter,
.siakad-responsive-filter > .card-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.siakad-filter-panel > form > .card-body,
.siakad-filter-panel .card-body.border-bottom {
    padding: 0 !important;
    border: 0 !important;
}

.siakad-filter-panel .card-header {
    margin: 0 0 .65rem;
    padding: .15rem 0 .55rem !important;
    border: 0;
    border-bottom: 2px solid #16a6bd;
    border-radius: 0;
    background: transparent !important;
}

.siakad-filter-panel .siakad-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem .75rem;
    padding: .75rem !important;
    border: 0;
    border-radius: .55rem;
    background: var(--bs-body-bg, #fff);
}

.siakad-filter-panel .siakad-filter-grid > .mb-3,
.siakad-filter-panel .siakad-filter-grid > .col-12 {
    min-width: 0;
    margin-bottom: 0 !important;
}

.siakad-filter-panel .siakad-filter-grid > button[type="submit"],
.siakad-filter-panel .siakad-filter-grid > .col-12:last-child {
    grid-column: 1 / -1;
}

.siakad-filter-panel label,
.siakad-filter-card .form-label,
.siakad-responsive-filter .form-label {
    display: inline-block;
    margin-bottom: .3rem;
    font-weight: 700;
}

.siakad-filter-card,
.siakad-filter-card .card-body,
.siakad-responsive-filter {
    min-width: 0;
}

.siakad-filter-card {
    overflow: visible !important;
    border: 1px solid #dbe4ef !important;
    border-radius: .65rem !important;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .07) !important;
}

.siakad-filter-card > .card-header,
.siakad-filter-card > .siakad-filter-card-header {
    min-height: 42px;
    padding: .55rem .75rem !important;
    border-bottom: 2px solid #16a6bd !important;
    border-radius: .65rem .65rem 0 0 !important;
    background: #f1f5f9 !important;
    color: #172033 !important;
}

.siakad-filter-card > .card-header h3,
.siakad-filter-card > .card-header h5,
.siakad-filter-card > .card-header .fw-bold,
.siakad-filter-card > .siakad-filter-card-header {
    margin: 0;
    color: inherit !important;
    font-weight: 800 !important;
}

.siakad-filter-card .siakad-responsive-filter,
.siakad-filter-card > .card-body,
.siakad-filter-card > .p-3 {
    background: #fff;
}

.siakad-filter-card .siakad-responsive-filter > .card-body,
.siakad-filter-card > .card-body,
.siakad-filter-card > .p-3 {
    padding: .75rem !important;
}

.siakad-filter-card .siakad-filter-form,
.siakad-filter-card .siakad-filter-form > .card-body {
    margin-bottom: 0 !important;
}

.siakad-filter-card .siakad-filter-form > .card-body {
    padding: 0 !important;
}

.siakad-filter-card .siakad-filter-form > .card-body.siakad-filter-body {
    padding: .75rem !important;
}

.siakad-filter-footer {
    padding: .6rem .75rem !important;
    border-top: 1px solid #dbe4ef !important;
    background: #f8fafc !important;
}

.siakad-filter-card .siakad-filter-fields,
.siakad-filter-card .siakad-filter-form .row {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .65rem;
}

.siakad-filter-card .siakad-filter-form .mb-3 {
    margin-bottom: 0 !important;
}

.siakad-filter-card .form-control,
.siakad-filter-card .form-select,
.siakad-filter-card .input-group,
.siakad-filter-card .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}

.siakad-filter-card .input-group {
    flex-wrap: nowrap !important;
}

.siakad-filter-card .input-group > :is(.form-control, .form-select) {
    width: 1% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.siakad-filter-card .form-control,
.siakad-filter-card .form-select,
.siakad-filter-card .input-group-text,
.siakad-filter-card .select2-container .select2-selection--single {
    min-height: var(--siakad-control-height, 34px) !important;
}

.siakad-filter-card .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--siakad-control-height, 34px) - 2px) !important;
}

.siakad-filter-card .select2-container .select2-selection--single .select2-selection__arrow {
    height: var(--siakad-control-height, 34px) !important;
}

.siakad-filter-card .siakad-filter-fields > [class*="col-"] {
    min-width: 0;
}

.siakad-inline-filter-fields {
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .7rem;
}

.siakad-inline-filter-fields > [class*="col-"] {
    min-width: 0;
    margin-bottom: 0 !important;
}

.siakad-page-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    margin-bottom: .75rem;
}

.siakad-page-actionbar .siakad-filter-toggle,
.siakad-page-actionbar #toggleFilter,
.siakad-page-actionbar > [data-bs-toggle="collapse"] {
    order: 2;
    margin: 0 0 0 auto !important;
}

.siakad-page-actionbar .siakad-primary-actions {
    order: 1;
}

.siakad-filter-card .toggle-icon {
    width: 30px;
    height: 30px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .45rem;
}

.siakad-filter-card .toggle-icon i {
    transition: transform .25s ease;
}

.siakad-filter-card .toggle-icon[aria-expanded="false"] i {
    transform: rotate(180deg);
}

.collapse.siakad-responsive-filter > .card-body {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
}

.collapse.siakad-responsive-filter.siakad-filter-animating-open > .card-body {
    animation: siakadFilterReveal .28s ease both;
}

.collapse.siakad-responsive-filter.siakad-filter-animating-close > .card-body {
    opacity: 0;
    transform: translateY(-8px);
}

@keyframes siakadFilterReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-theme="dark"] .siakad-filter-card {
    border-color: #334155 !important;
    background: #111c2f;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .siakad-filter-toggle {
    border-color: #22d3ee !important;
    color: #67e8f9 !important;
    background: rgba(8, 47, 73, .32) !important;
}

html[data-theme="dark"] .siakad-filter-toggle:hover,
html[data-theme="dark"] .siakad-filter-toggle:focus-visible {
    background: #0e7490 !important;
    color: #fff !important;
}

html[data-theme="dark"] .siakad-active-filter-summary {
    border-color: #155e75;
    background: linear-gradient(135deg, #102036, #102a36);
    box-shadow: 0 .3rem .85rem rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .siakad-active-filter-heading {
    color: #67e8f9;
}

html[data-theme="dark"] .siakad-filter-clear-all {
    color: #fca5a5;
}

html[data-theme="dark"] .siakad-filter-chip {
    border-color: #28506a;
    background: #162238;
    color: #e2e8f0;
}

html[data-theme="dark"] .siakad-filter-chip-label,
html[data-theme="dark"] .siakad-filter-chip > a {
    color: #94a3b8;
}

html[data-theme="dark"] .siakad-filter-chip > a:hover,
html[data-theme="dark"] .siakad-filter-chip > a:focus-visible {
    background: rgba(239, 68, 68, .18);
    color: #fca5a5;
}

html[data-theme="dark"] .siakad-filter-card > .card-header,
html[data-theme="dark"] .siakad-filter-card > .siakad-filter-card-header {
    border-bottom-color: #22d3ee !important;
    background: #162238 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .siakad-filter-card .siakad-responsive-filter,
html[data-theme="dark"] .siakad-filter-card .siakad-responsive-filter > .card-body,
html[data-theme="dark"] .siakad-filter-card > .card-body,
html[data-theme="dark"] .siakad-filter-card > .p-3 {
    background: #111c2f !important;
    color: #e2e8f0;
}

html[data-theme="dark"] .siakad-filter-footer {
    border-top-color: #334155 !important;
    background: #162238 !important;
}

@media (prefers-reduced-motion: reduce) {
    .collapse.siakad-responsive-filter > .card-body,
    .siakad-filter-card .toggle-icon i {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    .siakad-active-filter-summary {
        align-items: stretch;
        flex-direction: column;
        padding: .6rem;
    }

    .siakad-active-filter-heading {
        justify-content: space-between;
    }

    .siakad-active-filter-chips {
        flex-wrap: nowrap;
        padding-bottom: .15rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
    }

    .siakad-filter-chip {
        flex: 0 0 auto;
    }
}

[data-theme="dark"] .filter-dropdown.siakad-filter-panel,
body.dark-mode .filter-dropdown.siakad-filter-panel {
    border-color: #334155 !important;
    background: #111c2f !important;
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22) !important;
}

[data-theme="dark"] .siakad-filter-panel .siakad-filter-grid,
body.dark-mode .siakad-filter-panel .siakad-filter-grid {
    background: #162238;
}

@media (max-width: 1199.98px) {
    .siakad-filter-panel .siakad-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .siakad-filter-toggle {
        min-width: 0 !important;
        white-space: normal !important;
    }
    .siakad-filter-toolbar > .btn {
        flex: 1 1 auto;
    }

    .filter-dropdown.siakad-filter-panel {
        padding: .55rem !important;
    }

    .siakad-filter-panel .siakad-filter-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
        padding: .6rem !important;
    }
}

/* Release v.26.1.0.53: external Student filter and split mobile hero alignment. */
.siakad-filter-toolbar > .siakad-filter-toggle,
.siakad-page-actionbar > :is(.siakad-filter-toggle,#toggleFilter,[data-bs-toggle="collapse"]) {
    order: -1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.siakad-filter-toggle-row {
    justify-content: flex-start !important;
}

/* Release v.26.1.0.54: compact filter actions and aligned management inputs. */
.student-filter-form .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.student-filter-form .input-group > .input-group-text {
    flex: 0 0 auto;
}

.student-filter-form .input-group > .form-select,
.student-filter-form .input-group > .form-control {
    width: 1% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.siakad-filter-submit-row {
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 2px !important;
    margin-top: .15rem;
    padding: .55rem .7rem !important;
    border-top: 1px solid var(--bs-border-color, #dbe4ef) !important;
    border-radius: 0 0 .55rem .55rem !important;
    background: var(--bs-tertiary-bg, #f8fafc) !important;
}

.siakad-filter-submit-row > .siakad-apply-filter,
.siakad-apply-filter {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    white-space: nowrap;
}

.management-list-toolbar,
.management-filter-controls {
    min-width: 0;
    gap: .5rem;
}

.management-filter-controls {
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.management-filter-controls > .btn,
.management-filter-controls > .input-group {
    margin: 0 !important;
}

.management-filter-controls .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

.management-filter-controls .input-group-text,
.management-filter-controls .form-control,
.management-filter-controls .form-select {
    height: 32px !important;
    min-height: 32px !important;
}

.management-filter-controls .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
}

.management-filter-controls .input-group > :is(.form-control,.form-select) {
    width: 1% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.management-year-filter {
    flex: 0 1 180px !important;
}

.management-search-filter {
    flex: 1 1 280px !important;
    width: min(400px, 100%) !important;
    min-width: 220px !important;
    max-width: 400px !important;
}

.siakad-select2-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
}

.siakad-select2-group > .input-group-text {
    flex: 0 0 auto;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.siakad-select2-group > .select2-container {
    width: 1% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.siakad-select2-group > :is(.form-control, .form-select) {
    width: 1% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

.siakad-select2-group .select2-selection--single {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

html[data-theme="dark"] .siakad-filter-submit-row {
    border-top-color: #334155 !important;
    background: #162238 !important;
}

@media (max-width: 767.98px) {
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero,.card-header.position-relative.text-white[style*="linear-gradient"]) {
        text-align: left !important;
    }

    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero,.card-header.position-relative.text-white[style*="linear-gradient"]) :is(h1,h2,h3,p),
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.audit-hero,.grad-hero,.health-hero,.card-header.position-relative.text-white[style*="linear-gradient"]) > div:first-of-type {
        margin-right: auto !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex {
        width: 100% !important;
        align-items: stretch !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > div:first-child {
        align-self: flex-start !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        text-align: left !important;
    }

    body[class*="navigation-layout-"] .card-header.position-relative.text-white[style*="linear-gradient"] > .d-flex > .text-end,
    body[class*="navigation-layout-"] :is(.siakad-page-hero,.pddikti-hero,.pds-hero,.health-hero) > :is(.text-end,.api-status,.health-private-badge,.notification-live-badge) {
        width: auto !important;
        align-self: flex-end !important;
        margin-right: 0 !important;
        margin-left: auto !important;
        text-align: right !important;
    }

    .siakad-filter-toolbar > .btn.siakad-filter-toggle,
    .siakad-filter-toggle,
    .siakad-page-actionbar > :is(.siakad-filter-toggle,#toggleFilter,[data-bs-toggle="collapse"]) {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 1 auto !important;
        order: -1 !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .siakad-adjacent-actions {
        width: 100%;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
    }

    .student-action-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .student-action-buttons > .btn {
        flex: 0 1 auto;
    }

    .siakad-filter-submit-row {
        justify-content: flex-end !important;
    }

    .management-list-toolbar,
    .management-filter-controls {
        width: 100%;
    }

    .management-list-toolbar {
        align-items: stretch !important;
    }

    .management-filter-controls {
        flex: 1 1 100%;
    }

    .management-year-filter,
    .management-search-filter {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}
/* Keep the desktop navigation available while long pages scroll. */
@media (min-width: 992px) {
    body.navigation-layout-sidebar .app-navigation-drawer {
        position: sticky !important;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        max-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Stable action bars used by filters and primary create buttons. */
.siakad-balanced-actionbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
    flex-wrap: wrap;
}

.siakad-balanced-actionbar > :last-child:not(:first-child) {
    margin-left: auto;
}

/* Student KRS keeps the same readable surfaces in both color schemes. */
.student-krs-page .student-krs-info-card,
.student-krs-page .student-krs-data-card,
.student-krs-form-detail {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.student-krs-empty-row {
    background: rgba(255, 243, 205, .7);
    font-style: italic;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-info-card,
html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-data-card,
html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-form-detail,
body.dark-mode .student-krs-page .student-krs-info-card,
body.dark-mode .student-krs-page .student-krs-data-card,
body.dark-mode .student-krs-form-detail {
    border-color: var(--siakad-border, #33445b) !important;
    background: var(--siakad-surface, #172338) !important;
    color: var(--siakad-text, #e5edf8) !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-info-card :is(h5, .text-primary, .text-black),
html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-data-card :is(h5, .text-primary, .text-black),
html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-form-detail :is(h5, .text-primary, .text-black),
body.dark-mode .student-krs-page .student-krs-info-card :is(h5, .text-primary, .text-black),
body.dark-mode .student-krs-page .student-krs-data-card :is(h5, .text-primary, .text-black),
body.dark-mode .student-krs-form-detail :is(h5, .text-primary, .text-black) {
    color: #e5edf8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-info-card h5,
body.dark-mode .student-krs-page .student-krs-info-card h5 {
    color: #67e8f9 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-page .student-krs-data-card > .card-header,
html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-form-detail .card-header,
body.dark-mode .student-krs-page .student-krs-data-card > .card-header,
body.dark-mode .student-krs-form-detail .card-header {
    border-color: var(--siakad-border, #33445b) !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-table > :not(caption) > * > *,
body.dark-mode .student-krs-table > :not(caption) > * > * {
    border-color: var(--siakad-border, #33445b) !important;
    background-color: #142136 !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-table > thead > tr > th,
body.dark-mode .student-krs-table > thead > tr > th {
    background: #1e3048 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .student-krs-table .student-krs-empty-row > td,
body.dark-mode .student-krs-table .student-krs-empty-row > td {
    background: rgba(146, 98, 8, .24) !important;
    color: #fde68a !important;
}

/* KRS history has accordion cards and tabs that previously forced white. */
.krs-history-page .krs-history-row-detail {
    background: linear-gradient(90deg, #fff, #e6f0ff);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.krs-history-page :is(.krs-history-shell, .krs-history-content-card, .krs-history-student-card, .krs-history-filter-card),
.krs-history-modal .modal-content {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page :is(.krs-history-shell, .krs-history-content-card, .krs-history-student-card, .krs-history-filter-card),
html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-modal .modal-content,
body.dark-mode .krs-history-page :is(.krs-history-shell, .krs-history-content-card, .krs-history-student-card, .krs-history-filter-card),
body.dark-mode .krs-history-modal .modal-content {
    border-color: var(--siakad-border, #33445b) !important;
    background: var(--siakad-surface, #172338) !important;
    color: var(--siakad-text, #e5edf8) !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page :is(.krs-history-content-card, .krs-history-student-card, .krs-history-filter-card) > .card-header,
html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-student-header,
body.dark-mode .krs-history-page :is(.krs-history-content-card, .krs-history-student-card, .krs-history-filter-card) > .card-header,
body.dark-mode .krs-history-page .krs-history-student-header {
    border-color: var(--siakad-border, #33445b) !important;
    background: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-tabs,
body.dark-mode .krs-history-page .krs-history-tabs {
    border-bottom-color: var(--siakad-border-strong, #43566e);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-tabs .nav-link,
body.dark-mode .krs-history-page .krs-history-tabs .nav-link {
    border-color: var(--siakad-border-strong, #43566e) !important;
    background: #111c2d !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-tabs .nav-link:is(.active, :hover, :focus),
body.dark-mode .krs-history-page .krs-history-tabs .nav-link:is(.active, :hover, :focus) {
    border-color: #0891b2 !important;
    background: #0e7490 !important;
    color: #fff !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-row-detail,
body.dark-mode .krs-history-page .krs-history-row-detail {
    border: 1px solid var(--siakad-border, #33445b);
    background: linear-gradient(90deg, #172338, #1d2b42) !important;
    color: #e5edf8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page .krs-history-row-detail :is(.text-black, .text-muted),
body.dark-mode .krs-history-page .krs-history-row-detail :is(.text-black, .text-muted) {
    color: #b8c6d8 !important;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .krs-history-page hr,
body.dark-mode .krs-history-page hr {
    border-color: var(--siakad-border, #33445b);
    opacity: 1;
}

/* Global invoice editor: balanced panels on constrained desktop and mobile. */
.invoice-global-body {
    min-width: 0;
}

.invoice-global-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--bs-border-color, #dbe4ef);
}

.invoice-global-number {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-global-form,
.invoice-global-panel,
.invoice-global-table-card {
    min-width: 0;
}

.invoice-global-panel > .card-header h6 {
    margin-bottom: 0;
}

.invoice-global-table-card .table {
    min-width: 690px;
    margin-bottom: 0;
}

.invoice-global-submit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

.invoice-global-submit-actions .btn {
    min-width: 92px;
}

html[data-theme="dark"] body[class*="navigation-layout-"] .invoice-global-toolbar,
body.dark-mode .invoice-global-toolbar {
    border-color: var(--siakad-border, #33445b);
}

html[data-theme="dark"] body[class*="navigation-layout-"] .invoice-global-panel,
html[data-theme="dark"] body[class*="navigation-layout-"] .invoice-global-table-card,
body.dark-mode .invoice-global-panel,
body.dark-mode .invoice-global-table-card {
    border-color: var(--siakad-border, #33445b) !important;
    background: var(--siakad-surface, #172338) !important;
}

@media (max-width: 575.98px) {
    .invoice-global-page {
        padding-inline: 0;
    }

    .invoice-global-body {
        padding: .75rem;
    }

    .invoice-global-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-global-submit-actions {
        width: 100%;
    }

    .invoice-global-submit-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .siakad-balanced-actionbar > * {
        flex: 0 1 auto;
    }

    .siakad-balanced-actionbar .btn {
        white-space: nowrap;
    }
}