/*
 * Tema warna BiCare — nuansa #d90368 (rose/magenta) dan #820263 (ungu tua).
 * Dimuat PALING AKHIR (setelah bootstrap, style.css NiceAdmin, vendor, dan app.css).
 * Satu-satunya tempat warna: ganti nilai di :root untuk mengubah seluruh aplikasi.
 * style.css masih NiceAdmin asli (biru #4154f1 / navy #012970) - semua pemakaiannya ditimpa di bawah.
 */

:root {
  --bc-primary: #d90368;        /* warna utama: tombol, link aktif, aksen sidebar */
  --bc-primary-rgb: 217, 3, 104;
  --bc-primary-hover: #b8035a;
  --bc-primary-active: #9c024c;
  --bc-on-primary: #ffffff;     /* teks di atas primary (kontras ±5:1) */
  --bc-secondary: #820263;      /* header, aksen gelap */
  --bc-secondary-rgb: 130, 2, 99;
  --bc-header: linear-gradient(90deg, #820263 0%, #a8026a 55%, #d90368 100%);
  --bc-heading: #5c0146;        /* judul, card-title, teks menu non-aktif */
  --bc-link: #b0025a;           /* link teks (lebih gelap dari primary agar terbaca di latar putih) */
  --bc-muted: #9a8a96;          /* teks sekunder, breadcrumb, ikon menu non-aktif, heading sidebar */
  --bc-tint: #fce4ef;           /* latar menu aktif / hover */
  --bc-tint-soft: #fdf3f8;      /* latar hover ringan (dropdown, thead) */
  --bc-tint-strong: #f6bdd7;    /* divider dropdown, item terpilih */
  --bc-focus: #e8569b;          /* border input saat fokus */
  --bc-bg: #faf6f9;             /* latar halaman */
  --bc-border: #f1d3e2;
  --bc-wajib: #dc3545;          /* tanda * isian wajib */
  --bc-display-bg: #2b0021;     /* latar layar antrian */

  /* Bootstrap 5 */
  --bs-primary: var(--bc-primary);
  --bs-primary-rgb: var(--bc-primary-rgb);
  --bs-secondary-rgb: 108, 117, 125;
  --bs-link-color: var(--bc-link);
  --bs-link-color-rgb: 176, 2, 90;
  --bs-link-hover-color: var(--bc-heading);
  --bs-link-hover-color-rgb: 92, 1, 70;

  /* DataTables (indikator "memproses", baris terpilih) */
  --dt-row-selected: var(--bc-primary-rgb);
}

/* ---------- dasar ---------- */
body {
  background: var(--bc-bg);
}

a {
  color: var(--bc-link);
}

a:hover {
  color: var(--bc-heading);
}

::selection {
  background: rgba(var(--bc-primary-rgb), 0.25);
}

/* ---------- utilitas warna primary (nilai statis hasil Sass, harus ditimpa) ---------- */
.text-primary { color: var(--bc-primary) !important; }
.text-ungu { color: var(--bc-secondary) !important; }
.bg-primary { background-color: var(--bc-primary) !important; color: var(--bc-on-primary); }
.bg-ungu { background-color: var(--bc-secondary) !important; color: #fff; }
.border-primary { border-color: var(--bc-primary) !important; }
.bg-primary-light { background-color: var(--bc-tint) !important; }
.bg-tint-soft { background-color: var(--bc-tint-soft) !important; }
.link-primary { color: var(--bc-link) !important; }
.badge.bg-primary { color: var(--bc-on-primary); }

/* ---------- tombol ---------- */
.btn-primary {
  --bs-btn-color: var(--bc-on-primary);
  --bs-btn-bg: var(--bc-primary);
  --bs-btn-border-color: var(--bc-primary);
  --bs-btn-hover-color: var(--bc-on-primary);
  --bs-btn-hover-bg: var(--bc-primary-hover);
  --bs-btn-hover-border-color: var(--bc-primary-hover);
  --bs-btn-active-color: var(--bc-on-primary);
  --bs-btn-active-bg: var(--bc-primary-active);
  --bs-btn-active-border-color: var(--bc-primary-active);
  --bs-btn-disabled-color: var(--bc-on-primary);
  --bs-btn-disabled-bg: var(--bc-primary);
  --bs-btn-disabled-border-color: var(--bc-primary);
  --bs-btn-focus-shadow-rgb: var(--bc-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--bc-primary-active);
  --bs-btn-border-color: var(--bc-primary);
  --bs-btn-hover-color: var(--bc-on-primary);
  --bs-btn-hover-bg: var(--bc-primary);
  --bs-btn-hover-border-color: var(--bc-primary);
  --bs-btn-active-color: var(--bc-on-primary);
  --bs-btn-active-bg: var(--bc-primary-hover);
  --bs-btn-active-border-color: var(--bc-primary-hover);
  --bs-btn-disabled-color: var(--bc-primary);
  --bs-btn-disabled-border-color: var(--bc-primary);
  --bs-btn-focus-shadow-rgb: var(--bc-primary-rgb);
}

.btn-ungu {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bc-secondary);
  --bs-btn-border-color: var(--bc-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bc-heading);
  --bs-btn-hover-border-color: var(--bc-heading);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bc-heading);
  --bs-btn-focus-shadow-rgb: var(--bc-secondary-rgb);
}

/* ---------- form ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bc-focus);
  box-shadow: 0 0 0 0.25rem rgba(var(--bc-primary-rgb), 0.2);
}

.form-check-input:checked {
  background-color: var(--bc-primary);
  border-color: var(--bc-primary);
}

/* ---------- pagination, dropdown, nav ---------- */
.pagination {
  --bs-pagination-color: var(--bc-link);
  --bs-pagination-hover-color: var(--bc-heading);
  --bs-pagination-focus-color: var(--bc-heading);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bc-primary-rgb), 0.2);
  --bs-pagination-active-color: var(--bc-on-primary);
  --bs-pagination-active-bg: var(--bc-primary);
  --bs-pagination-active-border-color: var(--bc-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--bc-on-primary);
  --bs-dropdown-link-active-bg: var(--bc-primary);
}

.dropdown-menu .dropdown-item:hover,
.header-nav .profile .dropdown-item:hover {
  background-color: var(--bc-tint-soft);
}

.dropdown-menu .dropdown-divider {
  color: var(--bc-tint-strong);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--bc-on-primary);
  --bs-nav-pills-link-active-bg: var(--bc-primary);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus,
.nav-tabs-bordered .nav-link.active {
  color: var(--bc-primary);
}

.nav-tabs-bordered .nav-link.active {
  border-bottom-color: var(--bc-primary);
}

.accordion-button:not(.collapsed) {
  color: var(--bc-heading);
  background-color: var(--bc-tint-soft);
}

.progress-bar {
  background-color: var(--bc-primary);
}

/* ---------- NiceAdmin: header ---------- */
.header {
  background: var(--bc-header);
  box-shadow: 0 2px 20px rgba(var(--bc-secondary-rgb), 0.25);
}

.header .logo span,
.header .toggle-sidebar-btn,
.header-nav .nav-link,
.header-nav .nav-profile,
.header-nav .nav-profile span {
  color: #fff;
}

.header-nav .nav-link:hover,
.header .toggle-sidebar-btn:hover {
  color: var(--bc-tint);
}

/* ---------- NiceAdmin: judul, breadcrumb, card ---------- */
.pagetitle h1,
.card-title,
.logo span,
.dashboard .info-card h6,
.error-404 h2 {
  color: var(--bc-heading);
}

.card-title span,
.breadcrumb a,
.breadcrumb .active {
  color: var(--bc-muted);
}

.breadcrumb a:hover {
  color: var(--bc-link);
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus,
.error-404 h1 {
  color: var(--bc-primary);
}

.dashboard .sales-card .card-icon {
  color: var(--bc-primary);
  background: var(--bc-tint);
}

.dashboard .revenue-card .card-icon {
  color: var(--bc-secondary);
  background: var(--bc-tint-soft);
}

.table thead.table-tint th,
.dashboard .table thead {
  background: var(--bc-tint-soft);
}

/* ---------- NiceAdmin: sidebar (heading seksi + item + dropdown) ---------- */
.sidebar-nav .nav-heading {
  color: var(--bc-muted);
}

.sidebar-nav .nav-link {
  color: var(--bc-primary-active);
  background: var(--bc-tint);
}

.sidebar-nav .nav-link i {
  color: var(--bc-primary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--bc-heading);
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--bc-muted);
}

.sidebar-nav .nav-link:hover {
  color: var(--bc-primary-active);
  background: var(--bc-tint);
}

.sidebar-nav .nav-link:hover i {
  color: var(--bc-primary);
}

.sidebar-nav .nav-content a {
  color: var(--bc-heading);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--bc-primary);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--bc-primary);
}

/* ---------- footer & tombol ke atas ---------- */
.footer {
  border-top-color: var(--bc-border);
}

.footer .copyright,
.footer .credits {
  color: var(--bc-heading);
}

.back-to-top {
  background: var(--bc-primary);
}

.back-to-top i {
  color: var(--bc-on-primary);
}

.back-to-top:hover {
  background: var(--bc-primary-hover);
}

/* ---------- Select2 & DataTables ---------- */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--bc-focus);
  box-shadow: 0 0 0 0.25rem rgba(var(--bc-primary-rgb), 0.2);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: var(--bc-tint);
  color: var(--bc-heading);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
  background-color: var(--bc-primary);
  color: var(--bc-on-primary);
}

/* ---------- tanda isian wajib ----------
 * Otomatis dari atribut HTML `required`: label yang diikuti (sibling sesudahnya) isian wajib atau pembungkus
 * yang berisi isian wajib. Isian disabled tidak dianggap wajib. Tata letak lain: class `required` pada label.
 */
label:has(~ :is(input, select, textarea)[required]:not(:disabled))::after,
label:has(~ * :is(input, select, textarea)[required]:not(:disabled))::after,
label.required::after {
  content: " *";
  color: var(--bc-wajib);
  font-weight: 600;
}

/* ---------- komponen BiCare ---------- */
.pasien-ringkas {
  background: var(--bc-tint-soft);
  border-left: 4px solid var(--bc-primary);
}

.pasien-ringkas .no-rm {
  color: var(--bc-secondary);
}

.vital-chip {
  background: var(--bc-tint-soft);
  border: 1px solid var(--bc-border);
  color: var(--bc-heading);
}

.soap-label {
  background: var(--bc-secondary);
  color: #fff;
}

.antrian-nomor {
  color: var(--bc-primary);
}

.antrian-card.dipanggil {
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px rgba(var(--bc-primary-rgb), 0.15);
}

.timeline-emr .item::before {
  background: var(--bc-primary);
}

.timeline-emr .item {
  border-left-color: var(--bc-tint-strong);
}

/* ---------- layar antrian ---------- */
.display-page {
  background: radial-gradient(circle at top, var(--bc-secondary) 0%, var(--bc-display-bg) 70%);
  color: #fff;
}

.display-page .panel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.display-page .nomor-utama {
  color: #fff;
  text-shadow: 0 0 30px rgba(var(--bc-primary-rgb), 0.9);
}

.display-page .label-layanan,
.display-page .text-sub {
  color: var(--bc-tint-strong);
}

.display-page .berikut .kode {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
}

/* ---------- halaman error ---------- */
.error-404 .btn {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
}

.error-404 .btn:hover {
  background: var(--bc-primary-hover);
  color: var(--bc-on-primary);
}

/* ---------- halaman login ---------- */
.auth-page {
  background: linear-gradient(160deg, var(--bc-tint) 0%, var(--bc-bg) 45%, #fff 100%);
}

.auth-page .card-title {
  color: var(--bc-heading);
}

.auth-page .auth-brand {
  color: var(--bc-secondary);
}

.auth-page .auth-tagline {
  color: var(--bc-muted);
}

/* ---------- layar antrian: overlay suara ---------- */
.display-page .overlay-suara {
  background: rgba(43, 0, 33, 0.92);
  color: #fff;
}

/* ---------- halaman status antrian pasien ---------- */
.antrian-saya .nomor-besar {
  color: var(--bc-primary);
}

.antrian-saya .kartu-dipanggil {
  background: var(--bc-primary);
  color: var(--bc-on-primary);
}