/*
 * modern-2026.css
 * Tema global: menimpa tampilan bawaan PHPRad/Bootstrap 4 tanpa mengubah struktur HTML.
 * Dimuat PALING AKHIR di layout (setelah custom-style.css, bootstrap-editable.css).
 * Untuk kembali ke tampilan lama: hapus baris page_css('modern-2026.css') di layout.
 */

:root{
  --m-brand:#1f55c9;
  --m-brand-dark:#173f9a;
  --m-brand-soft:#eaf0ff;
  --m-ink:#1d2733;
  --m-text:#3a4657;
  --m-muted:#69768a;
  --m-line:#e4e8ef;
  --m-line-strong:#d3d9e3;
  --m-canvas:#f3f5f9;
  --m-surface:#fff;
  --m-success:#146c43;
  --m-success-soft:#e1f5ea;
  --m-warning:#8a5300;
  --m-warning-soft:#fff0d1;
  --m-danger:#b42318;
  --m-danger-soft:#fde7e7;
  --m-info:#0b6a8f;
  --m-info-soft:#dff2fa;
  --m-radius:14px;
  --m-radius-sm:8px;
  --m-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --m-shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.16);
  --m-shadow-lg:0 24px 60px -20px rgba(16,24,40,.35);
  --m-ring:0 0 0 3px rgba(31,85,201,.28);
  --m-font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
}

/* ---------- Dasar ---------- */
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
body{
  font-family:var(--m-font);
  font-size:.92rem;
  line-height:1.55;
  color:var(--m-text);
  background:var(--m-canvas);
  padding-top:58px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ color:var(--m-ink); font-weight:650; letter-spacing:-.012em; }
h4,.h4,.record-title{ font-size:1.3rem; }
a{ color:var(--m-brand); }
a:hover{ color:var(--m-brand-dark); }
hr{ border-top-color:var(--m-line); }
::selection{ background:rgba(31,85,201,.18); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{
  outline:none; box-shadow:var(--m-ring);
}
.text-muted{ color:var(--m-muted) !important; }
.text-primary{ color:var(--m-brand) !important; }
.bg-primary{ background-color:var(--m-brand) !important; }
.border-primary{ border-color:var(--m-brand) !important; }
.bg-light{ background-color:var(--m-surface) !important; }
.rounded{ border-radius:var(--m-radius-sm) !important; }
#page-content{ min-height:calc(100vh - 58px - 56px); }

/* ---------- Navbar atas ---------- */
#topbar.navbar{
  background:#111a2b !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 6px 20px -12px rgba(8,14,28,.6);
  padding-top:.3rem; padding-bottom:.3rem; min-height:54px;
}
#topbar .navbar-brand{ color:#fff; font-weight:650; letter-spacing:-.01em; }
#topbar .navbar-brand:hover{ color:#fff; text-decoration:none; }
#topbar .navbar-nav .nav-link{ color:rgba(255,255,255,.74); border-radius:var(--m-radius-sm); transition:background .15s,color .15s; }
#topbar .navbar-nav .nav-link:hover,
#topbar .navbar-nav .nav-link:focus,
#topbar .navbar-nav .show > .nav-link,
#topbar .navbar-nav .active > .nav-link{ color:#fff; background:rgba(255,255,255,.1); }
#topbar .navbar-toggler{ border-color:rgba(255,255,255,.2); border-radius:var(--m-radius-sm); }
#topbar .avatar-icon{ display:inline-flex; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.14); align-items:center; justify-content:center; margin-right:6px; }
@media (min-width:768px){
  #topbar .nav-link{ padding:.5rem .75rem; }
}

/* ---------- Dropdown & popover ---------- */
.dropdown-menu{
  border:1px solid var(--m-line); border-radius:var(--m-radius);
  box-shadow:var(--m-shadow); padding:.4rem; margin-top:.35rem;
}
.dropdown-item{ border-radius:var(--m-radius-sm); padding:.5rem .8rem; color:var(--m-text); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
.dropdown-item.active,.dropdown-item:active{ background:var(--m-brand); color:#fff; }
.dropdown-divider{ border-top-color:var(--m-line); }
.popover{ border:1px solid var(--m-line); border-radius:var(--m-radius); box-shadow:var(--m-shadow); }
.popover-header{ background:var(--m-surface); border-bottom:1px solid var(--m-line); font-weight:600; border-radius:var(--m-radius) var(--m-radius) 0 0; }
.tooltip-inner{ background:#111a2b; border-radius:var(--m-radius-sm); padding:.35rem .6rem; }

/* ---------- Header halaman (list/view/add/edit): kartu putih, sama di semua halaman ---------- */
section.page > .bg-light.p-3,
section.page > .bg-light{
  background:transparent !important;
  border:0; box-shadow:none;
  padding:16px 15px 0 !important;
}
section.page > .bg-light > .container,
section.page > .bg-light > .container-fluid{
  background:var(--m-surface);
  border:1px solid var(--m-line);
  border-radius:var(--m-radius);
  box-shadow:var(--m-shadow-sm);
  padding:16px 20px;
  width:100%;
}
section.page > .bg-light > .container{ max-width:1140px; }
section.page > .bg-light .row{ align-items:center; row-gap:8px; }
.page-header-breadcrumbs .breadcrumb{ background:var(--m-canvas); }

/* Footer list (export + paginasi): kartu terpisah di bawah tabel */
.page-content .border-top.mt-2{
  background:var(--m-surface);
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-radius);
  box-shadow:var(--m-shadow-sm);
  margin-top:12px !important;
}

/* ---------- Kartu ---------- */
.card{ border:1px solid var(--m-line); border-radius:var(--m-radius); box-shadow:var(--m-shadow-sm); background:var(--m-surface); overflow:hidden; }
.card-header{ background:var(--m-surface); border-bottom:1px solid var(--m-line); font-weight:600; color:var(--m-ink); padding:.85rem 1.1rem; }
.card-footer{ background:var(--m-canvas); border-top:1px solid var(--m-line); }
.card-body{ padding:1.1rem; }
.page-content.bg-white, .bg-white.p-3.page-content{ border-radius:var(--m-radius); }
.login-card{ border:1px solid var(--m-line); border-radius:16px !important; box-shadow:var(--m-shadow) !important; background:var(--m-surface) !important; }
body.index-index, body.index-register, body.passwordmanager-index{
  background:radial-gradient(1200px 500px at 50% -10%, #e6edff 0%, rgba(230,237,255,0) 70%), var(--m-canvas);
}

/* ---------- Tabel ---------- */
.table{ color:var(--m-text); background:var(--m-surface); }
.table th,.table td{ border-top:1px solid #edf0f5; padding:.7rem .85rem; vertical-align:middle; }
.table thead th{
  background:#f6f8fb; color:var(--m-muted); font-weight:600; font-size:.8rem;
  border-top:0; border-bottom:1px solid var(--m-line); white-space:nowrap;
}
.table-sm th,.table-sm td{ padding:.55rem .75rem; }
.table-striped tbody tr:nth-of-type(odd){ background-color:#fafbfd; }
.table-hover tbody tr:hover,.page-data tr:hover{ background-color:#f4f7ff; }
.table-bordered,.table-bordered th,.table-bordered td{ border-color:#edf0f5; }
.table tbody th{ font-weight:500; }
.table-responsive:not(.pr-table-wrap){
  background:var(--m-surface); border:1px solid var(--m-line); border-radius:var(--m-radius);
  box-shadow:var(--m-shadow-sm);
}
.table-responsive:not(.pr-table-wrap) > .table{ margin-bottom:0; }
.table-responsive:not(.pr-table-wrap) > .table thead th:first-child{ border-top-left-radius:var(--m-radius); }
.table-responsive:not(.pr-table-wrap) > .table thead th:last-child{ border-top-right-radius:var(--m-radius); }
.table-responsive{ scrollbar-width:thin; scrollbar-color:#c4ccd9 transparent; }
.table-responsive::-webkit-scrollbar{ height:10px; width:10px; }
.table-responsive::-webkit-scrollbar-thumb{ background:#c4ccd9; border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
.td-btn{ white-space:nowrap; }
.td-btn .btn{ margin-left:2px; }
.page-content .border-top{ border-top-color:var(--m-line) !important; }

/* ---------- Tombol ---------- */
.btn{
  border-radius:10px; font-weight:600; padding:.46rem .95rem;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .05s;
}
.btn:active{ transform:translateY(1px); }
.btn:focus,.btn.focus{ box-shadow:var(--m-ring); }
.btn-sm{ border-radius:var(--m-radius-sm); padding:.28rem .65rem; font-size:.8rem; }
.btn-lg{ border-radius:12px; padding:.65rem 1.3rem; }
.btn-primary{ background:var(--m-brand); border-color:var(--m-brand); color:#fff; box-shadow:0 1px 2px rgba(23,63,154,.25); }
.btn-primary:hover,.btn-primary:focus{ background:var(--m-brand-dark); border-color:var(--m-brand-dark); color:#fff; }
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show > .btn-primary.dropdown-toggle{ background:#12327d; border-color:#12327d; }
.btn-secondary{ background:var(--m-surface); border:1px solid var(--m-line-strong); color:var(--m-ink); }
.btn-secondary:hover{ background:#f1f4f9; border-color:#b9c2d1; color:var(--m-ink); }
.btn-light{ background:var(--m-surface); border:1px solid var(--m-line-strong); color:var(--m-text); }
.btn-light:hover{ background:#f1f4f9; border-color:#b9c2d1; color:var(--m-ink); }
.btn-success{ background:#157347; border-color:#157347; }
.btn-success:hover{ background:#0f5c38; border-color:#0f5c38; }
.btn-info{ background:#0b79a3; border-color:#0b79a3; color:#fff; }
.btn-info:hover{ background:#095f80; border-color:#095f80; color:#fff; }
.btn-warning{ background:#f2a516; border-color:#f2a516; color:#3d2800; }
.btn-warning:hover{ background:#d98f0a; border-color:#d98f0a; color:#2d1d00; }
.btn-danger{ background:#d92d20; border-color:#d92d20; }
.btn-danger:hover{ background:#b42318; border-color:#b42318; }
.btn-outline-primary{ color:var(--m-brand); border-color:var(--m-brand); }
.btn-outline-primary:hover{ background:var(--m-brand); border-color:var(--m-brand); color:#fff; }
.btn-dark{ background:#111a2b; border-color:#111a2b; }
.btn-link{ font-weight:600; color:var(--m-brand); }
.btn.disabled,.btn:disabled{ opacity:.55; }
.btn .fa{ line-height:1; }

/* ---------- Form ---------- */
.form-control,.custom-select,.input-group-text,.selectize-input,.flatpickr-input{
  border:1px solid var(--m-line-strong); border-radius:10px; color:var(--m-ink); background-color:var(--m-surface);
}
.form-control{ padding:.5rem .8rem; min-height:calc(2.5rem + 2px); transition:border-color .15s,box-shadow .15s; }
.form-control-sm,.input-group-sm > .form-control{ min-height:calc(1.9rem + 2px); padding:.25rem .6rem; border-radius:var(--m-radius-sm); }
select.form-control:not([size]):not([multiple]),.custom-select{ height:calc(2.5rem + 2px); }
select.form-control-sm:not([size]):not([multiple]){ height:calc(1.9rem + 2px); }
textarea.form-control{ min-height:6rem; }
.form-control::placeholder{ color:#98a3b5; }
.form-control:focus,.custom-select:focus,.selectize-input.focus{ border-color:var(--m-brand); box-shadow:var(--m-ring); background:#fff; }
.form-control:disabled,.form-control[readonly]{ background:#f3f5f9; color:var(--m-muted); }
.input-group-text{ background:#f3f5f9; color:var(--m-muted); }
.input-group > .form-control:not(:last-child),.input-group > .input-group-prepend > .input-group-text,.input-group > .input-group-prepend > .btn{ border-top-right-radius:0; border-bottom-right-radius:0; }
.input-group > .form-control:not(:first-child),.input-group > .input-group-append > .input-group-text,.input-group > .input-group-append > .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group > .input-group-prepend > .input-group-text{ border-top-left-radius:10px; border-bottom-left-radius:10px; }
.input-group > .input-group-append > .input-group-text,.input-group > .input-group-append > .btn{ border-top-right-radius:10px; border-bottom-right-radius:10px; }
label,.control-label,.col-form-label{ color:var(--m-ink); font-weight:550; }
.form-group{ margin-bottom:1.1rem; }
.invalid-feedback,.text-danger.small{ font-size:.8rem; }
.form-control.is-invalid{ border-color:#d92d20; }
.custom-control-label::before{ border-radius:6px; background:#fff; border:1.5px solid #aeb8c8; width:1.1rem; height:1.1rem; top:.2rem; }
.custom-control-label::after{ top:.2rem; width:1.1rem; height:1.1rem; }
.custom-radio .custom-control-label::before{ border-radius:50%; }
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--m-brand); border-color:var(--m-brand); }
.custom-control-input:focus ~ .custom-control-label::before{ box-shadow:var(--m-ring); }
input[type=checkbox],input[type=radio]{ accent-color:var(--m-brand); }
.selectize-dropdown{ border:1px solid var(--m-line); border-radius:var(--m-radius); box-shadow:var(--m-shadow); overflow:hidden; }
.selectize-dropdown .active{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
.flatpickr-calendar{ border-radius:var(--m-radius); box-shadow:var(--m-shadow); }

/* ---------- Badge, alert, progress ---------- */
.badge{ border-radius:999px; padding:.38em .7em; font-weight:600; font-size:.75rem; }
.badge-primary{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
.badge-success{ background:var(--m-success-soft); color:var(--m-success); }
.badge-warning{ background:var(--m-warning-soft); color:var(--m-warning); }
.badge-danger{ background:var(--m-danger-soft); color:var(--m-danger); }
.badge-info{ background:var(--m-info-soft); color:var(--m-info); }
.badge-secondary,.badge-light{ background:#edf0f5; color:#4a5568; }
.badge-dark{ background:#111a2b; color:#fff; }
.alert{ border-radius:var(--m-radius); border:1px solid transparent; padding:.8rem 1.1rem; box-shadow:var(--m-shadow-sm); }
.alert-success{ background:var(--m-success-soft); color:#0d4f31; border-color:#bfe6d0; }
.alert-danger{ background:var(--m-danger-soft); color:#7a1a12; border-color:#f6c5c0; }
.alert-warning{ background:var(--m-warning-soft); color:#5e3900; border-color:#f4d99b; }
.alert-info,.alert-primary{ background:var(--m-info-soft); color:#084a64; border-color:#b8e0f0; }
.progress{ border-radius:999px; background:#e8ecf3; height:8px; }
.progress-bar{ background:var(--m-brand); }

/* ---------- Breadcrumb, tab, pagination ---------- */
.breadcrumb{ background:var(--m-canvas); border-radius:10px; padding:.55rem .9rem; }
.breadcrumb-item.active{ color:var(--m-ink); }
.nav-tabs{ border-bottom:1px solid var(--m-line); }
.nav-tabs .nav-link{ color:var(--m-muted); font-weight:600; padding:.65rem 1rem; }
.nav-tabs .nav-link:hover{ color:var(--m-ink); border-color:transparent; }
.nav-tabs .nav-link.active,.nav-tabs .nav-link:hover.active{ color:var(--m-brand); border-bottom:2px solid var(--m-brand); background:transparent; }
.nav-pills .nav-link{ border-radius:10px; color:var(--m-text); font-weight:600; }
.nav-pills .nav-link.active,.nav-pills .show > .nav-link{ background:var(--m-brand); }
.pagination{ gap:4px; flex-wrap:wrap; }
.page-link{ border:1px solid var(--m-line); border-radius:var(--m-radius-sm) !important; color:var(--m-text); margin-left:0; padding:.4rem .75rem; }
.page-link:hover{ background:var(--m-brand-soft); color:var(--m-brand-dark); border-color:#c9d7f7; }
.page-item.active .page-link{ background:var(--m-brand); border-color:var(--m-brand); color:#fff; }
.page-item.disabled .page-link{ background:#f3f5f9; color:#a3adbd; }

/* ---------- Modal ---------- */
.modal-content{ border:0; border-radius:16px; box-shadow:var(--m-shadow-lg); overflow:hidden; }
.modal-header{ border-bottom:1px solid var(--m-line); padding:1rem 1.25rem; }
.modal-title{ font-weight:650; color:var(--m-ink); }
.modal-footer{ border-top:1px solid var(--m-line); background:#fafbfd; padding:.85rem 1.25rem; }
.modal-backdrop.show{ opacity:.45; background:#0b1220; }
.close{ text-shadow:none; opacity:.55; }
.close:hover{ opacity:1; }

/* ---------- Komponen PHPRad ---------- */
.make-editable{ border-bottom:1px dashed #9db6ee; }
.editable-container .editable-input .form-control{ min-height:auto; }
.flash-msg-container .alert{ box-shadow:var(--m-shadow); }
.ajax-progress-bar .progress-bar{ background:var(--m-brand); }
.page-content{ border-radius:var(--m-radius); }
.comp-grid{ padding-top:2px; }
.has-tooltip{ cursor:pointer; }
form.search .form-control{ border-top-right-radius:0; border-bottom-right-radius:0; }
form.search .btn{ border-top-left-radius:0; border-bottom-left-radius:0; }
#page-wrapper{ min-height:100vh; }
footer,#appfooter{ color:var(--m-muted); }

/* ---------- Halaman admin: Record Management, Roles and Permission, Dashboard Buttons ----------
   Selector diperkuat (#page-content ...) supaya menang atas <style> di dalam masing-masing halaman. */
#page-content section.page .rm-window,
#page-content section.page .rp-panel{
  background:var(--m-surface); border:1px solid var(--m-line); border-radius:var(--m-radius);
  box-shadow:var(--m-shadow-sm); overflow:hidden;
}
#page-content section.page .rm-head{ background:var(--m-surface); border-bottom:1px solid var(--m-line); padding:16px 20px; }
#page-content section.page .rm-head h4{ color:var(--m-ink); font-size:1.3rem; font-weight:650; }
#page-content section.page .rm-head .fa{ color:var(--m-brand); font-size:1.7rem; }
#page-content section.page .rm-info{ background:var(--m-brand-soft); color:var(--m-brand-dark); text-align:left; font-weight:500; padding:.75rem 20px; border-bottom:1px solid #d6e2ff; }
#page-content section.page .rm-tree{ background:#fafbfd; border-right:1px solid var(--m-line); padding:10px 8px; }
#page-content section.page .rm-tree-root{ color:var(--m-muted); font-weight:600; padding:4px 10px 8px; }
#page-content section.page .rm-node{ margin:2px 0; padding:7px 12px; border-left:0; border-radius:10px; color:var(--m-text); }
#page-content section.page .rm-node:before{ display:none; }
#page-content section.page .rm-node:hover{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
#page-content section.page .rm-node.active{ background:var(--m-brand); color:#fff; }
#page-content section.page .rm-fieldset{ background:#fafbfd; border:1px solid var(--m-line); border-radius:var(--m-radius); margin:16px 20px; padding:0 1rem 1rem; }
#page-content section.page .rm-fieldset legend{ background:transparent; color:var(--m-ink); font-size:.95rem; font-weight:650; }
#page-content section.page .rm-fieldset label{ color:var(--m-ink); font-weight:600; }
#page-content section.page .rm-sub{ background:transparent; color:var(--m-ink); font-weight:650; padding:.4rem 20px; }
#page-content section.page .rm-grid-wrap{ border:1px solid var(--m-line); border-radius:var(--m-radius); margin:0 20px 16px; }
#page-content section.page .rm-grid-wrap thead th{ background:#f6f8fb; color:var(--m-muted); font-weight:600; font-size:.8rem; box-shadow:inset 0 -1px 0 var(--m-line); }
#page-content section.page .rm-grid-wrap .rm-mark{ background:#fafbfd; color:var(--m-brand); }
#page-content section.page .rm-grid-wrap tbody tr.rm-row-active td.rm-role{ background:var(--m-brand-soft); color:var(--m-brand-dark); font-weight:600; }
#page-content section.page .rm-foot{ background:#fafbfd; border-top:1px solid var(--m-line); padding:12px 20px; }

#page-content section.page .rp-panel-title{ background:#f6f8fb; color:var(--m-muted); font-weight:600; border-bottom:1px solid var(--m-line); padding:10px 16px; }
#page-content section.page .rp-toolbar{ background:#fafbfd; border-bottom:1px solid var(--m-line); padding:8px 12px; }
#page-content section.page .rp-roles-title{ color:var(--m-ink); font-weight:650; padding:12px 16px 6px; }
#page-content section.page .rp-role{ margin:2px 8px; padding:7px 12px 7px 20px; border-left:3px solid transparent; border-radius:10px; font-weight:600; color:var(--m-text); }
#page-content section.page .rp-role:hover{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
#page-content section.page .rp-role.active{ background:var(--m-brand-soft); border-left-color:var(--m-brand); color:var(--m-brand-dark); }
#page-content section.page .rp-grid thead th{ background:#f6f8fb; color:var(--m-muted); font-weight:600; font-size:.8rem; box-shadow:inset 0 -1px 0 var(--m-line); }

/* ---------- Halaman error & lupa/reset password ---------- */
body .info-404 h1,
body .info-head h1{ color:var(--m-brand); font-size:clamp(96px,22vw,172px); font-weight:700; letter-spacing:-.04em; line-height:1; }
body .reset-card{ border:1px solid var(--m-line); border-radius:16px; box-shadow:var(--m-shadow); background:var(--m-surface) !important; }
body .login-card .pw-toggle,
body .reset-card .pw-toggle{ background:#f3f5f9; border:1px solid var(--m-line-strong); color:var(--m-muted); }
body .login-card .pw-toggle:hover,body .login-card .pw-toggle:focus,
body .reset-card .pw-toggle:hover,body .reset-card .pw-toggle:focus{ background:var(--m-brand-soft); color:var(--m-brand-dark); }
body .reset-card .captcha-image{ border:1px solid var(--m-line-strong); border-radius:var(--m-radius-sm); }

/* ---------- Layar kecil ---------- */
@media (max-width:767.98px){
  body{ padding-top:56px; font-size:.95rem; }
  h4,.h4,.record-title{ font-size:1.15rem; }
  .btn{ min-height:40px; }
  .btn-sm{ min-height:34px; }
  .form-control{ font-size:16px; } /* cegah auto-zoom di iOS */
  .modal-dialog{ margin:.6rem; }
  section.page > .bg-light.p-3{ padding:.9rem !important; }
}

/* ---------- Aksesibilitas & cetak ---------- */
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition:none !important; animation-duration:.01ms !important; } }
@media print{
  body{ background:#fff; padding-top:0; }
  .card,.table-responsive,.table{ box-shadow:none !important; border-color:#ddd !important; }
}

/* =====================================================================
   Badge status (dipakai semua kolom Status di halaman list)
   Kelas: .st-badge + .st-done | .st-progress | .st-cancel | .st-other
   ===================================================================== */
.st-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.8rem; font-weight:600; line-height:1.4; white-space:nowrap; border-bottom:0 !important; }
.st-badge:before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.st-badge.make-editable{ cursor:pointer; }
.st-done{ color:#146c43; background:#e1f5ea; }
.st-progress{ color:#8a5300; background:#fff0d1; }
.st-cancel{ color:#a02b2b; background:#fde7e7; }
.st-other{ color:#4a5568; background:#edf0f5; }
/* Badge kosong disembunyikan, KECUALI yang bisa diedit (make-editable): X-editable mengosongkan isi elemen saat popup dibuka,
   kalau badge ikut display:none Bootstrap menolak menampilkan popup ("Please use show on visible elements"). */
.st-badge:empty:not(.make-editable):not(.editable){ display:none; }

/* =====================================================================
   Responsif semua halaman
   ===================================================================== */
img,video,iframe{ max-width:100%; }
img{ height:auto; }
.table-responsive{ -webkit-overflow-scrolling:touch; }
.pagination{ flex-wrap:wrap; }
.page-content, .comp-grid{ min-width:0; }

@media (max-width:991.98px){
  .container, .container-fluid{ padding-left:12px; padding-right:12px; }
  section.page .btn-toolbar, section.page .btn-group{ flex-wrap:wrap; }
}

@media (max-width:767.98px){
  /* header halaman: judul, tombol dan pencarian bertumpuk rapi */
  section.page > .bg-light > .container,
  section.page > .bg-light > .container-fluid{ padding:12px 14px; }
  section.page .bg-light .row > [class*="col"]{ flex:0 0 100%; max-width:100%; margin-bottom:8px; }
  section.page .bg-light .row > [class*="col"]:last-child{ margin-bottom:0; }
  section.page .bg-light .btn, section.page .bg-light form.search{ width:100%; }
  section.page .bg-light .btn{ justify-content:center; margin-bottom:6px; }
  section.page .bg-light form.search .input-group{ width:100%; }

  /* form add/edit: tombol & kolom memenuhi lebar layar */
  section.page .form-group > [class*="col-"]{ flex:0 0 100%; max-width:100%; }
  section.page .form-group label.control-label{ margin-bottom:4px; }
  section.page form .btn[type="submit"]{ width:100%; }
  .form-ajax-status{ width:100%; }

  /* halaman view: label di atas, nilai di bawahnya */
  #page-report-body > table.table-borderless > tbody > tr{ display:block; padding:8px 4px; }
  #page-report-body > table.table-borderless > tbody > tr > th,
  #page-report-body > table.table-borderless > tbody > tr > td{ display:block; width:100% !important; border:0; padding:2px 8px; }
  #page-report-body > table.table-borderless > tbody > tr > th.title{ color:var(--m-muted); font-size:.8rem; font-weight:600; }

  /* tabel list: tiap baris menjadi kartu (label kolom diisi otomatis oleh page-scripts.js) */
  #page-report-body.table-responsive:not(.pr-table-wrap){ overflow:visible; border:0; box-shadow:none; background:transparent; border-radius:0; }
  #page-report-body.table-responsive > table.table th.td-btn:empty{ display:none !important; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless){ display:block; border:0; background:transparent; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) thead{ display:none; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody{ display:block; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody tr{
    display:block; margin:0 0 10px; padding:8px 14px; background:var(--m-surface) !important;
    border:1px solid var(--m-line); border-radius:var(--m-radius); box-shadow:var(--m-shadow-sm);
  }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody th,
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody td{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:6px 0; border:0; text-align:right; width:auto !important; max-width:none !important; min-width:0 !important;
    word-break:break-word; background:transparent !important;
  }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody td[data-label]:before{
    content:attr(data-label); color:var(--m-muted); font-size:.8rem; font-weight:600; text-align:left; flex:0 0 38%;
  }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) tbody td:empty{ display:none; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) .td-sno{ display:none; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) .td-checkbox{ justify-content:flex-start; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) th.td-btn{ justify-content:flex-end; flex-wrap:wrap; border-top:1px solid #edf0f5; margin-top:4px; padding-top:10px; }
  #page-report-body.table-responsive > table.table:not(.pr-table):not(.table-borderless) .inline-edit-btn{ position:static; opacity:1; display:inline-flex; margin-left:6px; }

  /* footer list (export + pagination) */
  .pagination{ justify-content:center; }
  section.page .row.justify-content-between > [class*="col"]{ flex:0 0 100%; max-width:100%; margin-bottom:8px; }
  .dropdown-menu{ max-width:calc(100vw - 24px); }
}

/* Tombol "Add New ..." di tengah header halaman list */
@media (min-width:768px){
  section.page > .bg-light .row > .col:first-child{ flex:1 1 0; min-width:140px; }
  section.page > .bg-light .row > .add-col{ flex:0 0 auto; width:auto; max-width:none; text-align:center; }
  section.page > .bg-light .row > .add-col ~ .col-sm-4{ flex:1 1 0; max-width:none; min-width:240px; }
  section.page > .bg-light .row > .add-col ~ .col-sm-4 form.search{ margin-left:auto; max-width:340px; }
  section.page > .bg-light .row > .add-col ~ .col-sm-4 .input-group{ flex-wrap:nowrap; }
}


/* ===== Dashboard tiles: 12 warna berbeda + ikon sesuai fungsi (Home / The Dashboard) ===== */
.record-count[class*="tile-"]{ border-width:1px 1px 1px 6px; border-style:solid; }
.record-count[class*="tile-"] .fa{ font-size:18px; width:22px; text-align:center; }
.record-count[class*="tile-"]:hover{ filter:brightness(.97); }
.record-count.tile-it{ background:#dbe8fd; color:#0a2f6b; border-color:#dbe8fd; border-left-color:#1f6fe5; }  /* biru */
.record-count.tile-it .fa{ color:#1f6fe5; }
.record-count.tile-teknisi{ background:#ffe3bd; color:#6b3a00; border-color:#ffe3bd; border-left-color:#f28c00; }  /* oranye */
.record-count.tile-teknisi .fa{ color:#f28c00; }
.record-count.tile-purchasing{ background:#fff2b3; color:#594600; border-color:#fff2b3; border-left-color:#e6b800; }  /* kuning */
.record-count.tile-purchasing .fa{ color:#e6b800; }
.record-count.tile-internal{ background:#cdf1ea; color:#04473e; border-color:#cdf1ea; border-left-color:#0f9d8a; }  /* teal */
.record-count.tile-internal .fa{ color:#0f9d8a; }
.record-count.tile-meeting{ background:#e6d9fa; color:#3b1a78; border-color:#e6d9fa; border-left-color:#7b3fd4; }  /* ungu */
.record-count.tile-meeting .fa{ color:#7b3fd4; }
.record-count.tile-survey{ background:#fcd5ec; color:#7a0f50; border-color:#fcd5ec; border-left-color:#e0319a; }  /* pink */
.record-count.tile-survey .fa{ color:#e0319a; }
.record-count.tile-pinjam{ background:#cdeefa; color:#04485f; border-color:#cdeefa; border-left-color:#0ba5d9; }  /* cyan */
.record-count.tile-pinjam .fa{ color:#0ba5d9; }
.record-count.tile-kembali{ background:#d3f0d7; color:#105a1c; border-color:#d3f0d7; border-left-color:#2f9e3f; }  /* hijau */
.record-count.tile-kembali .fa{ color:#2f9e3f; }
.record-count.tile-perangkat{ background:#dde2e9; color:#242d3a; border-color:#dde2e9; border-left-color:#5d6b7e; }  /* abu-abu */
.record-count.tile-perangkat .fa{ color:#5d6b7e; }
.record-count.tile-barang{ background:#fcd6d2; color:#7a150d; border-color:#fcd6d2; border-left-color:#d9382c; }  /* merah */
.record-count.tile-barang .fa{ color:#d9382c; }
.record-count.tile-stok{ background:#ecdcc9; color:#4a2e10; border-color:#ecdcc9; border-left-color:#8b5a2b; }  /* coklat */
.record-count.tile-stok .fa{ color:#8b5a2b; }
.record-count.tile-kegiatan{ background:#e9f5b8; color:#3d4f00; border-color:#e9f5b8; border-left-color:#8cb600; }  /* hijau lemon */
.record-count.tile-kegiatan .fa{ color:#8cb600; }

/* ===== Scrollbar horizontal tabel: menempel di dasar layar selama tabel terlihat (semua halaman, layar lebar) ===== */
.hs-bottombar{ display:none; position:sticky; bottom:0; z-index:20; overflow-x:auto; overflow-y:hidden; height:18px; background:#fff; border-top:1px solid #dfe5ee; }
.hs-bottombar > div{ height:1px; }
@media (min-width:768px){
  .table-responsive.hs-has-bar{ scrollbar-width:none; }
  .table-responsive.hs-has-bar::-webkit-scrollbar{ height:0; display:none; }
}
@media (max-width:767.98px){ .hs-bottombar{ display:none !important; } }
@media print{ .hs-bottombar{ display:none !important; } }