/* ============================================================
   MEDCORE EMR — TEMPLATE WARNA (dipilih user)
   5 pilihan: Dark Blue (bawaan) · White · Light Green · Light Yellow · Light Blue
   Cara kerja: hanya menimpa "token warna" (CSS variables) yang dipakai
   emr.css (wajah EMR) dan style.css (halaman teknis). Tidak ada aturan
   tata letak yang diubah, jadi tampilan tetap sama, hanya warnanya berganti.
   Template terang juga memasang atribut  data-light="1"  pada <html>,
   dipakai untuk menyesuaikan warna-warna muda yang khusus tema gelap.
   ============================================================ */

/* ---------------- 1. DARK BLUE (bawaan) ---------------- */
html.th-darkblue{
  --bg:#0B111E; --bg2:#0C1422; --bg3:#070C16;
  --topbar:rgba(6,10,19,.9); --panel:rgba(0,0,0,.22); --panel2:rgba(10,15,26,.94); --scrim:rgba(0,0,0,.55);
  --glass:rgba(255,255,255,.05); --glass2:rgba(255,255,255,.03); --glass3:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.06); --line3:rgba(255,255,255,.28);
  --txt:#fff; --txt2:rgba(255,255,255,.8); --mut:rgba(255,255,255,.5); --mut2:rgba(255,255,255,.3);
  --ac:#22d3ee; --ac2:#60a5fa;
  --ok:#4ade80; --warn:#fb923c; --err:#f87171; --vio:#a78bfa; --teal:#2dd4bf; --pink:#f472b6;
  --sidebg:rgba(5,9,18,.62); --side1:rgba(17,25,40,.99); --side2:rgba(9,14,25,.99); --overlay:rgba(3,7,14,.82);
  --bg-tint1:rgba(96,165,250,.10); --bg-tint2:rgba(167,139,250,.08);
  /* token halaman teknis (style.css) */
  --bg-soft:#141C2E; --card:#151E33; --border:#26314a; --text:#e2e8f0; --muted:#94a3b8;
  --accent:#38bdf8; --pk:#fbbf24;
}

/* ---------------- 2. WHITE ---------------- */
html.th-white{
  --bg:#ffffff; --bg2:#f7f9fc; --bg3:#eef2f7;
  --topbar:rgba(255,255,255,.93); --panel:#ffffff; --panel2:rgba(255,255,255,.97); --scrim:rgba(15,23,42,.45);
  --glass:rgba(15,23,42,.05); --glass2:rgba(15,23,42,.03); --glass3:rgba(15,23,42,.1);
  --line:rgba(15,23,42,.14); --line2:rgba(15,23,42,.08); --line3:rgba(15,23,42,.3);
  /* Warna huruf tema terang dibuat PEKAT (bukan abu-abu muda) supaya tulisan
     tetap jelas dibaca, terutama teks kecil seperti keterangan & satuan. */
  --txt:#0f172a; --txt2:rgba(15,23,42,.92); --mut:rgba(15,23,42,.78); --mut2:rgba(15,23,42,.68);
  --ac:#0e7490; --ac2:#2563eb;
  --ok:#15803d; --warn:#b45309; --err:#b91c1c; --vio:#6d28d9; --teal:#0f766e; --pink:#be185d;
  --sidebg:rgba(255,255,255,.75); --side1:#ffffff; --side2:#f7f9fc; --overlay:rgba(15,23,42,.4);
  --bg-tint1:rgba(37,99,235,.05); --bg-tint2:rgba(109,40,217,.04);
  --bg-soft:#f1f5f9; --card:#ffffff; --border:#dbe3ee; --text:#0f172a; --muted:#3f4d63;
  --accent:#0369a1; --pk:#b45309;
}

/* ---------------- 3. LIGHT GREEN ---------------- */
html.th-green{
  --bg:#f4fbf6; --bg2:#eaf7ee; --bg3:#e1f3e7;
  --topbar:rgba(255,255,255,.93); --panel:#ffffff; --panel2:rgba(255,255,255,.97); --scrim:rgba(15,42,28,.42);
  --glass:rgba(16,64,40,.055); --glass2:rgba(16,64,40,.035); --glass3:rgba(16,64,40,.1);
  --line:rgba(16,64,40,.15); --line2:rgba(16,64,40,.085); --line3:rgba(16,64,40,.3);
  --txt:#0f2a1c; --txt2:rgba(15,42,28,.92); --mut:rgba(15,42,28,.78); --mut2:rgba(15,42,28,.68);
  --ac:#15803d; --ac2:#0f766e;
  --ok:#15803d; --warn:#a16207; --err:#b91c1c; --vio:#6d28d9; --teal:#0f766e; --pink:#be185d;
  --sidebg:rgba(240,250,243,.78); --side1:#ffffff; --side2:#f4fbf6; --overlay:rgba(15,42,28,.4);
  --bg-tint1:rgba(21,128,61,.07); --bg-tint2:rgba(15,118,110,.05);
  --bg-soft:#eaf7ee; --card:#ffffff; --border:#cfe8d8; --text:#0f2a1c; --muted:#375343;
  --accent:#15803d; --pk:#a16207;
}

/* ---------------- 4. LIGHT YELLOW ---------------- */
html.th-yellow{
  --bg:#fffdf3; --bg2:#fdf7e6; --bg3:#fbf1d6;
  --topbar:rgba(255,253,243,.94); --panel:#ffffff; --panel2:rgba(255,253,243,.97); --scrim:rgba(64,48,10,.42);
  --glass:rgba(94,72,16,.055); --glass2:rgba(94,72,16,.035); --glass3:rgba(94,72,16,.1);
  --line:rgba(94,72,16,.16); --line2:rgba(94,72,16,.09); --line3:rgba(94,72,16,.3);
  --txt:#3a2f0b; --txt2:rgba(58,47,11,.94); --mut:rgba(58,47,11,.82); --mut2:rgba(58,47,11,.72);
  --ac:#b45309; --ac2:#a16207;
  --ok:#15803d; --warn:#b45309; --err:#b91c1c; --vio:#6d28d9; --teal:#0f766e; --pink:#be185d;
  --sidebg:rgba(255,252,240,.8); --side1:#ffffff; --side2:#fffdf3; --overlay:rgba(64,48,10,.4);
  --bg-tint1:rgba(217,119,6,.07); --bg-tint2:rgba(161,98,7,.05);
  --bg-soft:#fdf7e6; --card:#fffefa; --border:#eadfae; --text:#3a2f0b; --muted:#5f5227;
  --accent:#a16207; --pk:#b45309;
}

/* ---------------- 5. LIGHT BLUE ---------------- */
html.th-blue{
  --bg:#f2f7ff; --bg2:#e8f0fd; --bg3:#dde9fb;
  --topbar:rgba(255,255,255,.93); --panel:#ffffff; --panel2:rgba(255,255,255,.97); --scrim:rgba(12,33,72,.42);
  --glass:rgba(12,45,96,.055); --glass2:rgba(12,45,96,.035); --glass3:rgba(12,45,96,.1);
  --line:rgba(12,45,96,.15); --line2:rgba(12,45,96,.085); --line3:rgba(12,45,96,.3);
  --txt:#0f2447; --txt2:rgba(15,36,71,.92); --mut:rgba(15,36,71,.78); --mut2:rgba(15,36,71,.68);
  --ac:#1d4ed8; --ac2:#0369a1;
  --ok:#15803d; --warn:#b45309; --err:#b91c1c; --vio:#6d28d9; --teal:#0f766e; --pink:#be185d;
  --sidebg:rgba(240,246,255,.78); --side1:#ffffff; --side2:#f2f7ff; --overlay:rgba(12,33,72,.4);
  --bg-tint1:rgba(29,78,216,.08); --bg-tint2:rgba(3,105,161,.05);
  --bg-soft:#e8f0fd; --card:#ffffff; --border:#cfdcf3; --text:#0f2447; --muted:#35486b;
  --accent:#1d4ed8; --pk:#b45309;
}

/* ============================================================
   PENYESUAIAN TEMA TERANG
   Warna-warna di bawah ini aslinya dipilih untuk latar gelap
   (terang/pucat). Pada latar terang diganti versi lebih pekat
   supaya tetap terbaca.
   ============================================================ */
html[data-light] .emr-user-role.sa{color:#a16207;border-color:rgba(161,98,7,.35);background:rgba(251,191,36,.18)}
html[data-light] .emr-user-role.us{color:#0e7490;border-color:rgba(14,116,144,.32);background:rgba(34,211,238,.14)}
html[data-light] .emr-flash.err{color:#b91c1c}
html[data-light] .ch-i{fill:#64748b}
html[data-light] .sb-i{color:#475569;background:rgba(148,163,184,.2)}
html[data-light] .st-txt-i{color:#475569}
html[data-light] .sb-m,
html[data-light] .st-txt-m,
html[data-light] .ch-legend b{color:#a16207}
html[data-light] .ch-legend{background:rgba(251,191,36,.12);border-color:rgba(161,98,7,.25)}
html[data-light] .mx-toggle:hover{color:#1d4ed8;border-color:rgba(29,78,216,.4)}
html[data-light] .mx-neg{color:#15803d;background:rgba(21,128,61,.14)}
html[data-light] .mx-trace{color:#a16207;background:rgba(217,119,6,.16)}
html[data-light] .mx-pos1{color:#c2410c;background:rgba(234,88,12,.16)}
html[data-light] .mx-pos2{color:#b91c1c;background:rgba(185,28,28,.16)}
html[data-light] .mx-none{color:#475569;background:rgba(100,116,139,.14)}
html[data-light] .mx-empty{color:rgba(15,23,42,.2);background:rgba(15,23,42,.02)}
html[data-light] .ep-ai-warn{color:#7f1d1d;background:rgba(220,38,38,.09);border-color:rgba(185,28,28,.35);border-left-color:#dc2626}
html[data-light] .ep-ai-warn .w-ic{color:#b91c1c}
html[data-light] .sc-card.sc-alert .sc-badge{color:#b91c1c}
html[data-light] .sc-card.sc-warn .sc-badge{color:#b45309}
html[data-light] .sc-card.sc-normal .sc-badge{color:#15803d}
/* halaman teknis: tautan & sorotan kolom */
html[data-light] .tbl th.th-sort a:hover{color:#1d4ed8}
html[data-light] .tbl th.th-on a{color:#1d4ed8}
/* garis bantu grafik di latar terang */
html[data-light] .ch-grid{stroke:rgba(15,23,42,.1)}
html[data-light] .ch-band{fill:rgba(21,128,61,.10)}
/* teks abu-abu yang masih terlalu muda untuk latar terang */
html[data-light] .ch-val-i{fill:#475569}
html[data-light] .sc-card.sc-na{opacity:1}
/* Pengaman: beberapa label kecil (keterangan "Info" pada peta hasil lab, chip
   "kasus lama", label tingkat keyakinan diagnosa AI) sempat ditulis dengan
   abu-abu tetap. Aturan ini membuatnya ikut memakai warna teks tema, termasuk
   pada halaman yang masih memakai versi lama sampai aplikasi dijalankan ulang. */
html[data-light] [style*="#94a3b8"]{color:var(--mut) !important}
/* catatan: warna huruf abu lainnya mengikuti token tema (--txt2/--mut/--mut2)
   yang sudah dipertegas di daftar tema di atas, jadi otomatis benar untuk
   tema Putih, Hijau, Kuning, maupun Biru. */

/* ============================================================
   PEMILIH TEMA (dipakai di menu hamburger EMR & bilah atas halaman teknis)
   ============================================================ */
.tema-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tema-pick .tp-lbl{font-size:11px;color:var(--mut);font-weight:600}
.tema-dot{
  width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid var(--line3);
  padding:0;line-height:1;transition:.15s;position:relative
}
.tema-dot:hover{transform:scale(1.12)}
.tema-dot.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--glass3)}
.tema-dot[data-t="darkblue"]{background:linear-gradient(135deg,#0B111E,#22d3ee)}
.tema-dot[data-t="white"]{background:linear-gradient(135deg,#ffffff,#cbd5e1)}
.tema-dot[data-t="green"]{background:linear-gradient(135deg,#d7f2e0,#15803d)}
.tema-dot[data-t="yellow"]{background:linear-gradient(135deg,#fdf0c6,#a16207)}
.tema-dot[data-t="blue"]{background:linear-gradient(135deg,#dbeafe,#1d4ed8)}
.tema-row{padding:10px 12px;border-top:1px solid var(--line2)}
.tema-row .tp-nm{font-size:11px;color:var(--mut);margin-top:6px;letter-spacing:.02em}

/* grafik & elemen khusus pada latar terang */
html[data-light] .ch-line{stroke:rgba(30,64,175,.75)}
html[data-light] .ch-area{fill:rgba(96,165,250,.14)}
html[data-light] .ch-n{fill:#15803d}
html[data-light] .ch-h{fill:#b91c1c}
html[data-light] .ch-l{fill:#1d4ed8}
html[data-light] .ch-axl,
html[data-light] .ch-axd{fill:rgba(15,23,42,.62)}
html[data-light] .ch-dot{stroke:#ffffff}
html[data-light] .emr-top{box-shadow:0 1px 0 rgba(15,23,42,.06)}
html[data-light] .emr-login-card{box-shadow:0 18px 40px rgba(15,23,42,.12)}
/* chip/kartu transparan di halaman beranda */
html[data-light] .emr-home .quick a{background:var(--glass2)}

/* sisi kubus navigasi: warna bagian digelapkan pada tema terang */
html[data-light] .emr-cface[data-f="1"]{--fc:#0e7490}
html[data-light] .emr-cface[data-f="2"]{--fc:#0f766e}
html[data-light] .emr-cface[data-f="3"]{--fc:#1d4ed8}
html[data-light] .emr-cface[data-f="4"]{--fc:#b45309}
html[data-light] .emr-cface[data-f="5"]{--fc:#15803d}
html[data-light] .emr-cface[data-f="6"]{--fc:#6d28d9}
html[data-light] .emr-nav-dot{opacity:.85}