/*
 * SIMGOS - TAMPILAN RESPONSIF (HP & tablet). Pasangan simgos-responsive.js (yang memberi kelas
 * html.sg-hp / html.sg-tablet sesuai lebar layar). Dimuat paling akhir agar menimpa gaya lain.
 * Ukuran/posisi komponen tetap dihitung ExtJS; di sini hanya gaya yang aman bagi perhitungan tersebut.
 */

/* ---------- Panel samping yang dilipat (strip di tepi) & saat melayang ---------- */
.sg-hp .x-region-collapsed-placeholder,
.sg-tablet .x-region-collapsed-placeholder {
  background: var(--sg-ungu-pucat, #f6f0fa) !important;
  border-color: #e4d6ee !important;
  cursor: pointer;
}
.sg-hp .x-region-collapsed-placeholder .x-title-text,
.sg-tablet .x-region-collapsed-placeholder .x-title-text { color: var(--sg-ungu, #641d8a) !important; font-weight: 600 !important; }
.sg-hp .x-region-collapsed-placeholder .x-tool-tool-el,
.sg-tablet .x-region-collapsed-placeholder .x-tool-tool-el,
.sg-hp .x-region-collapsed-placeholder .x-title-icon,
.sg-tablet .x-region-collapsed-placeholder .x-title-icon { color: var(--sg-ungu, #641d8a) !important; }

/* panel yang sedang melayang di atas konten */
.sg-hp .x-border-region-slide-in,
.sg-tablet .x-border-region-slide-in {
  box-shadow: 0 12px 40px rgba(29, 27, 34, .28), 0 0 0 1px rgba(29, 27, 34, .06) !important;
}

/* ---------- Laci menu modul (HP) ---------- */
.sg-hp .sg-laci-buka .x-treelist-item-text { font-size: 15px; }
.sg-hp .x-treelist-row { min-height: 44px; }
.sg-hp .x-treelist-item-text, .sg-hp .x-treelist-item-icon, .sg-hp .x-treelist-item-expander { line-height: 44px !important; }

/* judul modul panjang ("Rekam Medis - Asuhan Keperawatan") dipotong rapi */
.sg-hp .x-toolbar .x-title-text, .sg-hp .x-panel-header .x-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Jendela dibuka penuh layar (HP) ---------- */
.sg-hp .sg-jendela-penuh, .sg-hp .x-window.x-maximized { border-radius: 0 !important; }
.sg-hp .x-mask-msg { max-width: calc(100vw - 32px); }
.sg-hp .x-message-box .x-window-body { word-break: break-word; }
.sg-hp .x-toast { max-width: calc(100vw - 24px) !important; }

/* ---------- Grid & daftar: geser horizontal halus ---------- */
.sg-hp .x-grid-view, .sg-hp .x-scroller { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- Header (HP) ---------- */
.sg-hp .sg-header .x-btn-white, .sg-hp .sg-header .x-btn-nav { box-shadow: inset 0 0 0 3px #fff !important; }
.sg-hp .sg-header input.x-form-text { font-size: 14px !important; }

/* ---------- Footer (HP): hanya pengumuman ---------- */
.sg-hp .sg-ft-info { margin: 0; }

/* ---------- Kartu yang ditumpuk (kolom berdampingan -> ke bawah) ---------- */
.sg-hp .sg-ditumpuk > .x-box-inner > .x-box-target > .x-box-item { max-width: 100%; }

/* ---------- Tab: target sentuh lebih besar ---------- */
.sg-hp .x-tab .x-tab-inner { font-size: 13px; }

/* ---------- Tanggal (date picker) tidak keluar layar ---------- */
.sg-hp .x-datepicker { max-width: calc(100vw - 16px); }

@media (max-width: 767px) {
  /* splash/loading */
  #splashScreenProgress { width: 70vw !important; }
}

/* ---------- Dashboard Home (simgos-home-dashboard.js) ---------- */
.shd-hero-jam b { line-height: 1.15; }
.shd-hero-jam span { display: block; line-height: 1.4; }
.sg-hp .shd-hero-top { flex-direction: column; }
.sg-hp .shd-hero-jam { text-align: left; }
.sg-hp .shd-hero h2 { font-size: 20px; line-height: 1.25; }
.sg-hp .shd-hero { padding: 18px; }

/* identitas aplikasi di footer diberi display:flex !important oleh simgos-modern.css; pastikan tetap bisa disembunyikan */
html.sg-hp .sg-footer #teamsimpel, html.sg-hp .sg-footer .sg-ft-jam { display: none !important; }

/* ---------- Detil Kunjungan (HP): banner pasien ringkas ---------- */
.sg-banner-tgl {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box;
  padding: 9px 12px; border-radius: 10px; cursor: pointer; user-select: none;
  background: var(--sg-ungu-pucat, #f6f0fa); color: var(--sg-ungu, #641d8a); font: 600 13px/1.3 var(--sg-font, sans-serif);
}
.sg-banner-tgl .x-fa { transition: transform .15s; }
.sg-banner-tgl.sg-buka .x-fa { transform: rotate(180deg); }
.sg-hp .sgdk-head.sg-ditumpuk { text-align: left; }

/* ---------- Bar Alur Perawat (HP): langkah dalam satu baris yang bisa digeser ---------- */
.sg-hp .sgal { flex-wrap: wrap; row-gap: 6px; }
.sg-hp .sgal-steps {
  order: 5; flex: 0 0 100%; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 2px;
}
.sg-hp .sgal-steps::-webkit-scrollbar { display: none; }
.sg-hp .sgal-s { padding-top: 6px; padding-bottom: 6px; }
.sg-hp .sgal-b { padding-top: 6px; padding-bottom: 6px; }

/* ---------- Menu overflow toolbar (») ---------- */
.sg-hp .x-menu-item-text, .sg-tablet .x-menu-item-text { line-height: 32px; }

/* tombol overflow toolbar: ikon titik tiga (bukan garis tiga, agar tidak tertukar dengan tombol menu) */
.sg-hp .x-toolbar-more-icon, .sg-tablet .x-toolbar-more-icon { background-image: none !important; }
.sg-hp .x-toolbar-more-icon:before, .sg-tablet .x-toolbar-more-icon:before {
  font-family: FontAwesome; content: "\f142"; font-size: 18px; color: var(--sg-teks-2, #5b5766);
  display: block; text-align: center; line-height: 16px;
}

/* ---------- Baris isian yang dibungkus (HP) ---------- */
/* elemen field Ext ber-display table: dibuat inline-table agar tetap berjajar dan lebarnya tidak rusak */
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .x-component,
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .x-btn,
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .x-container {
  display: inline-block !important; vertical-align: middle; margin: 0 10px 6px 0 !important; max-width: 100%;
}
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .x-field {
  display: inline-table !important; vertical-align: middle; margin: 0 10px 6px 0 !important; max-width: 100%;
}
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .sg-baris-penuh { display: block !important; margin-right: 0 !important; }
.sg-hp .sg-dibungkus .x-autocontainer-innerCt > .x-field.sg-baris-penuh { display: table !important; }