/*
 * SIMGOS - TAMPILAN MODERN (login + pendaftaran pasien) untuk RSUD Mijen. Pasangan simgos-modern.js.
 * Tema asli (classic/resources/SIMpel-all_*.css) tidak diubah. Dimuat setelah simgos-ungu.css.
 * Untuk mematikan: hapus baris <link ... simgos-modern.css> dan <script ... simgos-modern.js> di index.html.
 */
:root {
  --sg-ungu: #641d8a;
  --sg-ungu-tua: #4c1569;
  --sg-ungu-muda: #8a3fb3;
  --sg-ungu-pucat: #f6f0fa;
  --sg-teks: #1d1b22;
  --sg-teks-2: #5b5766;
  --sg-teks-3: #8a8594;
  --sg-garis: #dcd7e3;
  --sg-garis-2: #ece8f1;
  --sg-latar: #f7f6f9;
  --sg-merah: #b42318;
  --sg-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================== 1. LOGIN */

.sg-welcome { background: #fff; }
.sg-welcome, .sg-welcome .x-form-item-label, .sg-welcome input { font-family: var(--sg-font) !important; }

/* Panel identitas RS (kiri) */
.sg-brand { position: relative; overflow: hidden; color: #fff; background: var(--sg-ungu-tua); }
.sg-brand-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .35; filter: saturate(.6);
}
.sg-brand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(76, 21, 105, .92) 0%, rgba(100, 29, 138, .86) 45%, rgba(138, 63, 179, .78) 100%);
}
.sg-brand-inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 56px; box-sizing: border-box;
}
.sg-brand-top .sg-kemkes {
  height: 34px; background: #fff; padding: 7px 12px; border-radius: 10px;
}
.sg-brand-mid { max-width: 460px; }
.sg-brand-logo {
  width: 84px; height: 84px; border-radius: 20px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); margin-bottom: 26px;
}
.sg-brand-logo img { max-width: 64px; max-height: 64px; }
.sg-brand-name { font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; white-space: normal; }
.sg-brand-tag { margin-top: 10px; font-size: 16px; opacity: .85; }
.sg-brand-kontak { list-style: none; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.sg-brand-kontak li { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 14px; opacity: .92; white-space: normal; word-break: break-word; }
.sg-brand-kontak .fas { width: 16px; text-align: center; opacity: .75; }
.sg-brand-foot { font-size: 12px; opacity: .7; letter-spacing: .02em; }

/* Kolom login (kanan) */
.sg-side { background: #fff; }
.sg-head { margin-bottom: 26px; }
.sg-head-logo { display: none; margin-bottom: 18px; }
.sg-head-logo img { height: 56px; }
.sg-head-hi { color: var(--sg-ungu); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.sg-head-title { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--sg-teks); letter-spacing: -.01em; }
.sg-head-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--sg-teks-2); white-space: normal; }

.sg-login-form, .sg-login-form > .x-panel-bodyWrap > .x-panel-body { background: transparent !important; }
.sg-login-form .x-form-item-label-top,
.sg-login-form .x-form-item-label-top-side { padding-bottom: 6px !important; }
.sg-login-form .x-form-item-label-inner { font-size: 13px; font-weight: 600; color: #344054 !important; }
.sg-login-form .x-form-trigger-wrap {
  border: 1px solid var(--sg-garis) !important; border-radius: 10px !important;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.sg-login-form .x-form-text-wrap { border: 0 !important; background: transparent !important; }
.sg-login-form .x-form-trigger-wrap-focus {
  border-color: var(--sg-ungu) !important; box-shadow: 0 0 0 4px rgba(100, 29, 138, .12) !important;
}
.sg-login-form .x-form-invalid .x-form-trigger-wrap,
.sg-login-form .x-form-trigger-wrap-invalid { border-color: var(--sg-merah) !important; }
.sg-login-form input.x-form-text {
  height: 42px !important; min-height: 42px; padding: 0 14px !important;
  font-size: 15px !important; color: var(--sg-teks); background: transparent; border-radius: 10px;
}
.sg-login-form input.x-form-text::placeholder { color: #a39fab; }
.sg-login-form .x-form-empty-field { color: #a39fab; }
.sg-login-form .x-form-error-msg, .sg-login-form .x-form-error-wrap-under-side-label { font-size: 12px; }

/* tombol lihat kata sandi */
.sg-login-form .sg-eye {
  width: 44px !important; cursor: pointer; background: none !important; border: 0 !important;
  text-align: center; vertical-align: middle; color: var(--sg-teks-3);
}
.sg-login-form .sg-eye:before { font-family: FontAwesome; content: "\f06e"; font-size: 16px; line-height: 42px; }
.sg-login-form .sg-eye.sg-eye-on:before { content: "\f070"; color: var(--sg-ungu); }
.sg-login-form .sg-eye:hover { color: var(--sg-ungu); }

.sg-caps { font-size: 12px; color: #b54708; margin: 2px 0 6px; }
.sg-caps .fas { margin-right: 6px; }

/* tombol Masuk */
.sg-login-form .sg-btn-masuk {
  border-radius: 10px !important; box-shadow: 0 6px 16px rgba(100, 29, 138, .25) !important;
}
.sg-login-form .sg-btn-masuk .x-btn-inner { font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em; }
.sg-login-form .sg-btn-masuk .x-btn-icon-el { font-size: 14px !important; }

.sg-lock { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fef3f2; color: var(--sg-merah); font-size: 13px; }

/* captcha */
.sg-login-form .x-color-w { color: var(--sg-teks) !important; }

/* kaki kolom login */
.sg-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--sg-garis-2); }
.sg-foot-notice {
  font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .03em;
  color: var(--sg-teks-2); white-space: normal; display: flex; gap: 8px; align-items: baseline;
}
.sg-foot-notice .fas { color: var(--sg-ungu); }
.sg-foot-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.sg-foot-logos img { height: 26px; width: auto; opacity: .9; }

/* layar sempit: panel kiri disembunyikan oleh JS, logo RS tampil di kartu */
@media (max-width: 899px) {
  .sg-head-logo { display: block; }
}
@media (max-width: 439px) {
  .sg-head-title { font-size: 24px; }
}

/* =========================================================== 2. PENDAFTARAN (Pasien Baru & Kunjungan) */

.sg-modern .x-form-item-label-top { padding-bottom: 3px !important; }
.sg-modern .x-form-item-label-top .x-form-item-label-inner {
  font-size: 12px; font-weight: 600; color: var(--sg-teks-2) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-modern .x-form-trigger-wrap-default,
.sg-modern .x-form-text-wrap-default { border-radius: 6px; }
.sg-modern .x-form-text-default { border-radius: 6px; }
.sg-modern .x-form-text-default::placeholder { color: #b0abb8; }

/* kartu seksi */
.sg-modern .shadow-panel { border-radius: 10px !important; overflow: hidden; }

/* badge shortcut pada tombol */
.sg-kbd {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px;
  background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .35);
}

/* =========================================================== 3. HEADER */

.sg-header .bgheaderTop { background: var(--sg-ungu) !important; }
.sg-header > .x-box-inner > .x-box-target > .x-toolbar,
.sg-header .x-toolbar.shadow-panel {
  background: #fff !important; border: 0 !important;
  border-bottom: 1px solid var(--sg-garis-2) !important; box-shadow: 0 1px 3px rgba(29, 27, 34, .05) !important;
}
.sg-header, .sg-header .x-component, .sg-header input { font-family: var(--sg-font); }
/* nama RS di header */
.sg-header .x-br-right { border-right-color: var(--sg-garis-2) !important; background: transparent !important; }
.sg-header .x-br-right .x-bold-text { font-weight: 600 !important; color: var(--sg-teks); font-size: 14px; }
/* tombol ikon (menu, kasir, logout) */
.sg-header .x-btn-white, .sg-header .x-btn-nav {
  background: transparent !important; border: 0 !important; border-radius: 10px !important;
  transition: background-color .15s;
}
.sg-header .x-btn-nav { background-color: transparent !important; }
.sg-header .x-btn-white:hover, .sg-header .x-btn-nav:hover,
.sg-header .x-btn-white.x-btn-over, .sg-header .x-btn-nav.x-btn-over { background: var(--sg-ungu-pucat) !important; }
.sg-header .x-btn-white .x-btn-icon-el, .sg-header .x-btn-nav .x-btn-icon-el { color: var(--sg-teks-2) !important; font-size: 16px !important; }
.sg-header .x-btn-white:hover .x-btn-icon-el, .sg-header .x-btn-nav:hover .x-btn-icon-el { color: var(--sg-ungu) !important; }
.sg-header .x-btn-nav .x-color-red { color: var(--sg-merah) !important; }
/* kolom pencarian pasien */
.sg-header .x-form-trigger-wrap, .sg-header .x-form-text-wrap {
  border-radius: 10px !important; border-color: var(--sg-garis) !important; background: var(--sg-latar) !important;
}
.sg-header .x-form-trigger-wrap-focus { background: #fff !important; border-color: var(--sg-ungu) !important; box-shadow: 0 0 0 3px rgba(100, 29, 138, .12) !important; }
.sg-header input.x-form-text { background: transparent !important; font-size: 13px; }
/* chip pengguna */
.sg-user.x-hidden-display, .sg-user.x-hidden-offsets, .sg-user.x-hidden-clip { display: none !important; }
.sg-user {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
  padding: 0 12px 0 4px; border-radius: 999px; cursor: pointer; max-width: 220px;
  border: 1px solid var(--sg-garis-2); background: #fff; transition: background-color .15s;
}
.sg-user:hover { background: var(--sg-ungu-pucat); }
.sg-user-av {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sg-ungu); color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.sg-user-nm { font-size: 13px; font-weight: 600; color: var(--sg-teks); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .sg-user-nm { display: none; } .sg-user { padding-right: 4px; } }

/* =========================================================== 4. HOME / DASHBOARD */

.sg-dash { background: var(--sg-latar) !important; }
.sg-sapa {
  display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px !important; box-sizing: border-box; border-radius: 14px; color: #fff;
  background: linear-gradient(120deg, var(--sg-ungu-tua), var(--sg-ungu) 55%, var(--sg-ungu-muda));
  box-shadow: 0 8px 22px rgba(76, 21, 105, .18); font-family: var(--sg-font);
}
.sg-sapa-hi { font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: normal; }
.sg-sapa-sub { margin-top: 4px; font-size: 13px; opacity: .85; white-space: normal; }
.sg-sapa-tgl { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.sg-sapa-tgl .fas { margin-right: 8px; opacity: .85; }

/* kartu widget */
.sg-dash .x-panel { border-radius: 14px !important; overflow: hidden; }
.sg-dash > .x-autocontainer-outerCt > .x-autocontainer-innerCt > .x-panel,
.sg-dash .x-responsivecolumn-item.x-panel,
.sg-dash .x-panel.big-33, .sg-dash .x-panel.small-100 {
  border: 1px solid var(--sg-garis-2) !important; box-shadow: 0 1px 3px rgba(29, 27, 34, .06) !important; background: #fff;
}
.sg-dash .x-panel-header {
  background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--sg-garis-2) !important;
  padding-top: 12px !important; padding-bottom: 12px !important;
}
.sg-dash .x-panel-header .x-title-text { color: var(--sg-teks) !important; font-weight: 600 !important; font-size: 14px !important; font-family: var(--sg-font); }
.sg-dash .x-panel-header .x-title-icon,
.sg-dash .x-panel-header .x-title-glyph { color: var(--sg-ungu) !important; }
.sg-dash .x-panel-header .x-tool-img, .sg-dash .x-panel-header .x-tool-tool-el { color: var(--sg-teks-3) !important; background-color: transparent !important; }
.sg-dash .x-panel-body { border-color: transparent !important; }
.sg-dash .x-grid-item { font-size: 13px; }

/* logo RS menggantikan ikon kecil SIMGOS di pojok kiri header */
.sg-header img.sg-ikon-rs, .sg-header .sg-ikon-rs {
  object-fit: contain; box-sizing: border-box; padding: 1px 4px !important; cursor: pointer;
}

/* logo JPG instansi menggantikan teks nama RS di header */
.sg-header img.sg-logo-nama { object-fit: contain; margin-top: -5px !important; cursor: pointer; }

/* kolom pencarian header: ramping 34px di tengah toolbar 46px (sebelumnya memenuhi tinggi 44px) */
.sg-header .x-form-trigger-wrap { height: 34px !important; margin-top: 5px; box-sizing: border-box; }
.sg-header .x-form-text-wrap { height: 32px !important; }
.sg-header input.x-form-text { height: 32px !important; min-height: 32px !important; line-height: 32px; padding: 0 12px !important; font-size: 13px !important; }
.sg-header .x-form-trigger { height: 32px !important; line-height: 32px !important; }
.sg-header .x-form-item-body .x-form-trigger-wrap input::placeholder { color: var(--sg-teks-3); }
/* combo jenis pencarian (PASIEN/...) */
.sg-header .x-form-item { background: transparent !important; border-color: transparent !important; }
/* tombol ikon pencarian (pasien baru, triage, daftar, general consent) & lainnya */
/* Ukuran & posisi tombol dibiarkan mengikuti layout SIMGOS (tinggi penuh, ikon di tengah) agar semua ikon
   sejajar. Latar hover dibuat "pil" 34px di tengah lewat inset shadow putih, tanpa mengubah ukuran tombol. */
.sg-header .x-btn-white, .sg-header .x-btn-nav { box-shadow: inset 0 0 0 5px #fff !important; border-radius: 15px !important; }
.sg-header .x-btn-white .x-btn-icon-el, .sg-header .x-btn-nav .x-btn-icon-el { vertical-align: middle; }
.sg-header .x-btn-white .x-color-gray { color: var(--sg-teks-2) !important; }

/* bar judul "Home - ..." (ui panel-black, abu-abu gelap) -> terang, selaras header */
.main-modules .x-panel-header-panel-black {
  background: #fff !important; border-color: var(--sg-garis-2) !important;
  border-bottom: 1px solid var(--sg-garis-2) !important; box-shadow: none !important;
}
.main-modules .x-panel-header-panel-black .x-title-text { color: var(--sg-teks) !important; font-weight: 600 !important; font-family: var(--sg-font); }
.main-modules .x-panel-header-panel-black .x-tool-img,
.main-modules .x-panel-header-panel-black .x-tool-tool-el,
.main-modules .x-panel-header-panel-black .x-title-icon,
.main-modules .x-panel-header-panel-black .x-btn-icon-el { color: var(--sg-teks-2) !important; background-color: transparent !important; }
.main-modules .x-panel-header-panel-black .x-btn { background: transparent !important; border-color: transparent !important; }

/* footer: teks berjalan (Informasi Teks) dari 17px -> sebanding dengan teks footer lain */
.main-modules marquee { font-size: 13px !important; line-height: 20px !important; font-family: var(--sg-font) !important; font-weight: 600 !important; }
.main-modules .x-toolbar.x-br-top { background: #fff !important; border-top: 1px solid var(--sg-garis-2) !important; }
.main-modules .x-toolbar.x-br-top .x-component, .main-modules .x-toolbar.x-br-top .x-label { font-family: var(--sg-font); font-size: 12px; color: var(--sg-teks-2); }

/* =========================================================== FOOTER modern (.sg-footer) */
.sg-footer.x-toolbar {
  background: #fff !important; border: 0 !important; border-top: 1px solid var(--sg-garis-2) !important;
  box-shadow: 0 -1px 4px rgba(29, 27, 34, .03); padding: 0 10px !important;
}
.sg-footer .x-toolbar-separator { border-color: transparent !important; width: 12px !important; }
.sg-footer .x-component, .sg-footer .x-label { font-family: var(--sg-font) !important; font-size: 12px; color: var(--sg-teks-2); line-height: 24px; }
/* kiri: identitas aplikasi */
.sg-footer #teamsimpel { display: flex !important; align-items: center; gap: 8px; white-space: nowrap; cursor: default; }
.sg-ft-app { font-weight: 700; color: var(--sg-teks); }
.sg-ft-ver { font-size: 11px; font-weight: 600; color: var(--sg-ungu); background: var(--sg-ungu-pucat); border-radius: 999px; padding: 0 8px; line-height: 18px; }
.sg-ft-copy { color: var(--sg-teks-3); }
/* tengah: pengumuman (Informasi Teks) dalam pil dengan teks berjalan CSS */
.sg-ft-info-wadah { overflow: hidden; }
.sg-ft-info {
  display: flex; align-items: center; gap: 8px; height: 24px; margin: 0 6px; padding: 0 12px 0 4px;
  border-radius: 999px; background: var(--sg-ungu-pucat); border: 1px solid #ead9f5; overflow: hidden;
}
.sg-ft-ikon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sg-ungu); color: #fff !important; font-size: 9px !important; display: flex !important; align-items: center; justify-content: center; }
.sg-ft-ticker { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.sg-ft-ticker > span { display: inline-block; padding-left: 100%; font-size: 12.5px; font-weight: 600; color: var(--sg-ungu-tua); animation: sgTicker linear infinite; }
.sg-ft-ticker > span span { color: var(--sg-ungu-tua) !important; }
.sg-ft-info:hover .sg-ft-ticker > span { animation-play-state: paused; }
@keyframes sgTicker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .sg-ft-ticker > span { animation: none; padding-left: 0; } }
/* kanan: resep & jam */
.sg-ft-resep {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px;
  background: #fffaeb; color: #b54708; border: 1px solid #fedf89; font-weight: 700; font-size: 11.5px; white-space: nowrap;
}
.sg-ft-jam { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sg-teks-2) !important; }
.sg-ft-jam .x-fa { color: var(--sg-ungu); margin-right: 6px; }
.sg-ft-jam b { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--sg-garis); color: var(--sg-teks); font-weight: 700; }

/* =========================================================== 5. DASHBOARD PASIEN (tab pasien) */

.sg-pasien { background: var(--sg-latar) !important; }
.sg-pasien, .sg-pasien .x-component, .sg-pasien .x-panel-header .x-title-text { font-family: var(--sg-font); }

/* kartu */
.sg-pasien .shadow-panel {
  border-radius: 14px !important; overflow: hidden; background: #fff;
  border: 1px solid var(--sg-garis-2) !important; box-shadow: 0 1px 3px rgba(29, 27, 34, .06), 0 6px 16px rgba(29, 27, 34, .04) !important;
}
.sg-pasien .shadow-panel > .x-panel-bodyWrap > .x-panel-body { border-color: transparent !important; }
.sg-pasien .shadow-panel .x-panel-header {
  background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--sg-garis-2) !important;
  padding-top: 10px !important; padding-bottom: 10px !important; min-height: 52px;
}
.sg-pasien .shadow-panel .x-panel-header .x-title-text { color: var(--sg-teks) !important; font-weight: 600 !important; font-size: 15px !important; }
.sg-pasien .shadow-panel .x-panel-header .x-title-icon,
.sg-pasien .shadow-panel .x-panel-header .x-title-glyph {
  color: var(--sg-ungu) !important; background: var(--sg-ungu-pucat); border-radius: 8px;
  width: 28px !important; height: 28px !important; line-height: 28px !important; text-align: center; font-size: 13px !important;
}
.sg-pasien .shadow-panel .x-panel-header .x-title-icon-wrap { margin-right: 4px; }

/* tombol aksi di kepala kartu: dari kotak warna-warni -> tombol ikon seragam beraksen ungu */
.sg-pasien .shadow-panel .x-panel-header .x-btn {
  background: var(--sg-ungu-pucat) !important; border: 1px solid transparent !important; border-radius: 9px !important;
  margin-left: 4px !important; transition: background-color .15s, border-color .15s, transform .1s;
}
.sg-pasien .shadow-panel .x-panel-header .x-btn .x-btn-icon-el { color: var(--sg-ungu) !important; }
.sg-pasien .shadow-panel .x-panel-header .x-btn.x-btn-over,
.sg-pasien .shadow-panel .x-panel-header .x-btn:hover { background: #ead9f5 !important; border-color: var(--sg-garis) !important; }
.sg-pasien .shadow-panel .x-panel-header .x-btn.x-btn-pressed { transform: translateY(1px); }
/* tombol berisiko (kunci, batal, PDF/consent) tetap ditandai merah lembut */
.sg-pasien .shadow-panel .x-panel-header [class*="x-btn-soft-red"] { background: #fef3f2 !important; }
.sg-pasien .shadow-panel .x-panel-header [class*="x-btn-soft-red"] .x-btn-icon-el { color: var(--sg-merah) !important; }
.sg-pasien .shadow-panel .x-panel-header [class*="x-btn-soft-red"]:hover { background: #fde4e1 !important; }

/* Pasien Info */
.sg-pasien img.photo-image {
  border-radius: 14px !important; object-fit: cover; background: var(--sg-ungu-pucat);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sg-garis) !important;
}
.sg-pasien .x-br-top { border-top-color: transparent !important; }
.sg-pasien .x-component[style*="font-size: 17px"][style*="font-weight: bold"] { font-size: 20px !important; color: var(--sg-teks); letter-spacing: -.01em; }
.sg-pasien .x-component[style*="font-size: 2.5em"] { color: var(--sg-ungu) !important; }
.sg-pasien .x-component[style*="font-size: 2.5em"] > div { letter-spacing: .06em; font-weight: 600 !important; color: var(--sg-teks-3) !important; }

/* Pendaftaran / Kunjungan: nomor, dokter, ruangan */
.sg-pasien .x-component[style*="font-size: 24px"] { color: var(--sg-ungu-tua) !important; letter-spacing: -.01em; }
.sg-pasien .x-color-green { color: var(--sg-ungu) !important; }
.sg-pasien .x-color-blue { color: var(--sg-ungu-muda) !important; }
.sg-pasien .x-component[style*="font-size: 20px"] { color: var(--sg-teks); letter-spacing: -.01em; }

/* label status (Status | Aktif, Masuk | tanggal, Kenakan Tarif, ...) - warna arti tetap, bentuk lebih rapi */
.sg-pasien span[style*="--label-background-color"] {
  border-radius: 999px !important; font-weight: 600; font-size: 11.5px !important;
  box-shadow: inset 0 0 0 1px var(--label-background-color) !important; background: #fff;
}
.sg-pasien span[style*="--label-background-color"] > span:first-child { padding: 2px 8px !important; }
.sg-pasien span[style*="--label-background-color"] > span + span { padding-right: 9px !important; }

/* Tagihan */
.sg-pasien .x-grid-item { font-family: var(--sg-font); }
.sg-pasien .x-grid-item-selected, .sg-pasien .x-grid-item-over { background: var(--sg-ungu-pucat) !important; }

/* Piutang: angka 5em -> proporsional, tombol Pembayaran merah -> ungu */
.sg-pasien .x-component[style*="font-size: 5em"] {
  font-size: 2.6em !important; color: var(--sg-ungu-tua) !important; padding-top: 0 !important;
  display: flex !important; align-items: center; justify-content: center; overflow: hidden;
}
.sg-pasien .x-component[style*="font-size: 5em"] h1 { margin: 0; font-size: 1em; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.sg-pasien .x-toolbar-docked-bottom, .sg-pasien .x-toolbar.x-docked-bottom { background: #fff !important; border-color: var(--sg-garis-2) !important; }
.sg-pasien .x-docked-bottom [class*="x-btn-soft-red"] {
  background: var(--sg-ungu) !important; border-color: var(--sg-ungu) !important; border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(100, 29, 138, .2);
}
.sg-pasien .x-docked-bottom [class*="x-btn-soft-red"]:hover { background: var(--sg-ungu-muda) !important; }
.sg-pasien .x-docked-bottom [class*="x-btn-soft-red"] .x-btn-inner { font-weight: 600 !important; color: #fff !important; }

/* paging toolbar di dalam kartu */
.sg-pasien .x-toolbar.x-docked-bottom .x-btn-icon-el { color: var(--sg-teks-3) !important; }

/* =========================================================== 6. DETIL KUNJUNGAN (layanan + rekam medis) */

.sg-layanan { background: var(--sg-latar) !important; }
.sg-layanan, .sg-layanan .x-component, .sg-layanan .x-title-text, .sg-layanan .x-tab-inner,
.sg-layanan .x-treelist-item-text, .sg-layanan input { font-family: var(--sg-font) !important; }

/* kepala jendela "Detil Kunjungan": gradasi ungu tua yang tenang */
.sg-layanan > .x-panel-header {
  background: linear-gradient(100deg, #3d1056 0%, var(--sg-ungu-tua) 45%, var(--sg-ungu) 100%) !important;
  border: 0 !important; padding-top: 9px !important; padding-bottom: 9px !important;
}
.sg-layanan > .x-panel-header .x-title-text { color: #fff !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .01em; }
.sg-layanan > .x-panel-header .x-title-icon { color: rgba(255, 255, 255, .85) !important; }
.sg-layanan > .x-panel-header .x-form-display-field { color: rgba(255, 255, 255, .8) !important; font-size: 12px !important; letter-spacing: .02em; }
.sg-layanan > .x-panel-header .x-form-display-field strong { color: #fff; font-weight: 600; }
.sg-layanan > .x-panel-header .x-btn {
  background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 9px !important; margin-left: 4px !important; transition: background-color .15s;
}
.sg-layanan > .x-panel-header .x-btn:hover, .sg-layanan > .x-panel-header .x-btn.x-btn-over { background: rgba(255, 255, 255, .26) !important; }
.sg-layanan > .x-panel-header .x-btn .x-btn-icon-el, .sg-layanan > .x-panel-header .x-btn .x-btn-inner { color: #fff !important; }
.sg-layanan > .x-panel-header .x-tool-img, .sg-layanan > .x-panel-header .x-tool-tool-el { color: #fff !important; background-color: transparent !important; }

/* ringkasan pasien | penjamin | kunjungan: satu kartu putih */
.sg-ringkas { background: #fff; box-shadow: inset 0 -1px 0 var(--sg-garis-2); }
.sg-layanan .x-br-top { border-top-color: transparent !important; }
.sg-layanan .x-component[style*="font-size: 24px"] { color: var(--sg-ungu-tua) !important; letter-spacing: -.01em; }
.sg-layanan .x-component[style*="font-size: 20px"] { color: var(--sg-teks) !important; letter-spacing: -.01em; }
.sg-layanan .x-color-green { color: var(--sg-ungu) !important; }
.sg-layanan .x-color-blue { color: var(--sg-ungu-muda) !important; }
.sg-layanan span[style*="--label-background-color"] {
  border-radius: 999px !important; font-weight: 600; font-size: 11.5px !important; background: #fff;
  box-shadow: inset 0 0 0 1px var(--label-background-color) !important;
}
.sg-layanan span[style*="--label-background-color"] > span:first-child { padding: 2px 8px !important; }
.sg-layanan span[style*="--label-background-color"] > span + span { padding-right: 9px !important; }

/* lama dirawat / total tagihan / obat: dari blok neon -> grup pil elegan */
.sg-plafon .x-component[style*="font-size: 17px"] {
  font-size: 13px !important; padding: 6px 14px !important; color: var(--sg-teks-2) !important;
  background: #fff !important; border: 1px solid var(--sg-garis); border-left-width: 0;
}
.sg-plafon .x-component[style*="font-size: 17px"] b { color: var(--sg-ungu-tua); font-size: 15px; margin-left: 2px; }
.sg-plafon .x-component[style*="border-radius: 15px 0px 0px 15px"] { border-left-width: 1px; border-radius: 999px 0 0 999px !important; }
.sg-plafon .x-component[style*="border-radius: 0px 15px 15px 0px"] { border-radius: 0 999px 999px 0 !important; }
/* warna peringatan dinamis (mis. melebihi plafon) tetap dipertahankan: hanya hijau neon default yang diganti */
.sg-plafon .x-component[style*="background-color: rgb(0, 255, 143)"] { background: var(--sg-ungu-pucat) !important; border-color: var(--sg-garis) !important; }
.sg-plafon .x-btn { background: var(--sg-ungu-pucat) !important; border: 1px solid transparent !important; border-radius: 9px !important; }
.sg-plafon .x-btn .x-btn-icon-el { color: var(--sg-ungu) !important; }
.sg-plafon .x-btn:hover { background: #ead9f5 !important; }

/* tab utama (Rekam Medis, Laboratorium, Radiologi, E-Resep) & sub-tab: garis bawah ungu */
.sg-layanan .x-tab-bar { background: #fff !important; border-color: var(--sg-garis-2) !important; }
.sg-layanan .x-tab {
  background-color: transparent !important; background-image: none !important; border-color: transparent !important;
  border-radius: 0 !important; box-shadow: none; transition: color .15s, box-shadow .15s;
}
.sg-layanan .x-tab [class*="-ml"], .sg-layanan .x-tab [class*="-mr"], .sg-layanan .x-tab [class*="-tl"],
.sg-layanan .x-tab [class*="-tr"], .sg-layanan .x-tab [class*="-bl"], .sg-layanan .x-tab [class*="-br"] { background-image: none !important; }
.sg-layanan .x-tab .x-tab-inner, .sg-layanan .x-tab .x-tab-icon-el { color: var(--sg-teks-2) !important; }
.sg-layanan .x-tab:hover .x-tab-inner, .sg-layanan .x-tab:hover .x-tab-icon-el { color: var(--sg-ungu) !important; }
.sg-layanan .x-tab.x-tab-active { box-shadow: inset 0 -3px 0 var(--sg-ungu) !important; background: #fff !important; }
.sg-layanan .x-tab.x-tab-active .x-tab-inner, .sg-layanan .x-tab.x-tab-active .x-tab-icon-el { color: var(--sg-ungu) !important; font-weight: 600 !important; }
.sg-links { box-shadow: 0 -1px 0 var(--sg-garis-2); }

/* kepala "Rekam Medis - ..." (ui panel-cyan): terang & bersih, tombol seragam */
.sg-layanan .x-panel-header-panel-cyan {
  background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--sg-garis-2) !important;
}
.sg-layanan .x-panel-header-panel-cyan .x-title-text { color: var(--sg-teks) !important; font-weight: 600 !important; }
.sg-layanan .x-panel-header-panel-cyan .x-tool-img, .sg-layanan .x-panel-header-panel-cyan .x-tool-tool-el,
.sg-layanan .x-panel-header-panel-cyan .x-title-icon { color: var(--sg-teks-2) !important; background-color: transparent !important; }
.sg-layanan .x-panel-header-panel-cyan .x-btn {
  background: var(--sg-ungu-pucat) !important; border: 1px solid transparent !important; border-radius: 9px !important; margin-left: 4px !important;
}
.sg-layanan .x-panel-header-panel-cyan .x-btn .x-btn-icon-el, .sg-layanan .x-panel-header-panel-cyan .x-btn .x-btn-inner { color: var(--sg-ungu) !important; font-weight: 600; }
.sg-layanan .x-panel-header-panel-cyan .x-btn:hover { background: #ead9f5 !important; }
.sg-layanan .x-panel-header-panel-cyan [class*="x-btn-soft-red"] { background: #fef3f2 !important; }
.sg-layanan .x-panel-header-panel-cyan [class*="x-btn-soft-red"] .x-btn-icon-el { color: var(--sg-merah) !important; }

/* =========================================================== MENU SAMPING (semua treelist navigation)
   Menu utama kiri, menu workspace (Home, Rekam Medis, Pengaturan, ...) & panel petunjuk: baris "pil" membulat,
   tanpa garis pemisah, ikon abu-abu, item aktif ungu muda + garis ungu di kiri. Mode mikro (hanya ikon) tidak diubah. */
.x-treelist-navigation, .x-treelist-nav-petunjuk { background: #fff !important; }
.x-treelist-navigation:not(.x-treelist-micro) > .x-treelist-root-container,
.x-treelist-nav-petunjuk > .x-treelist-root-container { padding: 6px 0 8px; }
.x-treelist-navigation .x-treelist-item, .x-treelist-nav-petunjuk .x-treelist-item { border-top: 0 !important; border-bottom: 0 !important; }
.x-treelist-navigation .x-treelist-row, .x-treelist-nav-petunjuk .x-treelist-row { border-bottom: 0 !important; }
.x-treelist-navigation:not(.x-treelist-micro) .x-treelist-row,
.x-treelist-nav-petunjuk .x-treelist-row {
  margin: 1px 8px; border-radius: 10px; padding-left: 6px !important; padding-right: 6px !important;
  transition: background-color .12s ease, box-shadow .12s ease;
}
.x-treelist-navigation .x-treelist-row:before, .x-treelist-nav-petunjuk .x-treelist-row:before { display: none !important; }
.x-treelist-navigation .x-treelist-item-icon:before, .x-treelist-navigation .x-treelist-item-expander,
.x-treelist-navigation .x-treelist-item-text { line-height: 40px !important; }
.x-treelist-navigation .x-treelist-item-icon { font-size: 15px !important; color: var(--sg-teks-3) !important; width: 36px !important; }
.x-treelist-navigation:not(.x-treelist-micro) .x-treelist-item-text {
  margin-left: 40px !important; font-family: var(--sg-font) !important; font-size: 13.5px !important; font-weight: 500;
  color: var(--sg-teks) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x-treelist-navigation .x-treelist-row-over, .x-treelist-nav-petunjuk .x-treelist-row-over { background: var(--sg-ungu-pucat-2, #faf6fc) !important; }
.x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-icon,
.x-treelist-navigation .x-treelist-row-over > * > .x-treelist-item-text { color: var(--sg-ungu) !important; }
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row,
.x-treelist-nav-petunjuk .x-treelist-item-selected > .x-treelist-row {
  background: var(--sg-ungu-pucat) !important; box-shadow: inset 3px 0 0 var(--sg-ungu);
}
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text,
.x-treelist-navigation .x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon { color: var(--sg-ungu) !important; font-weight: 700 !important; }
/* item khusus berwarna dari SIMGOS (mis. "Tentang Aplikasi" biru, "Perbarui Aplikasi" merah): diredam/diselaraskan */
.x-treelist-navigation .x-treelist-item-text.x-color-blue, .x-treelist-navigation .x-treelist-item-icon.x-color-blue { color: var(--sg-teks-3) !important; }
.x-treelist-navigation .x-treelist-item-text.x-color-red, .x-treelist-navigation .x-treelist-item-icon.x-color-red { color: var(--sg-merah) !important; }

/* panel profil pengguna di atas menu utama (.sg-sidenav) */
.sg-sidenav { background: #fff !important; border-right: 1px solid var(--sg-garis-2) !important; }
.sg-profil, .sg-profil > .x-panel-bodyWrap > .x-panel-body {
  background: linear-gradient(180deg, var(--sg-ungu-pucat) 0%, #fff 100%) !important; border: 0 !important;
}
.sg-profil { border-bottom: 1px solid var(--sg-garis-2) !important; }
.sg-profil img.x-img {
  border-radius: 50% !important; border: 0 !important; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e2d0ee, 0 6px 16px rgba(76, 21, 105, .15) !important;
}
.sg-profil .x-panel-body { background: transparent !important; }
.sg-profil .x-autocontainer-innerCt > div:first-child { font-family: var(--sg-font); font-size: 14px; font-weight: 700; color: var(--sg-teks); line-height: 1.3; }
.sg-profil .x-autocontainer-innerCt > div + div {
  display: inline-block; margin-top: 4px; font-family: var(--sg-font); font-size: 11px; font-weight: 600;
  color: var(--sg-ungu); background: #fff; border: 1px solid #e2d0ee; border-radius: 999px; padding: 0 9px; line-height: 18px;
}
.sg-profil .x-btn, .sg-profil .x-form-file-btn {
  background: #fff !important; border: 1px solid var(--sg-garis) !important; border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(29, 27, 34, .06); transition: background-color .15s, border-color .15s;
}
.sg-profil .x-btn .x-btn-icon-el { color: var(--sg-teks-2) !important; font-size: 12px !important; }
.sg-profil .x-btn:hover { background: var(--sg-ungu-pucat) !important; border-color: #e2d0ee !important; }
.sg-profil .x-btn:hover .x-btn-icon-el { color: var(--sg-ungu) !important; }
.sg-profil [class*="x-btn-soft-red"] .x-btn-icon-el { color: var(--sg-merah) !important; }

/* kolom isian di dalam rekam medis */
.sg-layanan .x-form-trigger-wrap-default { border-radius: 8px !important; border-color: var(--sg-garis) !important; }
.sg-layanan .x-form-text-default { border-radius: 8px; }
.sg-layanan .x-form-text-default::placeholder, .sg-layanan .x-form-empty-field { color: #a39fab !important; }
.sg-layanan .x-form-trigger-wrap-focus { border-color: var(--sg-ungu) !important; box-shadow: 0 0 0 3px rgba(100, 29, 138, .12) !important; }

/* tombol simpan/tambah hijau di area isi -> ungu utama */
.sg-layanan .x-panel-body [class*="x-btn-soft-green"] {
  background: var(--sg-ungu) !important; border-color: var(--sg-ungu) !important; border-radius: 9px !important;
  box-shadow: 0 3px 10px rgba(100, 29, 138, .2);
}
.sg-layanan .x-panel-body [class*="x-btn-soft-green"] .x-btn-inner,
.sg-layanan .x-panel-body [class*="x-btn-soft-green"] .x-btn-icon-el { color: #fff !important; font-weight: 600; }
.sg-layanan .x-panel-body [class*="x-btn-soft-green"]:hover { background: var(--sg-ungu-muda) !important; }

/* header grid */
.sg-layanan .x-column-header { background: #faf9fb !important; border-color: var(--sg-garis-2) !important; }
.sg-layanan .x-column-header .x-column-header-text-inner { color: var(--sg-teks-2); font-weight: 600; font-size: 12px; }

/* panel "Petunjuk Penginputan Rekam Medis" (ui panel-green): hijau -> ungu muda */
.sg-layanan [class*="x-panel-header-panel-green"] { background: var(--sg-ungu-pucat) !important; border-color: var(--sg-garis) !important; }
.sg-layanan [class*="x-panel-header-panel-green"] .x-title-text { color: var(--sg-ungu) !important; font-weight: 600 !important; }
.sg-layanan [class*="x-panel-header-panel-green"] .x-tool-img,
.sg-layanan [class*="x-panel-header-panel-green"] .x-tool-tool-el { color: var(--sg-ungu) !important; background-color: transparent !important; }

/* =========================================================== 7. LAYAR LOADING (splash) */
#splashScreen {
  background: radial-gradient(1200px 600px at 50% 35%, #ffffff 0%, #faf6fc 55%, #f3ebf8 100%) !important;
  padding-top: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--sg-font);
}
#splashScreen #logo {
  width: 132px; height: 132px; object-fit: contain; padding: 18px; box-sizing: border-box;
  background: #fff; border-radius: 32px; box-shadow: 0 14px 40px rgba(76, 21, 105, .16);
  animation: sgDenyut 1.8s ease-in-out infinite;
}
#splashScreenLoading { color: var(--sg-teks-2) !important; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin: 26px 0 10px !important; }
#splashScreenProgress { width: 260px !important; height: 6px !important; border-radius: 999px !important; background: #e9e1ef !important; box-shadow: none !important; overflow: hidden; }
#splashScreenProgressInner { height: 6px !important; border-radius: 999px !important; background: linear-gradient(90deg, var(--sg-ungu-tua), var(--sg-ungu-muda)) !important; transition: width .3s ease; }
@keyframes sgDenyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #splashScreen #logo { animation: none; } }

/* =========================================================== 8. TABEL DAFTAR PASIEN (.sg-tabel) */
.sg-tabel, .sg-tabel .x-grid-cell-inner, .sg-tabel .x-column-header-text-inner, .sg-tabel input { font-family: var(--sg-font) !important; }
/* kepala jendela/panel */
.sg-tabel > .x-panel-header {
  background: linear-gradient(100deg, #3d1056 0%, var(--sg-ungu-tua) 45%, var(--sg-ungu) 100%) !important;
  border: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important;
}
.sg-tabel > .x-panel-header .x-title-text { color: #fff !important; font-weight: 600 !important; font-size: 15px !important; }
.sg-tabel > .x-panel-header .x-tool-img, .sg-tabel > .x-panel-header .x-tool-tool-el { color: #fff !important; background-color: transparent !important; }
/* baris filter */
.sg-tabel .x-toolbar-docked-top { background: #fff !important; padding: 10px 12px !important; border-bottom: 1px solid var(--sg-garis-2) !important; }
.sg-tabel .x-toolbar-docked-top .x-form-trigger-wrap {
  border-radius: 10px !important; border-color: var(--sg-garis) !important; background: var(--sg-latar) !important;
}
.sg-tabel .x-toolbar-docked-top .x-form-trigger-wrap-focus { background: #fff !important; border-color: var(--sg-ungu) !important; box-shadow: 0 0 0 3px rgba(100, 29, 138, .12) !important; }
.sg-tabel .x-toolbar-docked-top input.x-form-text { background: transparent !important; font-size: 13px !important; }
.sg-tabel .x-toolbar-docked-top .x-btn {
  background: var(--sg-ungu-pucat) !important; border: 1px solid transparent !important; border-radius: 10px !important;
}
.sg-tabel .x-toolbar-docked-top .x-btn .x-btn-icon-el { color: var(--sg-ungu) !important; }
.sg-tabel .x-toolbar-docked-top .x-btn:last-child { background: var(--sg-ungu) !important; }
.sg-tabel .x-toolbar-docked-top .x-btn:last-child .x-btn-icon-el { color: #fff !important; }
/* judul kolom */
.sg-tabel .x-grid-header-ct { background: #faf9fb !important; border-color: var(--sg-garis-2) !important; }
.sg-tabel .x-column-header { background: #faf9fb !important; border-color: var(--sg-garis-2) !important; }
.sg-tabel .x-column-header-text-inner {
  color: var(--sg-teks-3) !important; font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .05em;
}
/* baris data: lebih lapang & mudah dibaca */
.sg-tabel .x-grid-item { border-color: var(--sg-garis-2) !important; }
.sg-tabel .x-grid-cell-inner { font-size: 13.5px !important; color: var(--sg-teks) !important; padding-top: 11px !important; padding-bottom: 11px !important; line-height: 18px !important; }
.sg-tabel .x-grid-item-over { background: var(--sg-ungu-pucat-2, #faf6fc) !important; }
.sg-tabel .x-grid-item-selected { background: var(--sg-ungu-pucat) !important; box-shadow: inset 3px 0 0 var(--sg-ungu); }
.sg-tabel .x-grid-cell-row-numberer .x-grid-cell-inner, .sg-tabel .x-grid-cell-rownumberer .x-grid-cell-inner { color: var(--sg-teks-3) !important; }
.sg-tabel .x-grid-cell-row-numberer, .sg-tabel .x-grid-cell-rownumberer { background: transparent !important; }
/* tombol buka pasien */
.sg-tabel .x-action-col-icon {
  color: var(--sg-ungu) !important; background: var(--sg-ungu-pucat); border-radius: 8px;
  width: 28px !important; height: 26px !important; line-height: 26px !important; text-align: center; font-size: 14px !important;
}
.sg-tabel .x-action-col-icon:hover { background: var(--sg-ungu); color: #fff !important; }
.sg-tabel .x-grid-cell-actioncolumn .x-grid-cell-inner { padding-top: 7px !important; padding-bottom: 7px !important; }
/* paging */
.sg-tabel .x-toolbar-docked-bottom, .sg-tabel .x-toolbar.x-docked-bottom { background: #fff !important; border-top: 1px solid var(--sg-garis-2) !important; }
.sg-tabel .x-toolbar-docked-bottom .x-btn-icon-el { color: var(--sg-teks-3) !important; }
.sg-tabel .x-toolbar-docked-bottom .x-toolbar-text { color: var(--sg-teks-2) !important; font-family: var(--sg-font); font-size: 12.5px; }

/* =========================================================== DATE PICKER (semua kolom tanggal)
   Masalah: tombol bulan ikut diwarnai ungu oleh simgos-ungu.css tetapi teksnya tetap hitam -> tidak terbaca.
   Perbaikan: header ungu dengan teks putih, tanggal terpilih ungu, hari ini bercincin ungu, teks kontras. */
.x-datepicker { border-radius: 12px !important; overflow: hidden; border: 1px solid var(--sg-garis) !important; box-shadow: 0 10px 28px rgba(29, 27, 34, .14) !important; font-family: var(--sg-font) !important; }
.x-datepicker-header { background: linear-gradient(100deg, var(--sg-ungu-tua), var(--sg-ungu)) !important; }
.x-datepicker-month .x-btn, .x-datepicker-month .x-btn.x-btn-default-small {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 8px !important;
}
.x-datepicker-month .x-btn-inner, .x-datepicker-month .x-btn .x-btn-inner-default-small { color: #fff !important; font-weight: 700 !important; font-size: 14px !important; }
.x-datepicker-month .x-btn-split-right:after, .x-datepicker-month .x-btn-over .x-btn-split-right:after { color: rgba(255, 255, 255, .85) !important; }
.x-datepicker-month .x-btn-over, .x-datepicker-month .x-btn.x-btn-over { background: rgba(255, 255, 255, .16) !important; }
.x-datepicker-month .x-btn.x-btn-pressed { background: rgba(255, 255, 255, .24) !important; }
.x-datepicker-arrow { color: rgba(255, 255, 255, .85) !important; background: transparent !important; background-image: none !important; border: 0 !important; opacity: 1 !important; }
.x-datepicker-arrow:hover { color: #fff !important; }
.x-datepicker-column-header { background: var(--sg-ungu-pucat) !important; }
.x-datepicker-column-header-inner { color: var(--sg-ungu) !important; font-weight: 700 !important; font-size: 12px !important; }
.x-datepicker-date { color: var(--sg-teks) !important; border-radius: 8px; font-weight: 500; }
div.x-datepicker-date:hover { background-color: var(--sg-ungu-pucat) !important; color: var(--sg-ungu) !important; }
.x-datepicker-prevday .x-datepicker-date, .x-datepicker-nextday .x-datepicker-date { color: #c9c4d1 !important; }
.x-datepicker-today { background-color: transparent !important; border-color: transparent !important; }
.x-datepicker-today .x-datepicker-date { box-shadow: inset 0 0 0 2px var(--sg-ungu-muda); color: var(--sg-ungu) !important; font-weight: 700; }
.x-datepicker-selected { border-color: transparent !important; }
.x-datepicker-selected div.x-datepicker-date { background-color: var(--sg-ungu) !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 3px 8px rgba(100, 29, 138, .3); }
.x-datepicker-disabled .x-datepicker-date { background-color: #f4f2f6 !important; color: #c9c4d1 !important; }
.x-datepicker-footer, .x-monthpicker-buttons { background: #fff !important; border-top: 1px solid var(--sg-garis-2); }
.x-datepicker-footer .x-btn, .x-monthpicker-buttons .x-btn {
  background: var(--sg-ungu-pucat) !important; border: 1px solid transparent !important; border-radius: 999px !important;
}
.x-datepicker-footer .x-btn .x-btn-inner, .x-monthpicker-buttons .x-btn .x-btn-inner { color: var(--sg-ungu) !important; font-weight: 700 !important; }
.x-datepicker-footer .x-btn:hover, .x-monthpicker-buttons .x-btn:hover { background: var(--sg-ungu) !important; }
.x-datepicker-footer .x-btn:hover .x-btn-inner, .x-monthpicker-buttons .x-btn:hover .x-btn-inner { color: #fff !important; }
/* panel pilih bulan/tahun */
.x-monthpicker { background: #fff !important; font-family: var(--sg-font) !important; }
a.x-monthpicker-item-inner { color: var(--sg-teks) !important; border-radius: 8px; }
a.x-monthpicker-item-inner:hover { background-color: var(--sg-ungu-pucat) !important; color: var(--sg-ungu) !important; }
.x-monthpicker-item a.x-monthpicker-selected { background-color: var(--sg-ungu) !important; color: #fff !important; border-color: transparent !important; }
.x-monthpicker-yearnav-button { color: var(--sg-ungu) !important; }
/* pemilih jam (datetimefield / timefield) */
.x-boundlist-item { font-family: var(--sg-font); color: var(--sg-teks) !important; }
.x-boundlist-item-over { background: var(--sg-ungu-pucat) !important; color: var(--sg-ungu) !important; border-color: transparent !important; }
.x-boundlist-selected { background: var(--sg-ungu) !important; color: #fff !important; border-color: transparent !important; }