/*
 * Tema SDK Apps. Bagian warna (PRD 3.3) hanya mengganti variabel warna
 * Metronic 8. Bagian tipografi di akhir file (PRD 3.4) menerapkan skala ukuran
 * yang mudah dibaca; bentuk, radius, dan tata letak tetap bawaan Metronic.
 * Dimuat setelah style.bundle.css.
 */

:root,
[data-bs-theme=light] {
    --bs-primary: #0B8474;
    --bs-primary-rgb: 11, 132, 116;
    --bs-primary-active: #096D60;
    --bs-primary-light: #E6F3F1;
    --bs-primary-inverse: #FFFFFF;
    --bs-primary-clarity: rgba(11, 132, 116, 0.2);
    --bs-primary-bg-subtle: #E6F3F1;
    --bs-primary-border-subtle: #B3DAD4;
    --bs-primary-text-emphasis: #096D60;
    --bs-text-primary: #0B8474;

    --bs-success: #0B8474;
    --bs-success-rgb: 11, 132, 116;
    --bs-success-active: #096D60;
    --bs-success-light: #E6F3F1;
    --bs-text-success: #0B8474;

    --bs-warning: #B7791F;
    --bs-warning-rgb: 183, 121, 31;
    --bs-warning-active: #96621A;
    --bs-warning-light: #FBF3E6;
    --bs-text-warning: #B7791F;

    --bs-danger: #B42318;
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-active: #931C13;
    --bs-danger-light: #FBEAE8;
    --bs-text-danger: #B42318;

    --bs-info: #2563A8;
    --bs-info-rgb: 37, 99, 168;
    --bs-info-active: #1D4F87;
    --bs-info-light: #E8F0F9;
    --bs-text-info: #2563A8;

    --bs-link-color: #0B8474;
    --bs-link-color-rgb: 11, 132, 116;
    --bs-link-hover-color: #096D60;
    --bs-link-hover-color-rgb: 9, 109, 96;

    --bs-focus-ring-color: rgba(11, 132, 116, 0.25);
    --bs-component-active-bg: #0B8474;
    --bs-component-hover-color: #0B8474;
    --bs-component-checked-bg: #0B8474;
    --bs-menu-link-color-hover: #0B8474;
    --bs-menu-link-color-show: #0B8474;
    --bs-menu-link-color-here: #0B8474;
    --bs-menu-link-color-active: #0B8474;
    --bs-ribbon-label-bg: #0B8474;
}

/* Warna biru Metronic yang ditulis langsung (bukan lewat variabel) */

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate,
.form-check.form-check-solid .form-check-input[type=checkbox]:indeterminate {
    background-color: #0B8474;
    border-color: #0B8474;
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(11, 132, 116, 0.25);
}

.form-range::-webkit-slider-thumb {
    background-color: #0B8474;
}

.form-range::-moz-range-thumb {
    background-color: #0B8474;
}

.btn-primary {
    --bs-btn-bg: #0B8474;
    --bs-btn-border-color: #0B8474;
    --bs-btn-hover-bg: #096D60;
    --bs-btn-hover-border-color: #096D60;
    --bs-btn-active-bg: #096D60;
    --bs-btn-active-border-color: #096D60;
    --bs-btn-disabled-bg: #0B8474;
    --bs-btn-disabled-border-color: #0B8474;
}

.btn-outline-primary {
    --bs-btn-color: #0B8474;
    --bs-btn-border-color: #0B8474;
    --bs-btn-hover-bg: #0B8474;
    --bs-btn-hover-border-color: #0B8474;
    --bs-btn-active-bg: #0B8474;
    --bs-btn-active-border-color: #0B8474;
    --bs-btn-disabled-color: #0B8474;
    --bs-btn-disabled-border-color: #0B8474;
}

/* Varian aksi: accent ungu untuk ekspor, import biru untuk unggah/impor.
   Masing-masing tersedia dalam bentuk solid, light, dan outline. */
.btn:is(.btn-accent, .btn-light-accent, .btn-outline-accent) {
    --aksi-warna: #7239ea;
    --aksi-hover: #5b26c9;
    --aksi-light: #f0e9ff;
    --aksi-ring: #c5adf7;
}

.btn:is(.btn-import, .btn-light-import, .btn-outline-import) {
    --aksi-warna: #1769e0;
    --aksi-hover: #1055bb;
    --aksi-light: #eaf2ff;
    --aksi-ring: #a9c8f7;
}

.btn:is(.btn-accent, .btn-import, .btn-light-accent, .btn-light-import, .btn-outline-accent, .btn-outline-import) {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--aksi-warna);
    --bs-btn-border-color: var(--aksi-warna);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--aksi-hover);
    --bs-btn-hover-border-color: var(--aksi-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--aksi-hover);
    --bs-btn-active-border-color: var(--aksi-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--aksi-warna);
    --bs-btn-disabled-border-color: var(--aksi-warna);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn:is(.btn-light-accent, .btn-light-import) {
    --bs-btn-color: var(--aksi-warna);
    --bs-btn-bg: var(--aksi-light);
    --bs-btn-border-color: transparent;
    --bs-btn-disabled-color: var(--aksi-warna);
    --bs-btn-disabled-bg: var(--aksi-light);
    --bs-btn-disabled-border-color: transparent;
}

.btn:is(.btn-outline-accent, .btn-outline-import) {
    --bs-btn-color: var(--aksi-warna);
    --bs-btn-bg: transparent;
    --bs-btn-disabled-color: var(--aksi-warna);
    --bs-btn-disabled-bg: transparent;
    border: 1px solid var(--aksi-warna) !important;
}

.btn:is(.btn-accent, .btn-import, .btn-light-accent, .btn-light-import, .btn-outline-accent, .btn-outline-import):is(:hover, :active, .active, .show) {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color) !important;
}

.btn:is(.btn-accent, .btn-import, .btn-light-accent, .btn-light-import, .btn-outline-accent, .btn-outline-import):focus-visible {
    outline: 3px solid var(--aksi-ring) !important;
    outline-offset: 2px;
}

.btn:is(.btn-accent, .btn-import, .btn-light-accent, .btn-light-import, .btn-outline-accent, .btn-outline-import) :is(i, .svg-icon) {
    color: inherit;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #0B8474;
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: #0B8474;
}

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after {
    border-color: #0B8474 !important;
}

/* Opsi select2 yang disorot (hover atau pilihan yang akan dibatalkan): teal dengan
 * teks putih. Latar, teks, dan tanda centang Metronic membaca variabel yang sama. */
.select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--highlighted {
    --bs-component-hover-bg: #0B8474;
    --bs-component-hover-color: #FFFFFF;
}

/* ---------- Sidebar demo1 (dark-sidebar) dengan latar teal ----------
 * Bentuk dan tata letak tetap bawaan demo1. Hanya warna latar yang diganti,
 * ditambah teks dan ikon putih murni agar terbaca di atas teal.
 */

[data-kt-app-layout=dark-sidebar] .app-sidebar {
    background-color: #0B8474;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .app-sidebar-logo {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Scrollbar sidebar: Metronic memakai overflow scroll sehingga tombol panah scrollbar
 * Windows tampil (berwarna gelap) di atas latar teal. Tampilkan hanya bila menu
 * melebihi tinggi layar, dengan warna putih transparan. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y,
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y {
    overflow-y: auto;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover,
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover {
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .scroll-y:hover::-webkit-scrollbar-thumb,
[data-kt-app-layout=dark-sidebar] .app-sidebar .hover-scroll-overlay-y:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.35);
}

/* Teks, ikon, bullet, dan panah menu selalu putih murni di semua state. Metronic
 * memakai #F5F5F5 untuk state here, show, hover, dan active, sehingga perlu
 * !important agar tidak tampil keabuan. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #FFFFFF !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after {
    background-color: #FFFFFF !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: #096D60;
}

@media (min-width: 992px) {
    [data-kt-app-layout=dark-sidebar] .app-sidebar .menu-sub-lg-dropdown {
        background-color: #0B8474;
    }
}

/* Input yang sedang aktif (fokus) bergaris tipis teal agar posisi isian mudah dikenali,
 * termasuk select2, tanggal flatpickr (altInput memakai form-control), dan checkbox.
 * Hanya warna garis yang diganti; tebal garis tetap bawaan Metronic (1px). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2-container--bootstrap5.select2-container--focus:not(.select2-container--disabled) .form-select,
.select2-container--bootstrap5.select2-container--open:not(.select2-container--disabled) .form-select {
    border-color: var(--bs-primary) !important;
}

/* Label jenis faskes (x-badge-jenis-faskes): satu warna per jenis, sengaja berbeda
 * dari warna status (hijau, kuning, merah) agar tidak dibaca sebagai status. */
.badge.badge-jenis-puskesmas {
    color: #096D60;
    background-color: #E6F3F1;
}

.badge.badge-jenis-pustu {
    color: #2563A8;
    background-color: #E8F0FA;
}

.badge.badge-jenis-polindes {
    color: #6B3FA0;
    background-color: #F1EAFB;
}

.badge.badge-jenis-poskesdes {
    color: #A0306B;
    background-color: #FBEAF3;
}

.badge.badge-jenis-posyandu {
    color: #8A5A00;
    background-color: #FBF1DE;
}

/* Angka di tabel: lebar digit seragam (PRD 3.4). */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ---------- Tipografi (PRD 3.4) ----------
 * Metronic mengunci html dan body ke 13px (12px di layar kecil) dengan !important.
 * Akar diganti ke 93.75% (15px pada setelan browser bawaan) sehingga 1rem = 15px
 * dan semua ukuran mengikuti setelan huruf browser serta zoom. Skala:
 *   teks dasar, tabel, input   1rem       (15px) 400
 *   label form, keterangan     0.9333rem  (14px) 500
 *   judul kartu                1.1333rem  (17px) 600
 *   judul halaman              1.4667rem  (22px) 600
 *   badge, teks terkecil       0.8667rem  (13px) 500
 * Area klik minimal 2.6667rem (40px).
 */

html {
    font-size: 93.75% !important;
}

body {
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
}

:root,
[data-bs-theme=light] {
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;

    /* Teks keterangan tidak lebih terang dari #5E6A64 agar kontras tetap cukup. */
    --bs-text-muted: #5E6A64;
    --bs-secondary-color: #5E6A64;
    --bs-text-gray-500: #5E6A64;
    --bs-text-gray-600: #5E6A64;
}

/* Judul halaman dan judul kartu */
.page-heading {
    font-size: 1.4667rem !important;
    font-weight: 600 !important;
}

.card .card-header .card-title,
.card .card-header .card-title h1,
.card .card-header .card-title h2,
.card .card-header .card-title h3,
.card .card-header .card-title h4,
.card .card-header .card-title h5,
.card .card-header .card-title h6,
.card .card-header .card-title .card-label {
    font-size: 1.1333rem;
    font-weight: 600;
}

/* Label form dan keterangan */
.form-label,
.col-form-label,
.form-check-label,
.form-text {
    font-size: 0.9333rem;
    font-weight: 500;
}

/* Input, select, dan isi tabel memakai ukuran teks dasar */
.form-control,
.form-select,
.select2-container--bootstrap5 .select2-selection {
    font-size: 1rem;
    font-weight: 400;
}

.table {
    font-size: 1rem;
}

.table > :not(caption) > * > * {
    line-height: 1.4;
}

/* Judul kolom tabel: tebal, satu baris, dan rata tengah vertikal agar semua judul
 * sejajar. Bootstrap meratakan thead ke bawah dan beberapa tabel memakai
 * fw-semibold (!important), sehingga perlu !important untuk ketebalannya. */
.table > thead > tr > th {
    font-weight: 600 !important;
    white-space: nowrap;
    vertical-align: middle;
}

/* Badge dan teks terkecil: tidak ada yang di bawah 13px */
.badge {
    --bs-badge-font-size: 0.8667rem;
    --bs-badge-font-weight: 500;
}

.badge.badge-sm,
.page-item .page-link i,
.fs-8,
.fs-9,
.fs-10 {
    font-size: 0.8667rem !important;
}

.toast {
    --bs-toast-font-size: 0.8667rem;
}

/* Menu sidebar: ikut skala dasar, bukan skala bawaan Metronic yang membesar
 * mengikuti perubahan akar 93.75% di atas. */
.app-sidebar .menu .menu-link .menu-title,
.app-sidebar .menu .menu-heading {
    font-size: 0.9333rem;
}

.progress,
.progress-stacked {
    --bs-progress-font-size: 0.8667rem;
}

/* Tanpa huruf tipis dan tanpa teks kapital semua */
.fw-light,
.fw-lighter,
.fw-thin {
    font-weight: 400 !important;
}

.text-uppercase {
    text-transform: none !important;
}

/* Area klik minimal 40px: tombol, baris tabel, checkbox dan radio */
.btn {
    min-height: 2.6667rem;
}

.btn.btn-icon {
    min-width: 2.6667rem;
}

.table > tbody > tr {
    height: 2.6667rem;
}

/* Checkbox bawaan Bootstrap memakai float dan padding kiri; dijadikan flex agar
 * kotak dan label sejajar di tengah area 40px. Jarak kolom menggantikan sisa
 * padding yang dipakai margin negatif kotak. Varian form-check-custom Metronic
 * sudah flex sehingga cukup diberi tinggi minimal. */
.form-check:not(.form-check-custom) {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    min-height: 2.6667rem;
    margin-bottom: 0;
}

.form-check-inline:not(.form-check-custom) {
    display: inline-flex;
}

.form-check.form-check-custom {
    min-height: 2.6667rem;
}

.form-check .form-check-input {
    margin-top: 0;
}

/* Logo memakai bentuk aset asli; warna mengikuti konteks tanpa kotak latar. */
.pusdakes-brand {
    display: inline-block;
    width: 185px;
    max-width: 100%;
    aspect-ratio: 1881 / 400;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('../img/pusdakes-logo.png') center / contain no-repeat;
    mask: url('../img/pusdakes-logo.png') center / contain no-repeat;
}

.pusdakes-brand-icon {
    width: 35px;
    aspect-ratio: 1;
    -webkit-mask-image: url('../img/pusdakes-icon.png');
    mask-image: url('../img/pusdakes-icon.png');
}

.pusdakes-brand.app-sidebar-logo-minimize {
    display: none;
}

/* Tabel bergaris penuh (table-bordered) di DataTables. Bundle DataTables memakai
 * border-collapse separate dan menghapus garis atas, kanan, serta garis bawah baris
 * terakhir thead dan tbody, sehingga header berkelompok (colspan/rowspan) kehilangan
 * garis. !important perlu karena selektor bundle (th:last-child, tr:last-child) lebih kuat. */
table.dataTable.table-bordered {
    border-collapse: collapse;
}

table.dataTable.table-bordered > :not(caption) > * > * {
    border: 1px solid var(--bs-gray-300) !important;
}

/* Beranda: pita tenggat Perlu Tindakan. Ringkasan jumlah per kelompok tenggat yang
   sekaligus menjadi saringan tabel; garis antar sel dari celah 1px di atas latar abu. */

.tenggat-strip {
    display: grid;
    grid-template-columns: repeat(var(--kolom, 6), minmax(0, 1fr));
    gap: 1px;
    background-color: var(--bs-gray-200);
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.625rem;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .tenggat-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .tenggat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tenggat-strip-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.375rem;
    min-height: 5rem;
    padding: 0.875rem 1.25rem;
    border: 0;
    background-color: var(--bs-body-bg);
    text-align: left;
    transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.tenggat-strip-item:hover:not(:disabled) {
    background-color: var(--bs-gray-100);
}

.tenggat-strip-item:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.tenggat-strip-item:disabled {
    cursor: default;
}

.tenggat-strip-item[aria-pressed=true],
.tenggat-strip-item[aria-pressed=true]:hover {
    background-color: var(--bs-primary-light);
    box-shadow: inset 0 -0.1875rem 0 var(--bs-primary);
}

.tenggat-strip-label {
    font-size: 0.9333rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bs-text-muted);
}

.tenggat-strip-item[aria-pressed=true] .tenggat-strip-label {
    color: var(--bs-primary-active);
}

.tenggat-strip-angka {
    font-size: 1.4667rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--bs-gray-900);
}

.tenggat-strip-item[data-nada=danger]:not(:disabled) .tenggat-strip-angka {
    color: var(--bs-danger);
}

.tenggat-strip-item[data-nada=warning]:not(:disabled) .tenggat-strip-angka {
    color: var(--bs-warning-active);
}

.tenggat-strip-item:disabled .tenggat-strip-angka {
    color: var(--bs-text-muted);
}

/* Baris ringkasan yang membuka daftar modul dengan saringan yang sama. */

.ringkasan-baris:hover .ringkasan-label,
.ringkasan-baris:focus-visible .ringkasan-label {
    color: var(--bs-primary-active) !important;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Di ponsel tabel Perlu Tindakan menjadi tumpukan baris: tenggat dan status di atas,
   uraian penuh di bawah, agar nama tidak terpotong oleh gulir mendatar. */
@media (max-width: 991.98px) {
    /* Hentikan transisi offset sidebar desktop ketika masuk ke layout ponsel. */
    #kt_app_wrapper {
        margin-left: 0 !important;
        transition: none !important;
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    #perlu_tindakan .card-body {
        padding: 1.5rem;
    }

    #perlu_tindakan .tenggat-strip {
        margin-bottom: 1.25rem !important;
    }

    .tabel-antrean thead {
        display: none;
    }

    .tabel-antrean table,
    .tabel-antrean tbody {
        display: block;
    }

    .tabel-antrean tbody tr:not(.d-none) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1rem;
        row-gap: 0.5rem;
        padding: 1rem 0;
        min-height: 0;
    }

    .tabel-antrean tbody td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
    }

    .tabel-antrean tbody td:nth-child(1) { grid-column: 1; grid-row: 1; overflow-wrap: break-word; }
    .tabel-antrean tbody td:nth-child(2) { overflow-wrap: break-word; }
    .tabel-antrean tbody td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: start; }
    .tabel-antrean tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .tabel-antrean tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; color: var(--bs-text-muted); }
    .tabel-antrean tbody td:nth-child(3) { display: flex; flex-wrap: wrap; }
    .tabel-antrean tbody td:nth-child(3) > div + div::before { content: ", "; }
    .tabel-antrean tbody td[data-kosong-sel] { grid-column: 1 / -1; padding: 2.5rem 0 !important; }
}

/* Pembatas antarkolom Ringkasan per Modul. Setiap kolom bergaris kiri di tengah celah;
   garis kolom pertama tiap baris jatuh di luar pembungkus dan terpotong, sehingga garis
   hanya tampil di antara blok yang berdampingan, di lebar layar berapa pun. */
.ringkasan-grid {
    overflow: hidden;
}

.ringkasan-grid > .row > section {
    border-left: 1px solid var(--bs-gray-200);
}

/* Beranda: komponen Metronic dengan penyesuaian kepadatan dan status filter. */
.dashboard-antrean .tenggat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: transparent;
    border: 0;
    overflow: visible;
}

.dashboard-antrean .tenggat-strip-item {
    flex-direction: row;
    align-items: center;
    min-height: 2.75rem;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--bs-gray-200);
    border-radius: 0.475rem;
}

.dashboard-antrean .tenggat-strip-item[aria-pressed=true] {
    border-color: var(--bs-primary);
    box-shadow: none;
}

.dashboard-antrean .tenggat-strip-angka {
    font-size: 0.9333rem;
    font-weight: 700;
}

.dashboard-antrean .tenggat-strip-item:focus-visible {
    outline-offset: 2px;
}

.dashboard-antrean thead th {
    padding: 0.875rem 1rem;
}

.dashboard-antrean tbody td {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    /* Metronic menghapus padding sel pertama/terakhir; beri inset khusus antrean. */
    #tabel_antrean tr > :first-child {
        padding-left: 1.5rem !important;
    }

    #tabel_antrean tr > :last-child {
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 767.98px) {
    .dashboard-antrean .tabel-antrean tbody tr[data-modul] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.dashboard-antrean tbody tr[data-modul]:hover {
    background: var(--bs-gray-100);
}

.dashboard-modul .card-body > :last-child {
    border-bottom: 0 !important;
}

.dashboard-modul {
    scroll-margin-top: 6rem;
}

/* Warna kartu membedakan urgensi indikator dan identitas setiap modul. */
.dashboard-kpi[data-warna=primary] {
    background-color: #087f70;
}

.dashboard-kpi {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 6px 18px rgba(30, 40, 60, 0.08);
}

.dashboard-kpi:not([data-warna=warning]) .text-gray-600,
.dashboard-kpi:not([data-warna=warning]) .text-gray-900,
.dashboard-kpi:not([data-warna=warning]) i {
    color: #fff !important;
}

.dashboard-kpi:not([data-warna=warning]) .text-muted {
    color: #fff !important;
}

.dashboard-kpi .symbol-label {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.dashboard-kpi[data-warna=danger] {
    background-color: #d83255;
}

.dashboard-kpi[data-warna=warning] {
    background-color: #ffc700;
}

.dashboard-kpi[data-warna=warning] .text-gray-600,
.dashboard-kpi[data-warna=warning] .text-gray-900,
.dashboard-kpi[data-warna=warning] .text-muted,
.dashboard-kpi[data-warna=warning] i {
    color: #332609 !important;
}

.dashboard-kartu-modul[data-warna-modul=sdmk] {
    --modul-warna: #087f70;
    --modul-latar: #edf8f5;
    --modul-ikon: #d7eee7;
    --modul-garis: #c9e4db;
}

.dashboard-kartu-modul[data-warna-modul=kefarmasian] {
    --modul-warna: #1769e0;
    --modul-latar: #eef5fc;
    --modul-ikon: #dceafa;
    --modul-garis: #cddff1;
}

.dashboard-kartu-modul[data-warna-modul=sarpras] {
    --modul-warna: #7239ea;
    --modul-latar: #f4f0fc;
    --modul-ikon: #e8dff7;
    --modul-garis: #ddd2ef;
}

.dashboard-kartu-modul[data-warna-modul=gudang] {
    --modul-warna: #bf5b04;
    --modul-latar: #fff4e9;
    --modul-ikon: #f8e3cd;
    --modul-garis: #efd9c1;
}

.dashboard-kartu-modul {
    border: 1px solid var(--bs-gray-200);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(30, 40, 60, 0.05);
    overflow: hidden;
}

.dashboard-kartu-modul .card-header {
    background-color: var(--modul-warna);
    border-bottom: 0;
}

.dashboard-kartu-modul .card-header .symbol-label,
.dashboard-kartu-modul .card-header .btn {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.dashboard-kartu-modul .card-header .text-primary,
.dashboard-kartu-modul .card-header h3,
.dashboard-kartu-modul .card-header .btn i {
    color: #fff !important;
}

.dashboard-kartu-modul .card-header .btn:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.dashboard-kartu-modul .card-header .btn:hover i {
    color: #fff !important;
}

.dashboard-kartu-modul .card-body > a,
.dashboard-kartu-modul .card-body > div {
    border-bottom-style: dashed !important;
}

.dashboard-kartu-modul .tabular-nums {
    color: var(--modul-warna) !important;
    background-color: var(--modul-latar);
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.4;
}

.dashboard-kartu-modul .ringkasan-baris:hover .ringkasan-label,
.dashboard-kartu-modul .ringkasan-baris:focus-visible .ringkasan-label {
    color: var(--modul-warna) !important;
}

@media (max-width: 767.98px) {
    .dashboard-statistik {
        --bs-gutter-y: 0.75rem;
    }

    .dashboard-statistik .card-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 1rem;
        padding: 1rem 1.25rem !important;
    }

    .dashboard-statistik .card-body > div:first-child {
        margin-bottom: 0.25rem !important;
    }

    .dashboard-statistik .symbol {
        display: none;
    }

    .dashboard-statistik .card-body > div:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        font-size: 1.75rem !important;
        margin-bottom: 0 !important;
    }

    .dashboard-statistik .card-body > p {
        grid-column: 1;
    }

    .dashboard-antrean .tenggat-strip-item {
        flex: 1 1 calc(50% - 0.5rem);
        padding: 0.65rem 0.75rem;
        justify-content: space-between;
    }
}