/*
 * SIMGOS - tampilan modern untuk semua dashboard:
 *  - .shd        : Dashboard ringkasan di Home admin (simgos-home-dashboard.js)
 *  - .shd-modern : dashboard bawaan (Pengunjung, Kunjungan, Rawat Inap, Lab, Radiologi, Indikator,
 *                  Kasus Diagnosa, Pendapatan, Klaim, Waktu Layanan IGD), dipasang oleh simgos-dashboard-modern.js
 * Hapus <link> file ini di index.html untuk kembali ke tampilan bawaan.
 */
:root {
  --shd-ungu: #641d8a;
  --shd-ungu-tua: #3d0f58;
  --shd-ungu-muda: #8a3fb3;
  --shd-pucat: #f4eefa;
  --shd-latar: #f5f3f8;
  --shd-kartu: #ffffff;
  --shd-teks: #1d1b22;
  --shd-redup: #6b6280;
  --shd-garis: #e7e1ef;
  --shd-bayang: 0 1px 2px rgba(40, 16, 70, .05), 0 4px 16px rgba(40, 16, 70, .06);
  --shd-bayang-naik: 0 2px 4px rgba(40, 16, 70, .06), 0 12px 28px rgba(40, 16, 70, .12);
  --shd-radius: 14px;
  --shd-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --shd-c1: #7c3aed; --shd-c1-bg: #f1eafe;
  --shd-c2: #0d9488; --shd-c2-bg: #e3f6f3;
  --shd-c3: #2563eb; --shd-c3-bg: #e7efff;
  --shd-c4: #d97706; --shd-c4-bg: #fdf1df;
  --shd-c5: #db2777; --shd-c5-bg: #fde8f2;
  --shd-c6: #16a34a; --shd-c6-bg: #e5f6ea;
}

/* =================== Dashboard ringkasan (Home admin) =================== */
.shd { padding: 20px; background: var(--shd-latar); min-height: 100%; box-sizing: border-box;
  font-family: var(--shd-font); font-size: 13px; color: var(--shd-teks); }
.shd *, .shd *::before, .shd *::after { box-sizing: border-box; }

.shd-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; color: #fff;
  background: radial-gradient(1200px 300px at 100% 0%, rgba(255,255,255,.18), transparent 60%),
              linear-gradient(120deg, var(--shd-ungu-tua) 0%, var(--shd-ungu) 45%, var(--shd-ungu-muda) 100%);
  box-shadow: 0 10px 30px rgba(61, 15, 88, .25); }
.shd-hero::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,.07); }
.shd-hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; z-index: 1; }
.shd-hero small { display: block; opacity: .8; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.shd-hero h2 { margin: 4px 0 2px; font-size: 22px; font-weight: 700; }
.shd-hero p { margin: 0; opacity: .85; }
.shd-hero-jam { text-align: right; }
.shd-hero-jam b { display: block; font-size: 28px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.shd-hero-stat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.shd-pill { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px;
  font-size: 12px; backdrop-filter: blur(4px); }
.shd-pill b { font-size: 13px; margin-left: 4px; }
.shd-pill.ok::before, .shd-pill.warn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.shd-pill.ok::before { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.shd-pill.warn::before { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.25); }

.shd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.shd-col-3 { grid-column: span 3; } .shd-col-4 { grid-column: span 4; } .shd-col-5 { grid-column: span 5; }
.shd-col-6 { grid-column: span 6; } .shd-col-7 { grid-column: span 7; } .shd-col-8 { grid-column: span 8; } .shd-col-12 { grid-column: span 12; }
@media (max-width: 1280px) { .shd-col-3 { grid-column: span 6; } .shd-col-4, .shd-col-5, .shd-col-7, .shd-col-8 { grid-column: span 12; } }
@media (max-width: 700px)  { .shd-col-3, .shd-col-6 { grid-column: span 12; } .shd { padding: 12px; } }

.shd-card { background: var(--shd-kartu); border-radius: var(--shd-radius); border: 1px solid var(--shd-garis); padding: 16px 18px;
  box-shadow: var(--shd-bayang); transition: box-shadow .2s, transform .2s; min-width: 0; }
.shd-card:hover { box-shadow: var(--shd-bayang-naik); }
.shd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.shd-card-h h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--shd-teks); }
.shd-card-h span { color: var(--shd-redup); font-size: 12px; }

.shd-kpi { position: relative; overflow: hidden; }
.shd-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.shd-kpi-top { display: flex; align-items: center; gap: 12px; }
.shd-ikon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  color: var(--c); background: var(--bg); }
.shd-kpi-label { color: var(--shd-redup); font-size: 12px; font-weight: 600; }
.shd-kpi-nilai { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.shd-kpi-sub { display: flex; gap: 8px; margin-top: 14px; }
.shd-kpi-sub div { flex: 1; background: var(--shd-latar); border-radius: 10px; padding: 7px 10px; }
.shd-kpi-sub small { display: block; color: var(--shd-redup); font-size: 11px; }
.shd-kpi-sub b { font-size: 14px; font-variant-numeric: tabular-nums; }
.shd-c1 { --c: var(--shd-c1); --bg: var(--shd-c1-bg); } .shd-c2 { --c: var(--shd-c2); --bg: var(--shd-c2-bg); }
.shd-c3 { --c: var(--shd-c3); --bg: var(--shd-c3-bg); } .shd-c4 { --c: var(--shd-c4); --bg: var(--shd-c4-bg); }
.shd-c5 { --c: var(--shd-c5); --bg: var(--shd-c5-bg); } .shd-c6 { --c: var(--shd-c6); --bg: var(--shd-c6-bg); }

/* Indikator: cincin BOR + sel-sel indikator */
.shd-ind-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.shd-ring { position: relative; width: 132px; height: 132px; flex: none; }
.shd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.shd-ring-isi { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.shd-ring-isi b { font-size: 24px; font-weight: 700; display: block; line-height: 1; }
.shd-ring-isi small { color: var(--shd-redup); font-size: 11px; }
.shd-ind { flex: 1; min-width: 240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.shd-ind div { background: var(--shd-latar); border-radius: 10px; padding: 9px 11px; }
.shd-ind small { display: block; color: var(--shd-redup); font-size: 11px; }
.shd-ind b { font-size: 17px; font-variant-numeric: tabular-nums; }
.shd-ind em { display: block; font-style: normal; font-size: 10px; color: var(--shd-redup); margin-top: 2px; }
.shd-ind .baik em { color: #15803d; } .shd-ind .kurang em { color: #b45309; }

/* Daftar rawat inap */
.shd-list { margin: 0; padding: 0; list-style: none; }
.shd-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--shd-garis); }
.shd-list li:last-child { border-bottom: 0; }
.shd-list li i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: var(--bg); font-size: 13px; }
.shd-list li span { flex: 1; }
.shd-list li b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* Grafik batang bulanan */
.shd-chart { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 22px 4px 0;
  background: repeating-linear-gradient(to top, transparent 0, transparent 41px, var(--shd-garis) 41px, var(--shd-garis) 42px); }
.shd-chart > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.shd-chart i { position: relative; display: block; width: 100%; max-width: 40px; min-height: 3px; border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--shd-ungu-muda), var(--shd-ungu)); transition: filter .2s; }
.shd-chart > div.kini i { background: linear-gradient(180deg, #a78bfa, var(--shd-c1)); box-shadow: 0 6px 14px rgba(124,58,237,.3); }
.shd-chart > div:hover i { filter: brightness(1.12); }
.shd-chart em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--shd-teks); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.shd-chart small { font-size: 11px; color: var(--shd-redup); margin-top: 6px; }

/* Pintasan ke dashboard lain */
.shd-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.shd-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--shd-garis);
  background: #fff; cursor: pointer; color: var(--shd-teks); transition: all .15s; text-align: left; font: inherit; }
.shd-link:hover, .shd-link:focus-visible { border-color: var(--shd-ungu-muda); background: var(--shd-pucat); outline: none; }
.shd-link i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--shd-pucat); color: var(--shd-ungu); }

.shd-note { color: var(--shd-redup); font-size: 11px; margin-top: 8px; }
.shd-kosong { color: var(--shd-redup); text-align: center; padding: 30px 0; }
.shd-warn { display: flex; gap: 10px; align-items: flex-start; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f;
  border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 12px; }
.shd-warn i { margin-top: 2px; }
.shd-skeleton { height: 120px; border-radius: var(--shd-radius); background: linear-gradient(90deg, #ece8f1 0%, #f7f5fa 50%, #ece8f1 100%);
  background-size: 200% 100%; animation: shd-kilau 1.2s linear infinite; }
@keyframes shd-kilau { to { background-position: -200% 0; } }

/* =================== Dashboard bawaan SIMGOS (.shd-modern) =================== */
.shd-modern, .shd-modern .x-panel-body { font-family: var(--shd-font); }
.shd-modern > .x-panel-bodyWrap > .x-panel-body,
.shd-modern .shd-latar-transparan > .x-panel-bodyWrap > .x-panel-body { background: var(--shd-latar) !important; }

/* toolbar atas & toolbar pilihan periode */
.shd-modern .x-toolbar { background: transparent !important; border: 0 !important; }
.shd-modern > .x-toolbar, .shd-modern > .x-panel-bodyWrap > .x-toolbar { background: #fff !important; border-bottom: 1px solid var(--shd-garis) !important; }

/* tombol segmented (Hari ini / Bulan ini / ... dan pilihan jenis grafik) */
.shd-modern .x-segmented-button-item { background: #fff !important; border: 1px solid var(--shd-garis) !important; border-radius: 0 !important;
  box-shadow: none !important; transition: background .15s; }
.shd-modern .x-segmented-button-first.x-segmented-button-item-horizontal { border-radius: 10px 0 0 10px !important; }
.shd-modern .x-segmented-button-last.x-segmented-button-item-horizontal { border-radius: 0 10px 10px 0 !important; }
.shd-modern .x-segmented-button-first.x-segmented-button-item-vertical { border-radius: 10px 10px 0 0 !important; }
.shd-modern .x-segmented-button-last.x-segmented-button-item-vertical { border-radius: 0 0 10px 10px !important; }
.shd-modern .x-segmented-button-item .x-btn-inner,
.shd-modern .x-segmented-button-item .x-btn-icon-el { color: var(--shd-redup) !important; font-weight: 600 !important; font-family: var(--shd-font) !important; }
.shd-modern .x-segmented-button-item.x-btn-over { background: var(--shd-pucat) !important; }
.shd-modern .x-segmented-button-item.x-btn-pressed { background: var(--shd-ungu) !important; border-color: var(--shd-ungu) !important; }
.shd-modern .x-segmented-button-item.x-btn-pressed .x-btn-inner,
.shd-modern .x-segmented-button-item.x-btn-pressed .x-btn-icon-el { color: #fff !important; }

/* kartu angka (Hari ini / Bulan ini / Tahun ini, BOR, AVLOS, ...) */
.shd-kartu { background: #fff !important; border-radius: var(--shd-radius) !important; border: 1px solid var(--shd-garis) !important;
  box-shadow: var(--shd-bayang) !important; margin: 10px !important; padding: 0 !important; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.shd-kartu:hover { box-shadow: var(--shd-bayang-naik) !important; transform: translateY(-2px); }
.shd-kartu .shd-kartu-isi { position: relative; padding: 14px 16px 12px; height: 100%; }
.shd-kartu .shd-kartu-isi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); }
.shd-kartu .shd-kartu-judul { display: flex; align-items: center; gap: 8px; color: var(--shd-redup); font-size: 12px; font-weight: 600; }
.shd-kartu .shd-kartu-judul i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: var(--bg); font-size: 13px; }
.shd-kartu .shd-kartu-nilai { font-size: 30px; font-weight: 700; color: var(--shd-teks); margin: 12px 0 6px; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shd-kartu .shd-kartu-info { font-size: 11px; color: var(--shd-redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* panel grafik */
.shd-chartcard { background: #fff !important; border-radius: var(--shd-radius) !important; border: 1px solid var(--shd-garis) !important;
  box-shadow: var(--shd-bayang) !important; overflow: hidden; }
.shd-chartcard > .x-panel-bodyWrap > .x-panel-body, .shd-chartcard .x-panel-body { background: #fff !important; }
.shd-chartcard .x-toolbar label, .shd-chartcard .x-toolbar .x-label,
.shd-chartcard .x-toolbar .x-component { font-family: var(--shd-font) !important; }
.shd-chartcard > .x-toolbar label, .shd-chartcard .x-toolbar-docked-top label { font-size: 14px !important; font-weight: 600 !important; color: var(--shd-teks) !important; }
.shd-modern .x-splitter { background: transparent !important; }

/* grid di dalam dashboard */
.shd-modern .x-grid-header-ct { background: var(--shd-latar) !important; border-color: var(--shd-garis) !important; }
.shd-modern .x-column-header { background: transparent !important; border-color: var(--shd-garis) !important; }
.shd-modern .x-column-header-text { color: var(--shd-redup) !important; font-weight: 600 !important; font-size: 12px !important; }
.shd-modern .x-grid-item-over .x-grid-cell { background: var(--shd-pucat) !important; }
.shd-modern .x-grid-row-summary .x-grid-cell { background: var(--shd-pucat) !important; font-weight: 700; }

/* monitoring waktu layanan IGD: ganti gradien biru dengan ungu */
.shd-modern .shd-igd-head { background: linear-gradient(120deg, var(--shd-ungu-tua) 0%, var(--shd-ungu) 55%, var(--shd-ungu-muda) 100%) !important;
  border-radius: 0 0 16px 16px; box-shadow: 0 6px 20px rgba(61,15,88,.2); }