/* HK Gold Filament chrome, light-only (sumber arah: docs/dev/desain.md).
   Design Read: backoffice staf program loyalty retailer emas, restrained-luxury,
   ENERGY 1 / RHYTHM 1 / MOTION 1 (gerak hanya pada state hover/focus).
   - Chrome sidebar/topbar: hitam solid #0a0a0a, tanpa gambar pattern (pattern menurunkan kontras teks menu).
   - Canvas: slate polos #f1f5f9. Card: putih, border tipis, satu bayangan hairline.
   - Emas = satu aksen: pill sidebar aktif + tombol primary (gradient brand 135deg), label hitam.
     Teks emas di atas putih gagal kontras (#ebca86 1.58:1), jadi teks/link di area putih pakai brass gelap #7a5418 (6.75:1).
   ponytail: jangan set position:relative pada .fi-sidebar (merusak sticky + top:4rem). */

/* ========== Dasar aksesibilitas ==========
   Di @layer base supaya utility Filament (outline-none + ring sendiri) tetap menang;
   komponen kustom tanpa gaya fokus otomatis dapat outline brass. */
@layer base {
    a[href],
    button,
    summary,
    select,
    label[for],
    [role="button"],
    [role="tab"],
    [role="switch"],
    [role="option"],
    [role="menuitem"],
    input[type="checkbox"],
    input[type="radio"],
    input[type="file"],
    input[type="submit"],
    input[type="button"] {
        cursor: pointer;
    }

    :disabled,
    [aria-disabled="true"] {
        cursor: not-allowed;
    }

    :focus-visible {
        outline: 2px solid #7a5418;
        outline-offset: 2px;
    }
}

/* Skip link: tersembunyi sampai difokus keyboard, lalu muncul di pojok kiri atas di atas topbar. */
.hk-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: #ffffff;
    color: #0a0a0a;
    font-weight: 600;
    transform: translateY(-200%);
}

.hk-skip-link:focus-visible {
    transform: none;
}

.hk-skip-target:focus {
    outline: none; /* target lompatan, bukan kontrol: tidak perlu cincin fokus */
}

/* Tombol Filament: ring bawaan berwarna primary 50% terlalu pudar di atas putih, tambah outline brass. */
.fi-btn:focus-visible {
    outline: 2px solid #7a5418 !important;
    outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
    /* Spinner loading dikecualikan: indikator status, bukan dekorasi. */
    *:not(.animate-spin):not(.fi-loading-indicator):not(.bulk-update-spinner),
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== Chrome: sidebar ========== */
.fi-sidebar {
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    border-right: 1px solid rgba(245, 203, 104, 0.15) !important;
}

.fi-sidebar-header,
.fi-sidebar-nav,
.fi-hkgold-sidebar-footer {
    position: relative !important;
    z-index: 1 !important;
}

.fi-sidebar *,
.fi-sidebar-nav {
    scrollbar-width: thin !important;
    scrollbar-color: #9a6b1f transparent !important;
}

/* Fokus di chrome gelap: outline emas ke dalam (sidebar/topbar overflow:hidden memotong offset luar). */
.fi-sidebar :focus-visible,
.fi-topbar :focus-visible {
    outline: 2px solid #f5cb68 !important;
    outline-offset: -2px !important;
}

/* Modal tinggi (wizard broadcast, dsb.) bergulir di wadah overlay: scrollbar tipis, tidak menebal di sisi layar. */
.fi-modal-window-ctn,
.fi-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}

/* ========== Chrome: topbar ========== */
.fi-topbar-ctn {
    isolation: isolate !important;
}

.fi-topbar,
.fi-topbar-nav {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: #0a0a0a !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(245, 203, 104, 0.15) !important;
}

.fi-topbar > *,
.fi-topbar-nav > * {
    position: relative !important;
    z-index: 1 !important;
}

.fi-topbar button,
.fi-topbar a,
.fi-topbar span,
.fi-topbar svg,
.fi-topbar-item {
    color: #f5cb68 !important;
}

.fi-topbar button:hover,
.fi-topbar a:hover {
    color: #ffe8a3 !important;
}

/* Dropdown user menu ada di DOM topbar: kembalikan teks gelap di panel putih. */
.fi-topbar .fi-dropdown-panel,
.fi-topbar .fi-dropdown-panel button,
.fi-topbar .fi-dropdown-panel a,
.fi-topbar .fi-dropdown-panel span,
.fi-topbar .fi-dropdown-panel svg,
.fi-user-menu .fi-dropdown-panel,
.fi-user-menu .fi-dropdown-panel button,
.fi-user-menu .fi-dropdown-panel a,
.fi-user-menu .fi-dropdown-panel span,
.fi-user-menu .fi-dropdown-panel svg,
.fi-dropdown-panel .fi-dropdown-list-item,
.fi-dropdown-panel .fi-dropdown-list-item-label,
.fi-dropdown-panel .fi-dropdown-list-item svg {
    color: #111827 !important;
}

.fi-topbar .fi-dropdown-panel :focus-visible {
    outline-color: #7a5418 !important;
}

.fi-user-menu-btn,
.fi-topbar-user-menu-btn {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(245, 203, 104, 0.35) !important;
    border-radius: 9999px !important;
}

/* ========== Canvas: slate polos ========== */
/* Tanpa !important: halaman login menimpa via body:has(.fi-hkgold-login). */
.fi-body {
    background-color: #f1f5f9;
}

.fi-layout,
.fi-main-ctn,
.fi-main {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}

/* ========== Sidebar nav ========== */
.fi-sidebar-header {
    background: transparent !important;
    border-bottom: none !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.fi-sidebar-header img {
    max-height: 2.5rem !important;
    width: auto !important;
    object-fit: contain !important;
}

.fi-sidebar-nav,
.fi-sidebar-group,
.fi-sidebar-group-items,
.fi-sidebar-sub-group-items {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Label grup emas, item putih: hierarki lewat warna, bukan uppercase. */
.fi-sidebar-group-label {
    color: #f5cb68 !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-btn,
.fi-sidebar-item-button,
.fi-sidebar-group-button,
.fi-sidebar a,
.fi-sidebar button {
    border-radius: 9999px !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.fi-sidebar-item-label,
.fi-sidebar-item-btn span,
.fi-sidebar-item-button span,
.fi-sidebar a span,
.fi-sidebar button span {
    color: #ffffff !important;
}

.fi-sidebar-item-icon,
.fi-sidebar svg {
    color: #f5cb68 !important;
}

.fi-sidebar-item-btn:hover,
.fi-sidebar-item-button:hover,
.fi-sidebar a:hover,
.fi-sidebar button:hover,
.fi-sidebar a:focus-visible,
.fi-sidebar button:focus-visible {
    background: rgba(245, 203, 104, 0.12) !important;
}

.fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar a:hover svg,
.fi-sidebar a:hover span {
    color: #ffe8a3 !important;
}

.fi-sidebar a:active,
.fi-sidebar button:active {
    background: rgba(245, 203, 104, 0.2) !important;
}

.fi-sidebar li.fi-active,
.fi-sidebar li.fi-sidebar-item-active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pill aktif: gradient brand + label hitam (titik label terburuk ~#bc934a, 7:1). Tanpa glow. */
.fi-sidebar li.fi-active > a,
.fi-sidebar li.fi-active > button,
.fi-sidebar li.fi-sidebar-item-active > a,
.fi-sidebar li.fi-sidebar-item-active > button,
.fi-sidebar a.fi-active,
.fi-sidebar button.fi-active,
.fi-sidebar a[aria-current="page"],
.fi-sidebar button[aria-current="page"],
.fi-sidebar li.fi-active > a:hover,
.fi-sidebar li.fi-active > button:hover,
.fi-sidebar li.fi-sidebar-item-active > a:hover,
.fi-sidebar li.fi-sidebar-item-active > button:hover,
.fi-sidebar a.fi-active:hover,
.fi-sidebar button.fi-active:hover,
.fi-sidebar a[aria-current="page"]:hover,
.fi-sidebar button[aria-current="page"]:hover {
    background: linear-gradient(135deg, #d1a13b 0%, #ebca86 50%, #9a6b1f 100%) !important;
    border: none !important;
    border-radius: 9999px !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
}

.fi-sidebar li.fi-active > a *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar li.fi-active > button *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar li.fi-sidebar-item-active > a *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar li.fi-sidebar-item-active > button *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar a.fi-active *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar button.fi-active *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar a[aria-current="page"] *:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar button[aria-current="page"] *:not(.fi-badge):not(.fi-sidebar-item-badge) {
    background: transparent !important;
}

.fi-sidebar li.fi-active > a .fi-sidebar-item-label,
.fi-sidebar li.fi-active > a .fi-sidebar-item-icon,
.fi-sidebar li.fi-active > a svg,
.fi-sidebar li.fi-active > a span:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar li.fi-sidebar-item-active > a .fi-sidebar-item-label,
.fi-sidebar li.fi-sidebar-item-active > a .fi-sidebar-item-icon,
.fi-sidebar a.fi-active span:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar a.fi-active svg,
.fi-sidebar button.fi-active span:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar button.fi-active svg,
.fi-sidebar a[aria-current="page"] span:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar a[aria-current="page"] svg,
.fi-sidebar button[aria-current="page"] span:not(.fi-badge):not(.fi-sidebar-item-badge),
.fi-sidebar button[aria-current="page"] svg {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Fokus pada pill aktif: outline hitam (emas di atas emas tak terlihat). */
.fi-sidebar li.fi-active > a:focus-visible,
.fi-sidebar a.fi-active:focus-visible,
.fi-sidebar a[aria-current="page"]:focus-visible {
    outline-color: #000000 !important;
}

/* Badge hitung: emas solid + teks hitam (12.85:1); di pill aktif dibalik. */
.fi-sidebar .fi-badge,
.fi-sidebar .fi-sidebar-item-badge,
.fi-sidebar span.fi-badge {
    background: #f5cb68 !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    padding: 0.125rem 0.5rem !important;
}

.fi-sidebar .fi-badge *,
.fi-sidebar .fi-sidebar-item-badge *,
.fi-sidebar span.fi-badge * {
    color: #0a0a0a !important;
    background: transparent !important;
}

.fi-sidebar li.fi-active .fi-badge,
.fi-sidebar a[aria-current="page"] .fi-badge {
    background: #0a0a0a !important;
    color: #f5cb68 !important;
}

/* Kelas .fi-sidebar diulang: aturan "teks hitam di pill aktif" (span:not(.fi-badge)) ikut mengenai
   label di dalam badge dan spesifisitasnya lebih tinggi, hasilnya hitam di atas hitam (1:1). */
.fi-sidebar.fi-sidebar li.fi-active > a .fi-badge span,
.fi-sidebar.fi-sidebar a[aria-current="page"] .fi-badge span {
    color: #f5cb68 !important;
}

/* Footer sidebar: #d6d3d1 di atas #0a0a0a (13.9:1). */
.fi-hkgold-sidebar-footer {
    margin-top: 2rem;
    padding: 1.25rem 1rem;
    border-top: 1px solid rgba(245, 203, 104, 0.15);
    color: #d6d3d1;
    font-size: 0.75rem;
    line-height: 1.4;
}

.fi-hkgold-sidebar-footer p {
    margin: 0;
}

/* Deskripsi stat: slate-600 di putih (7.58:1), cukup untuk kalimat penjelas. */
.fi-wi-stats-overview-stat-description {
    color: #475569 !important;
}

/* ========== Card / widget ========== */
.fi-wi-stats-overview,
.fi-wi-stats-overview-stats-ctn,
.fi-wi-widget.fi-wi-stats-overview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Card putih di canvas slate: border + satu bayangan hairline sebagai penanda elevasi. */
.fi-wi-stats-overview-stat,
.fi-section,
.fi-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Kelompok di dalam satu kartu (Section ->contained(false)): judul saja, tanpa kotak bertingkat. */
.fi-section.fi-section-not-contained {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Grid bawaan melebar mengikuti teks deskripsi panjang; kolom dibatasi lebar kartu. */
    grid-template-columns: minmax(0, 1fr);
}

/* ========== Tombol ==========
   Filament v5 solid primary: `fi-btn fi-color fi-color-primary`. Secondary (gray) tanpa `fi-color`.
   ponytail: `:not(.fi-color)` menghindari menimpa tombol success/danger/warning. */

/* Primary: gradient brand (CTA terdokumentasi), label hitam. Titik label terburuk ~#b0843b: 5.85:1. */
.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined),
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined) {
    background: linear-gradient(135deg, #d1a13b 0%, #ebca86 50%, #9a6b1f 100%) !important;
    border: 1px solid rgba(154, 107, 31, 0.5) !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    color: #0a0a0a !important;
    transition: filter 0.15s ease !important;
}

.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined) span,
.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined) svg,
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined) span,
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined) svg {
    color: #0a0a0a !important;
}

.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined):hover,
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined):hover {
    filter: brightness(1.06) !important;
}

.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined):active,
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined):active {
    filter: brightness(0.94) !important;
}

.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined):disabled,
.fi-layout button.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined)[aria-disabled="true"],
.fi-layout a.fi-btn.fi-color-primary:not(.fi-icon-btn):not(.fi-outlined)[aria-disabled="true"] {
    filter: grayscale(0.45) brightness(0.92) !important;
    cursor: not-allowed !important;
}

/* Primary outlined: putih + border/teks brass (border 4.67:1, teks 6.75:1). */
.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn),
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn) {
    background: #ffffff !important;
    border: 1px solid #9a6b1f !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
    color: #7a5418 !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease !important;
}

.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn) span,
.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn) svg,
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn) span,
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn) svg {
    color: #7a5418 !important;
}

.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn):hover,
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn):hover {
    background: #fffbeb !important;
}

.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn):active,
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn):active {
    background: #fef3c7 !important;
}

.fi-layout button.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn):disabled,
.fi-layout a.fi-btn.fi-color-primary.fi-outlined:not(.fi-icon-btn)[aria-disabled="true"] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Secondary: putih + border slate netral (teks 7.58:1). */
.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined),
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined) {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 0.5rem !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined) span,
.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined) svg,
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined) span,
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined) svg {
    color: inherit !important;
}

.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined):hover,
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined):hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined):active,
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined):active {
    background-color: #f1f5f9 !important;
}

.fi-layout button.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined):disabled,
.fi-layout a.fi-btn:not(.fi-color):not(.fi-icon-btn):not(.fi-outlined)[aria-disabled="true"] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ========== Badge tier ========== */
/* Silver: slate-500 + putih (4.76:1) */
.fi-badge.fi-color-silver,
.fi-color-silver {
    background-color: #64748b !important;
    color: #ffffff !important;
}
.fi-badge.fi-color-silver *,
.fi-color-silver * {
    color: #ffffff !important;
}

/* Platinum: hitam + putih (21:1) */
.fi-badge.fi-color-platinum,
.fi-color-platinum {
    background-color: #000000 !important;
    color: #ffffff !important;
}
.fi-badge.fi-color-platinum *,
.fi-color-platinum * {
    color: #ffffff !important;
}

/* ========== Konten RichEditor / infolist HTML ==========
   Link brass gelap + garis bawah (bukan warna saja); marker list brass. */
.fi-fo-rich-editor a,
.fi-fo-rich-editor-content a,
.ProseMirror a,
.fi-prose a,
.fi-in-text-item a {
    color: #7a5418 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* Gambar sisipan isi berita/event: tampil langsung di tengah (tanpa kotak blok), sama dengan situs publik. */
.fi-fo-rich-editor img,
.ProseMirror img,
.fi-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: 0.375rem;
}

.ProseMirror img.ProseMirror-selectednode {
    outline: 2px solid #9a6b1f;
    outline-offset: 2px;
}

.fi-fo-rich-editor li::marker,
.fi-fo-rich-editor-content li::marker,
.ProseMirror li::marker,
.fi-prose li::marker,
.fi-in-text-item li::marker {
    color: #9a6b1f !important;
}

/* ========== Lonceng notifikasi admin (topbar, sebelum menu profil) ==========
   Panel dropdown di-teleport ke body (putih): teks gelap, aksi brass #7a5418 (6.75:1). Belum dibaca =
   latar krem + titik emas + teks "Belum dibaca" untuk pembaca layar (tidak hanya warna). */
.hk-notif-bell {
    display: flex;
    align-items: center;
}

.hk-notif-bell-trigger {
    width: 2.75rem;
    height: 2.75rem;
}

/* Aturan teks emas topbar ikut mewarnai badge: paksa emas solid + teks hitam (kontras 12:1). */
.fi-topbar .hk-notif-bell .fi-badge {
    background-color: #f5cb68 !important;
    color: #0a0a0a !important;
    font-weight: 700;
}

.hk-notif-panel {
    display: flex;
    flex-direction: column;
    max-height: min(32rem, 70vh);
}

.hk-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.hk-notif-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.hk-notif-link,
.hk-notif-all {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #7a5418 !important;
    text-decoration: none;
}

.hk-notif-link:hover,
.hk-notif-all:hover {
    text-decoration: underline;
}

.hk-notif-list {
    overflow-y: auto;
    scrollbar-width: thin;
}

.hk-notif-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
    text-align: start;
    border-bottom: 1px solid #f3f4f6;
}

.hk-notif-item:hover {
    background: #f9fafb;
}

.hk-notif-item.is-unread {
    background: #fdf8ec;
}

.hk-notif-item.is-unread:hover {
    background: #faf0d6;
}

.hk-notif-item:focus-visible {
    outline: 2px solid #7a5418;
    outline-offset: -2px;
}

.hk-notif-item-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827 !important;
}

.hk-notif-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #b8860b;
}

.hk-notif-item-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    color: #4b5563 !important;
}

.hk-notif-item-time {
    font-size: 0.75rem;
    color: #4b5563 !important;
}

.hk-notif-empty {
    padding: 1.25rem 1rem;
    font-size: 0.875rem;
    color: #4b5563;
}

.hk-notif-all {
    display: block;
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid #e5e7eb;
}

/* ========== Tabel ==========
   Satu gaya untuk semua tabel (resource, relation manager, widget): wadah sama dengan card,
   header abu tipis, pagination rata kiri-kanan. Bawaan Filament: grid 3 kolom, pilihan
   "per halaman" terjepit di tengah dan sisi kanan kosong saat hanya 1 halaman. */
.fi-ta-ctn {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden;
}

.fi-ta-header-cell {
    background-color: #f8fafc;
}

.fi-ta-footer-ctn,
.fi-ta-ctn > .fi-pagination {
    border-top: 1px solid #e2e8f0;
}

/* Pagination rata kiri-kanan. Jangan pasang container-type di .fi-ta-main: wadah query menjadi
   containing block bagi menu titik tiga (position: fixed) sehingga menu terbuka jauh dari tombolnya.
   .fi-pagination sudah jadi wadah query bawaan Filament; ambang @4xl (56rem) diukur di situ. */
.fi-pagination {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

@container (min-width: 56rem) {
    /* Per halaman + nomor halaman berkelompok di kanan. */
    .fi-pagination .fi-pagination-records-per-page-select-ctn {
        margin-inline-start: auto;
    }
}

/* ========== Peta lokasi cabang (Leaflet) ==========
   Pengganti teks latitude/longitude. Tinggi tetap supaya halaman tidak bergeser saat tile dimuat. */
.hk-branch-map__label {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
}

.hk-branch-map__frame + .hk-branch-map__hint {
    margin: 0.5rem 0 0;
}

.hk-branch-map__hint,
.hk-branch-map__empty,
.hk-branch-map__status {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #475569;
}

.hk-branch-map__frame {
    position: relative;
}

/* Petunjuk Ctrl + gulir: muncul sebentar saat pengguna menggulir di atas peta tanpa Ctrl.
   Putih di atas slate 80% (paling terang saat tile putih: #3f4555 → 9.6:1). */
.hk-branch-map__wheel-hint {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.8);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.hk-branch-map__canvas {
    position: relative;
    z-index: 0; /* panel Leaflet z-index 400+; jangan menutupi dropdown/modal Filament */
    height: 280px;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f1f5f9;
}

.hk-branch-map__canvas:focus-visible {
    outline: 2px solid #9a6b1f;
    outline-offset: 2px;
}

.hk-branch-map__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hk-branch-map__footer .hk-branch-map__status {
    margin: 0;
}

@media (max-width: 639px) {
    .hk-branch-map__canvas {
        height: 220px;
    }
}

/* Target sentuh topbar di layar sempit: tombol menu & menu pengguna 36/32px → 44px (R-03). */
@media (max-width: 1023px) {
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn,
    .fi-user-menu-trigger {
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}

/* ========== Editor teks (autumnnote-plus, HtmlEditor) ==========
   Bingkai disamakan dengan input Filament (radius 0.5rem, border slate); aksen brass sama dengan fokus panel. */
.hk-html-editor .an-container {
    border-color: #cbd5e1;
    border-radius: 0.5rem;
    /* clip (bukan hidden): sudut tetap terpotong tapi tidak jadi wadah gulir, jadi toolbar sticky tetap menempel. */
    overflow: clip;
}

.hk-html-editor .an-container:focus-within {
    border-color: #7a5418;
    box-shadow: 0 0 0 1px #7a5418;
}

.hk-html-editor .an-editable img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Isi editor: reset Tailwind di panel Filament menghapus tebal judul, tanda daftar, dan garis bawah tautan.
   Dikembalikan agar yang dilihat admin sama dengan halaman publik/aplikasi (judul tebal, daftar bertanda). */
.hk-html-editor .an-editable h2,
.hk-html-editor .an-editable h3 {
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    margin: 1.25em 0 0.5em;
}

.hk-html-editor .an-editable h2 {
    font-size: 1.375rem;
}

.hk-html-editor .an-editable h3 {
    font-size: 1.125rem;
}

.hk-html-editor .an-editable > :first-child {
    margin-top: 0;
}

.hk-html-editor .an-editable ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.hk-html-editor .an-editable ol {
    list-style: decimal;
    padding-left: 1.5rem;
}

/* Tautan dibedakan garis bawah, bukan warna saja. */
.hk-html-editor .an-editable a {
    color: #7a5418;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hk-html-editor .an-editable blockquote {
    margin: 1em 0;
    padding-left: 1rem;
    border-left: 3px solid #cbd5e1;
    color: #334155;
}

.hk-html-editor .an-editable hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid #cbd5e1;
}

.hk-html-editor__loading {
    min-height: 240px;
    margin: 0;
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #475569;
}

/* Galat unggah/muat: merah gelap di putih (6.47:1), teks bukan warna saja. */
.hk-html-editor__error {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: #b91c1c;
}

.hk-html-editor-readonly {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #f8fafc;
}

/* Rekap stok reward (dasbor): daftar, item kritis di atas; status kritis juga ditulis, bukan hanya warna. */
.hk-stock-recap__filter { display: grid; gap: 0.375rem; max-width: 22rem; margin-bottom: 1rem; }
.hk-stock-recap__label { font-size: 0.875rem; font-weight: 600; color: #334155; }
.hk-stock-recap__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; }
.hk-stock-recap__chip { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 9999px; padding: 0.3rem 0.75rem; font-size: 0.8125rem; font-weight: 700; }
.hk-stock-recap__chip--critical { background: #ffe4e6; color: #9f1239; }
.hk-stock-recap__chip--ok { background: #d1fae5; color: #065f46; }
.hk-stock-recap__total { font-size: 0.8125rem; font-weight: 600; color: #475569; }
.hk-stock-recap__list { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); transition: opacity 150ms; }
.hk-stock-recap__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.25rem; border: 1px solid #e2e8f0; border-radius: 0.625rem; padding: 0.625rem 0.875rem; background: #fff; }
.hk-stock-recap__item--critical { border-color: #fda4af; background: #fff1f2; }
.hk-stock-recap__name { font-size: 0.9375rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.hk-stock-recap__meta { margin-top: 0.125rem; font-size: 0.8125rem; color: #475569; }
.hk-stock-recap__count { flex-shrink: 0; font-size: 1rem; font-weight: 700; color: #334155; font-variant-numeric: tabular-nums; }
.hk-stock-recap__count--critical, .hk-stock-recap__flag { color: #9f1239; }
.hk-stock-recap__empty { font-size: 0.875rem; color: #475569; }
.hk-stock-recap__footer { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; }
@media (prefers-reduced-motion: reduce) { .hk-stock-recap__list { transition: none; } }