/*
 * PATCH SIPERPUS V1.4.5 - UI PROFESIONAL
 * Lapisan tampilan saja. Tidak mengubah logika aplikasi atau dokumen cetak.
 */

:root{
  --ui-primary:#1f5f8f;
  --ui-primary-dark:#16486d;
  --ui-primary-soft:#edf6fc;
  --ui-accent:#2f7fb5;
  --ui-navy:#16334b;
  --ui-text:#17212b;
  --ui-muted:#66788a;
  --ui-border:#dce5ed;
  --ui-border-strong:#c9d6e1;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f7f9fb;
  --ui-bg:#f2f5f8;
  --ui-success:#167047;
  --ui-warning:#a65d08;
  --ui-danger:#b43838;
  --ui-radius-sm:8px;
  --ui-radius:12px;
  --ui-radius-lg:16px;
  --ui-shadow-sm:0 2px 8px rgba(22,51,75,.055);
  --ui-shadow:0 10px 30px rgba(22,51,75,.075);
  --ui-font:"Segoe UI",Inter,Roboto,Arial,sans-serif;
}

/* =========================================================
   APLIKASI UTAMA
   ========================================================= */
body.app-body{
  background:var(--ui-bg)!important;
  color:var(--ui-text)!important;
  font-family:var(--ui-font)!important;
  font-size:14px!important;
  line-height:1.55!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.app-body button,
body.app-body input,
body.app-body select,
body.app-body textarea{
  font-family:inherit!important;
}
body.app-body a:focus-visible,
body.app-body button:focus-visible,
body.app-body input:focus-visible,
body.app-body select:focus-visible,
body.app-body textarea:focus-visible{
  outline:3px solid rgba(47,127,181,.20)!important;
  outline-offset:2px!important;
}

/* Struktur */
body.app-body .sidebar{
  width:268px!important;
  background:linear-gradient(180deg,#183c58 0%,#132f46 58%,#10283c 100%)!important;
  box-shadow:8px 0 28px rgba(15,35,52,.12)!important;
}
body.app-body .main-shell{
  margin-left:268px!important;
  width:calc(100% - 268px)!important;
}
body.app-body .sidebar-brand{
  min-height:78px!important;
  height:auto!important;
  padding:13px 18px!important;
  gap:12px!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}
body.app-body .sidebar-brand .brand-mark,
body.app-body .sidebar-brand-logo{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  flex:0 0 46px!important;
  border-radius:12px!important;
  padding:4px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(0,0,0,.12)!important;
}
body.app-body .sidebar-brand .brand-mark img,
body.app-body .sidebar-brand-logo img,
body.app-body .brand-mark img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
}
body.app-body .sidebar-brand strong{
  color:#fff!important;
  font-size:16px!important;
  line-height:1.25!important;
  font-weight:750!important;
  letter-spacing:.01em!important;
}
body.app-body .sidebar-brand small{
  color:#aac0d0!important;
  font-size:11px!important;
  line-height:1.35!important;
  margin-top:2px!important;
}
body.app-body .side-nav{
  padding:13px 11px 18px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
body.app-body .side-nav .nav-label{
  padding:14px 12px 7px!important;
  color:#8fa8ba!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
}
body.app-body .side-nav a{
  min-height:42px!important;
  margin:3px 0!important;
  padding:10px 12px!important;
  gap:12px!important;
  border-radius:10px!important;
  color:#d6e2eb!important;
  font-size:13.25px!important;
  line-height:1.3!important;
  font-weight:650!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}
body.app-body .side-nav a i{
  width:22px!important;
  min-width:22px!important;
  font-size:16px!important;
  line-height:1!important;
  color:#aac4d7!important;
}
body.app-body .side-nav a:hover{
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  transform:translateX(2px)!important;
}
body.app-body .side-nav a.active{
  background:linear-gradient(135deg,#2a719f,#3383b8)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(4,24,38,.22)!important;
}
body.app-body .side-nav a.active i{color:#fff!important}
body.app-body .sidebar-footer{
  padding:15px 18px!important;
  color:#a8bdcc!important;
  font-size:11px!important;
  line-height:1.5!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}

body.app-body .topbar{
  min-height:78px!important;
  height:auto!important;
  padding:11px 25px!important;
  gap:15px!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--ui-border)!important;
  box-shadow:0 3px 12px rgba(22,51,75,.035)!important;
}
body.app-body .topbar-title strong{
  color:var(--ui-navy)!important;
  font-size:18px!important;
  line-height:1.25!important;
  font-weight:750!important;
}
body.app-body .topbar-title small{
  color:var(--ui-muted)!important;
  font-size:12px!important;
  line-height:1.35!important;
  margin-top:2px!important;
}
body.app-body .topbar-actions{gap:10px!important}
body.app-body .icon-btn{
  width:40px!important;
  height:40px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#40566a!important;
  box-shadow:none!important;
  font-size:18px!important;
}
body.app-body .icon-btn:hover{
  background:var(--ui-primary-soft)!important;
  border-color:#c6ddeb!important;
  color:var(--ui-primary)!important;
}
body.app-body .user-button{
  min-height:46px!important;
  gap:10px!important;
  padding:6px 10px 6px 7px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
body.app-body .avatar{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  background:#e4f1f9!important;
  color:var(--ui-primary)!important;
  font-size:14px!important;
}
body.app-body .user-button>span:nth-child(2){max-width:190px!important}
body.app-body .user-button strong{
  color:var(--ui-text)!important;
  font-size:12.5px!important;
  line-height:1.3!important;
}
body.app-body .user-button small{
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.3!important;
}
body.app-body .dropdown{
  width:188px!important;
  top:calc(100% + 9px)!important;
  padding:7px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  box-shadow:0 18px 45px rgba(22,51,75,.15)!important;
}
body.app-body .dropdown a{
  padding:10px 11px!important;
  border-radius:8px!important;
  font-size:13px!important;
}

body.app-body .content{
  width:100%!important;
  max-width:1720px!important;
  margin:0 auto!important;
  padding:26px 28px 32px!important;
}
body.app-body .app-footer{
  padding:14px 28px!important;
  border-top:1px solid var(--ui-border)!important;
  background:#fff!important;
  color:var(--ui-muted)!important;
  font-size:11.5px!important;
  line-height:1.4!important;
}

/* Judul halaman */
body.app-body .page-head{
  align-items:center!important;
  gap:20px!important;
  margin-bottom:20px!important;
}
body.app-body .page-head>div:first-child{min-width:0!important}
body.app-body .page-head h1{
  margin:0!important;
  color:var(--ui-navy)!important;
  font-size:28px!important;
  line-height:1.18!important;
  font-weight:760!important;
  letter-spacing:-.025em!important;
}
body.app-body .page-head p{
  max-width:850px!important;
  margin:6px 0 0!important;
  color:var(--ui-muted)!important;
  font-size:13.5px!important;
  line-height:1.55!important;
}
body.app-body .page-actions{
  gap:9px!important;
  align-items:center!important;
  justify-content:flex-end!important;
}

/* Tombol */
body.app-body .btn{
  min-height:40px!important;
  padding:9px 14px!important;
  gap:7px!important;
  border-radius:9px!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:700!important;
  letter-spacing:0!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease!important;
}
body.app-body .btn:hover{transform:none!important;box-shadow:0 4px 12px rgba(22,51,75,.10)!important}
body.app-body .btn-primary{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important}
body.app-body .btn-primary:hover{background:var(--ui-primary-dark)!important;border-color:var(--ui-primary-dark)!important}
body.app-body .btn-light,
body.app-body .btn-outline{
  background:#fff!important;
  border-color:var(--ui-border-strong)!important;
  color:#365169!important;
}
body.app-body .btn-light:hover,
body.app-body .btn-outline:hover{background:#f7fafc!important;border-color:#adc2d2!important}
body.app-body .btn-success{background:var(--ui-success)!important;border-color:var(--ui-success)!important}
body.app-body .btn-danger{background:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
body.app-body .btn-warning{background:var(--ui-warning)!important;border-color:var(--ui-warning)!important}
body.app-body .btn-sm{
  min-height:33px!important;
  padding:7px 10px!important;
  border-radius:8px!important;
  font-size:11.75px!important;
}
body.app-body .btn-lg{min-height:46px!important;padding:11px 18px!important;font-size:14px!important}
body.app-body .table-actions{gap:6px!important;justify-content:flex-end!important;flex-wrap:wrap!important}

/* Kartu dan panel */
body.app-body .card{
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-radius-lg)!important;
  background:var(--ui-surface)!important;
  box-shadow:var(--ui-shadow-sm)!important;
  overflow:visible;
}
body.app-body .card-head{
  min-height:58px!important;
  padding:15px 18px!important;
  gap:14px!important;
  border-bottom:1px solid #e8edf2!important;
}
body.app-body .card-head h2,
body.app-body .card-head h3{
  margin:0!important;
  color:var(--ui-navy)!important;
  font-size:17px!important;
  line-height:1.3!important;
  font-weight:730!important;
}
body.app-body .card-head p{
  margin:4px 0 0!important;
  color:var(--ui-muted)!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}
body.app-body .card-body{padding:18px!important}
body.app-body .grid-2,
body.app-body .grid-3,
body.app-body .dashboard-grid,
body.app-body .loan-panel{gap:18px!important}
body.app-body .stats-grid{
  gap:14px!important;
  margin-bottom:18px!important;
}
body.app-body .stat-card{
  min-height:100px!important;
  padding:17px 18px!important;
  gap:14px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#fff,#fbfcfd)!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
body.app-body .stat-icon{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  border-radius:13px!important;
  background:var(--ui-primary-soft)!important;
  color:var(--ui-primary)!important;
  font-size:23px!important;
}
body.app-body .stat-card strong{
  color:var(--ui-navy)!important;
  font-size:25px!important;
  line-height:1.12!important;
  font-weight:760!important;
}
body.app-body .stat-card span{
  display:block!important;
  margin-top:4px!important;
  color:var(--ui-muted)!important;
  font-size:12px!important;
  line-height:1.35!important;
}

/* Formulir */
body.app-body .form-grid{gap:15px!important}
body.app-body .field label,
body.app-body .stack-form label,
body.app-body .distribution-form-grid label,
body.app-body .report-period-field label,
body.app-body .package-report-filter label{
  display:block!important;
  margin-bottom:7px!important;
  color:#32485d!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
body.app-body .field input,
body.app-body .field select,
body.app-body .field textarea,
body.app-body .stack-form input,
body.app-body .stack-form select,
body.app-body .stack-form textarea,
body.app-body .search-bar input,
body.app-body .search-bar select,
body.app-body .distribution-form-grid input,
body.app-body .distribution-form-grid select,
body.app-body .distribution-form-grid textarea,
body.app-body .package-return-table input,
body.app-body .package-return-table select,
body.app-body .package-resolution-form input,
body.app-body .package-resolution-form select,
body.app-body .report-period-field input,
body.app-body .report-period-field select,
body.app-body .package-report-filter input,
body.app-body .package-report-filter select{
  min-height:42px!important;
  padding:9px 12px!important;
  border:1px solid var(--ui-border-strong)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:var(--ui-text)!important;
  font-size:13px!important;
  line-height:1.35!important;
  outline:none!important;
  box-shadow:none!important;
}
body.app-body textarea{min-height:96px!important;resize:vertical!important}
body.app-body input::placeholder,
body.app-body textarea::placeholder{color:#98a6b3!important;opacity:1!important}
body.app-body .field input:focus,
body.app-body .field select:focus,
body.app-body .field textarea:focus,
body.app-body .stack-form input:focus,
body.app-body .stack-form select:focus,
body.app-body .stack-form textarea:focus,
body.app-body .search-bar input:focus,
body.app-body .search-bar select:focus,
body.app-body .distribution-form-grid input:focus,
body.app-body .distribution-form-grid select:focus,
body.app-body .distribution-form-grid textarea:focus{
  border-color:#6da8cc!important;
  box-shadow:0 0 0 3px rgba(47,127,181,.12)!important;
}
body.app-body .field small,
body.app-body .settings-card-note,
body.app-body .pb-inline-help,
body.app-body .package-period-note,
body.app-body .distribution-note,
body.app-body .report-period-note{
  display:block!important;
  margin-top:6px!important;
  color:var(--ui-muted)!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
body.app-body .form-actions{
  gap:9px!important;
  margin-top:20px!important;
  padding-top:18px!important;
  border-top:1px solid #e7edf2!important;
}
body.app-body .search-bar{
  gap:9px!important;
  align-items:center!important;
}
body.app-body .search-bar input{min-width:210px!important}
body.app-body .search-bar select{min-width:150px!important}

/* Tabel */
body.app-body .table-wrap{
  overflow:auto!important;
  border-radius:0 0 var(--ui-radius-lg) var(--ui-radius-lg)!important;
  scrollbar-width:thin;
  scrollbar-color:#c5d2dc transparent;
}
body.app-body .data-table{
  color:var(--ui-text)!important;
  font-size:13px!important;
}
body.app-body .data-table th{
  padding:12px 13px!important;
  background:#f5f8fa!important;
  border-bottom:1px solid #dfe7ed!important;
  color:#53677a!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:750!important;
  letter-spacing:.055em!important;
}
body.app-body .data-table td{
  padding:12px 13px!important;
  border-bottom:1px solid #edf1f4!important;
  color:#263746!important;
  font-size:12.75px!important;
  line-height:1.45!important;
}
body.app-body .data-table tbody tr:last-child td{border-bottom:0!important}
body.app-body .data-table tbody tr:hover td{background:#fafcfd!important}
body.app-body .data-table td strong{color:#1c3041!important;font-weight:700!important}
body.app-body .data-table td small{
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.45!important;
}
body.app-body .thumb,
body.app-body .thumb-placeholder{
  width:44px!important;
  height:58px!important;
  border-radius:8px!important;
  flex:0 0 auto!important;
}
body.app-body .thumb{object-fit:cover!important}
body.app-body .book-title-cell,
body.app-body .member-name-cell{gap:12px!important}
body.app-body .book-title-cell strong,
body.app-body .member-name-cell strong{font-size:13px!important;line-height:1.4!important}
body.app-body .stock-number{font-size:15px!important}
body.app-body .list-page-footer,
body.app-body .status-footer{
  padding:15px 18px!important;
  border-top:1px solid #edf1f4!important;
}
body.app-body .list-page-info,
body.app-body .status-footer-info{
  color:var(--ui-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* Status, notifikasi, pagination */
body.app-body .badge{
  min-height:25px!important;
  padding:4px 9px!important;
  border-radius:999px!important;
  font-size:11px!important;
  line-height:1.2!important;
  font-weight:700!important;
}
body.app-body .badge-success{background:#e4f5ec!important;color:#17613f!important}
body.app-body .badge-danger{background:#fbe8e8!important;color:#9f3030!important}
body.app-body .badge-warning{background:#fff1dc!important;color:#8c5109!important}
body.app-body .badge-info{background:#e5f1f9!important;color:#1d628f!important}
body.app-body .badge-muted{background:#edf1f4!important;color:#566a7b!important}
body.app-body .alert{
  padding:13px 15px!important;
  margin-bottom:16px!important;
  border-radius:10px!important;
  font-size:13px!important;
  line-height:1.5!important;
}
body.app-body .pagination{
  gap:6px!important;
  margin-top:0!important;
  flex-wrap:wrap!important;
}
body.app-body .pagination a{
  min-width:35px!important;
  height:35px!important;
  padding:0 9px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#4d6172!important;
  font-size:12px!important;
  font-weight:650!important;
}
body.app-body .pagination a:hover{border-color:#aac4d5!important;background:#f7fafc!important}
body.app-body .pagination a.active{border-color:var(--ui-primary)!important;background:var(--ui-primary)!important;color:#fff!important}
body.app-body .pagination-ellipsis{height:35px!important;font-size:12px!important}
body.app-body .list-summary-chip{
  min-height:30px!important;
  padding:6px 10px!important;
  font-size:11.5px!important;
  background:var(--ui-primary-soft)!important;
  color:var(--ui-primary)!important;
}

/* Daftar, aktivitas, chart, kosong */
body.app-body .list-clean li{
  padding:12px 0!important;
  gap:15px!important;
  font-size:13px!important;
  line-height:1.45!important;
}
body.app-body .list-clean small{display:block!important;margin-top:3px!important;font-size:11px!important}
body.app-body .activity-item{
  gap:12px!important;
  padding:12px 0!important;
}
body.app-body .activity-item strong{font-size:12.5px!important;line-height:1.4!important}
body.app-body .activity-item p{font-size:11.5px!important;line-height:1.5!important}
body.app-body .activity-dot{margin-top:6px!important}
body.app-body .chart-bars{height:210px!important;gap:11px!important;padding:24px 4px 0!important}
body.app-body .chart-bar{border-radius:7px 7px 2px 2px!important;background:linear-gradient(180deg,#4b96c6,#256d9d)!important}
body.app-body .chart-bar span,
body.app-body .chart-bar b{font-size:10.5px!important}
body.app-body .empty-state{
  padding:42px 22px!important;
  color:var(--ui-muted)!important;
}
body.app-body .empty-state span{font-size:36px!important}
body.app-body .empty-state h3{margin:10px 0 4px!important;color:var(--ui-navy)!important;font-size:17px!important}
body.app-body .empty-state p{margin:4px 0!important;font-size:12.5px!important;line-height:1.5!important}

/* Tab, laporan, QR, modal */
body.app-body .section-tabs{
  gap:8px!important;
  margin-bottom:18px!important;
  padding-bottom:2px!important;
}
body.app-body .section-tabs a{
  min-height:40px!important;
  padding:9px 14px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#506578!important;
  font-size:12.5px!important;
  font-weight:700!important;
}
body.app-body .section-tabs a.active{background:var(--ui-primary)!important;border-color:var(--ui-primary)!important;color:#fff!important}
body.app-body .report-links{gap:15px!important}
body.app-body .report-card{
  padding:19px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:14px!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
body.app-body .report-card h3{font-size:16px!important;line-height:1.35!important}
body.app-body .report-card p{font-size:12px!important;line-height:1.55!important}
body.app-body .report-card span{font-size:26px!important}
body.app-body .qr-code-box{
  border:1px solid var(--ui-border-strong)!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 2px 6px rgba(22,51,75,.05)!important;
}
body.app-body .qr-code-box img,
body.app-body .qr-code-box canvas{object-fit:contain!important}
body.app-body .qr-scanner-help,
body.app-body .qr-scanner-status,
body.app-body .qr-file-button{font-size:12px!important;line-height:1.5!important}
body.app-body .modal-dialog{
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:16px!important;
  padding:25px!important;
  box-shadow:0 26px 75px rgba(15,35,52,.28)!important;
}
body.app-body .modal-dialog h2{font-size:21px!important;line-height:1.3!important}
body.app-body .modal-dialog>p{font-size:13px!important;line-height:1.55!important}
body.app-body .modal-close{width:34px!important;height:34px!important;font-size:20px!important}

/* Pengaturan dan logo */
body.app-body .settings-identity-form{gap:18px!important}
body.app-body .logo-setting-grid{gap:18px!important}
body.app-body .logo-upload-card{
  grid-template-columns:130px minmax(0,1fr)!important;
  gap:18px!important;
  padding:18px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:14px!important;
  background:#fbfcfd!important;
}
body.app-body .logo-preview-box{
  width:130px!important;
  height:130px!important;
  padding:10px!important;
  border:1px dashed #aec2d1!important;
  border-radius:14px!important;
  background:#fff!important;
  overflow:hidden!important;
}
body.app-body .logo-preview-box img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
}
body.app-body .school-logo-preview{border-radius:14px!important}
body.app-body .logo-upload-copy strong{font-size:15px!important;line-height:1.35!important}
body.app-body .logo-upload-copy p{font-size:12px!important;line-height:1.55!important}
body.app-body .logo-upload-copy small{font-size:11px!important;line-height:1.45!important}
body.app-body .file-picker{
  min-height:38px!important;
  padding:8px 12px!important;
  border:1px solid #c6dce9!important;
  border-radius:8px!important;
  background:var(--ui-primary-soft)!important;
  color:var(--ui-primary)!important;
  font-size:12px!important;
}

/* Buku Paket dan distribusi */
body.app-body .pb-page,
body.app-body .distribution-workspace,
body.app-body .package-report-grid{gap:18px!important}
body.app-body .pb-guide,
body.app-body .distribution-steps{gap:11px!important}
body.app-body .pb-guide-step,
body.app-body .distribution-step{
  padding:14px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.app-body .pb-guide-number,
body.app-body .distribution-step b{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  border-radius:9px!important;
  background:var(--ui-primary)!important;
  font-size:12px!important;
}
body.app-body .pb-guide-step strong,
body.app-body .distribution-step strong,
body.app-body .distribution-section-title strong{
  color:var(--ui-navy)!important;
  font-size:13px!important;
  line-height:1.35!important;
}
body.app-body .pb-guide-step small,
body.app-body .distribution-step small,
body.app-body .distribution-section-title small{
  color:var(--ui-muted)!important;
  font-size:11px!important;
  line-height:1.45!important;
}
body.app-body .pb-sidebar,
body.app-body .pb-main,
body.app-body .pb-form-card{
  border-color:var(--ui-border)!important;
  border-radius:14px!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
body.app-body .pb-panel-title,
body.app-body .pb-form-heading,
body.app-body .pb-section-head{font-size:15px!important;line-height:1.35!important;color:var(--ui-navy)!important}
body.app-body .pb-package{padding:12px!important;border-radius:10px!important}
body.app-body .pb-package strong{font-size:13px!important;line-height:1.4!important}
body.app-body .pb-package small{font-size:11px!important;line-height:1.45!important}
body.app-body .pb-stat,
body.app-body .distribution-summary-card{
  padding:15px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  background:#fff!important;
}
body.app-body .pb-stat small,
body.app-body .distribution-summary-card small{font-size:10.5px!important;line-height:1.35!important}
body.app-body .pb-stat strong,
body.app-body .distribution-summary-card strong{font-size:23px!important;line-height:1.2!important}
body.app-body .distribution-section{
  padding:15px!important;
  border:1px solid var(--ui-border)!important;
  border-radius:12px!important;
  background:#f8fafb!important;
}
body.app-body .distribution-section-title b{width:28px!important;height:28px!important;border-radius:8px!important}
body.app-body .package-meta-grid div{
  padding:13px!important;
  border-color:var(--ui-border)!important;
  border-radius:10px!important;
  background:#f8fafb!important;
}
body.app-body .package-meta-grid small{font-size:11px!important}
body.app-body .package-meta-grid strong{font-size:13px!important}

/* Halaman publik: landing */
body.landing-body-modern{
  background:#f7fafc!important;
  color:var(--ui-text)!important;
  font-family:var(--ui-font)!important;
  font-size:14px!important;
  line-height:1.55!important;
  -webkit-font-smoothing:antialiased;
}
body.landing-body-modern .landing-modern-nav{
  min-height:78px!important;
  height:auto!important;
  padding:10px max(4.5vw,24px)!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--ui-border)!important;
}
body.landing-body-modern .landing-modern-logo{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
  padding:5px!important;
  border:1px solid #d7e4ed!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:var(--ui-shadow-sm)!important;
  overflow:hidden!important;
}
body.landing-body-modern .landing-modern-logo img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:auto!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
}
body.landing-body-modern .landing-modern-brand-copy strong{font-size:17px!important;line-height:1.25!important}
body.landing-body-modern .landing-modern-brand-copy small{font-size:11.5px!important;line-height:1.35!important}
body.landing-body-modern .landing-modern-links{gap:22px!important}
body.landing-body-modern .landing-modern-links>a{font-size:13px!important;font-weight:650!important}
body.landing-body-modern .landing-login-button,
body.landing-body-modern .landing-modern-primary,
body.landing-body-modern .landing-modern-secondary{
  min-height:43px!important;
  padding:9px 16px!important;
  border-radius:9px!important;
  font-size:13px!important;
  font-weight:700!important;
}
body.landing-body-modern .landing-modern-hero{
  max-width:1280px!important;
  padding:80px 42px 66px!important;
  gap:64px!important;
}
body.landing-body-modern .landing-modern-copy h1{
  max-width:720px!important;
  margin:17px 0 20px!important;
  color:var(--ui-navy)!important;
  font-size:clamp(40px,4.8vw,62px)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  font-weight:780!important;
}
body.landing-body-modern .landing-modern-copy>p{font-size:16px!important;line-height:1.72!important;color:var(--ui-muted)!important}
body.landing-body-modern .landing-modern-badge{font-size:10.5px!important}
body.landing-body-modern .landing-modern-slogan{font-size:12px!important;line-height:1.45!important}
body.landing-body-modern .landing-window,
body.landing-body-modern .landing-feature-card,
body.landing-body-modern .landing-floating-card{
  border-color:var(--ui-border)!important;
  box-shadow:var(--ui-shadow)!important;
}
body.landing-body-modern .landing-stat strong{font-size:27px!important}
body.landing-body-modern .landing-stat span{font-size:11.5px!important}
body.landing-body-modern .landing-section-head h2,
body.landing-body-modern .landing-modern-cta h2{font-size:32px!important;line-height:1.22!important}
body.landing-body-modern .landing-section-head span{font-size:11px!important}
body.landing-body-modern .landing-feature-card h3{font-size:16px!important;line-height:1.35!important}
body.landing-body-modern .landing-feature-card p{font-size:12.5px!important;line-height:1.6!important}
body.landing-body-modern .landing-modern-cta p{font-size:13px!important;line-height:1.55!important}
body.landing-body-modern .landing-modern-footer{font-size:11.5px!important;line-height:1.45!important}
body.landing-body-modern .modal-dialog h2{font-size:21px!important}
body.landing-body-modern .modal-dialog>p,
body.landing-body-modern .stack-form label,
body.landing-body-modern .stack-form input,
body.landing-body-modern .btn{font-size:13px!important}

/* Katalog publik */
body.landing-body{
  background:#f4f7f9!important;
  color:var(--ui-text)!important;
  font-family:var(--ui-font)!important;
  font-size:14px!important;
  line-height:1.55!important;
}
body.landing-body .landing-nav{
  min-height:76px!important;
  height:auto!important;
  padding:10px max(4.5vw,24px)!important;
  background:rgba(255,255,255,.95)!important;
  border-bottom:1px solid var(--ui-border)!important;
}
body.landing-body .brand-mark{
  width:48px!important;
  height:48px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
body.landing-body .brand strong{font-size:16px!important}
body.landing-body .brand small{font-size:11px!important}
body.landing-body .catalog-section{padding:44px max(4.5vw,24px) 64px!important}
body.landing-body .catalog-section h1{font-size:32px!important;line-height:1.25!important;color:var(--ui-navy)!important}
body.landing-body .catalog-section>p{font-size:13.5px!important;color:var(--ui-muted)!important}
body.landing-body .catalog-grid{gap:18px!important}
body.landing-body .book-card{
  border:1px solid var(--ui-border)!important;
  border-radius:14px!important;
  box-shadow:var(--ui-shadow-sm)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
body.landing-body .book-card:hover{transform:translateY(-2px)!important;box-shadow:var(--ui-shadow)!important}
body.landing-body .book-cover{height:220px!important}
body.landing-body .book-cover img{object-fit:cover!important}
body.landing-body .book-info{padding:16px!important}
body.landing-body .book-info h3{font-size:15px!important;line-height:1.4!important}
body.landing-body .book-info p{font-size:11.75px!important;line-height:1.5!important}
body.landing-body .search-bar input,
body.landing-body .search-bar select{
  min-height:42px!important;
  padding:9px 12px!important;
  border:1px solid var(--ui-border-strong)!important;
  border-radius:9px!important;
  font-size:13px!important;
}
body.landing-body .btn{min-height:40px!important;padding:9px 14px!important;border-radius:9px!important;font-size:13px!important}
body.landing-body .badge{font-size:11px!important;padding:5px 9px!important}

/* Kiosk kunjungan */
body.visit-kiosk-body{
  font-family:var(--ui-font)!important;
  font-size:14px!important;
  line-height:1.5!important;
  -webkit-font-smoothing:antialiased;
}
body.visit-kiosk-body .visit-kiosk-brand-mark{
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.visit-kiosk-body .visit-kiosk-brand-mark img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
body.visit-kiosk-body .visit-kiosk-brand-text strong{font-size:16px!important}
body.visit-kiosk-body .visit-kiosk-brand-text small{font-size:11px!important}
body.visit-kiosk-body .visit-kiosk-intro h1{font-size:clamp(32px,4vw,46px)!important;line-height:1.1!important}
body.visit-kiosk-body .visit-kiosk-intro p{font-size:14px!important;line-height:1.65!important}
body.visit-kiosk-body .visit-kiosk-counter span,
body.visit-kiosk-body .visit-kiosk-step span,
body.visit-kiosk-body .visit-kiosk-result p,
body.visit-kiosk-body .visit-kiosk-result span,
body.visit-kiosk-body .visit-purpose-fieldset legend,
body.visit-kiosk-body .visit-kiosk-scan-title,
body.visit-kiosk-body .visit-kiosk-input-group label,
body.visit-kiosk-body .visit-kiosk-status{font-size:11.5px!important;line-height:1.45!important}
body.visit-kiosk-body .visit-purpose-option span{font-size:11.5px!important}
body.visit-kiosk-body .visit-kiosk-card-head h2{font-size:19px!important}
body.visit-kiosk-body .visit-kiosk-input-group input{font-size:14px!important}
body.visit-kiosk-body .visit-kiosk-buttons .btn{font-size:12.5px!important}
body.visit-kiosk-body .visit-kiosk-footer{font-size:10.5px!important}
body.visit-kiosk-body .visit-kiosk-modal-dialog h2{font-size:23px!important}
body.visit-kiosk-body .visit-kiosk-modal-dialog>p{font-size:13px!important}

/* Responsif */
@media(max-width:1180px){
  body.app-body .sidebar{width:250px!important}
  body.app-body .main-shell{margin-left:250px!important;width:calc(100% - 250px)!important}
  body.app-body .content{padding:23px 22px 30px!important}
  body.app-body .page-head h1{font-size:26px!important}
  body.app-body .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  body.app-body .sidebar{width:280px!important;transform:translateX(-100%)!important}
  body.app-body .sidebar.open{transform:translateX(0)!important}
  body.app-body .main-shell{margin-left:0!important;width:100%!important}
  body.app-body .sidebar-close{display:block!important}
  body.app-body .content{padding:20px 18px 28px!important}
  body.app-body .topbar{padding:10px 16px!important}
  body.app-body .logo-upload-card{grid-template-columns:108px minmax(0,1fr)!important}
  body.app-body .logo-preview-box{width:108px!important;height:108px!important}
  body.landing-body-modern .landing-modern-hero{padding:62px 28px 54px!important;gap:42px!important}
}
@media(max-width:720px){
  body.app-body .topbar-title small{display:block!important}
  body.app-body .user-button>span:nth-child(2){display:none!important}
  body.app-body .page-head{align-items:flex-start!important;flex-direction:column!important}
  body.app-body .page-head h1{font-size:24px!important}
  body.app-body .page-head p{font-size:12.75px!important}
  body.app-body .page-actions{width:100%!important;justify-content:flex-start!important}
  body.app-body .content{padding:17px 13px 24px!important}
  body.app-body .stats-grid,
  body.app-body .grid-2,
  body.app-body .grid-3{grid-template-columns:1fr!important}
  body.app-body .card-head{align-items:flex-start!important;flex-direction:column!important}
  body.app-body .card-head>.search-bar{width:100%!important}
  body.app-body .search-bar{width:100%!important}
  body.app-body .search-bar input,
  body.app-body .search-bar select,
  body.app-body .search-bar .btn{width:100%!important;min-width:0!important}
  body.app-body .list-page-footer,
  body.app-body .status-footer{align-items:flex-start!important;flex-direction:column!important}
  body.app-body .pagination{justify-content:flex-start!important}
  body.app-body .form-actions{align-items:stretch!important;flex-direction:column-reverse!important}
  body.app-body .form-actions .btn{width:100%!important}
  body.app-body .logo-upload-card{grid-template-columns:1fr!important;text-align:center!important}
  body.app-body .logo-preview-box{margin:auto!important}
  body.app-body .file-picker{margin:auto!important}
  body.app-body .app-footer{gap:4px!important;flex-direction:column!important}
  body.app-body .data-table th{font-size:10.5px!important}
  body.app-body .data-table td{font-size:12px!important}
  body.landing-body-modern .landing-modern-nav{padding:10px 16px!important}
  body.landing-body-modern .landing-modern-brand-copy small{display:none!important}
  body.landing-body-modern .landing-modern-hero{padding:48px 20px 44px!important}
  body.landing-body-modern .landing-modern-copy h1{font-size:38px!important}
  body.landing-body-modern .landing-modern-copy>p{font-size:14px!important}
}
@media(max-width:520px){
  body.app-body .topbar-title strong{font-size:16px!important}
  body.app-body .topbar-title small{font-size:10.5px!important}
  body.app-body .stats-grid{grid-template-columns:1fr!important}
  body.app-body .stat-card{min-height:88px!important}
  body.app-body .stat-card strong{font-size:23px!important}
  body.app-body .btn{width:auto!important}
  body.app-body .page-actions .btn{flex:1 1 auto!important}
  body.landing-body-modern .landing-modern-logo{width:44px!important;height:44px!important;min-width:44px!important}
  body.landing-body-modern .landing-modern-copy h1{font-size:32px!important}
}

/* Dokumen cetak tidak memuat stylesheet ini. Aturan berikut menjaga cetak layar aplikasi tetap sederhana. */
@media print{
  body.app-body{background:#fff!important;font-size:11px!important}
}