:root {
    /* =========================================================
   * PALET RESMI PUSKESMAS CIASEM (NAMEERA UI SYSTEM)
   * ========================================================= */

    /* Brand Core (Teal & Fresh Mint) */
    --primary: #0f9b7e; /* Teal Utama (Tombol CTA, Header, Active State) */
    --primary-mid: #0c7a63; /* Darker Teal (Hover State & Border) */
    --primary-light: #22c55e; /* Emerald Green (Highlight & Success Badge) */
    --primary-bg: #f0fdf9; /* Mint Ice (Light Mode Card/Section Background) */

    /* Aksesori & Aksesibilitas UI */
    --accent: #0f9b7e; /* Penyesuaian Accent dengan Brand Primary */
    --accent-bg: #f0fdf9; /* Mint Ice Light Background */

    /* Dark Mode & Deep Elements */
    --dark: #0b2e28; /* Deep Pine/Forest (Background Dark Mode & Dark Text) */
    --dark-mid: #133e36; /* Medium Pine (Card/Sidebar Background pada Dark Mode) */

    /* Status Universal untuk Fasilitas Kesehatan (Triase & Antrean) */
    --status-success: #22c55e; /* Hijau - Selesai / Normal */
    --status-warning: #f59e0b; /* Oranye - Menunggu / Antrean */
    --status-danger: #ef4444; /* Merah - Gawat Darurat / Batal */
    --status-info: #0284c7; /* Biru - Informasi / Rujukan */

    /* Typography */
    --font-heading: "Plus Jakarta Sans", sans-serif;
    --font-body: "Nunito", sans-serif;
}

body {
    font-family: var(--font-body);
}
h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-heading);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-mid);
}

/* Sidebar Mobile Overlay */
.sidebar-overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* ============ Tema plugin form pihak ketiga ============ */

/* Flatpickr */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
    background: var(--primary);
    border-color: var(--primary);
}
.flatpickr-day.inRange {
    background: var(--primary-light);
    border-color: var(--primary-light);
    box-shadow:
        -5px 0 0 var(--primary-light),
        5px 0 0 var(--primary-light);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    color: var(--dark-mid);
}
.flatpickr-day:hover {
    background: var(--primary-bg);
}

/* Choices.js */
.choices__inner {
    background-color: rgb(249 250 251) !important;
    border-radius: 0.75rem !important;
    border-color: rgb(229 231 235) !important;
    padding: 0.5rem 0.75rem !important;
    font-family: var(--font-body);
}
.dark .choices__inner {
    background-color: rgb(17 24 39) !important;
    border-color: rgb(55 65 81) !important;
    color: #e5e7eb;
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-radius: 0.75rem !important;
    overflow: hidden;
}
.dark .choices__list--dropdown,
.dark .choices__list[aria-expanded] {
    background-color: rgb(31 41 55) !important;
    border-color: rgb(55 65 81) !important;
    color: #e5e7eb;
}
.choices__list--multiple .choices__item {
    background: var(--primary) !important;
    border-color: var(--primary-mid) !important;
    border-radius: 9999px !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--primary-bg) !important;
}

/* Quill */
.ql-toolbar.ql-snow {
    border-radius: 0.75rem 0.75rem 0 0 !important;
    border-color: rgb(229 231 235) !important;
}
.ql-container.ql-snow {
    border-radius: 0 0 0.75rem 0.75rem !important;
    border-color: rgb(229 231 235) !important;
    font-family: var(--font-body);
}
.dark .ql-toolbar.ql-snow,
.dark .ql-container.ql-snow {
    border-color: rgb(55 65 81) !important;
}
.dark .ql-snow .ql-stroke {
    stroke: #cbd5e1;
}
.dark .ql-editor.ql-blank::before {
    color: #6b7280;
}
.dark .ql-editor {
    color: #e5e7eb;
}

/* FilePond */
.filepond--panel-root {
    border-radius: 0.75rem !important;
    background-color: rgb(249 250 251) !important;
}
.dark .filepond--panel-root {
    background-color: rgb(17 24 39) !important;
}
.filepond--label-action {
    color: var(--primary-mid);
    text-decoration-color: var(--primary-light);
}
.filepond--drop-label {
    color: #6b7280;
}

/* Tagify */
.tagify {
    --tag-bg: var(--primary);
    --tag-hover: var(--primary-mid);
    --tag-text-color: #fff;
    --tag-text-color--edit: var(--dark);
    --tag-pad: 0.3em 0.7em;
    --tag-remove-bg: rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
    border-color: rgb(229 231 235);
    background: rgb(249 250 251);
    padding: 0.375rem;
}
.dark .tagify {
    background: rgb(17 24 39);
    border-color: rgb(55 65 81);
}
.tagify__tag > div::before {
    border-radius: 9999px;
}
.tagify__dropdown__item--active {
    background: var(--primary) !important;
}
/* x-cloak fix */
[x-cloak] {
    display: none !important;
}

/* ============ Tema List.js Pagination ============ */
.pagination li {
    display: inline-block;
}
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.2s;
}
.dark .pagination li a {
    border-color: rgb(55 65 81);
    color: #e5e7eb;
}
.pagination li a:hover {
    background-color: var(--primary-bg);
    color: var(--primary-mid);
    border-color: var(--primary-light);
}
.dark .pagination li a:hover {
    background-color: rgba(99, 153, 34, 0.2);
    color: var(--primary-light);
}
.pagination li.active a {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* =========================================================
 * FilePond — Dropzone Upload (Ikon + Label)
 * ========================================================= */
/* .filepond--root {
    font-family: var(--font-body);
}
.filepond--drop-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    background-color: var(--primary-bg);
    border: 2px dashed var(--primary-light);
    border-radius: 1rem;
    transition: all 0.2s;
}
.filepond--drop-label:hover {
    background-color: #e6f7ef;
    border-color: var(--primary);
}
.dark .filepond--drop-label {
    background-color: rgba(15, 155, 126, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
}
.dark .filepond--drop-label:hover {
    background-color: rgba(15, 155, 126, 0.2);
    border-color: var(--primary-light);
}
.filepond--upload-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.dark .filepond--upload-icon {
    color: var(--primary-light);
}
.filepond--label-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark);
}
.dark .filepond--label-text {
    color: #e5e7eb;
}
.filepond--label-action {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.dark .filepond--label-action {
    color: var(--primary-light);
} */
/* =========================================================
 * FilePond — GANTI kedua blok "FilePond" yang lama di style.css
 * (yang di bagian "Tema plugin form pihak ketiga" DAN yang di
 * bagian "Dropzone Upload" paling bawah) dengan SATU blok ini.
 * ========================================================= */

.filepond--root {
    font-family: var(--font-body);
    margin-bottom: 0;
}

.filepond--panel-root {
    border-radius: 1rem !important;
    background-color: transparent !important;
}
.dark .filepond--panel-root {
    background-color: transparent !important;
}

.filepond--drop-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 8rem;
    background-color: var(--primary-bg);
    border: 2px dashed var(--primary-light);
    border-radius: 1rem;
    color: #6b7280;
    transition:
        background-color 0.2s,
        border-color 0.2s;
}
.filepond--drop-label:hover {
    background-color: #e6f7ef;
    border-color: var(--primary);
}
.dark .filepond--drop-label {
    background-color: rgba(15, 155, 126, 0.1);
    border-color: rgba(34, 197, 94, 0.4);
    color: #9ca3af;
}
.dark .filepond--drop-label:hover {
    background-color: rgba(15, 155, 126, 0.2);
    border-color: var(--primary-light);
}

/* Drag-over aktif */
.filepond--root.filepond--hopper-active .filepond--drop-label,
.filepond--drag-highlight {
    border-color: var(--primary) !important;
    background-color: #e6f7ef !important;
}
.dark .filepond--root.filepond--hopper-active .filepond--drop-label,
.dark .filepond--drag-highlight {
    background-color: rgba(15, 155, 126, 0.25) !important;
}

.filepond--upload-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: var(--primary);
}
.dark .filepond--upload-icon {
    color: var(--primary-light);
}

.filepond--label-text {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dark);
}
.dark .filepond--label-text {
    color: #e5e7eb;
}

.filepond--label-action {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary-light);
    cursor: pointer;
}
.dark .filepond--label-action {
    color: var(--primary-light);
}

/* File yang sudah masuk (preview item) */
.filepond--item-panel {
    background-color: var(--primary);
    border-radius: 0.625rem;
}
.filepond--file-status-main,
.filepond--file-status-sub {
    color: #fff;
}
.filepond--progress-indicator {
    color: var(--primary-light);
}

/* Bersihkan watermark plugin */
.filepond--credits {
    display: none !important;
}