/* =========================
   THEME TOKENS
   ========================= */
:root{
    --bg: #ffffff;
    --card: #ffffff;
    --fg: #1f2a44;
    --muted: #6b7280;

    --brand: #103173;
    --brand-ink: #1e3a8a;
    --item: #264796;

    --hover: rgba(16,49,115,.08);
    --thumb: rgba(16,49,115,.25);
    --thumb-hover: rgba(16,49,115,.35);

    --pill: #2f4ea1;
    --badge-bg: #103173;

    --topnav-bg: #103173;
    --topnav-fg: #ffffff;
    --topnav-ring: rgba(255,255,255,0.10);
}

.dark :root, .dark{
    --bg: #0b1220;
    --card: #0e1626;
    --fg: #e6edf6;
    --muted: #a8b7c9;

    --brand: #0f234c;
    --brand-ink: #ffffff;
    --item: #dbe7ff;

    --hover: rgba(255,255,255,.06);
    --thumb: rgba(173,195,255,.35);
    --thumb-hover: rgba(173,195,255,.55);

    --pill: #3658c9;
    --badge-bg: #2f4ea1;

    --topnav-bg: #0f234c;
    --topnav-fg: #ffffff;
    --topnav-ring: rgba(255,255,255,0.14);
}

/* =========================
   HEADER
   ========================= */
.fi-header-heading {
    color: var(--brand-ink) !important;
    font-size: 1.2rem;
    line-height: 2rem;
}
.dark .fi-header-heading {
    color: var(--brand-ink) !important;
}
@media (min-width: 640px) {
    .fi-header-heading {
        font-size: 1.575rem;
        line-height: 2.25rem;
    }
}

/* =========================
   SIDEBAR HEADER
   ========================= */
.fi-sidebar-header {
    background-color: var(--brand) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.dark .fi-sidebar-header {
    background-color: var(--brand) !important;
}

/* =========================
   SIDEBAR CONTAINER
   ========================= */
.fi-sidebar {
    background: var(--card);
    color: var(--fg);
}

/* =========================
   NAV LIST + SCROLLBAR
   ========================= */
.fi-sidebar-nav {
    scrollbar-gutter: stable;
    background-color: var(--card) !important;
    scrollbar-width: thin;
    scrollbar-color: var(--thumb) var(--card);
}
.fi-sidebar-nav::-webkit-scrollbar { width: 8px; }
.fi-sidebar-nav::-webkit-scrollbar-track { background: var(--card); }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--thumb);
    border-radius: 8px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--thumb-hover);
}

/* =========================
   GROUP LABEL
   ========================= */
.fi-sidebar-group-label {
    color: var(--muted);
    letter-spacing: .08em;
    font-weight: 600;
    font-size: .72rem;
}

/* =========================
   NAV ITEM (default)
   ========================= */
.fi-sidebar-item-button {
    border-radius: 12px;
    padding: .625rem .625rem;
    gap: .75rem;
    color: var(--item);
    background: transparent !important;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background: var(--hover) !important;
    color: var(--item);
}

/* =========================
   ACTIVE ITEM (pill)
   ========================= */
.fi-sidebar-item-button.is-active,
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item-button.bg-gray-100,
.dark .fi-sidebar-item-button.dark\:bg-white\/5 {
    background: var(--pill) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Icons follow current text color */
.fi-sidebar-item-icon {
    color: currentColor !important;
    opacity: .95;
    width: 1.3rem;
    height: 1.3rem;
}

/* Label follows current text color */
.fi-sidebar-item-label {
    color: currentColor !important;
    font-weight: 500;
}

/* =========================
   BADGES
   ========================= */
.fi-sidebar .fi-badge{
    background: var(--badge-bg) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) !important;
}

/* =========================
   TOP NAV
   ========================= */
nav.bg-white:not(.fi-tabs) {
    background-color: var(--topnav-bg) !important;
    color: var(--topnav-fg) !important;
    --tw-ring-color: var(--topnav-ring) !important;
}
.dark nav.bg-white:not(.fi-tabs) {
    background-color: var(--topnav-bg) !important;
    color: var(--topnav-fg) !important;
    --tw-ring-color: var(--topnav-ring) !important;
}

/* =========================
   SECTION HEADER ICON
   ========================= */
.fi-section-header-icon {
    color: #273A94 !important;
}
.dark .fi-section-header-icon {
    color: #273A94 !important;
}

/* =========================
   TABLE HEADER UTILITY
   ========================= */
th.fi-header-left {
    text-align: left !important;
}
th.fi-header-left > div,
th.fi-header-left .fi-ta-header-cell-content,
th.fi-header-left .fi-ta-header-cell-sort-button {
    justify-content: flex-start !important;
}
th.fi-header-left button {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* =========================
   FORM ACTIONS — butang Simpan/Hantar sebelah kanan (standard)
   ========================= */
.fi-form-actions .fi-ac,
.fi-modal-footer-actions,
.fi-modal-footer-actions .fi-ac {
    justify-content: flex-end !important;
}

/* =========================
   SELECT DROPDOWN Z-INDEX FIX
   ========================= */

/* =========================
   NOTA: Dua blok CSS di sini telah DIBUANG 2026-09-01.

   Kedua-duanya hanyalah penampung untuk susun atur "header senarai beku" (R22)
   yang kini telah dibuang daripada AdminPanelProvider:
     1) "opt out" bagi halaman yang ada header widget — memaksa display:block
        !important pada nenek-moyang jadual;
     2) .fi-sidebar { z-index: 30 } — membetulkan thead melekat yang melukis
        atas sidebar.
   Tiada satu pun diperlukan lagi; jadual mengikut kelakuan asal Filament.
   ========================= */

/* =========================
   WRAP LONG TABLE HEADER LABELS (all list tables)
   ------------------------------------------------------------------
   Long Malay column titles (common on LAPORAN report tables) force very wide
   columns and horizontal scroll. Let the header label wrap so columns stay
   narrow and the table fits. Short headers are unaffected (nothing to wrap).
   ========================= */
.fi-ta-header-cell-label {
    white-space: normal !important;
}

/* ------------------------------------------------------------------
   Sidebar: kepala jenama (logo) & footer mesti kekal, hanya menu menatal.

   .fi-sidebar ialah flex column. Nav mempunyai `min-height: auto` (lalai
   flex), jadi ia enggan mengecil di bawah saiz kandungannya dan memaksa
   adik-beradiknya — kepala jenama — yang mengecil sehingga hilang.
   min-height:0 pada nav + flex-shrink:0 pada kepala/footer membetulkannya.
   ------------------------------------------------------------------ */
.fi-sidebar > .overflow-x-clip,
.fi-sidebar > [data-sidebar-footer] {
    flex: 0 0 auto;
}

.fi-sidebar .fi-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

.fi-sidebar-nav {
    min-height: 0;
}

/* ------------------------------------------------------------------
   HEADER JADUAL BEKU (R22) — versi selamat.

   Percubaan lama memaksa `overflow:hidden` pada .fi-main dan `display:flex`
   pada SETIAP nenek-moyang jadual (`*:has(.fi-ta-content)`), lalu merampas
   susun atur halaman: pada skrin sempit kandungan terpotong di bawah sidebar
   tanpa cara mendapatkannya semula.

   Versi ini menyentuh KOTAK JADUAL SAHAJA. .fi-ta-content sudah pun
   `overflow:auto` tetapi tiada had tinggi, jadi ia tidak pernah menatal
   menegak. Beri ia had tinggi supaya ia menjadi bekas tatal, kemudian
   lekatkan <th> di dalamnya. Tiada nenek-moyang disentuh, jadi kegagalan
   paling teruk hanyalah jadual yang lebih pendek — bukan halaman rosak.
   ------------------------------------------------------------------ */
.fi-resource-list-records-page .fi-ta-content {
    max-height: calc(100vh - 20rem);
}

.fi-resource-list-records-page .fi-ta-content thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: rgb(249 250 251);
}

.dark .fi-resource-list-records-page .fi-ta-content thead th {
    background-color: rgb(31 41 55);
}