/* SIM Perpustakaan application layer - complements SB Admin Pro */
html, body { min-height: 100%; }
body { background: #f2f6fc; }
#layoutSidenav { min-height: calc(100vh - 4.625rem); }
#layoutSidenav_content { min-height: calc(100vh - 4.625rem); display:flex; flex-direction:column; min-width:0; }
#layoutSidenav_content > main { flex:1 0 auto; width:100%; }
#layoutSidenav_content > footer { flex-shrink:0; margin-top:auto; width:100%; }
.sim-page { padding-bottom:2rem; }
.sim-card { background:#fff; border:1px solid #dfe3e8; border-radius:.5rem; box-shadow:0 .08rem .3rem rgba(0,0,0,.035); margin-bottom:1rem; }
.sim-card-header { padding:.9rem 1rem; border-bottom:1px solid #dfe3e8; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.sim-card-body { padding:1rem; }
.sim-card-footer { padding:.75rem 1rem; border-top:1px solid #dfe3e8; background:#fafbfc; }
.sim-table { margin-bottom:0; white-space:nowrap; }
.sim-table thead th { background:#f8fafc; border-bottom:2px solid #dfe3e8; font-size:.75rem; text-transform:uppercase; letter-spacing:.02em; }
.sim-table td { vertical-align:middle; font-size:.84rem; }
.sim-detail-label { font-size:.72rem; text-transform:uppercase; color:#6c757d; font-weight:700; }
.sim-detail-value { font-weight:600; margin-bottom:1rem; }
.sim-code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:#f3f4f6; padding:.15rem .35rem; border-radius:.25rem; }
.sim-required { color:#e81500; }
.sim-help { color:#6c757d; font-size:.75rem; margin-top:.35rem; }
.sim-form-label { font-weight:600; font-size:.8rem; }
.sim-status { font-size:.8rem; font-weight:600; }
.sim-status.active { color:#00ac69; }
.sim-kpi { border:1px solid #e2e6ea; border-radius:.5rem; padding:1rem; height:100%; background:#fff; }
.sim-kpi .label { font-size:.72rem; text-transform:uppercase; color:#6c757d; font-weight:700; }
.sim-kpi .value { font-size:1.55rem; font-weight:700; margin:.25rem 0; }
.sim-kpi .trend { font-size:.75rem; font-weight:600; }
.sim-filter { background:#f8fafc; border:1px solid #e5e7eb; border-radius:.5rem; padding:1rem; margin-bottom:1rem; }
.page-header-title { margin-bottom:0; }
.footer-admin { padding:1rem 0; }
@media (max-width: 767.98px) { .sim-card-header { align-items:flex-start; flex-direction:column; } .page-header-title { font-size:1.25rem; } }

/* Modal CRUD + toast system */
#simCrudModal .modal-content { border:0; border-radius:.65rem; box-shadow:0 1rem 3rem rgba(0,0,0,.18); }
#simCrudModal .modal-header { background:#f8fafc; border-bottom:1px solid #e5e7eb; }
#simCrudModal .modal-title { font-weight:700; }
#simCrudModal .modal-body { padding:1.25rem; }
#simCrudModal .modal-footer { background:#fafbfc; border-top:1px solid #e5e7eb; }
.sim-modal-loading { min-height:180px; display:flex; align-items:center; justify-content:center; color:#6c757d; padding:2rem; }
.toast-container { position:fixed; top:5.25rem; right:1.25rem; z-index:1090; max-width:390px; width:calc(100% - 2.5rem); }
.sim-toast-success .toast-header { border-left:4px solid #00ac69; }
.sim-toast-danger .toast-header { border-left:4px solid #e81500; }
.sim-toast-warning .toast-header { border-left:4px solid #f4a100; }
.sim-toast-info .toast-header { border-left:4px solid #0061f2; }
.sim-toast-icon { display:inline-flex; align-items:center; }
.sim-info-note { display:flex; align-items:flex-start; gap:.55rem; padding:.75rem .9rem; margin-bottom:1rem; border:1px solid #dfe3e8; border-radius:.45rem; background:#f8fafc; color:#5f6b7a; font-size:.82rem; }
.sim-info-note svg { width:17px; height:17px; flex:0 0 auto; margin-top:.05rem; }
.sim-info-danger { border-color:#f1b8b5; background:#fff5f5; color:#a71d18; }
@media (max-width: 575.98px) { .toast-container { top:4.75rem; right:.75rem; width:calc(100% - 1.5rem); } #simCrudModal .modal-dialog { margin:.5rem; } }


/* Responsive data tables and long CRUD forms */
.sim-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: .45rem;
}
.sim-table-wrap .sim-table,
.sim-table-wrap > table {
    width: max-content;
    min-width: 100%;
}
.sim-table-wrap .sim-table th,
.sim-table-wrap .sim-table td,
.sim-table-wrap > table th,
.sim-table-wrap > table td {
    white-space: nowrap;
}
.sim-table-scroll-hint {
    display: none;
    padding: .45rem .75rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    color: #6c757d;
    font-size: .72rem;
}

/* Long forms inside the SB Admin Pro CRUD modal remain fully reachable. */
#simCrudModal .modal-dialog {
    width: calc(100% - 1rem);
    max-width: 960px;
    margin: .5rem auto;
}
#simCrudModal .modal-content {
    max-height: calc(100vh - 1rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#simCrudModal .modal-content > .sim-modal-form,
#simCrudModal .modal-content > form {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}
#simCrudModal .modal-body {
    min-height: 0;
    max-height: calc(100vh - 10.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
#simCrudModal .modal-footer {
    flex: 0 0 auto;
}
#simCrudModal .form-row {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
#simCrudModal .form-row > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
}
#simCrudModal textarea {
    min-height: 100px;
    resize: vertical;
}
@media (min-width: 576px) {
    #simCrudModal .modal-dialog { margin: 1.75rem auto; width: calc(100% - 2rem); }
    #simCrudModal .modal-content { max-height: calc(100vh - 3.5rem); }
    #simCrudModal .modal-body { max-height: calc(100vh - 11rem); }
}
@media (max-width: 575.98px) {
    #simCrudModal .modal-dialog { margin: .5rem; width: calc(100% - 1rem); max-width: none; }
    #simCrudModal .modal-header,
    #simCrudModal .modal-footer { padding: .75rem 1rem; }
    #simCrudModal .modal-body { padding: 1rem; max-height: calc(100vh - 9.5rem); }
    #simCrudModal .modal-footer { flex-wrap: wrap; gap: .5rem; }
    #simCrudModal .modal-footer .btn { flex: 1 1 auto; min-width: 120px; }
    .sim-table-wrap + .sim-table-scroll-hint { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    #simCrudModal .modal-body { scroll-behavior: auto; }
}

/* Final UI normalization */
.sim-page{min-width:0;max-width:100%;}.sim-page>*{max-width:100%;}.sim-card{min-width:0;overflow:visible}.sim-card-body{min-width:0}.sim-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.sim-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.sim-form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}.sim-form-grid .col-span-12{grid-column:span 12}.sidenav .nav-link{min-height:2.7rem}#layoutSidenav_content{min-width:0}#layoutSidenav_content main{min-width:0}@media(max-width:767.98px){.sim-toolbar>*{width:100%}.sim-toolbar .btn{width:auto}.sim-card-body{padding:1rem}.sim-page{padding-left:1rem!important;padding-right:1rem!important}}


/* Final runtime layout hardening */
#layoutSidenav { min-width: 0; }
#layoutSidenav_nav { z-index: 1038; }
#layoutSidenav_content { overflow-x: clip; }
.sidenav-menu { min-height: 0; }
.sidenav-menu .nav-scroll { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sidenav-menu-heading { white-space: normal; }
.sidenav .nav-link { overflow: hidden; }
.sidenav .nav-link > span { min-width: 0; }
.sidenav .nav-link-icon { flex: 0 0 auto; }
@media (max-width: 991.98px) {
    #layoutSidenav_nav { z-index: 1040; }
    #layoutSidenav_content { position: relative; z-index: 1; }
}
body.modal-open { overflow: hidden; }
.modal-backdrop { z-index: 1040; }
#simCrudModal, #simDeleteModal { z-index: 1050; }
#simCrudModal .modal-dialog, #simDeleteModal .modal-dialog { position: relative; z-index: 1051; }
#simCrudModal .modal-content, #simDeleteModal .modal-content { position: relative; }
#simCrudModal .modal-body { overscroll-behavior: contain; }
.sim-table-wrap { contain: layout paint; }
@media (max-width: 575.98px) {
    #simCrudModal .modal-dialog { margin: .5rem auto; }
    #simCrudModal .modal-content { max-height: calc(100vh - 1rem); }
}


/* ==========================================================
   SIMPUS UI FIX PACK — layout/view collision prevention
   This layer intentionally overrides SB Admin Pro layout rules
   without changing controllers, routes, or CRUD semantics.
   ========================================================== */

/* Stable application shell */
html, body {
    min-height: 100%;
}
body.nav-fixed {
    overflow-x: hidden;
}
#layoutSidenav {
    min-height: 100vh;
    width: 100%;
}
#layoutSidenav #layoutSidenav_content {
    min-width: 0;
    min-height: 100vh;
    top: 0;
    padding-top: 3.625rem;
    box-sizing: border-box;
}
#layoutSidenav #layoutSidenav_content > main {
    min-width: 0;
    width: 100%;
}
#layoutSidenav #layoutSidenav_content > main > .sim-page {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
}
.sim-page > * {
    min-width: 0;
    max-width: 100%;
}

/* Keep page heading compact; SB Admin's 4rem vertical padding is too large
   for the application shell and makes content appear visually displaced. */
.sim-page-header .page-header-content {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}
.sim-page-header .page-header-title {
    line-height: 1.25;
    font-size: 1.55rem;
}
.sim-page-header .page-header-title .page-header-icon {
    flex: 0 0 auto;
}
.sim-page-header .small {
    line-height: 1.35;
}

/* Rows must not create horizontal overflow inside cards/page containers. */
.sim-page .row,
.sim-card .row,
.sim-filter .row {
    min-width: 0;
}
.sim-page .row > [class*="col-"],
.sim-card .row > [class*="col-"],
.sim-filter .row > [class*="col-"] {
    min-width: 0;
}

/* Cards/forms/tables remain inside their parent width. */
.sim-card {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}
.sim-card-body,
.sim-card-header,
.sim-card-footer {
    min-width: 0;
}
.sim-card-body > form {
    min-width: 0;
}
.sim-card-body .form-row {
    margin-left: -.5rem;
    margin-right: -.5rem;
}
.sim-card-body .form-row > [class*="col-"] {
    padding-left: .5rem;
    padding-right: .5rem;
    min-width: 0;
}
.sim-card .form-control,
.sim-card select,
.sim-card textarea,
.sim-card input {
    max-width: 100%;
}
.sim-card textarea {
    resize: vertical;
}

/* Tables: scrolling belongs to the table wrapper, never the whole page. */
.sim-table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}
.sim-table-wrap > .table-responsive {
    overflow-x: visible;
}
.sim-table-wrap table {
    margin-bottom: 0;
}

/* Long unwrapped tables should never push the application shell sideways. */
.sim-page table {
    max-width: 100%;
}
.sim-page .table-responsive {
    max-width: 100%;
}

/* Action groups should wrap rather than overlap. */
.sim-page .btn-toolbar,
.sim-page .btn-group,
.sim-page .sim-actions {
    max-width: 100%;
}
.sim-page .btn-toolbar {
    flex-wrap: wrap;
    gap: .35rem;
}
.sim-page .btn-group {
    flex-wrap: wrap;
}
.sim-page .btn-group > .btn {
    margin-bottom: .25rem;
}

/* Navigation must stay above content but below modals. */
.nav-fixed #layoutSidenav #layoutSidenav_nav {
    z-index: 1038;
}
.nav-fixed .topnav {
    z-index: 1039;
}
#layoutSidenav_content {
    position: relative;
    z-index: 1;
}

/* Modal is a viewport-level layer and must not be clipped by page containers. */
body > .modal-backdrop {
    z-index: 1040;
}
body > .modal {
    z-index: 1050;
}
#simCrudModal,
#simDeleteModal {
    z-index: 1050;
}
#simCrudModal .modal-dialog {
    max-height: calc(100vh - 1rem);
}
#simCrudModal .modal-content {
    min-width: 0;
}

/* Prevent dropdowns/notification panels from expanding the document width. */
.topnav .dropdown-menu {
    max-width: calc(100vw - 1.5rem);
}
.topnav .dropdown-menu .dropdown-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Footer participates in normal flex flow and never overlays content. */
#layoutSidenav_content > footer.footer-admin {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: auto;
}

/* Desktop sidebar/content relationship. */
@media (min-width: 992px) {
    #layoutSidenav #layoutSidenav_content {
        margin-left: 0;
        padding-left: 15rem;
    }
    .sidenav-toggled #layoutSidenav #layoutSidenav_content {
        margin-left: -15rem;
    }
}

/* Tablet/mobile: content uses the full viewport; sidebar becomes an overlay. */
@media (max-width: 991.98px) {
    #layoutSidenav #layoutSidenav_content {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }
    .sidenav-toggled #layoutSidenav #layoutSidenav_content {
        margin-left: 0;
    }
    #layoutSidenav #layoutSidenav_content > main > .sim-page {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .sim-page-header .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* Small screens: eliminate fixed-width UI collisions. */
@media (max-width: 575.98px) {
    #layoutSidenav #layoutSidenav_content > main > .sim-page {
        padding-top: .85rem;
        padding-bottom: 1.25rem;
    }
    .sim-page-header .page-header-content {
        padding-top: .9rem;
        padding-bottom: .9rem;
    }
    .sim-page-header .page-header-title {
        font-size: 1.2rem;
    }
    .sim-page-header .row > .col-auto:last-child {
        margin-top: .5rem;
    }
    .sim-card-header,
    .sim-card-footer {
        flex-wrap: wrap;
    }
    .sim-card-footer.d-flex {
        gap: .5rem;
    }
    .sim-card-footer.d-flex > * {
        max-width: 100%;
    }
    .sim-card-footer .btn {
        white-space: normal;
    }
}

/* Defensive rules for legacy inline/fixed content in CRUD views. */
.sim-page img,
.sim-card img {
    max-width: 100%;
    height: auto;
}
.sim-page pre,
.sim-card pre {
    max-width: 100%;
    overflow-x: auto;
}
.sim-page .text-break,
.sim-card .text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* FINAL LAYOUT SAFETY — v27
 * Keeps legacy/third-party rules from causing viewport overlap.
 */
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; }
body { min-width: 320px; overflow-x: hidden; }
#layoutSidenav, #layoutSidenav_content, #layoutSidenav_content > main, .sim-page { min-width: 0; }
#layoutSidenav_content > main { width: 100%; }
.sim-page .row > *, .sim-page .card, .sim-page .card-body, .sim-page .table-responsive { min-width: 0; }
.sim-page .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sim-page table { max-width: 100%; }
.sim-page .form-control, .sim-page .custom-select, .sim-page select, .sim-page textarea, .sim-page input { max-width: 100%; min-width: 0; }
.sim-page .btn-toolbar, .sim-page .btn-group { max-width: 100%; flex-wrap: wrap; }
.sim-page .modal-dialog { max-width: calc(100vw - 2rem); margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) {
  .sim-page .card-body { padding: 1rem; }
  .sim-page .table-responsive { margin-left: 0; margin-right: 0; }
  .sim-page .modal-dialog { max-width: calc(100vw - 1rem); margin: .5rem auto; }
}

/* Final modal/sidebar collision fix: Bootstrap modals must always sit above the sidenav. */
#layoutSidenav_nav { z-index: 1030 !important; }
@media (max-width: 991.98px) { #layoutSidenav_nav { z-index: 1030 !important; } }
body > .modal-backdrop { z-index: 1045 !important; }
body > .modal { z-index: 1055 !important; }
body > .modal .modal-dialog { z-index: 1056 !important; }
body > .modal .modal-content { position: relative; z-index: 1057 !important; }
body.modal-open #layoutSidenav_nav { pointer-events: none; }
body.modal-open .sidenav { pointer-events: none; }
@media (max-width: 991.98px) { body.modal-open #layoutSidenav_content { z-index: 1; } }