/* ============================================================================
   bs3-compat.css — Lapisan kompatibilitas Bootstrap 3 -> Bootstrap 5.3
   ----------------------------------------------------------------------------
   Tujuan: markup lama SIMRS (panel, control-label, form-horizontal, glyphicon,
   btn-default, col-xs-*, data-* BS3, dst) tetap tampil wajar saat CSS inti
   diganti ke Bootstrap 5.3, sehingga migrasi bisa bertahap per modul.

   Dimuat SETELAH bootstrap.min.css. Pemetaan diambil dari pemakaian nyata
   aplikasi (hasil hitung 1.298 file):
     panel/panel-*      2.190      control-label      2.062
     form-horizontal      440      glyphicon-*          332
     btn-default          328      pull-right/left       62
     col-xs-*              61      btn-xs                52
     table-condensed       32      help-block            28
     thumbnail             25      text-right/left       19
     well                  14      col-*-offset-*         9
     hidden-xs..lg          2      caret                  2
     img-responsive         2      input-group-addon      1
   ========================================================================= */

/* ---------- 1. Panel (BS3) -> Card (BS5) ---------- */
.panel {
  background-color: #fff;
  border: 1px solid #d2d6de;
  border-radius: .375rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body { padding: 1rem; }
.panel-body::after { display: block; clear: both; content: ""; }
.panel-heading {
  padding: .75rem 1rem;
  border-bottom: 1px solid #d2d6de;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}
.panel-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}
.panel-title > a, .panel-title > small, .panel-title > .small { color: inherit; }
.panel-footer {
  padding: .625rem 1rem;
  background-color: #f8f9fa;
  border-top: 1px solid #d2d6de;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
}
.panel-group .panel + .panel { margin-top: .5rem; }
.panel-default { border-color: #d2d6de; }
.panel-default > .panel-heading { background-color: #f8f9fa; color: #212529; border-color: #d2d6de; }
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { background-color: #337ab7; color: #fff; border-color: #337ab7; }
.panel-success { border-color: #3c8dbc; }
.panel-success > .panel-heading { background-color: #dff0d8; color: #3c763d; border-color: #d6e9c6; }
.panel-info { border-color: #31708f; }
.panel-info > .panel-heading { background-color: #d9edf7; color: #31708f; border-color: #bce8f1; }
.panel-warning { border-color: #8a6d3b; }
.panel-warning > .panel-heading { background-color: #fcf8e3; color: #8a6d3b; border-color: #faebcc; }
.panel-danger { border-color: #a94442; }
.panel-danger > .panel-heading { background-color: #f2dede; color: #a94442; border-color: #ebccd1; }

/* ---------- 2. Kotak AdminLTE 2 (.box) -> Card ---------- */
.box {
  position: relative;
  background: #fff;
  border-top: 3px solid #d2d6de;
  border-radius: .375rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.box-header, .box-header.with-border {
  padding: .75rem 1rem;
  border-bottom: 1px solid #f4f4f4;
}
.box-header::after { display: block; clear: both; content: ""; }
.box-title { display: inline-block; margin: 0; font-size: 1.125rem; font-weight: 600; }
.box-tools { float: right; }
.box-body { padding: 1rem; }
.box-body::after { display: block; clear: both; content: ""; }
.box-body.no-padding { padding: 0; }
.box-footer { padding: .625rem 1rem; background: #f8f9fa; border-top: 1px solid #f4f4f4; }
.box.box-primary { border-top-color: #3c8dbc; }
.box.box-info { border-top-color: #00c0ef; }
.box.box-success { border-top-color: #3c8dbc; }
.box.box-warning { border-top-color: #f39c12; }
.box.box-danger { border-top-color: #dd4b39; }

/* ---------- 3. Form (BS3 -> BS5) ---------- */
.control-label {
  display: inline-block;
  margin-bottom: .5rem;
  font-weight: 600;
}
.form-horizontal .control-label {
  padding-top: .375rem;
  text-align: right;
}
.form-horizontal .form-group {
  display: flex;
  flex-wrap: wrap;
  margin-right: -.75rem;
  margin-left: -.75rem;
}
/* Flex-item default min-width:auto membuat anak yang lebar (CKEditor, tabel,
   textarea) memaksa halaman melebar dan tidak bisa menyusut di layar kecil. */
.form-horizontal .form-group > * { min-width: 0; }
.form-horizontal .form-group::after { display: block; clear: both; content: ""; }
.form-group { margin-bottom: 1rem; }

/* Di layar kecil kelas col-md-* tidak lagi punya lebar, sehingga label dan
   isian berbagi satu baris dengan lebar yang tidak seragam. Susun label di
   atas isian dan buat setiap isian selebar form (kiri ke kanan). */
@media (max-width: 767.98px) {
  .form-horizontal .form-group {
    display: block;
    margin-right: 0;
    margin-left: 0;
  }
  .form-horizontal .form-group > .control-label,
  .form-horizontal .form-group > [class*="col-sm-"],
  .form-horizontal .form-group > [class*="col-md-"],
  .form-horizontal .form-group > [class*="col-lg-"] {
    float: none !important;
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0;
    padding-left: 0;
  }
  .form-horizontal .control-label {
    margin-bottom: .375rem;
    padding-top: 0;
    text-align: left;
  }
  .form-horizontal .form-group .form-control,
  .form-horizontal .form-group .form-control-static,
  .form-horizontal .form-group textarea,
  .form-horizontal .form-group .select2-container {
    width: 100% !important;
    max-width: 100%;
  }
}
.help-block {
  display: block;
  margin-top: .25rem;
  margin-bottom: .625rem;
  font-size: .875em;
  color: #6c757d;
}
.has-error .form-control, .has-error .control-label { border-color: #dc3545; color: #dc3545; }
.has-success .form-control, .has-success .control-label { border-color: #198754; color: #198754; }
.has-warning .form-control, .has-warning .control-label { border-color: #ffc107; color: #997404; }

/* Ukuran input lama */
.input-lg { height: calc(1.5em + 1rem + 2px); padding: .5rem 1rem; font-size: 1.25rem; border-radius: .5rem; }
.input-sm { height: calc(1.5em + .5rem + 2px); padding: .25rem .5rem; font-size: .875rem; border-radius: .25rem; }

/* input-group-addon -> input-group-text */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  white-space: nowrap;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: .375rem;
}

/* Checkbox/radio gaya BS3 */
.checkbox label, .radio label { font-weight: 400; padding-left: .25rem; }

/* ---------- 4. Tombol (BS3 -> BS5) ---------- */
.btn-default {
  color: #212529;
  background-color: #fff;
  border-color: #ced4da;
}
.btn-default:hover, .btn-default:focus, .btn-default:active,
.btn-default.active, .btn-default:focus-visible {
  color: #212529;
  background-color: #e2e6ea;
  border-color: #c1c9d0;
}
.btn-default:disabled, .btn-default.disabled { background-color: #fff; border-color: #ced4da; opacity: .65; }
.btn-xs {
  padding: .125rem .35rem;
  font-size: .75rem;
  line-height: 1.4;
  border-radius: .25rem;
}
.btn-group-justified { display: flex; width: 100%; }
.btn-group-justified > .btn { flex: 1 1 0; }

/* ---------- 5. Glyphicons -> Font Awesome 4.7 ---------- */
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-remove::before  { content: "\f00d"; }
.glyphicon-trash::before   { content: "\f1f8"; }
.glyphicon-user::before    { content: "\f007"; }
.glyphicon-lock::before    { content: "\f023"; }
.glyphicon-phone::before   { content: "\f095"; }
.glyphicon-search::before  { content: "\f002"; }
.glyphicon-plus::before    { content: "\f067"; }
.glyphicon-minus::before   { content: "\f068"; }
.glyphicon-edit::before    { content: "\f044"; }
.glyphicon-pencil::before  { content: "\f040"; }
.glyphicon-ok::before      { content: "\f00c"; }
.glyphicon-refresh::before { content: "\f021"; }
.glyphicon-print::before   { content: "\f02f"; }
.glyphicon-download::before{ content: "\f019"; }
.glyphicon-upload::before  { content: "\f093"; }
.glyphicon-file::before    { content: "\f15c"; }
.glyphicon-time::before    { content: "\f017"; }
.glyphicon-calendar::before{ content: "\f073"; }
.glyphicon-list::before    { content: "\f03a"; }
.glyphicon-home::before    { content: "\f015"; }
.glyphicon-cog::before     { content: "\f013"; }
.glyphicon-eye-open::before{ content: "\f06e"; }
.glyphicon-arrow-left::before  { content: "\f060"; }
.glyphicon-arrow-right::before { content: "\f061"; }
.glyphicon-chevron-left::before  { content: "\f053"; }
.glyphicon-chevron-right::before { content: "\f054"; }
.glyphicon-exclamation-sign::before { content: "\f06a"; }
.glyphicon-warning-sign::before { content: "\f071"; }
.glyphicon-question-sign::before{ content: "\f059"; }

/* ---------- 6. Utility grid & teks (BS3 -> BS5) ---------- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.text-right { text-align: right !important; }
.text-left  { text-align: left !important; }
.center-block { display: block; margin-right: auto; margin-left: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.hidden { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* col-xs-* (tidak ada di BS5) */
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }
.col-xs-offset-0  { margin-left: 0; }
.col-xs-offset-1  { margin-left: 8.33333333%; }
.col-xs-offset-2  { margin-left: 16.66666667%; }
.col-xs-offset-3  { margin-left: 25%; }
.col-xs-offset-4  { margin-left: 33.33333333%; }
.col-md-offset-1  { margin-left: 8.33333333%; }
.col-md-offset-2  { margin-left: 16.66666667%; }
.col-md-offset-3  { margin-left: 25%; }
.col-md-offset-4  { margin-left: 33.33333333%; }
.col-md-offset-5  { margin-left: 41.66666667%; }
.col-md-offset-6  { margin-left: 50%; }

/* BS3 mengatur kolom dengan float, BS5 dengan flex-item. Kolom lama yang tidak
   dibungkus .row (banyak di modul SIMRS) jadi menumpuk vertikal di BS5. Di
   dalam .row float diabaikan sehingga grid BS5 tetap normal. */
[class*="col-xs-"] { float: left; }
@media (min-width: 768px) {
  [class*="col-md-"] { float: left; }
}
/* Kontainer lama yang tidak memakai .row perlu clearfix agar tidak kolaps */
.panel-body::after, .modal-body::after, .tab-pane::after, .content::after {
  display: table;
  clear: both;
  content: "";
}

/* visibility lama (aproksimasi breakpoint BS3: xs < 768px) */
@media (max-width: 767.98px) {
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) {
  .visible-xs { display: none !important; }
}

/* ---------- 7. Tabel ---------- */
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td { padding: .25rem .3125rem; }
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; }

/* ---------- 8. Label/badge BS3 ---------- */
.label {
  display: inline-block;
  padding: .35em .6em .3em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .375rem;
}
.label-default { background-color: #6c757d; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }

/* ---------- 9. Komponen BS3 lain ---------- */
.well {
  min-height: 20px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
}
.thumbnail {
  display: block;
  padding: .25rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
}
.page-header {
  padding-bottom: .5rem;
  margin: 2.5rem 0 1rem;
  border-bottom: 1px solid #dee2e6;
}
.page-header:first-child { margin-top: 0; }
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .3em;
  vertical-align: middle;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
}

/* Tombol tutup gaya BS3 (markup lama: <button class="close">&times;</button>) */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  background: transparent;
  border: 0;
  padding: 0;
}
.close:hover, .close:focus { opacity: .8; text-decoration: none; }

/* Dropdown & nav bertingkat gaya BS3 (BS5 mewajibkan .dropdown-item / .nav-link) */
.dropdown-menu > li > a {
  display: block;
  padding: .25rem 1rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-decoration: none;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #e9ecef; }
.dropdown-menu > .active > a { color: #fff; background-color: #0d6efd; }
.nav > li { display: inline-block; }
.nav > li > a {
  position: relative;
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
}
.nav-tabs { border-bottom: 1px solid #dee2e6; }
.nav-tabs > li > a { margin-bottom: -1px; border: 1px solid transparent; border-radius: .375rem .375rem 0 0; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs > li > a:hover { border-color: #e9ecef #e9ecef #dee2e6; }
.nav-pills > li > a { border-radius: .375rem; }
.nav-pills > li.active > a { color: #fff; background-color: #0d6efd; }

/* Modal: lebar dialog gaya BS3 */
.modal-dialog { margin: 1.75rem auto; }
.modal-dialog:not(.modal-lg):not(.modal-sm) { max-width: 600px; }
@media (max-width: 575.98px) {
  .modal-dialog { margin: .5rem auto; }
  .modal-dialog:not(.modal-lg):not(.modal-sm) { max-width: 100%; }
}
.modal-lg { max-width: 900px; }
.modal-sm { max-width: 320px; }

/* BS5 mematikan pointer-events pada .modal-dialog dan menyalakannya kembali
   di .modal-content. Modal lama SIMRS sering memakai .panel langsung sebagai
   isi dialog (tanpa .modal-content), sehingga harus diaktifkan manual. */
.modal-dialog > :not(.modal-content) { pointer-events: auto; }
.modal-dialog > .panel { margin-bottom: 0; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); }
.modal-dialog > .panel > form > .panel-footer.modal-footer { display: flex; gap: .5rem; justify-content: flex-end; }

/* Pagination gaya BS3 (markup <ul class="pagination"><li><a>) */
.pagination > li { display: inline; }
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: .375rem .75rem;
  margin-left: -1px;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.pagination > li > a:hover { background-color: #e9ecef; }
.pagination > .active > a,
.pagination > .active > a:hover { z-index: 3; color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.pagination > .disabled > a { color: #6c757d; background-color: #fff; }

/* =========================================================================
   10. Skala tipografi & komponen Bootstrap 3
   BS5 memakai root 16px, BS3 14px. Tanpa ini seluruh tata letak AdminLTE 2.4
   (menu sidebar, navbar, tombol 34px, form 34px) membesar ~14%.
   ========================================================================= */
body {
  font-size: 14px;
  line-height: 1.42857143;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  line-height: 1.1;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}

.form-control {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
}
textarea.form-control { height: auto; }
select.form-control { height: 34px; }
.form-control[multiple], .form-control[size] { height: auto; }

.btn {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 3px;
}
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.btn-xs { padding: .125rem .35rem; font-size: 12px; line-height: 1.5; border-radius: 3px; }
/* BS3: tombol memenuhi lebar induknya dan teksnya di tengah (BS5 menghapus
   kelas .btn-block, sehingga tombol menyusut selebar teksnya). */
.btn.btn-block,
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
.btn-block + .btn-block { margin-top: .5rem; }

.table { font-size: 14px; }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td { padding: 8px; line-height: 1.42857143; }

/* CKEditor 5 harus mengikuti lebar kontainer, termasuk di layar sempit */
.ck-editor,
.ck-editor__top,
.ck-editor__main { max-width: 100%; min-width: 0; }
.ck-editor__editable,
.ck-content { overflow-wrap: anywhere; }

/* ---- Navbar AdminLTE 2.4: BS5 membuat .navbar flex & .navbar-nav column ---- */
.main-header .navbar {
  height: 50px;
  min-height: 50px;
  padding: 0;
  display: block;
}
.main-header .navbar-custom-menu { float: right; }
.main-header .navbar-custom-menu > .nav,
.main-header .navbar-custom-menu > ul.nav {
  display: block;
  margin: 0;
}
.main-header .navbar-custom-menu > .nav > li,
.main-header .navbar-custom-menu > ul.nav > li {
  float: left;
  display: block;
}
.main-header .navbar-nav > li > a {
  padding: 15px;
  line-height: 20px;
  font-size: 14px;
}
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus { background: rgba(0, 0, 0, .1); }
.main-header .sidebar-toggle {
  float: left;
  padding: 15px;
  line-height: 20px;
  font-size: 14px;
  background: transparent;
  border: 0;
  color: #fff;
}
.main-header .logo { height: 50px; line-height: 50px; font-size: 20px; }
.main-header .logo-mini, .main-header .logo-lg { display: inline-block; }

/* =========================================================================
   11. Reboot Bootstrap 5 yang berbeda dari BS3
   ========================================================================= */
/* BS5 memberi garis bawah pada semua link; BS3 tidak. Ini yang paling
   mengubah tampilan menu sidebar, tombol <a>, dan tabel aksi. */
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; }
/* kelas gambar BS3 yang dihapus di BS5 */
.img-rounded { border-radius: 6px; }
.img-circle { border-radius: 50%; }
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}
/* label & legend gaya BS3 */
label { max-width: 100%; margin-bottom: 5px; font-weight: 700; }
.control-label { font-weight: 700; }
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

/* Progress bar gaya BS3 (markup .progress > .progress-bar) tetap kompatibel di BS5 */
.progress { height: 20px; }