/**
 * Helpdesk custom Filament CSS — v58 (sub-nav Administrasi + layout seragam)
 * ------------------------------------------------------------------
 * 1. Equal-height Section cards (two-column schema)
 * 2. Full-width list-record pages
 * 3. Main sidebar  — icon-only, tooltip on hover (Strapi-style)
 * 4. Secondary panel — sub-navigation (Company / PIC), modern style
 * ------------------------------------------------------------------
 */

/* ==================================================================
   1. EQUAL-HEIGHT SECTION CARDS
   Filament wraps each Section: grid-cell > .fi-sc-component > .fi-sc-section
   Percentage heights need an explicit flex chain down to the card.
   ================================================================== */

.fi-sc > div:has(> .fi-sc-component > .fi-form-section-stretch) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.fi-sc > div:has(> .fi-sc-component > .fi-form-section-stretch) > .fi-sc-component {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.fi-sc-section.fi-form-section-stretch {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.fi-sc-section.fi-form-section-stretch > section.fi-section {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.fi-sc-section.fi-form-section-stretch > section.fi-section > .fi-section-content-ctn {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* ==================================================================
   2. FULL-WIDTH LIST PAGES
   List-record pages and all pages with sub-nav fill the full viewport.
   ================================================================== */

.fi-resource-list-records-page .fi-main {
    max-width: 100%;
    margin-inline: 0;
}

.fi-resource-list-records-page .fi-ta-ctn,
.fi-resource-list-records-page .fi-ta {
    width: 100%;
}

/* ==================================================================
   2b. LAYOUT SERAGAM — halaman tanpa sub-nav (tiket, beranda, edit)
   Admin & role lain memakai padding / lebar penuh yang sama.
   Daftar tanpa sub-nav (tiket, user) dirapikan agar header tidak “melayang”.
   ================================================================== */

@media (min-width: 64rem) {
    .fi-main:not(:has(.fi-page-has-sub-navigation-start)) {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: calc(100dvh - 4rem);
    }

    .fi-main:not(:has(.fi-page-has-sub-navigation-start)) > .fi-page {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .fi-page:not(.fi-page-has-sub-navigation-start) .fi-page-header-main-ctn {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0;
        padding: 0;
        min-height: 0;
    }

    .fi-page:not(.fi-page-has-sub-navigation-start) .fi-page-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .fi-page:not(.fi-page-has-sub-navigation-start) .fi-header {
        padding: 1.25rem 2rem 0.375rem;
        margin: 0;
        flex-shrink: 0;
    }

    .fi-page:not(.fi-page-has-sub-navigation-start) .fi-page-content {
        padding: 0.75rem 2rem 1.5rem;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Tab daftar tiket — rapat di bawah judul, bukan “jauh” dari header */
    .fi-resource-list-records-page:not(.fi-page-has-sub-navigation-start) .fi-tabs {
        margin-block: 0 0.5rem;
    }

    .fi-resource-list-records-page:not(.fi-page-has-sub-navigation-start) .fi-tabs-tab-list {
        gap: 0.25rem;
    }

    /*
     * Daftar record: jangan paksa .fi-ta-ctn mengisi sisa viewport (flex:1).
     * Itu membuat kartu tabel tinggi kosong dan baris terlihat “turun”.
     */
    .fi-resource-list-records-page:not(.fi-page-has-sub-navigation-start) .fi-page-content {
        flex: 0 1 auto;
        min-height: 0;
    }

    .fi-resource-list-records-page:not(.fi-page-has-sub-navigation-start) .fi-main {
        min-height: 0;
    }

    .fi-resource-list-records-page:not(.fi-page-has-sub-navigation-start) .fi-ta-ctn {
        flex: 0 0 auto;
        align-self: flex-start;
        width: 100%;
    }

    /* Baris tabel daftar — lebih rapat (judul + deskripsi kolom) */
    .fi-resource-list-records-page .fi-ta-cell {
        padding-block: 0.5rem !important;
        vertical-align: middle;
    }

    .fi-resource-list-records-page .fi-ta-col-description {
        margin-top: 0.125rem;
        line-height: 1.35;
    }

    .fi-resource-edit-record-page .fi-main,
    .fi-resource-create-record-page .fi-main {
        max-width: 100% !important;
        margin-inline: 0 !important;
    }
}

/* ==================================================================
   3. MAIN SIDEBAR — icon-only, compact (Strapi-style)
   Labels are hidden; Filament's built-in x-tooltip shows on hover
   when the sidebar is closed (handled by the JS in AdminPanelProvider).
   ================================================================== */

:root {
    --hd-sidebar-bg: var(--gray-50);
    --hd-sidebar-border: var(--gray-200);
    --hd-sidebar-muted: var(--gray-400);
    --hd-sidebar-text: var(--gray-600);
    --hd-sidebar-text-hover: var(--gray-900);
    --hd-sidebar-hover: color-mix(in srgb, var(--gray-900) 6%, transparent);
    --hd-sidebar-active-bg: color-mix(in srgb, var(--primary-500) 9%, transparent);
    --hd-sidebar-active-text: var(--primary-700);
    --hd-sidebar-active-accent: var(--primary-500);
    --hd-sidebar-radius: 0.5rem;
    --hd-sidebar-item-height: 2.25rem;
    /* Tinggi area "header" kedua sidebar — brand icon & label KLIEN sejajar */
    --hd-sidebar-header-height: 3.25rem;
    --hd-subnav-width: 13.5rem;
}

.dark {
    --hd-sidebar-bg: color-mix(in srgb, var(--gray-900) 60%, var(--gray-950));
    --hd-sidebar-border: var(--gray-800);
    --hd-sidebar-muted: var(--gray-500);
    --hd-sidebar-text: var(--gray-400);
    --hd-sidebar-text-hover: var(--gray-100);
    --hd-sidebar-hover: color-mix(in srgb, var(--gray-100) 7%, transparent);
    --hd-sidebar-active-bg: color-mix(in srgb, var(--primary-400) 13%, transparent);
    --hd-sidebar-active-text: var(--primary-300);
    --hd-sidebar-active-accent: var(--primary-400);
}

/*
 * Override Filament's `background-color: transparent` at ≥64rem.
 * Filament sets this so the sidebar "disappears" when collapsed,
 * but we keep it visible as icon-only, so we need a solid background.
 */
.fi-main-sidebar {
    border-inline-end: 1px solid var(--hd-sidebar-border);
    background: var(--hd-sidebar-bg) !important;
}

/*
 * Halaman dengan panel sub-nav: border kanan sidebar utama dimatikan;
 * garis pemisah sidebar utama ↔ panel kedua ada di border-inline-start
 * panel sub-nav (lihat .fi-page-sub-navigation-sidebar-ctn).
 */
@media (min-width: 64rem) {
    :root:has(.fi-page-has-sub-navigation-start) .fi-main-sidebar {
        border-inline-end-color: transparent;
    }
}

@media (min-width: 1024px) {
    /* Desktop only: sembunyikan header bawaan saat sidebar icon-only */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header-ctn {
        display: none !important;
    }

    .fi-main-sidebar.fi-sidebar-open .fi-helpdesk-sidebar-icon-brand {
        display: none;
    }

    .fi-sidebar-close-collapse-sidebar-btn {
        display: none !important;
    }

    /* Collapsed sidebar: lebar tetap, tanpa scroll horizontal */
    .fi-body-has-sidebar-collapsible-on-desktop .fi-main-sidebar:not(.fi-sidebar-open) {
        width: var(--collapsed-sidebar-width, 4rem) !important;
        min-width: var(--collapsed-sidebar-width, 4rem);
        max-width: var(--collapsed-sidebar-width, 4rem);
        overflow: visible;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar {
        width: 100%;
        max-width: 100%;
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        overflow: visible;
        box-sizing: border-box;
    }

    /* Header: icon centred, compact */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
        padding-inline: 0;
        padding-block: 0.5rem 0.25rem;
    }

    /* Nav: ikon di tengah — scrollbar disembunyikan agar tidak makan ruang kanan */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        padding-block: 0.375rem 0.625rem;
        row-gap: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        width: 100%;
        max-width: 100%;
        margin-inline: 0 !important;
        padding: 0 !important;
        row-gap: 0 !important;
        gap: 0;
        display: grid;
        justify-items: center;
        list-style: none;
        box-sizing: border-box;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group {
        width: 100%;
        max-width: 100%;
        row-gap: 0;
        display: grid;
        justify-items: center;
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        box-sizing: border-box;
    }

    /* Pemisah halus antar grup (Operasional | Administrasi) */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups > .fi-sidebar-group + .fi-sidebar-group {
        margin-block-start: 0.375rem;
        padding-block-start: 0.375rem;
        border-block-start: 1px solid var(--hd-sidebar-border);
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn {
        display: none !important;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        display: grid;
        justify-items: center;
        gap: 0.25rem;
        box-sizing: border-box;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-sidebar-item-has-url {
        width: 100%;
        max-width: 100%;
        display: grid;
        justify-items: center;
        padding: 0 !important;
        margin: 0 !important;
        inset-inline-start: auto !important;
        row-gap: 0 !important;
    }

    /*
     * Filament: .fi-sidebar-item-btn = width 100% + justify flex-start → ikon nempel kiri.
     * Paksa kotak ikon tetap di tengah sidebar.
     */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > .fi-sidebar-item-btn,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item > a.fi-sidebar-item-btn,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
        width: var(--hd-sidebar-item-height) !important;
        max-width: var(--hd-sidebar-item-height) !important;
        height: var(--hd-sidebar-item-height);
        min-width: var(--hd-sidebar-item-height);
        min-height: var(--hd-sidebar-item-height);
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center !important;
        padding: 0 !important;
        margin-inline: auto !important;
        gap: 0 !important;
        border-radius: var(--hd-sidebar-radius);
        color: var(--hd-sidebar-text);
        box-shadow: none !important;
        transition: background 120ms ease, color 120ms ease;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-badge-ctn,
    .fi-main-sidebar:not(.fi-sidebar-open) a.fi-sidebar-item-btn > *:not(.fi-sidebar-item-icon) {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon {
        margin: 0 !important;
        flex-shrink: 0;
        color: currentColor;
    }

    /* Active: pill rata tengah (tanpa inset kiri yang menggeser ikon) */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > a.fi-sidebar-item-btn {
        background: var(--hd-sidebar-active-bg);
        color: var(--hd-sidebar-active-text);
        box-shadow: none !important;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
        color: var(--hd-sidebar-active-text);
    }

    /* Hover */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item:not(.fi-active) > a.fi-sidebar-item-btn:hover,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover {
        background: var(--hd-sidebar-hover);
        color: var(--hd-sidebar-text-hover);
    }

    /* Footer — user menu (avatar), selaras dengan item nav di atasnya */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer {
        margin-inline: 0 !important;
        margin-block: 0 !important;
        padding-inline: 0 !important;
        padding-block: 0.5rem 0.625rem;
        row-gap: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-block-start: 1px solid var(--hd-sidebar-border);
        overflow: visible;
        position: relative;
        z-index: 20;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-dropdown {
        width: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        overflow: visible;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-dropdown-trigger {
        width: auto;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-dropdown-panel {
        z-index: 70;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu-trigger {
        width: var(--hd-sidebar-item-height);
        height: var(--hd-sidebar-item-height);
        min-width: var(--hd-sidebar-item-height);
        min-height: var(--hd-sidebar-item-height);
        padding: 0;
        margin-inline: auto;
        gap: 0;
        column-gap: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hd-sidebar-radius);
        transition: background 120ms ease;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu-trigger:hover {
        background: var(--hd-sidebar-hover);
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu-trigger .fi-avatar,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-avatar {
        width: 1.75rem;
        height: 1.75rem;
        margin: 0;
        flex-shrink: 0;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu-trigger-text,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-user-menu-trigger > .fi-icon {
        display: none !important;
    }

    /* Widget akun lama (jika masih dipakai di panel lain) */
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-sidebar-item {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-sidebar-item-btn,
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-footer .fi-account-widget-trigger {
        width: var(--hd-sidebar-item-height);
        height: var(--hd-sidebar-item-height);
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/* ── Brand icon (injected via SIDEBAR_START render hook) ── */
@media (min-width: 1024px) {
    .fi-main-sidebar:not(.fi-sidebar-open) .fi-helpdesk-sidebar-icon-brand {
        width: 100%;
        max-width: 100%;
        padding-inline: 0 !important;
        box-sizing: border-box;
    }
}

.fi-helpdesk-sidebar-icon-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed height agar sejajar dengan label KLIEN di secondary panel */
    min-height: var(--hd-sidebar-header-height);
    padding-inline: 0;
    border-block-end: 1px solid var(--hd-sidebar-border);
    flex-shrink: 0;
}

.fi-helpdesk-sidebar-icon-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hd-sidebar-item-height);
    height: var(--hd-sidebar-item-height);
    border-radius: var(--hd-sidebar-radius);
    padding: 0.3125rem;
    transition: background 120ms ease, box-shadow 120ms ease;
}

.fi-helpdesk-sidebar-icon-brand-link:hover {
    background: var(--hd-sidebar-hover);
}

.fi-helpdesk-sidebar-icon-brand img {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

/* ==================================================================
   4. SECONDARY PANEL — sub-navigation
   Grid 2×2: sub-nav span penuh kiri (sejajar header + content).
   Jangan pisah header dari sub-nav pakai margin — itu bikin gap kosong.
   ================================================================== */

@media (min-width: 64rem) {
    .fi-main:has(.fi-page-has-sub-navigation-start) {
        padding-inline: 0 !important;
        padding-block: 0 !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    /* Grid: sub-nav kiri span semua baris, header + content di kanan */
    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-header-main-ctn {
        display: grid;
        grid-template-columns: var(--hd-subnav-width) minmax(0, 1fr);
        grid-template-rows: auto 1fr;  /* baris content = 1fr agar tidak ada ruang kosong */
        align-items: start;
        gap: 0 !important;
        padding: 0 !important;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-main {
        display: contents !important;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-sub-navigation-sidebar-ctn {
        grid-column: 1;
        grid-row: 1 / -1;
        align-self: start;
        width: var(--hd-subnav-width);
        min-width: var(--hd-subnav-width);
        max-width: var(--hd-subnav-width);
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
        position: sticky;
        top: 0;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-header {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0 !important;
        padding: 1.25rem 2rem 0.75rem 2rem;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-content {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
        padding: 0.75rem 2rem 2rem 2rem;
    }

    /* List-records: konten rapat ke atas dengan breathing room yang cukup */
    .fi-page.fi-resource-list-records-page .fi-page-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.75rem 2rem 2rem !important;
        gap: 0.75rem !important;
        align-content: flex-start !important;
        align-self: start !important;
    }

    /* List-records dengan sub-nav: header lebih compact, content nempel */
    .fi-page.fi-resource-list-records-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-header {
        padding: 1rem 2rem 0.5rem !important;
    }

    .fi-page.fi-resource-list-records-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-content {
        padding-top: 0.25rem !important;
    }

    .fi-page.fi-resource-list-records-page .fi-sc.fi-sc-has-gap {
        gap: 0.75rem !important;
    }

    .fi-page.fi-resource-list-records-page .fi-tabs {
        margin-bottom: 0.25rem !important;
        margin-top: 0 !important;
    }

    .fi-page.fi-resource-list-records-page .fi-ta-ctn {
        flex: 0 0 auto !important;
        align-self: flex-start !important;
        width: 100%;
        border-radius: 0.75rem;
        overflow: hidden;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-main-sub-navigation-mobile-menu-render-hook-ctn {
        display: none !important;
    }

    body.fi-helpdesk-subnav-collapsed .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-header-main-ctn {
        grid-template-columns: minmax(0, 1fr);
    }

    body.fi-helpdesk-subnav-collapsed .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-sub-navigation-sidebar-ctn {
        display: none !important;
    }

    body.fi-helpdesk-subnav-collapsed .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-header,
    body.fi-helpdesk-subnav-collapsed .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-content {
        grid-column: 1;
    }
}

.fi-helpdesk-subnav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hd-sidebar-item-height);
    height: var(--hd-sidebar-item-height);
    min-width: var(--hd-sidebar-item-height);
    min-height: var(--hd-sidebar-item-height);
    margin: 0 auto 0.375rem;
    padding: 0;
    border-radius: var(--hd-sidebar-radius);
    border: 0;
    background: transparent;
    color: var(--hd-sidebar-muted);
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.fi-helpdesk-subnav-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.fi-helpdesk-subnav-toggle:hover {
    color: var(--hd-sidebar-text-hover);
    background: var(--hd-sidebar-hover);
    transform: translateX(-1px);
}

.dark .fi-helpdesk-subnav-toggle {
    color: var(--hd-sidebar-muted);
}

.dark .fi-helpdesk-subnav-toggle:hover {
    color: var(--hd-sidebar-text-hover);
    background: var(--hd-sidebar-hover);
}

@media (max-width: 63.999rem) {
    .fi-helpdesk-subnav-toggle {
        display: none !important;
    }
}

/* ── Panel container — visual styling ── */
.fi-page-has-sub-navigation-start .fi-page-sub-navigation-sidebar-ctn {
    width: var(--hd-subnav-width, 13.5rem);
    border-inline-start: 1px solid var(--hd-sidebar-border);
    border-inline-end: 1px solid var(--hd-sidebar-border);
    background: var(--hd-sidebar-bg) !important;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ── Nav list ── */
/* Override Filament default row-gap: 1.75rem; hapus padding atas — dikelola oleh group-btn */
.fi-page-sub-navigation-sidebar {
    list-style: none;
    margin: 0;
    padding: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    row-gap: 0 !important;
    gap: 0;
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
    width: 100%;
}

/* ── Group heading statis (mis. TIKET) — sejajar brand icon di sidebar utama ── */
.fi-page-sub-navigation-sidebar .fi-sidebar-group:not(.fi-collapsible) > .fi-sidebar-group-btn {
    all: unset;
    display: flex;
    align-items: center;
    min-height: var(--hd-sidebar-header-height);
    padding-inline: 0.75rem;
    padding-block: 0;
    border-block-end: 1px solid var(--hd-sidebar-border);
    margin-block-end: 0.5rem;
    pointer-events: none;
    cursor: default;
    box-sizing: border-box;
}

/* ── Group collapsible (mis. PENGATURAN) — bisa diklik, item turun ke bawah ── */
/* Grup PENGATURAN — jarak wajar di bawah TIKET (bukan margin-top:auto) */
.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible {
    margin-block-start: 1rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--hd-sidebar-border);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2rem;
    margin-block: 0 0.25rem;
    padding-inline: 0.75rem;
    padding-block: 0.375rem;
    border: 0;
    border-radius: var(--hd-sidebar-radius);
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    box-sizing: border-box;
    transition: background 100ms ease, color 100ms ease;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible > .fi-sidebar-group-btn:hover {
    background: var(--hd-sidebar-hover);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible .fi-sidebar-group-label {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible .fi-sidebar-group-collapse-btn {
    flex-shrink: 0;
    margin: 0;
    color: var(--hd-sidebar-muted);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible.fi-collapsed .fi-sidebar-group-collapse-btn {
    transform: rotate(-180deg);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    display: block;
    font-size: 0.6875rem;         /* 11 px */
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hd-sidebar-muted);
    line-height: 1.25;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible .fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-group-label {
    color: var(--hd-sidebar-muted);
}

/* ── Item list ── */
.fi-page-sub-navigation-sidebar .fi-sidebar-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-inline: 0.5rem;
    margin-block-start: 0.125rem;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-group.fi-collapsible .fi-sidebar-group-items {
    margin-block-end: 0.25rem;
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item {
    width: 100%;
    box-sizing: border-box;
}

/* ── Item link ── */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--hd-sidebar-item-height);
    border-radius: var(--hd-sidebar-radius);
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;         /* 13 px */
    font-weight: 500;
    line-height: 1.4;
    color: var(--hd-sidebar-text);
    text-decoration: none;
    outline: none;
    transition: background 100ms ease, color 100ms ease, box-shadow 100ms ease;
    position: relative;
    user-select: none;
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-item-btn {
    color: var(--hd-sidebar-text);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover {
    background: var(--hd-sidebar-hover);
    color: var(--hd-sidebar-text-hover);
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:hover {
    background: var(--hd-sidebar-hover);
    color: var(--hd-sidebar-text-hover);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item-btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 1px;
}

/* ── Icon ── */
.fi-page-sub-navigation-sidebar .fi-sidebar-item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--hd-sidebar-muted);
    transition: color 100ms ease;
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-item-icon {
    color: var(--hd-sidebar-muted);
}

/* ── Active item ── */
.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--hd-sidebar-active-bg);
    color: var(--hd-sidebar-active-text);
    font-weight: 600;
    /* Left accent bar via inset shadow — avoids overflow: visible */
    box-shadow: inset 2px 0 0 var(--hd-sidebar-active-accent);
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: var(--hd-sidebar-active-bg);
    color: var(--hd-sidebar-active-text);
    box-shadow: inset 2px 0 0 var(--hd-sidebar-active-accent);
}

.fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--hd-sidebar-active-accent);
}

.dark .fi-page-sub-navigation-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--hd-sidebar-active-accent);
}

/* ==================================================================
   5. MOBILE & TABLET (< 1024px) — reset desktop hacks
   Custom sidebar / sub-nav grid hanya untuk desktop; di HP pakai
   pola bawaan Filament (drawer + sub-nav dropdown).
   ================================================================== */

@media (max-width: 1023.98px) {
    /* Brand icon custom hanya untuk desktop collapsed — di HP pakai header Filament */
    .fi-helpdesk-sidebar-icon-brand {
        display: none !important;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-main {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }

    /* Panel sub-nav samping: sembunyikan; navigasi lewat menu mobile Filament */
    .fi-page-has-sub-navigation-start .fi-page-sub-navigation-sidebar-ctn {
        display: none !important;
        width: 0 !important;
        min-height: 0 !important;
        border: none !important;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-main-sub-navigation-mobile-menu-render-hook-ctn {
        display: block !important;
        width: 100%;
        min-width: 0;
    }

    /* Padding konten & header lebih rapat */
    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-header,
    .fi-header {
        padding-inline: 1rem !important;
        padding-block-start: 1rem !important;
    }

    .fi-page.fi-page-has-sub-navigation.fi-page-has-sub-navigation-start .fi-page-content,
    .fi-page-content,
    .fi-main {
        padding-inline: 1rem !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        min-height: 0 !important;
    }

    .fi-page-content {
        padding-block: 1rem 1.25rem !important;
    }

    /* Header: judul + tombol tidak saling tindih */
    .fi-header {
        flex-wrap: wrap;
        gap: 0.75rem;
        row-gap: 0.5rem;
    }

    .fi-header-heading-ctn {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }

    .fi-header-heading {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .fi-header-actions-ctn {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .fi-header-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
        row-gap: 0.5rem;
    }

    /* Tab daftar (Aktif / Tiket saya / …) — scroll horizontal jika perlu */
    .fi-tabs,
    .fi-tabs-tab-list,
    [role="tablist"] {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    /* Tabel tiket: scroll horizontal, tidak memecah layout */
    .fi-ta-ctn {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .fi-ta-table {
        min-width: 36rem;
    }

    .fi-ta-header-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .fi-ta-filters-above-content-ctn,
    .fi-ta-filters-below-content-ctn {
        max-width: 100%;
    }

    /* Form: section tidak dipaksa tinggi penuh (hindari layout aneh) */
    .fi-sc > div:has(> .fi-sc-component > .fi-form-section-stretch) {
        display: block;
        min-height: 0;
    }

    .fi-sc-section.fi-form-section-stretch,
    .fi-sc-section.fi-form-section-stretch > section.fi-section {
        display: block;
        flex: none;
        min-height: 0;
    }

    /* Relation manager / modal form */
    .fi-modal-window {
        max-width: calc(100vw - 1.5rem) !important;
        margin-inline: 0.75rem;
    }

    /* Widget akun / kartu dashboard */
    .fi-account-widget .fi-section-content {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .fi-account-widget-logout-form {
        width: 100%;
    }

    .fi-account-widget-logout-form .fi-btn {
        width: 100%;
    }
}

/* Notifikasi — bell + dropdown di sidebar footer (Filament database notifications) */
.fi-helpdesk-alert-poller {
    display: none;
}

.fi-sidebar-footer .fi-no-database {
    width: 100%;
}

.fi-helpdesk-notif-sidebar-btn {
    position: relative;
}

.fi-helpdesk-notif-icon-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.fi-helpdesk-notif-icon-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.4rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: rgb(var(--warning-500));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    border: 2px solid rgb(var(--fi-color-white));
    pointer-events: none;
    z-index: 1;
}

.dark .fi-helpdesk-notif-icon-badge {
    border-color: rgb(var(--gray-900));
}

.fi-sidebar-database-notifications-btn {
    width: 100%;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-database-notifications-btn:hover {
    background: rgb(var(--gray-100));
}

.dark .fi-sidebar-database-notifications-btn:hover {
    background: rgb(var(--gray-800));
}

.fi-no-database .fi-modal-window {
    max-height: min(32rem, 85dvh);
}

.fi-no-notification-unread-ctn {
    border-inline-start: 3px solid rgb(var(--primary-500));
    padding-inline-start: 0.25rem;
}

/* ==================================================================
   v22 — UI polish: login, kanban, transitions, a11y, sidebar active
   ================================================================== */

.fi-btn, .fi-badge, .fi-ta-row {
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.fi-btn:focus-visible,
.fi-input-wrp:focus-within,
.fi-select-input:focus-visible {
    outline: 2px solid rgb(var(--primary-500));
    outline-offset: 2px;
}

.fi-ta-table tbody tr:hover {
    background: rgb(var(--gray-50) / 0.8);
}

.dark .fi-ta-table tbody tr:hover {
    background: rgb(var(--gray-800) / 0.5);
}

.fi-ta-table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

.fi-helpdesk-nav-badge-pulse {
    animation: fi-helpdesk-badge-pulse 1s ease 2;
}

@keyframes fi-helpdesk-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); background: rgb(var(--danger-500)); color: #fff; }
}

.fi-main ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fi-main ::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-300));
    border-radius: 9999px;
}

.dark .fi-main ::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-600));
}

/* Kanban board — papan tiket (Jira-style) */
.fi-helpdesk-ticket-board-page .fi-page-content {
    padding-top: 0.375rem;
    max-width: 100% !important;
    min-width: 0;
    overflow: hidden;
    align-self: stretch !important;
    width: 100%;
}

.fi-helpdesk-ticket-board-page .fi-page-header {
    margin-bottom: 0.375rem;
}

.fi-helpdesk-kanban {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.fi-helpdesk-kanban-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 1.25rem;
    margin-bottom: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.fi-helpdesk-kanban-toolbar-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--gray-600));
}

.dark .fi-helpdesk-kanban-toolbar-meta {
    color: rgb(var(--gray-300));
}

.fi-helpdesk-kanban-toolbar-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: rgb(var(--primary-600));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.fi-helpdesk-kanban-toolbar-overdue {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(var(--danger-600));
    background: rgb(var(--danger-50));
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
}

.fi-helpdesk-kanban-toolbar-overdue svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.dark .fi-helpdesk-kanban-toolbar-overdue {
    background: rgb(var(--danger-950));
    color: rgb(var(--danger-300));
}

.fi-helpdesk-kanban-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--gray-300));
    background: rgb(var(--fi-color-white));
    color: rgb(var(--gray-600));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.fi-helpdesk-kanban-filter-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-filter-btn:hover {
    border-color: rgb(var(--primary-400));
    color: rgb(var(--primary-600));
    background: rgb(var(--primary-50));
}

.fi-helpdesk-kanban-filter-btn--active {
    border-color: rgb(var(--primary-500));
    background: rgb(var(--primary-500));
    color: #fff;
}

.fi-helpdesk-kanban-filter-btn--active:hover {
    background: rgb(var(--primary-600));
    border-color: rgb(var(--primary-600));
    color: #fff;
}

.dark .fi-helpdesk-kanban-filter-btn {
    border-color: rgb(var(--gray-600));
    background: rgb(var(--gray-800));
    color: rgb(var(--gray-300));
}

.dark .fi-helpdesk-kanban-filter-btn--active {
    background: rgb(var(--primary-600));
    border-color: rgb(var(--primary-600));
    color: #fff;
}

.fi-helpdesk-kanban-toolbar-hint {
    margin: 0;
    font-size: 0.75rem;
    color: rgb(var(--gray-400));
}

.fi-helpdesk-kanban-drag-hint {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.fi-helpdesk-kanban-drag-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    background: rgb(var(--gray-100));
    color: rgb(var(--primary-600));
    animation: fi-helpdesk-kanban-hint-bob 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

.dark .fi-helpdesk-kanban-drag-hint-icon {
    background: rgb(var(--gray-800));
    color: rgb(var(--primary-300));
}

.fi-helpdesk-kanban-drag-hint-icon svg {
    width: 1rem;
    height: 1rem;
}

.fi-helpdesk-kanban-drag-hint-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.fi-helpdesk-kanban-drag-hint-copy strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: rgb(var(--gray-900));
}

.fi-helpdesk-kanban-drag-hint-copy span {
    font-size: 0.75rem;
    color: rgb(var(--gray-600));
    line-height: 1.45;
}

.dark .fi-helpdesk-kanban-drag-hint-copy strong {
    color: rgb(var(--gray-100));
}

.dark .fi-helpdesk-kanban-drag-hint-copy span {
    color: rgb(var(--gray-300));
}

.fi-helpdesk-kanban-columns {
    display: flex;
    gap: 1rem;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0.375rem 0 1.25rem;
    align-items: stretch;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.125rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-height: calc(100dvh - 13rem);
}

.fi-helpdesk-kanban-column {
    flex: 1 1 0;
    min-width: clamp(14rem, 18vw, 16rem);
    width: auto;
    max-width: none;
    scroll-snap-align: start;
    background: linear-gradient(180deg, rgb(var(--gray-100) / 0.95), rgb(var(--gray-200) / 0.72));
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--gray-200) / 0.9);
    min-height: 12rem;
    height: calc(100dvh - 11rem);
    max-height: calc(100dvh - 11rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.62);
}

.dark .fi-helpdesk-kanban-column {
    background: rgb(15 23 42 / 0.96) !important;
    border-color: rgb(51 65 85 / 0.95) !important;
    box-shadow:
        inset 0 0 0 1px rgb(148 163 184 / 0.12),
        0 14px 30px rgb(0 0 0 / 0.22);
}

.dark .fi-helpdesk-kanban-column-header {
    background: rgb(15 23 42 / 0.72);
    border-bottom-color: rgb(51 65 85 / 0.82);
}

.fi-helpdesk-kanban-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 0.625rem 0.625rem 0 0;
    opacity: 0.85;
}

.fi-helpdesk-kanban-column--open::before { background: rgb(var(--gray-400)); }
.fi-helpdesk-kanban-column--assigned::before { background: rgb(var(--primary-500)); }
.fi-helpdesk-kanban-column--progress::before { background: rgb(var(--info-500)); }
.fi-helpdesk-kanban-column--escalated::before { background: rgb(var(--warning-500)); }
.fi-helpdesk-kanban-column--resolved::before { background: rgb(var(--success-500)); }

.fi-helpdesk-kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.875rem 1rem 0.75rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
    background: transparent;
    border-bottom: 1px solid rgb(var(--gray-200) / 0.55);
}

.fi-helpdesk-kanban-column-title {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    min-width: 0;
    color: rgb(var(--gray-600));
}

.dark .fi-helpdesk-kanban-column-title {
    color: rgb(var(--gray-300));
}

.fi-helpdesk-kanban-column-title h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-helpdesk-kanban-column-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-column--open .fi-helpdesk-kanban-column-dot { background: rgb(var(--gray-400)); }
.fi-helpdesk-kanban-column--assigned .fi-helpdesk-kanban-column-dot { background: rgb(var(--primary-500)); }
.fi-helpdesk-kanban-column--progress .fi-helpdesk-kanban-column-dot { background: rgb(var(--info-500)); }
.fi-helpdesk-kanban-column--escalated .fi-helpdesk-kanban-column-dot { background: rgb(var(--warning-500)); }
.fi-helpdesk-kanban-column--resolved .fi-helpdesk-kanban-column-dot { background: rgb(var(--success-500)); }

.fi-helpdesk-kanban-count {
    background: rgb(var(--gray-200));
    color: rgb(var(--gray-700));
    border-radius: 9999px;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
}

.dark .fi-helpdesk-kanban-count {
    background: rgb(var(--gray-700));
    color: rgb(var(--gray-200));
}

.fi-helpdesk-kanban-cards {
    padding: 0.75rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fi-helpdesk-kanban-cards::-webkit-scrollbar {
    width: 6px;
}

.fi-helpdesk-kanban-cards::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-300));
    border-radius: 9999px;
}

.dark .fi-helpdesk-kanban-cards::-webkit-scrollbar-thumb {
    background: rgb(var(--gray-600));
}

.fi-helpdesk-kanban-card {
    position: relative;
    display: flex;
    background:
        linear-gradient(180deg, rgb(var(--fi-color-white) / 1), rgb(var(--primary-50) / 0.42));
    border: 1px solid rgb(var(--primary-200) / 0.82);
    border-radius: 0.875rem;
    cursor: grab;
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.07),
        0 12px 28px rgb(15 23 42 / 0.12),
        0 0 0 1px rgb(255 255 255 / 0.92) inset;
    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
    overflow: hidden;
}

.fi-helpdesk-kanban-card:hover {
    border-color: rgb(var(--primary-400));
    background:
        linear-gradient(180deg, rgb(var(--fi-color-white) / 1), rgb(var(--primary-50) / 0.72));
    box-shadow:
        0 16px 34px rgb(15 23 42 / 0.16),
        0 4px 10px rgb(15 23 42 / 0.08),
        0 0 0 1px rgb(var(--primary-600) / 0.12);
    transform: translateY(-2px);
}

.dark .fi-helpdesk-kanban-card {
    background: rgb(51 65 85 / 1) !important;
    border-color: rgb(45 212 191 / 0.58) !important;
    outline: 1px solid rgb(255 255 255 / 0.08);
    outline-offset: -2px;
    box-shadow:
        0 2px 5px rgb(0 0 0 / 0.42),
        0 18px 36px rgb(0 0 0 / 0.42),
        0 0 0 1px rgb(255 255 255 / 0.1) inset;
}

.dark .fi-helpdesk-kanban-card:hover {
    border-color: rgb(94 234 212 / 0.9) !important;
    background: rgb(71 85 105 / 1) !important;
    box-shadow:
        0 4px 10px rgb(0 0 0 / 0.45),
        0 22px 42px rgb(0 0 0 / 0.45),
        0 0 0 1px rgb(94 234 212 / 0.18) inset;
}

.fi-helpdesk-kanban-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0.875rem 0 0 0.875rem;
}

.fi-helpdesk-kanban-card--critical .fi-helpdesk-kanban-card-accent { background: rgb(var(--danger-500)); }
.fi-helpdesk-kanban-card--high .fi-helpdesk-kanban-card-accent { background: rgb(var(--warning-500)); }
.fi-helpdesk-kanban-card--medium .fi-helpdesk-kanban-card-accent { background: rgb(var(--gray-400)); }
.fi-helpdesk-kanban-card--low .fi-helpdesk-kanban-card-accent { background: rgb(var(--success-500)); }

.fi-helpdesk-kanban-card-body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1rem 1rem 1.125rem;
}

.fi-helpdesk-kanban-card--ghost {
    opacity: 0.4;
    background: rgb(var(--gray-100));
    border-style: dashed;
}

.dark .fi-helpdesk-kanban-card--ghost {
    background: rgb(var(--gray-700));
}

.fi-helpdesk-kanban-card--chosen {
    cursor: grabbing;
}

.fi-helpdesk-kanban-card--drag {
    box-shadow:
        0 16px 32px rgb(9 30 66 / 0.22),
        0 4px 10px rgb(9 30 66 / 0.12);
    transform: rotate(2deg) scale(1.02);
    opacity: 0.98;
    z-index: 50;
}

body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-cards {
    min-height: 6rem;
}

body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-column {
    outline: 1px dashed rgb(var(--primary-300) / 0.35);
    outline-offset: -2px;
}

body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-column:hover,
body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-cards:hover {
    background: rgb(var(--primary-600) / 0.06);
}

.dark body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-column:hover,
.dark body.fi-helpdesk-kanban-dragging .fi-helpdesk-kanban-cards:hover {
    background: rgb(var(--primary-500) / 0.09);
}

.fi-helpdesk-kanban-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fi-helpdesk-kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.fi-helpdesk-kanban-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-id {
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgb(var(--gray-500));
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.fi-helpdesk-kanban-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    color: rgb(var(--gray-400));
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-open svg {
    width: 0.875rem;
    height: 0.875rem;
}

.fi-helpdesk-kanban-card:hover .fi-helpdesk-kanban-open {
    opacity: 1;
}

.fi-helpdesk-kanban-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    color: rgb(var(--gray-400));
    background: rgb(var(--gray-50));
    border: 1px solid rgb(var(--gray-200));
    cursor: grab;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-drag-handle svg {
    width: 0.9rem;
    height: 0.9rem;
}

.fi-helpdesk-kanban-card:hover .fi-helpdesk-kanban-drag-handle,
.fi-helpdesk-kanban-drag-handle:hover {
    color: rgb(var(--primary-600));
    background: rgb(var(--primary-50));
    border-color: rgb(var(--primary-200));
    transform: translateY(-1px);
}

.fi-helpdesk-kanban-card--chosen .fi-helpdesk-kanban-drag-handle,
.fi-helpdesk-kanban-card--drag .fi-helpdesk-kanban-drag-handle {
    cursor: grabbing;
    color: rgb(var(--primary-600));
    background: rgb(var(--primary-50));
    border-color: rgb(var(--primary-300));
}

.dark .fi-helpdesk-kanban-drag-handle {
    background: rgb(var(--gray-800));
    border-color: rgb(var(--gray-700));
    color: rgb(var(--gray-400));
}

.dark .fi-helpdesk-kanban-card:hover .fi-helpdesk-kanban-drag-handle,
.dark .fi-helpdesk-kanban-drag-handle:hover,
.dark .fi-helpdesk-kanban-card--chosen .fi-helpdesk-kanban-drag-handle,
.dark .fi-helpdesk-kanban-card--drag .fi-helpdesk-kanban-drag-handle {
    background: rgb(var(--primary-950));
    border-color: rgb(var(--primary-700));
    color: rgb(var(--primary-300));
}

.fi-helpdesk-kanban-open:hover {
    background: rgb(var(--primary-50));
    color: rgb(var(--primary-600));
}

.dark .fi-helpdesk-kanban-open:hover {
    background: rgb(var(--primary-950));
    color: rgb(var(--primary-300));
}

.fi-helpdesk-kanban-subject {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgb(var(--gray-900));
    text-decoration: none;
    margin-bottom: 0.375rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fi-helpdesk-kanban-subject:hover {
    color: rgb(var(--primary-600));
    text-decoration: none;
}

.dark .fi-helpdesk-kanban-subject {
    color: rgb(var(--gray-100));
}

.dark .fi-helpdesk-kanban-subject:hover {
    color: rgb(var(--primary-300));
}

.fi-helpdesk-kanban-company {
    margin: 0 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
    color: rgb(var(--gray-700));
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fi-helpdesk-kanban-company--muted {
    font-weight: 600;
    color: rgb(var(--gray-400));
    font-style: italic;
}

.dark .fi-helpdesk-kanban-company {
    color: rgb(var(--gray-300));
}

.fi-helpdesk-kanban-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.fi-helpdesk-kanban-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(var(--gray-600));
    background: rgb(var(--gray-100));
    border-radius: 0.25rem;
    padding: 0.15rem 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fi-helpdesk-kanban-chip--public {
    background: rgb(var(--warning-50));
    color: rgb(var(--warning-700));
}

.fi-helpdesk-kanban-chip--overdue {
    background: rgb(var(--danger-50));
    color: rgb(var(--danger-700));
    font-weight: 700;
}

.fi-helpdesk-kanban-chip--service {
    background: rgb(var(--primary-50));
    color: rgb(var(--primary-700));
}

.dark .fi-helpdesk-kanban-chip--public {
    background: rgb(var(--warning-950));
    color: rgb(var(--warning-300));
}

.dark .fi-helpdesk-kanban-chip--overdue {
    background: rgb(var(--danger-950));
    color: rgb(var(--danger-300));
}

.dark .fi-helpdesk-kanban-chip--service {
    background: rgb(var(--primary-950));
    color: rgb(var(--primary-300));
}

.fi-helpdesk-kanban-card--overdue {
    border-color: rgb(var(--danger-300)) !important;
}

.fi-helpdesk-kanban-priority-badge {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.fi-helpdesk-kanban-priority-badge--critical {
    background: rgb(var(--danger-50));
    color: rgb(var(--danger-700));
}

.fi-helpdesk-kanban-priority-badge--high {
    background: rgb(var(--warning-50));
    color: rgb(var(--warning-700));
}

.fi-helpdesk-kanban-priority-badge--medium {
    background: rgb(var(--gray-100));
    color: rgb(var(--gray-700));
}

.fi-helpdesk-kanban-priority-badge--low {
    background: rgb(var(--success-50));
    color: rgb(var(--success-700));
}

.dark .fi-helpdesk-kanban-priority-badge--critical { background: rgb(var(--danger-950)); color: rgb(var(--danger-300)); }
.dark .fi-helpdesk-kanban-priority-badge--high { background: rgb(var(--warning-950)); color: rgb(var(--warning-300)); }
.dark .fi-helpdesk-kanban-priority-badge--medium { background: rgb(var(--gray-700)); color: rgb(var(--gray-200)); }
.dark .fi-helpdesk-kanban-priority-badge--low { background: rgb(var(--success-950)); color: rgb(var(--success-300)); }

.fi-helpdesk-kanban-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgb(var(--gray-100));
}

.dark .fi-helpdesk-kanban-card-footer {
    border-color: rgb(var(--gray-700));
}

.fi-helpdesk-kanban-assignee {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    flex: 1 1 auto;
}

.fi-helpdesk-kanban-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: rgb(var(--primary-600));
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    overflow: hidden;
}

.fi-helpdesk-kanban-avatar--photo {
    object-fit: cover;
    background: rgb(var(--gray-200));
}

.fi-helpdesk-kanban-avatar--empty {
    background: rgb(var(--gray-300));
    color: rgb(var(--gray-600));
}

.dark .fi-helpdesk-kanban-avatar--empty {
    background: rgb(var(--gray-600));
    color: rgb(var(--gray-200));
}

.fi-helpdesk-kanban-assignee-name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgb(var(--gray-600));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .fi-helpdesk-kanban-assignee-name {
    color: rgb(var(--gray-300));
}

.fi-helpdesk-kanban-card-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.fi-helpdesk-kanban-sla {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(var(--gray-600));
    background: rgb(var(--gray-50));
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
}

.fi-helpdesk-kanban-sla svg {
    width: 0.6875rem;
    height: 0.6875rem;
}

.fi-helpdesk-kanban-sla-overdue {
    color: rgb(var(--danger-700));
    background: rgb(var(--danger-50));
}

.dark .fi-helpdesk-kanban-sla {
    background: rgb(var(--gray-700));
    color: rgb(var(--gray-300));
}

.dark .fi-helpdesk-kanban-sla-overdue {
    background: rgb(var(--danger-950));
    color: rgb(var(--danger-300));
}

.fi-helpdesk-kanban-updated {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(var(--gray-400));
    white-space: nowrap;
}

.fi-helpdesk-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--gray-400));
    text-align: center;
    padding: 2rem 1rem;
    border: 1px dashed rgb(var(--gray-300));
    border-radius: 0.625rem;
    margin: 0.25rem 0;
    background: rgb(var(--fi-color-white) / 0.45);
}

.dark .fi-helpdesk-kanban-empty {
    border-color: rgb(var(--gray-600));
    background: rgb(var(--gray-800) / 0.35);
}

.fi-helpdesk-kanban-empty svg {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.45;
}

@media (min-width: 64rem) {
  /* Desktop: 4 kolom sama lebar, isi penuh area konten (tanpa gap kosong di kanan) */
    .fi-helpdesk-kanban-columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.125rem;
        overflow-x: hidden;
    }

    .fi-helpdesk-kanban-column {
        flex: unset;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}

@media (max-width: 48rem) {
    .fi-helpdesk-ticket-board-page .fi-page-content {
        padding-inline: 0.75rem !important;
    }

    .fi-helpdesk-kanban-columns {
        gap: 0.625rem;
        padding-inline: 0;
    }

    .fi-helpdesk-kanban-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-helpdesk-kanban-drag-hint {
        align-items: flex-start;
    }

    .fi-helpdesk-kanban-column {
        flex: 0 0 min(86vw, 17rem);
        width: min(86vw, 17rem);
        max-width: 86vw;
        min-width: min(86vw, 17rem);
    }
}

@keyframes fi-helpdesk-kanban-hint-bob {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

.fi-dashboard-page .fi-page-content {
    max-width: 100% !important;
}

/* Chart dengan maxHeight — isi lebar penuh kartu (bukan kotak persegi di kiri) */
.fi-wi-chart .fi-wi-chart-canvas-ctn.fi-wi-chart-canvas-ctn-no-aspect-ratio {
    width: 100%;
    margin-inline: 0;
}

/* Analitik tiket — filter periode di atas KPI/grafik */
.fi-page-ticket-analytics .fi-sc:has([wire\:partial="table-filters-form"]) {
    margin-block-end: 1rem;
}