/*
 * SIMGOS - aksen ungu #641d8a
 * File override, dimuat paling akhir dari index.html. Tema asli (classic/resources/SIMpel-all_*.css) tidak diubah.
 * Untuk mematikan: hapus baris <link ... simgos-ungu.css> di index.html.
 */
:root {
  --ungu: #641d8a;
  --ungu-tua: #4c1569;
  --ungu-muda: #8a3fb3;
  --ungu-pucat: #f3ebf8;
  --ungu-pucat-2: #faf6fc;
  --ungu-garis: #e2d0ee;
}

/* 1. Garis pelangi di atas header -> gradasi ungu */
.bgheaderTop {
  background-image: linear-gradient(to right, var(--ungu-tua), var(--ungu) 40%, var(--ungu-muda) 70%, #c18ee0) !important;
}

/* 2. Tombol default (sebelumnya biru #35baf6) */
.x-btn-default-small, .x-btn-default-small-mc,
.x-btn-default-medium, .x-btn-default-medium-mc,
.x-btn-default-large, .x-btn-default-large-mc {
  background-color: var(--ungu) !important;
  border-color: var(--ungu) !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.x-btn-over.x-btn-default-small, .x-btn-over .x-btn-default-small-mc,
.x-btn-over.x-btn-default-medium, .x-btn-over .x-btn-default-medium-mc,
.x-btn-over.x-btn-default-large, .x-btn-over .x-btn-default-large-mc {
  background-color: var(--ungu-muda) !important;
  border-color: var(--ungu-muda) !important;
  box-shadow: 0 2px 6px rgba(100, 29, 138, .25);
}
.x-btn-pressed.x-btn-default-small, .x-btn-pressed .x-btn-default-small-mc,
.x-btn-pressed.x-btn-default-medium, .x-btn-pressed .x-btn-default-medium-mc {
  background-color: var(--ungu-tua) !important;
  border-color: var(--ungu-tua) !important;
}
.x-btn-default-small, .x-btn-default-medium, .x-btn-default-large { border-radius: 4px !important; }

/* 2b. Tombol aksi utama "soft-saphire" (mis. tombol Masuk di halaman login) */
[class*="x-btn-soft-saphire-"] {
  background-color: var(--ungu) !important;
  border-color: var(--ungu) !important;
  border-radius: 4px !important;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.x-btn-over[class*="x-btn-soft-saphire-"] {
  background-color: var(--ungu-muda) !important;
  border-color: var(--ungu-muda) !important;
  box-shadow: 0 2px 8px rgba(100, 29, 138, .3);
}
.x-btn-pressed[class*="x-btn-soft-saphire-"] { background-color: var(--ungu-tua) !important; }

/* 3. Header jendela/popup default & judul panel biru/cyan (mis. "Pengaturan - Instansi") */
.x-window-header-default, .x-window-header-default .x-tool-img,
.x-panel-header-panel-blue, .x-panel-header-panel-blue .x-tool-tool-el,
.x-window-header-window-blue, .x-window-header-window-blue .x-tool-img,
.x-panel-header-danger-blue, .x-panel-header-danger-blue .x-tool-tool-el {
  background-color: var(--ungu) !important;
  border-color: var(--ungu) !important;
}
.x-panel-header-panel-cyan, .x-panel-header-panel-cyan .x-tool-tool-el,
.x-window-header-window-cyan, .x-window-header-window-cyan .x-tool-img {
  background-color: var(--ungu-muda) !important;
  border-color: var(--ungu-muda) !important;
}
.x-window-default { border-color: var(--ungu) !important; box-shadow: 0 8px 28px rgba(76, 21, 105, .25) !important; }

/* 4. Menu samping (treelist): hover & item terpilih + garis aksen kiri */
.x-treelist-row-over { background-color: var(--ungu-pucat-2) !important; }
.x-treelist-row-over > * > .x-treelist-item-icon,
.x-treelist-row-over > * > .x-treelist-item-text { color: var(--ungu) !important; }
.x-treelist-row-over > * > .x-treelist-item-expander { color: var(--ungu) !important; }
.x-treelist-item-selected > .x-treelist-row,
.x-treelist-item-selected > .x-treelist-row-over {
  background-color: var(--ungu-pucat) !important;
  box-shadow: inset 4px 0 0 var(--ungu);
}
.x-treelist-item-selected > .x-treelist-row .x-treelist-item-text,
.x-treelist-item-selected > .x-treelist-row .x-treelist-item-icon {
  color: var(--ungu) !important;
  font-weight: 600;
}

/* 5. Tab aktif: garis bawah ungu */
.x-tab.x-tab-active.x-tab-default {
  box-shadow: inset 0 -3px 0 var(--ungu);
}
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default,
.x-tab.x-tab-active.x-tab-default .x-tab-icon-el { color: var(--ungu) !important; }
.x-tab-default-top:hover .x-tab-inner-default { color: var(--ungu-muda); }

/* 6. Grid: baris terpilih & hover (sebelumnya kuning / biru muda) */
.x-grid-item-selected { background-color: var(--ungu-pucat) !important; color: #2b1238 !important; }
.x-grid-with-row-lines .x-grid-item.x-grid-item-selected { border-color: var(--ungu-garis) !important; }
.x-grid-item-over { background-color: var(--ungu-pucat-2) !important; }
.x-grid-with-row-lines .x-grid-item.x-grid-item-over { border-color: #efe4f5 !important; }

/* 7. Fokus input */
.x-form-trigger-wrap-default.x-form-trigger-wrap-focus {
  border-color: var(--ungu) !important;
  box-shadow: 0 0 0 2px rgba(100, 29, 138, .15);
}
.x-form-cb-checked .x-form-checkbox-default,
.x-form-cb-checked .x-form-radio-default { color: var(--ungu) !important; }

/* 8. Progress bar & loading mask */
.x-progress-default { border-color: var(--ungu) !important; }
.x-progress-default .x-progress-bar-default { background-color: var(--ungu) !important; }
.x-mask-msg { border-color: var(--ungu-garis) !important; }

/* 9. Scrollbar tipis bernuansa ungu (Chrome/Edge/Firefox) */
* { scrollbar-color: #c9a6de transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c9a6de; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--ungu-muda); }

/* 10. Seleksi teks */
::selection { background: var(--ungu); color: #fff; }

/* 11. Halaman login: panel info RS (inline style rgba(39,75,104,.5)) -> ungu transparan */
[style*="rgba(39, 75, 104"] {
  background: linear-gradient(135deg, rgba(76, 21, 105, .78), rgba(138, 63, 179, .62)) !important;
  box-shadow: 0 12px 34px rgba(76, 21, 105, .28);
}

/* 12. Pesan "browser tidak di support" (aslinya teks putih untuk latar gelap) agar terbaca di latar terang */
[style*="text-shadow: rgb(150, 150, 150)"] {
  color: #4c1569 !important;
  text-shadow: none !important;
  background: rgba(255, 255, 255, .85);
  border-radius: 12px;
  padding: 16px 20px;
}