/*
 * SIMGOS - Detil Kunjungan modern (pasangan simgos-detil-kunjungan.js).
 * Semua aturan diawali .sgdk (kelas pada layanan-workspace). Hanya warna, sudut, bayangan, dan tipografi;
 * ukuran/posisi tetap dihitung layout ExtJS, jadi fungsi bawaan tidak terganggu.
 */
.sgdk {
  --dk-ungu: #641d8a; --dk-ungu-tua: #4c1569; --dk-ungu-muda: #8a3fb3; --dk-pucat: #f4ecfa; --dk-pucat-2: #faf7fc;
  --dk-teks: #1d1b22; --dk-teks-2: #5b5766; --dk-teks-3: #8a8594; --dk-garis: #e7e1ee; --dk-latar: #f4f1f7;
}
.sgdk, .sgdk .x-component, .sgdk .x-title-text, .sgdk .x-tab-inner, .sgdk .x-treelist-item-text, .sgdk input, .sgdk .x-btn-inner {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif !important;
}
.sgdk > .x-panel-body, .sgdk.x-panel { background: var(--dk-latar) !important; }

/* ---------- 1. Kepala jendela ---------- */
.sgdk > .x-panel-header {
  background: linear-gradient(100deg, #3d1056 0%, var(--dk-ungu-tua) 45%, var(--dk-ungu) 100%) !important;
  border: 0 !important; padding: 8px 14px !important;
}
.sgdk > .x-panel-header .x-title-text { color: #fff !important; font-weight: 600 !important; font-size: 15px !important; }
.sgdk > .x-panel-header .x-title-icon { color: rgba(255, 255, 255, .85) !important; }
.sgdk > .x-panel-header .x-form-display-field { color: rgba(255, 255, 255, .85) !important; font-size: 12.5px !important; }
.sgdk > .x-panel-header .x-form-display-field strong { color: #fff; font-weight: 600; }
.sgdk > .x-panel-header .x-btn {
  background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .24) !important; border-radius: 9px !important;
}
.sgdk > .x-panel-header .x-btn:hover, .sgdk > .x-panel-header .x-btn.x-btn-over { background: rgba(255, 255, 255, .28) !important; }
.sgdk > .x-panel-header .x-btn .x-btn-icon-el, .sgdk > .x-panel-header .x-btn .x-btn-inner,
.sgdk > .x-panel-header .x-tool-img, .sgdk > .x-panel-header .x-tool-tool-el { color: #fff !important; background-color: transparent !important; }

/* ---------- 2. Kartu identitas pasien | penjamin | kunjungan ---------- */
.sgdk .sgdk-head {
  background: #fff !important; border: 1px solid var(--dk-garis); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(29, 27, 34, .04), 0 6px 18px rgba(76, 21, 105, .06);
  position: relative; overflow: hidden;
}
.sgdk .sgdk-head:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--dk-ungu-muda), var(--dk-ungu-tua)); }
.sgdk .sgdk-head .x-panel-body, .sgdk .sgdk-head .x-container, .sgdk .sgdk-head .x-panel { background: transparent !important; }
.sgdk .sgdk-head .x-br-top { border-top-color: transparent !important; }
/* No. RM */
.sgdk .sgdk-head .x-component[style*="font-size: 1.8em"] {
  font-size: 13px !important; font-weight: 700 !important; color: var(--dk-ungu) !important; letter-spacing: .04em;
  background: var(--dk-pucat); border-radius: 8px; padding: 3px 10px !important;
}
/* nama pasien */
.sgdk .sgdk-head .x-component[style*="font-size: 17px"]:not(.x-color-green) { font-size: 19px !important; color: var(--dk-teks) !important; letter-spacing: -.01em; }
.sgdk .sgdk-head .pasien-short-detil .x-component, .sgdk .sgdk-head .x-component[style*="font-size: 13px"] { color: var(--dk-teks-2); }
/* penjamin (tengah) */
.sgdk .sgdk-head .x-component[style*="font-size: 20px"] { font-size: 17px !important; color: var(--dk-teks) !important; font-weight: 700 !important; }
.sgdk .sgdk-head .x-color-green { color: var(--dk-ungu) !important; }
/* DPJP / ruangan (kanan) */
.sgdk .sgdk-head .x-component.x-color-green[style*="font-size: 17px"] { font-size: 15px !important; }
.sgdk .sgdk-head .x-color-blue { color: var(--dk-ungu-muda) !important; }
/* label (Masuk, Keluar, Status, Kenakan Tarif, Alergi): pil lembut */
.sgdk 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;
}
.sgdk span[style*="--label-background-color"] > span:first-child { padding: 2px 9px !important; }
.sgdk span[style*="--label-background-color"] > span + span { padding-right: 10px !important; }
/* tombol kecil di kartu (detil pasien, ubah DPJP) */
.sgdk .sgdk-head .x-btn { border-radius: 7px !important; }

/* ---------- 3. Tab layanan (Rekam Medis, Layanan, ...) ---------- */
.sgdk .sg-links, .sgdk .x-panel-header-tab { background: transparent !important; box-shadow: none !important; }
.sgdk .sg-links > .x-tab-bar {
  background: #fff !important; border: 1px solid var(--dk-garis) !important; border-width: 1px 0 !important;
}
.sgdk .sg-links > .x-tab-bar .x-tab {
  background: transparent !important; background-image: none !important; border-color: transparent !important; border-radius: 0 !important;
}
.sgdk .sg-links > .x-tab-bar .x-tab .x-tab-inner { color: var(--dk-teks-2) !important; font-weight: 600 !important; font-size: 13px !important; }
.sgdk .sg-links > .x-tab-bar .x-tab .x-tab-icon-el { color: var(--dk-teks-3) !important; }
.sgdk .sg-links > .x-tab-bar .x-tab:hover .x-tab-inner, .sgdk .sg-links > .x-tab-bar .x-tab:hover .x-tab-icon-el { color: var(--dk-ungu) !important; }
.sgdk .sg-links > .x-tab-bar .x-tab.x-tab-active { background: var(--dk-pucat-2) !important; box-shadow: inset 0 -3px 0 var(--dk-ungu) !important; }
.sgdk .sg-links > .x-tab-bar .x-tab.x-tab-active .x-tab-inner, .sgdk .sg-links > .x-tab-bar .x-tab.x-tab-active .x-tab-icon-el { color: var(--dk-ungu) !important; }

/* ---------- 4. Rekam Medis: kepala, menu kiri, isi ---------- */
.sgdk .x-panel-body .x-panel-header-panel-cyan { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--dk-garis) !important; }
.sgdk .x-panel-body .x-panel-header-panel-cyan .x-title-text { color: var(--dk-teks) !important; font-weight: 700 !important; font-size: 14px !important; }
.sgdk .x-panel-body .x-panel-header-panel-cyan .x-title-icon, .sgdk .x-panel-body .x-panel-header-panel-cyan .x-tool-img, .sgdk .x-panel-body .x-panel-header-panel-cyan .x-tool-tool-el { color: var(--dk-teks-2) !important; background-color: transparent !important; }
.sgdk .x-panel-body .x-panel-header-panel-cyan .x-btn { background: var(--dk-pucat) !important; border: 1px solid transparent !important; border-radius: 9px !important; }
.sgdk .x-panel-body .x-panel-header-panel-cyan .x-btn:hover { background: #ead9f5 !important; }
.sgdk .x-panel-body .x-panel-header-panel-cyan .x-btn .x-btn-icon-el, .sgdk .x-panel-body .x-panel-header-panel-cyan .x-btn .x-btn-inner { color: var(--dk-ungu) !important; }

.sgdk .x-treelist-navigation { background: #fff !important; }
.sgdk .x-treelist-navigation > .x-treelist-root-container { padding: 8px 8px 8px 8px; }
.sgdk .x-treelist-navigation .x-treelist-row {
  border-bottom: 0 !important; border-radius: 10px; margin-bottom: 2px; transition: background-color .12s ease;
}
.sgdk .x-treelist-navigation .x-treelist-row:before { display: none !important; }
.sgdk .x-treelist-navigation .x-treelist-row-over { background: var(--dk-pucat-2) !important; }
.sgdk .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row {
  background: var(--dk-pucat) !important; box-shadow: inset 3px 0 0 var(--dk-ungu);
}
.sgdk .x-treelist-navigation .x-treelist-item-text { color: var(--dk-teks) !important; font-size: 13.5px !important; font-weight: 600 !important; }
.sgdk .x-treelist-navigation .x-treelist-item-icon { color: var(--dk-teks-3) !important; }
.sgdk .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row .x-treelist-item-text,
.sgdk .x-treelist-navigation .x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon { color: var(--dk-ungu) !important; }

/* sub-tab di dalam menu (Umum, Fisik, ...) */
.sgdk .x-tabpanel-child .x-tab-bar { background: #fff !important; }
.sgdk .x-tabpanel-child .x-tab.x-tab-active .x-tab-inner { color: var(--dk-ungu) !important; }

/* isi form */
.sgdk .x-form-trigger-wrap-default { border-radius: 8px !important; border-color: #ddd6e5 !important; }
.sgdk .x-form-trigger-wrap-focus { border-color: var(--dk-ungu) !important; box-shadow: 0 0 0 3px rgba(100, 29, 138, .12) !important; }
.sgdk .x-column-header { background: #faf9fb !important; border-color: var(--dk-garis) !important; color: var(--dk-teks-2) !important; font-weight: 600; }
.sgdk .x-splitter { background: transparent !important; }
.sgdk .x-treelist-navigation .x-treelist-item, .sgdk .x-treelist-navigation .x-treelist-row { border-top: 0 !important; border-bottom: 0 !important; }