/* Tema mengikuti situs RSUD dr. Soeratno Gemolong (rsudgemolong.com, tema "xcare"): biru utama
   #3368c6, navy #031b4e utk judul/navbar, latar terang #f0f7fd, abu #6e778c utk teks sekunder.
   Font juga sama: Sora utk judul, Roboto utk isi. File font disimpan lokal (public/fonts, variable
   font subset latin) karena kiosk/server lokasi belum tentu punya internet ke Google Fonts.
   Semua lewat variabel CSS Bootstrap 5.3 -- komponen yg warnanya di-compile mati di bootstrap.min.css
   (btn-primary, pagination, nav-pills, focus form, dst) di-override satu per satu di bawah. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/roboto-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/sora-latin.woff2') format('woff2');
}

:root {
  --rs-blue: #3368c6;
  --rs-blue-rgb: 51, 104, 198;
  --rs-blue-dark: #2a57a8;
  --rs-navy: #031b4e;
  --rs-navy-rgb: 3, 27, 78;
  --rs-light: #f0f7fd;
  --rs-gray: #6e778c;
  --rs-heading-font: 'Sora', system-ui, sans-serif;

  --bs-body-font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #2f3a52;
  --bs-body-color-rgb: 47, 58, 82;
  --bs-heading-color: var(--rs-navy);
  --bs-secondary-color: var(--rs-gray);
  --bs-primary: var(--rs-blue);
  --bs-primary-rgb: var(--rs-blue-rgb);
  --bs-primary-text-emphasis: #14306a;
  --bs-primary-bg-subtle: var(--rs-light);
  --bs-primary-border-subtle: #b9cdee;
  --bs-dark: var(--rs-navy);
  --bs-dark-rgb: var(--rs-navy-rgb);
  --bs-link-color: var(--rs-blue);
  --bs-link-color-rgb: var(--rs-blue-rgb);
  --bs-link-hover-color: var(--rs-navy);
  --bs-link-hover-color-rgb: var(--rs-navy-rgb);
  --bs-focus-ring-color: rgba(var(--rs-blue-rgb), 0.25);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar-brand,
.modal-title,
.card-title,
.swal2-title {
  font-family: var(--rs-heading-font);
}

.btn-primary {
  --bs-btn-bg: var(--rs-blue);
  --bs-btn-border-color: var(--rs-blue);
  --bs-btn-hover-bg: var(--rs-blue-dark);
  --bs-btn-hover-border-color: var(--rs-blue-dark);
  --bs-btn-focus-shadow-rgb: var(--rs-blue-rgb);
  --bs-btn-active-bg: var(--rs-navy);
  --bs-btn-active-border-color: var(--rs-navy);
  --bs-btn-disabled-bg: var(--rs-blue);
  --bs-btn-disabled-border-color: var(--rs-blue);
}
.btn-outline-primary {
  --bs-btn-color: var(--rs-blue);
  --bs-btn-border-color: var(--rs-blue);
  --bs-btn-hover-bg: var(--rs-blue);
  --bs-btn-hover-border-color: var(--rs-blue);
  --bs-btn-focus-shadow-rgb: var(--rs-blue-rgb);
  --bs-btn-active-bg: var(--rs-blue);
  --bs-btn-active-border-color: var(--rs-blue);
  --bs-btn-disabled-color: var(--rs-blue);
  --bs-btn-disabled-border-color: var(--rs-blue);
}
.pagination {
  --bs-pagination-active-bg: var(--rs-blue);
  --bs-pagination-active-border-color: var(--rs-blue);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--rs-blue);
}
.list-group {
  --bs-list-group-active-bg: var(--rs-blue);
  --bs-list-group-active-border-color: var(--rs-blue);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--rs-blue);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #99b4e3;
  box-shadow: 0 0 0 0.25rem rgba(var(--rs-blue-rgb), 0.25);
}
.form-check-input:checked {
  background-color: var(--rs-blue);
  border-color: var(--rs-blue);
}
/* Bulatan switch saat focus (belum checked) ikut biru RSUD, bawaan Bootstrap biru #86b7fe. */
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2399b4e3'/%3e%3c/svg%3e");
}

/* Latar login: navy -> biru (gradien situs RSUD), latar halaman admin/setting: dua biru
   gradien tema xcare (--pbmit-xcare-gradient-color-first/last). */
.bg-auth-gradient {
  background: linear-gradient(135deg, var(--rs-navy), var(--rs-blue));
}

.bg-dashboard-gradient {
  background: linear-gradient(135deg, var(--rs-blue), #4172c6);
}

.logo-sm {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.logo-md {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.logo-lg {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Border jelas antar SEMUA sel tabel admin (permintaan eksplisit user "outline yang jelas, batas
   antar cell jelas") -- Bootstrap .table TANPA modifier .table-bordered cuma py garis horizontal
   antar baris (border-bottom bawaan), TIDAK ADA garis vertikal antar kolom sama sekali. Diterapkan
   GLOBAL langsung ke .table di sini (bukan menambah class .table-bordered manual ke puluhan file
   view satu-satu) supaya otomatis berlaku ke tabel admin manapun, termasuk yg baru ditambah nanti.
   border-left/right-width (BUKAN shorthand border-width) SENGAJA dipakai supaya TIDAK menimpa
   border-bottom-width bawaan Bootstrap yg sudah ada di sel yg sama -- border-collapse:collapse
   bawaan Bootstrap (Reboot) menyatukan garis top/bottom antar baris yg bertetangga jadi 1 garis,
   bukan dobel. Warna border HITAM (permintaan eksplisit user "outline hitam biar nyambung") --
   override .table-light JUGA WAJIB disertakan di sini: thead/baris Total di HAMPIR SEMUA tabel
   admin (95 pemakaian) pakai class Bootstrap bawaan `table-light`, yg py --bs-table-border-color
   SENDIRI (abu-abu lebih terang, #c6c7c8) yg menimpa punya .table di elemen manapun yg py class
   itu -- tanpa override ini, garis header/Total jadi warna BEDA dari garis body (kelihatan
   "putus"/tidak nyambung, persis keluhan user), walau keduanya sama2 di dalam tabel yg sama. */
.table,
.table-light {
  --bs-table-border-color: #000;
}
.table > :not(caption) > * {
  border-top-width: var(--bs-border-width);
}
.table > :not(caption) > * > * {
  border-left-width: var(--bs-border-width);
  border-right-width: var(--bs-border-width);
}

/* Layar HP (< 576px). Hampir semua halaman memakai pola yang sama: wrapper `.flex-fill ... p-4`
   + `.card ... rounded-4 p-4` + `.card-body` -- tiga lapis padding yang bertumpuk menyisakan
   konten cuma ~260px dari layar 390px (teks jadi sempit memanjang, tabel cepat terpotong).
   Dirampingkan di sini sekali untuk semua halaman, bukan per file view. */
@media (max-width: 575.98px) {
  body > .flex-fill.p-4 {
    padding: 0.75rem !important;
  }
  .card.rounded-4.p-4,
  .card.rounded-4.p-3,
  .card.rounded-4.p-2 {
    padding: 0 !important;
  }
  .card.rounded-4 > .card-body {
    padding: 1rem;
  }
  /* Judul kolom tidak dipecah per kata (mis. "JENIS / KENDARAAN" bertumpuk 3 baris) -- tabel
     sudah di dalam .table-responsive, jadi cukup digeser ke samping. */
  .table > thead th {
    white-space: nowrap;
  }
  .table > :not(caption) > * > * {
    padding: 0.4rem 0.5rem;
  }
  /* Tabel lebar (di dalam .table-responsive) dipersempit browser sampai tiap kolom selebar kata
     terpanjangnya -- plat "AD 1000 ABC" jadi 3 baris, satu baris tabel bisa setinggi 200px.
     Di HP isi sel dibuat satu baris & tabel digeser ke samping; kolom teks panjang (pesan error,
     judul) diberi class .td-wrap supaya tetap membungkus dgn lebar yg nyaman dibaca. */
  .table-responsive > .table > tbody > tr > td:not([colspan]) {
    white-space: nowrap;
  }
  .table-responsive > .table > tbody > tr > td.td-wrap {
    white-space: normal;
    min-width: 16rem;
  }
  /* Nama aplikasi di navbar (Sora 20px) + tombol menu tidak muat satu baris di layar 390px --
     tombol menu turun ke baris kedua. */
  .navbar-brand {
    font-size: 1rem;
  }
  /* Swagger UI: judul bawaannya 36px, terlalu besar utk layar HP. */
  .swagger-ui .info .title {
    font-size: 1.5rem;
  }
  .swagger-ui .wrapper {
    padding: 0;
  }
}

/* Navbar admin `sticky-top`: di bawah breakpoint xl menunya membuka ke bawah dan bisa lebih
   tinggi dari layar HP (dropdown Setup Parkir saja 15 item) -- elemen sticky yang lebih tinggi
   dari layar tidak bisa digulir, item bawah (Log Error, tombol keluar) jadi tak terjangkau.
   Menu yang terbuka dibatasi setinggi sisa layar dan digulir sendiri. */
@media (max-width: 1199.98px) {
  .navbar.sticky-top .navbar-collapse {
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
  }
}

/* Navbar desktop: nama aplikasi (Sora) + 8 menu admin baru muat satu baris mulai ~1200px. Navbar
   admin memakai navbar-expand-xl (di bawah 1200px jadi tombol menu), lalu di 1200-1399px menunya
   dirapatkan supaya tidak terlipat dua baris ("History Export") atau meluber ke kanan. */
@media (min-width: 1200px) {
  .navbar .navbar-nav .nav-link {
    white-space: nowrap;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.925rem;
  }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.875rem;
  }
}