/* ==========================================================
   SIDEBAR -- teal, hierarki jelas
   Level 1: brand / pilihan Yayasan (putih, tebal)
   Level 2: nama grup (putih 70%, semi-bold)
   Level 3: item menu (putih 88%), aktif = pill putih teks teal
   ========================================================== */
.fi-sidebar{
    /* Sama dengan sidebar Qinara Academy. */
    background:linear-gradient(180deg,#0e918b 0%,#0b7672 45%,#0a5d5a 100%) !important;
    border-right:0 !important;
}
.fi-sidebar-header,
.fi-sidebar-nav{
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
}
.fi-sidebar .fi-logo,
.fi-sidebar .fi-logo span{
    color:#FFFFFF !important;
    font-weight:800 !important;
    letter-spacing:-0.01em;
}
.fi-sidebar .fi-icon-btn,
.fi-sidebar .fi-icon-btn svg{
    color:rgba(255,255,255,0.95) !important;
}
.fi-sidebar .fi-icon-btn:hover{
    background:rgba(255,255,255,0.10) !important;
}

/* Pilihan Yayasan (khusus panel tenant) */
.fi-sidebar .fi-tenant-menu-trigger{
    background:rgba(255,255,255,0.08) !important;
    border-radius:0.75rem !important;
}
.fi-sidebar .fi-tenant-menu-trigger:hover{
    background:rgba(255,255,255,0.14) !important;
}
.fi-sidebar .fi-tenant-menu-trigger span,
.fi-sidebar .fi-tenant-menu-trigger svg{
    color:#FFFFFF !important;
}

/* Avatar inisial Yayasan di sidebar -- cincin tipis supaya menonjol
   di atas latar teal (warna avatarnya sendiri dari QinaraAvatarProvider) */
.fi-sidebar .fi-tenant-menu-trigger .fi-avatar{
    box-shadow:0 0 0 2px rgba(255,255,255,0.45);
}

/* Nama grup -- huruf awal kapital saja (tidak uppercase) */
.fi-sidebar-group-label{
    color:rgba(255,255,255,0.72) !important;
    font-size:0.8125rem !important;
    font-weight:600 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
}
.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button,
.fi-sidebar-group-collapse-button svg{
    color:rgba(255,255,255,0.95) !important;
}
/* Mode sidebar diciutkan (collapse): tiap grup dirender Filament
   sebagai DROPDOWN -- ikonnya ada di dalam .fi-dropdown-trigger,
   bukan di .fi-sidebar-group-icon, jadi perlu ditarget terpisah.
   Panel dropdown-nya (.fi-dropdown-panel, latar putih) sengaja
   TIDAK ikut diubah. */
.fi-sidebar-nav .fi-dropdown-trigger,
.fi-sidebar-nav .fi-dropdown-trigger button,
.fi-sidebar-nav .fi-dropdown-trigger svg,
.fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar-group-dropdown-trigger-btn svg{
    color:rgba(255,255,255,0.95) !important;
}
.fi-sidebar-nav .fi-dropdown-trigger button:hover,
.fi-sidebar-group-dropdown-trigger-btn:hover{
    background:rgba(255,255,255,0.12) !important;
}
.fi-sidebar-group-collapse-button:hover{
    background:rgba(255,255,255,0.10) !important;
}

/* Item menu */
.fi-sidebar-item-button{
    border-radius:0.6rem !important;
    transition:background .15s ease;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible{
    background:rgba(255,255,255,0.10) !important;
}
.fi-sidebar-item-label{
    color:rgba(255,255,255,0.90) !important;
    font-weight:500 !important;
}
.fi-sidebar-item-icon{
    color:rgba(255,255,255,0.95) !important;
}
.fi-sidebar-item-grouped-border > div{
    background:rgba(255,255,255,0.28) !important;
}
.fi-sidebar-item-badge-ctn .fi-badge{
    background:rgba(255,255,255,0.18) !important;
    color:#FFFFFF !important;
}

/* Item aktif */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button{
    background:#FFFFFF !important;
    box-shadow:0 4px 12px -4px rgba(0,0,0,0.25);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon{
    color:#0F766E !important;
    font-weight:700 !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div{
    background:#0F766E !important;
}

/* Sub-menu bertingkat (Keuangan -> Tagihan & Pembayaran -> item).
   Markup: resources/views/vendor/filament-panels/components/sidebar/group.blade.php,
   pemetaan: config/navigasi.php. */
/* Sub-menu menjorok ke dalam dari nama grup (Keuangan) */
.fi-sidebar-subgroup{
    margin-inline-start:1.25rem;
}
.fi-sidebar-subgroup-button{
    transition:background .15s ease;
    cursor:pointer;
}
.fi-sidebar-subgroup-button:hover,
.fi-sidebar-subgroup-button:focus-visible{
    background:rgba(255,255,255,0.10) !important;
}
.fi-sidebar-subgroup-label{
    color:rgba(255,255,255,0.92) !important;
    font-weight:600 !important;
}
.fi-sidebar-subgroup-icon,
.fi-sidebar-subgroup-chevron{
    color:rgba(255,255,255,0.85) !important;
    transition:transform .2s ease;
}
.fi-sidebar-subgroup-badge{
    min-width:1.25rem;
    padding:0 .4rem;
    border-radius:999px;
    background:#F59E0B;
    color:#FFFFFF;
    font-size:.7rem;
    font-weight:700;
    line-height:1.25rem;
    text-align:center;
}
.fi-sidebar-subgroup-items{
    margin-inline-start:1rem;
}

/* Scrollbar sidebar tipis & menyatu */
.fi-sidebar-nav::-webkit-scrollbar{ width:6px; }
.fi-sidebar-nav::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.20);
    border-radius:9999px;
}

/* ==========================================================
   TOPBAR & BACKGROUND (mode terang)
   ========================================================== */
.fi-topbar > nav,
.fi-topbar{
    background:#FFFFFF !important;
    box-shadow:none !important;
    border-bottom:1px solid #E7ECEB;
}
body.fi-body,
.fi-main-ctn{
    background:#F5F8F8 !important;
}

/* ==========================================================
   KARTU, TABEL, SECTION -- lebih lega & lembut
   ========================================================== */
.fi-section,
.fi-ta-ctn,
.fi-wi-chart .fi-section,
.fi-wi-stats-overview-stat{
    border-radius:1rem !important;
}
.fi-section,
.fi-ta-ctn{
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06) !important;
}
.fi-section-header-heading{
    font-weight:700 !important;
    letter-spacing:-0.01em;
}
.fi-ta-header-cell{
    background:#F8FAFA !important;
}

/* ==========================================================
   DASHBOARD -- gaya SaaS modern
   ========================================================== */

/* Banner sapaan di atas dashboard */
.fi-dashboard-page .fi-header{
    position:relative;
    overflow:hidden;
    padding:1.5rem 1.75rem;
    border-radius:1.25rem;
    background:linear-gradient(120deg,#0F766E 0%,#14B8A6 100%);
    box-shadow:0 12px 28px -14px rgba(15,118,110,0.55);
}
.fi-dashboard-page .fi-header::after{
    content:"";
    position:absolute;
    right:-4rem; top:-4rem;
    width:14rem; height:14rem;
    border-radius:9999px;
    background:rgba(255,255,255,0.10);
    pointer-events:none;
}
.fi-dashboard-page .fi-header-heading{
    color:#FFFFFF !important;
    font-size:1.5rem !important;
    font-weight:800 !important;
    letter-spacing:-0.02em;
}
.fi-dashboard-page .fi-header-subheading{
    color:rgba(255,255,255,0.85) !important;
    margin-top:0.25rem;
}

/* ==========================================================
   KARTU STATISTIK v3 -- bersih, gaya SaaS (Linear/Stripe):
   putih polos, border halus, angka tegas, ikon dalam kotak
   bergradasi lembut sesuai warna ikonnya. Berlaku untuk kartu
   bawaan Filament (.fi-wi-stats-overview-stat) DAN komponen
   <x-qinara.stat-card> (.q-stat).
   ========================================================== */
.fi-wi-stats-overview-stat,
.q-stat{
    position:relative;
    overflow:hidden;
    border-radius:1rem !important;
    border:1px solid #E6ECEB !important;
    background:#FFFFFF !important;
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 2px 6px -2px rgba(16,24,40,0.05) !important;
    --tw-ring-shadow:0 0 #0000 !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fi-wi-stats-overview-stat:hover,
.q-stat:hover{
    transform:translateY(-2px);
    border-color:#D5E2E0 !important;
    box-shadow:0 14px 30px -18px rgba(15,23,42,0.28) !important;
}
.fi-wi-stats-overview-stat-label{
    font-size:0.8rem !important;
    font-weight:500 !important;
    color:#64748B !important;
    padding-right:3.5rem;
}
.fi-wi-stats-overview-stat-value{
    font-weight:800 !important;
    letter-spacing:-0.025em;
    font-variant-numeric:tabular-nums;
    color:#0F172A !important;
}
.fi-wi-stats-overview-stat-description{
    display:inline-block;
    padding:0.18rem 0.6rem;
    border-radius:9999px;
    font-size:0.72rem !important;
    font-weight:600;
    background:color-mix(in srgb, currentColor 10%, transparent);
}
/* Ikon -> kotak ikon bergradasi di kanan atas */
.fi-wi-stats-overview-stat-description-icon{
    position:absolute;
    top:1.25rem;
    right:1.25rem;
    width:2.75rem !important;
    height:2.75rem !important;
    padding:0.7rem;
    border-radius:0.9rem;
    background:linear-gradient(135deg,
        color-mix(in srgb, currentColor 20%, transparent),
        color-mix(in srgb, currentColor 7%, transparent));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- Komponen <x-qinara.stat-card> ---------- */
.q-stat{ padding:1.25rem 1.5rem; }
.q-stat-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:0.75rem; }
.q-stat-label{
    display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem;
    font-size:0.8rem; font-weight:500; color:#64748B;
}
.q-stat-icon{
    flex-shrink:0;
    width:2.75rem; height:2.75rem;
    border-radius:0.9rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--q-c);
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--q-c) 20%, transparent),
        color-mix(in srgb, var(--q-c) 7%, transparent));
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--q-c) 18%, transparent);
}
.q-stat-value{
    margin-top:0.35rem;
    font-size:1.75rem; line-height:1.15;
    font-weight:800; letter-spacing:-0.025em;
    font-variant-numeric:tabular-nums;
    color:#0F172A;
}
.q-stat-hint{
    display:inline-block;
    margin-top:0.65rem;
    padding:0.18rem 0.6rem;
    border-radius:9999px;
    font-size:0.72rem; font-weight:600;
    color:var(--q-c);
    background:color-mix(in srgb, var(--q-c) 10%, transparent);
}
.q-stat-flag{
    font-size:0.65rem; font-weight:700;
    padding:0.1rem 0.5rem;
    border-radius:9999px;
    background:#FEE2E2; color:#991B1B;
}
.q-stat-watermark{ display:none; }
.q-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:1rem;
}

/* ---------- Varian SOLID (laporan): gradient penuh per jenis ---------- */
.q-stat.q-stat--solid{
    border:0 !important;
    color:#FFFFFF;
    background:linear-gradient(135deg, var(--q-g1), var(--q-g2)) !important;
    box-shadow:0 14px 28px -16px var(--q-g1) !important;
}
.q-stat.q-stat--solid:hover{ box-shadow:0 18px 34px -16px var(--q-g1) !important; }
.q-stat--solid .q-stat-label{ color:rgba(255,255,255,0.85); }
.q-stat--solid .q-stat-value{ color:#FFFFFF; }
.q-stat--solid .q-stat-icon{
    color:#FFFFFF;
    background:rgba(255,255,255,0.18);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25);
}
.q-stat--solid .q-stat-hint{
    color:#FFFFFF;
    background:rgba(255,255,255,0.18);
}
.q-stat--solid .q-stat-flag{ background:#FFFFFF; color:#B91C1C; }
.q-stat--solid .q-stat-head,
.q-stat--solid .q-stat-value,
.q-stat--solid .q-stat-hint{ position:relative; z-index:1; }
/* Ikon besar samar di kanan bawah -- penanda jenis laporan */
.q-stat--solid .q-stat-watermark{
    display:block;
    position:absolute;
    right:-0.75rem; bottom:-1.25rem;
    width:7rem; height:7rem;
    color:rgba(255,255,255,0.14);
    pointer-events:none;
}
.q-stat--solid .q-stat-watermark svg{ width:100%; height:100%; }
.q-stat--solid::after{
    content:"";
    position:absolute;
    top:-3rem; right:-3rem;
    width:9rem; height:9rem;
    border-radius:9999px;
    background:rgba(255,255,255,0.08);
    pointer-events:none;
}

/* ==========================================================
   DASHBOARD PSB (layout baru)
   ========================================================== */
.q-psb-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:1rem;
}
.q-psb-sub{ font-size:0.78rem; color:#64748B; margin-top:-0.25rem; margin-bottom:0.75rem; }

/* Bar horizontal (alur/tahapan pendaftaran) */
.q-bar-row{
    display:grid;
    grid-template-columns:minmax(7.5rem, 11rem) 1fr 3.5rem;
    align-items:center;
    gap:0.85rem;
    padding:0.42rem 0;
}
.q-bar-label{ font-size:0.84rem; color:#334155; }
.q-bar-track{ height:0.55rem; border-radius:9999px; background:#EEF2F2; overflow:hidden; }
.q-bar-fill{
    height:100%;
    border-radius:9999px;
    background:linear-gradient(90deg,#2DD4BF,#0F766E);
}
.q-bar-fill.is-success{ background:linear-gradient(90deg,#4ADE80,#16A34A); }
.q-bar-fill.is-danger{ background:linear-gradient(90deg,#FB7185,#DC2626); }
.q-bar-fill.is-info{ background:linear-gradient(90deg,#60A5FA,#2563EB); }
.q-bar-val{ text-align:right; font-weight:700; font-size:0.85rem; color:#0F172A; font-variant-numeric:tabular-nums; }
.q-bar-val small{ display:block; font-weight:500; font-size:0.68rem; color:#94A3B8; }

/* Per lembaga: nama + total + bar L/P */
.q-lembaga{ padding:0.75rem 0; border-bottom:1px solid #EEF2F2; }
.q-lembaga:last-child{ border-bottom:0; }
.q-lembaga-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.45rem; }
.q-lembaga-name{ font-size:0.88rem; font-weight:600; color:#0F172A; }
.q-lembaga-total{ font-size:1.1rem; font-weight:800; color:#0F172A; }
.q-lembaga-total span{ font-size:0.72rem; font-weight:500; color:#94A3B8; margin-left:0.2rem; }
.q-split{ display:flex; height:0.5rem; border-radius:9999px; overflow:hidden; background:#EEF2F2; }
.q-split .is-l{ background:#00A39D; }
.q-split .is-p{ background:#F59E0B; }
.q-legend{ display:flex; gap:1rem; margin-top:0.4rem; font-size:0.72rem; color:#64748B; }
.q-legend i{ display:inline-block; width:0.55rem; height:0.55rem; border-radius:9999px; margin-right:0.3rem; vertical-align:middle; }

/* Pembayaran: bar bertumpuk */
.q-stack{ display:flex; height:0.7rem; border-radius:9999px; overflow:hidden; background:#EEF2F2; margin-top:1rem; }
.q-stack > div{ height:100%; }

/* Demografi: kartu mini */
.q-mini-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; }
.q-mini{ border:1px solid #E6ECEB; border-radius:0.9rem; padding:1rem 1.1rem; background:#FFFFFF; }
.q-mini-title{ display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; font-weight:700; color:#0F172A; margin-bottom:0.6rem; }
.q-mini-title .q-dot{ width:1.75rem; height:1.75rem; border-radius:0.6rem; display:flex; align-items:center; justify-content:center; color:#0F766E; background:#E6F7F4; }
.q-mini-item{ display:flex; justify-content:space-between; gap:0.75rem; padding:0.45rem 0; border-top:1px dashed #E6ECEB; }
.q-mini-item:first-of-type{ border-top:0; }
.q-mini-item .q-k{ font-size:0.7rem; color:#94A3B8; }
.q-mini-item .q-v{ font-size:0.82rem; font-weight:600; color:#1E293B; }
.q-mini-item .q-n{ align-self:center; font-size:0.72rem; font-weight:700; color:#0F766E; background:#E6F7F4; border-radius:9999px; padding:0.1rem 0.5rem; white-space:nowrap; }
.q-empty{ padding:1rem 0; text-align:center; font-size:0.8rem; color:#94A3B8; }

/* Tabel ringan */
.q-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.q-table th{ text-align:left; font-size:0.72rem; font-weight:600; color:#64748B; padding:0.6rem 0.75rem; background:#F8FAFA; border-bottom:1px solid #E6ECEB; }
.q-table td{ padding:0.7rem 0.75rem; border-bottom:1px solid #F1F5F5; color:#334155; }
.q-table tr:last-child td{ border-bottom:0; }
.q-table td.q-strong{ font-weight:600; color:#0F172A; }
.q-badge{ display:inline-block; font-size:0.7rem; font-weight:600; padding:0.15rem 0.55rem; border-radius:9999px; color:#0F766E; background:#E6F7F4; white-space:nowrap; }

/* ==========================================================
   MODE GELAP -- hitam, konsisten dengan kartu bawaan Filament
   ========================================================== */
html.dark body.fi-body,
html.dark .fi-main-ctn{
    background:rgb(var(--gray-950)) !important;
}
html.dark .fi-sidebar{
    background:rgb(var(--gray-950)) !important;
    border-right:1px solid rgba(255,255,255,0.06) !important;
}
html.dark .fi-topbar > nav,
html.dark .fi-topbar{
    background:rgb(var(--gray-950)) !important;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
html.dark .fi-sidebar-group-label{ color:rgba(255,255,255,0.55) !important; }
html.dark .fi-sidebar-item-grouped-border > div{ background:rgba(255,255,255,0.18) !important; }
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button{
    background:rgba(20,184,166,0.14) !important;
    box-shadow:none;
}
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon{ color:#2DD4BF !important; }
html.dark .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border > div{ background:#2DD4BF !important; }
html.dark .fi-ta-header-cell{ background:rgba(255,255,255,0.03) !important; }
/* Kartu (dark) */
html.dark .fi-wi-stats-overview-stat,
html.dark .q-stat{
    border-color:rgba(255,255,255,0.08) !important;
    background:rgb(var(--gray-900)) !important;
    box-shadow:none !important;
}
html.dark .fi-wi-stats-overview-stat:hover,
html.dark .q-stat:hover{ border-color:rgba(255,255,255,0.16) !important; }
html.dark .fi-wi-stats-overview-stat-label,
html.dark .q-stat-label{ color:rgb(var(--gray-400)) !important; }
html.dark .fi-wi-stats-overview-stat-value,
html.dark .q-stat-value{ color:#FFFFFF !important; }
html.dark .q-stat-hint{ color:color-mix(in srgb, var(--q-c) 55%, #FFFFFF); background:color-mix(in srgb, var(--q-c) 18%, transparent); }
html.dark .q-stat-icon{ color:color-mix(in srgb, var(--q-c) 60%, #FFFFFF); }
html.dark .q-stat-flag{ background:rgba(239,68,68,0.18); color:#FCA5A5; }
/* Varian solid tetap gradient, hanya sedikit diredupkan */
html.dark .q-stat.q-stat--solid{
    background:linear-gradient(135deg, color-mix(in srgb, var(--q-g1) 80%, #000), color-mix(in srgb, var(--q-g2) 70%, #000)) !important;
}
html.dark .q-stat--solid .q-stat-label{ color:rgba(255,255,255,0.85) !important; }
html.dark .q-stat--solid .q-stat-icon{ color:#FFFFFF; }
html.dark .q-stat--solid .q-stat-hint{ color:#FFFFFF; background:rgba(255,255,255,0.15); }

/* PSB (dark) */
html.dark .q-psb-sub,
html.dark .q-legend,
html.dark .q-table th{ color:rgb(var(--gray-400)); }
html.dark .q-bar-label,
html.dark .q-table td{ color:rgb(var(--gray-300)); }
html.dark .q-bar-val,
html.dark .q-lembaga-name,
html.dark .q-lembaga-total,
html.dark .q-mini-title,
html.dark .q-table td.q-strong,
html.dark .q-mini-item .q-v{ color:#FFFFFF; }
html.dark .q-bar-track,
html.dark .q-split,
html.dark .q-stack{ background:rgba(255,255,255,0.08); }
html.dark .q-lembaga,
html.dark .q-mini-item,
html.dark .q-table td{ border-color:rgba(255,255,255,0.07); }
html.dark .q-mini{ background:rgba(255,255,255,0.02); border-color:rgba(255,255,255,0.08); }
html.dark .q-mini-title .q-dot,
html.dark .q-mini-item .q-n,
html.dark .q-badge{ color:#5EEAD4; background:rgba(20,184,166,0.15); }
html.dark .q-table th{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.08); }

html.dark .fi-sidebar-item-icon,
html.dark .fi-sidebar-group-icon,
html.dark .fi-sidebar-group-dropdown-trigger-btn svg,
html.dark .fi-sidebar-nav .fi-dropdown-trigger svg{ color:rgba(255,255,255,0.85) !important; }
html.dark .fi-wi-stats-overview-stat-label{ color:rgb(var(--gray-400)) !important; }
html.dark .fi-dashboard-page .fi-header{
    background:linear-gradient(120deg,#0B4F4A 0%,#0F766E 100%);
    box-shadow:none;
}

/* ==========================================================
   LOGIN -- mengikuti desain Member Area Qinara
   ========================================================== */
.fi-simple-layout{
    position:relative;
    overflow:hidden;
    background-color:#EAFBF7 !important;
    background-image:radial-gradient(rgba(15,118,110,0.10) 1px, transparent 1px);
    background-size:22px 22px;
}
.fi-simple-layout::before,
.fi-simple-layout::after{
    content:"";
    position:absolute;
    width:34rem; height:34rem;
    border-radius:9999px;
    pointer-events:none;
    z-index:0;
    background:radial-gradient(circle,rgba(20,184,166,0.30) 0%,rgba(20,184,166,0.12) 40%,transparent 70%);
}
.fi-simple-layout::before{ top:-16rem; left:-14rem; }
.fi-simple-layout::after{ bottom:-16rem; right:-14rem; }
.fi-simple-main-ctn{ position:relative; z-index:1; }

.fi-simple-main{
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    max-width:23rem !important;
    --tw-ring-shadow:0 0 #0000 !important;
}
.fi-simple-header{ display:none !important; }
.fi-simple-page section{ row-gap:0 !important; }

.q-login-brand{ text-align:center; margin-bottom:1.5rem; }
.q-login-brand img{ height:4rem; width:auto; margin:0 auto 1rem; object-fit:contain; }
.q-login-brand .q-login-name{ font-size:1.125rem; font-weight:800; color:#0F766E; margin-bottom:0.5rem; }
.q-login-brand p{ font-size:0.9rem; line-height:1.55; color:#475569; max-width:22rem; margin:0 auto; }

.q-login-card-head{
    background:#FFFFFF;
    border:1px solid #E3F1EE;
    border-bottom:0;
    border-radius:1rem 1rem 0 0;
    padding:1.5rem 1.5rem 1.25rem;
}
.q-login-card-head{ text-align:center; }
.q-login-badge{
    display:inline-flex; align-items:center; gap:0.45rem;
    margin-bottom:0;
    padding:0.3rem 0.85rem;
    border-radius:9999px;
    border:1px solid #BFEDE3;
    background:rgba(255,255,255,0.7);
    font-size:0.78rem; font-weight:600; color:#047857;
}
.q-login-badge::before{
    content:""; width:0.45rem; height:0.45rem; border-radius:9999px; background:#10B981;
}
.q-login-card-head h1{ font-size:1.125rem; font-weight:800; color:#111827; letter-spacing:-0.01em; }
.q-login-card-head p{ margin-top:0.25rem; font-size:0.78rem; color:#6B7280; }

.fi-simple-page form.fi-form{
    background:#FFFFFF;
    border:1px solid #E3F1EE;
    border-top:0;
    border-radius:0 0 1rem 1rem;
    padding:0 1.5rem 1.5rem;
    row-gap:1.1rem !important;
    box-shadow:0 18px 36px -18px rgba(15,118,110,0.30);
}
.fi-simple-page .fi-fo-field-wrp-label span{
    font-size:0.8rem !important;
    font-weight:500 !important;
    color:#374151 !important;
}
.fi-simple-page .fi-input-wrp{
    border-radius:0.6rem !important;
    background:#F9FAFB !important;
    box-shadow:0 0 0 1px #E5E7EB !important;
}
.fi-simple-page .fi-input-wrp:focus-within{
    box-shadow:0 0 0 2px rgb(var(--primary-500)) !important;
    background:#FFFFFF !important;
}
.fi-simple-page .fi-form-actions .fi-btn{
    border-radius:0.6rem !important;
    padding-top:0.7rem !important;
    padding-bottom:0.7rem !important;
    font-weight:700 !important;
    box-shadow:0 8px 18px -6px rgba(15,118,110,0.55) !important;
}
.q-login-footer{ margin-top:1.75rem; text-align:center; }
.q-login-footer .q-line{
    max-width:16rem; height:1px; margin:0 auto 1rem;
    background:linear-gradient(90deg,transparent,#CBD5E1,transparent);
}
.q-login-footer .q-powered{ font-size:0.85rem; color:#64748B; }
.q-login-footer .q-powered a{ font-weight:600; color:#00A39D; text-decoration:none; }
.q-login-footer .q-powered a:hover{ color:#00857F; }
.q-login-footer .q-copy{ margin-top:0.25rem; font-size:0.75rem; color:#94A3B8; }

html.dark .fi-simple-layout{
    background-color:rgb(var(--gray-950)) !important;
    background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
}
html.dark .fi-simple-layout::before,
html.dark .fi-simple-layout::after{
    background:radial-gradient(circle,rgba(20,184,166,0.16),transparent 65%);
}
html.dark .q-login-brand p{ color:rgb(var(--gray-400)); }
html.dark .q-login-brand .q-login-name{ color:#2DD4BF; }
html.dark .q-login-card-head,
html.dark .fi-simple-page form.fi-form{
    background:rgb(var(--gray-900));
    border-color:rgba(255,255,255,0.08);
}
html.dark .q-login-card-head h1{ color:#FFFFFF; }
html.dark .q-login-card-head p{ color:rgb(var(--gray-400)); }
html.dark .fi-simple-page form.fi-form{ box-shadow:none; }
html.dark .fi-simple-page .fi-fo-field-wrp-label span{ color:rgb(var(--gray-300)) !important; }
html.dark .fi-simple-page .fi-input-wrp{
    background:rgba(255,255,255,0.04) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,0.10) !important;
}
html.dark .q-login-footer .q-line{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent); }
html.dark .q-login-footer .q-powered{ color:rgb(var(--gray-400)); }
html.dark .q-login-footer .q-copy{ color:rgb(var(--gray-500)); }
html.dark .q-login-badge{ background:rgba(255,255,255,0.04); border-color:rgba(20,184,166,0.3); color:#5EEAD4; }

/* ==========================================================
   VARIAN WARNA KARTU
   SOFT  : latar gradient lembut sesuai warna kartu (dashboard)
   SOLID : gradient penuh (laporan)
   Berlaku untuk <x-qinara.stat-card> dan kartu Filament yang diberi
   ->extraAttributes(QinaraTheme::statAttrs(...)).
   ========================================================== */
.q-stat:not(.q-stat--solid),
.fi-wi-stats-overview-stat.q-fi--soft{
    border-color:color-mix(in srgb, var(--q-c) 22%, #FFFFFF) !important;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--q-c) 14%, #FFFFFF) 0%,
        color-mix(in srgb, var(--q-c) 5%, #FFFFFF) 65%,
        #FFFFFF 100%) !important;
}
.q-stat:not(.q-stat--solid):hover,
.fi-wi-stats-overview-stat.q-fi--soft:hover{
    border-color:color-mix(in srgb, var(--q-c) 40%, #FFFFFF) !important;
    box-shadow:0 14px 28px -18px var(--q-c) !important;
}
/* Ornamen lingkaran lembut di kanan atas */
.q-stat:not(.q-stat--solid)::after,
.fi-wi-stats-overview-stat.q-fi--soft::after,
.fi-wi-stats-overview-stat.q-fi--solid::after{
    content:"";
    position:absolute;
    top:-3rem; right:-3rem;
    width:9rem; height:9rem;
    border-radius:9999px;
    background:color-mix(in srgb, var(--q-c) 10%, transparent);
    pointer-events:none;
    z-index:0;
}
.fi-wi-stats-overview-stat.q-fi--solid::after{ background:rgba(255,255,255,0.08); }
.q-stat:not(.q-stat--solid) .q-stat-head,
.q-stat:not(.q-stat--solid) .q-stat-value,
.q-stat:not(.q-stat--solid) .q-stat-hint,
.q-fi .fi-wi-stats-overview-stat-label,
.q-fi .fi-wi-stats-overview-stat-value,
.q-fi .fi-wi-stats-overview-stat-description,
.q-fi .fi-wi-stats-overview-stat-description-icon{
    position:relative;
    z-index:1;
}
.q-fi .fi-wi-stats-overview-stat-description-icon{ position:absolute; }
.q-stat:not(.q-stat--solid) .q-stat-label,
.q-fi--soft .fi-wi-stats-overview-stat-label{
    color:color-mix(in srgb, var(--q-c) 55%, #334155) !important;
}
.q-stat:not(.q-stat--solid) .q-stat-icon,
.q-fi--soft .fi-wi-stats-overview-stat-description-icon{
    background:rgba(255,255,255,0.75) !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--q-c) 22%, transparent), 0 4px 10px -6px var(--q-c) !important;
}
/* Watermark ikon versi lembut */
.q-stat:not(.q-stat--solid) .q-stat-watermark{
    display:block;
    position:absolute;
    right:-0.75rem; bottom:-1.25rem;
    width:6.5rem; height:6.5rem;
    color:color-mix(in srgb, var(--q-c) 12%, transparent);
    pointer-events:none;
}
.q-stat:not(.q-stat--solid) .q-stat-watermark svg{ width:100%; height:100%; }

/* SOLID untuk kartu Filament (mis. Dashboard Kantin) */
.fi-wi-stats-overview-stat.q-fi--solid{
    border:0 !important;
    background:linear-gradient(135deg, var(--q-g1), var(--q-g2)) !important;
    box-shadow:0 14px 28px -16px var(--q-g1) !important;
}
.q-fi--solid .fi-wi-stats-overview-stat-label{ color:rgba(255,255,255,0.85) !important; }
.q-fi--solid .fi-wi-stats-overview-stat-value{ color:#FFFFFF !important; }
.q-fi--solid .fi-wi-stats-overview-stat-description{
    color:#FFFFFF !important;
    background:rgba(255,255,255,0.18) !important;
}
.q-fi--solid .fi-wi-stats-overview-stat-description-icon{
    color:#FFFFFF !important;
    background:rgba(255,255,255,0.18) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}
/* grafik mini di kartu solid dibuat putih transparan */
.q-fi--solid .fi-wi-stats-overview-stat-chart{ filter:brightness(0) invert(1); opacity:0.45; }

/* ---------- Dark mode varian ---------- */
html.dark .q-stat:not(.q-stat--solid),
html.dark .fi-wi-stats-overview-stat.q-fi--soft{
    border-color:color-mix(in srgb, var(--q-c) 28%, transparent) !important;
    background:linear-gradient(135deg,
        color-mix(in srgb, var(--q-c) 20%, rgb(var(--gray-900))) 0%,
        rgb(var(--gray-900)) 75%) !important;
}
html.dark .q-stat:not(.q-stat--solid) .q-stat-label,
html.dark .q-fi--soft .fi-wi-stats-overview-stat-label{
    color:color-mix(in srgb, var(--q-c) 35%, #E5E7EB) !important;
}
html.dark .q-stat:not(.q-stat--solid) .q-stat-icon,
html.dark .q-fi--soft .fi-wi-stats-overview-stat-description-icon{
    background:rgba(255,255,255,0.06) !important;
}
html.dark .q-stat:not(.q-stat--solid) .q-stat-watermark{ color:color-mix(in srgb, var(--q-c) 16%, transparent); }
html.dark .fi-wi-stats-overview-stat.q-fi--solid{
    background:linear-gradient(135deg, color-mix(in srgb, var(--q-g1) 80%, #000), color-mix(in srgb, var(--q-g2) 70%, #000)) !important;
    box-shadow:none !important;
}
html.dark .q-fi--solid .fi-wi-stats-overview-stat-label{ color:rgba(255,255,255,0.85) !important; }


/* ==========================================================
   DASHBOARD TENANT (redesign) -- panel & aksi cepat
   ========================================================== */

/* Tombol aksi cepat di dalam banner sapaan */
.fi-dashboard-page .fi-header{ align-items:center; }
.fi-dashboard-page .fi-header .fi-ac{ position:relative; z-index:1; }
.q-hero-btn{
    background:rgba(255,255,255,0.14) !important;
    color:#FFFFFF !important;
    border-radius:0.7rem !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28) !important;
}
.q-hero-btn:hover{ background:rgba(255,255,255,0.24) !important; }
.q-hero-btn .fi-btn-label, .q-hero-btn svg{ color:inherit !important; }
.q-hero-btn.is-primary{
    background:#FFFFFF !important;
    color:#0F766E !important;
    box-shadow:0 6px 16px -8px rgba(0,0,0,0.35) !important;
}
.q-hero-btn.is-primary:hover{ background:#F0FDFA !important; }

/* Panel umum */
.q-panel{ height:100%; }
.q-panel-meta{ font-size:0.75rem; font-weight:600; color:#64748B; }
.q-panel-link{ font-size:0.78rem; font-weight:600; color:#0F766E; text-decoration:none; }
.q-panel-link:hover{ text-decoration:underline; }

/* Perlu Tindakan */
.q-todo-list{ display:flex; flex-direction:column; gap:0.5rem; }
.q-todo{
    display:flex; align-items:center; gap:0.75rem;
    padding:0.7rem 0.75rem;
    border-radius:0.85rem;
    border:1px solid color-mix(in srgb, var(--q-c) 18%, #E6ECEB);
    background:color-mix(in srgb, var(--q-c) 6%, #FFFFFF);
    text-decoration:none;
    transition:transform .15s ease, border-color .15s ease;
}
.q-todo:hover{ transform:translateX(2px); border-color:color-mix(in srgb, var(--q-c) 45%, #FFFFFF); }
.q-todo-icon{
    flex-shrink:0; width:2.25rem; height:2.25rem; border-radius:0.7rem;
    display:flex; align-items:center; justify-content:center;
    color:var(--q-c); background:color-mix(in srgb, var(--q-c) 14%, #FFFFFF);
}
.q-todo-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.q-todo-label{ font-size:0.84rem; font-weight:600; color:#0F172A; }
.q-todo-hint{ font-size:0.72rem; color:#64748B; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-todo-count{
    font-size:0.85rem; font-weight:800; color:#FFFFFF;
    min-width:1.9rem; text-align:center;
    padding:0.15rem 0.5rem; border-radius:9999px;
    background:var(--q-c);
}
.q-todo-chevron{ color:#94A3B8; }
.q-todo.is-done{ background:#FFFFFF; border-color:#E6ECEB; opacity:0.7; }
.q-todo.is-done .q-todo-count{ background:#E2E8F0; color:#64748B; }
.q-allclear{ text-align:center; padding:0.5rem 0 1rem; }
.q-allclear-icon{
    width:3rem; height:3rem; margin:0 auto 0.5rem; border-radius:9999px;
    display:flex; align-items:center; justify-content:center;
    color:#16A34A; background:#DCFCE7;
}
.q-allclear-title{ font-weight:700; color:#0F172A; }
.q-allclear-sub{ font-size:0.78rem; color:#64748B; }

/* Ringkasan keuangan */
.q-saldo{
    padding:1rem 1.1rem; border-radius:0.9rem; margin-bottom:1rem;
    color:#FFFFFF;
    background:linear-gradient(135deg,#0F766E,#14B8A6);
    box-shadow:0 10px 22px -14px #0F766E;
}
.q-saldo-label{ font-size:0.75rem; opacity:0.85; }
.q-saldo-value{ font-size:1.5rem; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.q-kv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.q-kv{ padding:0.65rem 0.75rem; border-radius:0.75rem; border:1px solid #E6ECEB; }
.q-kv-k{ font-size:0.7rem; color:#64748B; }
.q-kv-v{ font-size:0.92rem; font-weight:700; font-variant-numeric:tabular-nums; }
.q-kv-v.is-up{ color:#15803D; }
.q-kv-v.is-down{ color:#B91C1C; }
.q-progress-box{ margin-top:1rem; }
.q-progress-top{ display:flex; justify-content:space-between; font-size:0.78rem; color:#334155; margin-bottom:0.4rem; }
.q-progress-top strong{ color:#0F172A; }
.q-progress-sub{ margin-top:0.4rem; font-size:0.72rem; color:#64748B; }

/* Pengumuman */
.q-news{ padding:0.7rem 0; border-bottom:1px solid #EEF2F2; }
.q-news:first-child{ padding-top:0; }
.q-news:last-child{ border-bottom:0; padding-bottom:0; }
.q-news-top{ display:flex; align-items:center; gap:0.5rem; justify-content:space-between; }
.q-news-title{ font-size:0.86rem; font-weight:600; color:#0F172A; }
.q-news-body{ margin-top:0.2rem; font-size:0.78rem; color:#64748B; line-height:1.45; }
.q-news-date{ margin-top:0.25rem; font-size:0.7rem; color:#94A3B8; }

/* Dark mode */
html.dark .q-panel-meta, html.dark .q-todo-hint, html.dark .q-allclear-sub,
html.dark .q-kv-k, html.dark .q-progress-sub, html.dark .q-news-body{ color:rgb(var(--gray-400)); }
html.dark .q-todo-label, html.dark .q-allclear-title, html.dark .q-progress-top strong,
html.dark .q-news-title{ color:#FFFFFF; }
html.dark .q-progress-top{ color:rgb(var(--gray-300)); }
html.dark .q-panel-link{ color:#5EEAD4; }
html.dark .q-todo{
    border-color:color-mix(in srgb, var(--q-c) 30%, transparent);
    background:color-mix(in srgb, var(--q-c) 10%, transparent);
}
html.dark .q-todo-icon{ background:color-mix(in srgb, var(--q-c) 20%, transparent); color:color-mix(in srgb, var(--q-c) 60%, #FFFFFF); }
html.dark .q-todo.is-done{ background:transparent; border-color:rgba(255,255,255,0.08); }
html.dark .q-todo.is-done .q-todo-count{ background:rgba(255,255,255,0.08); color:rgb(var(--gray-400)); }
html.dark .q-allclear-icon{ background:rgba(34,197,94,0.15); color:#4ADE80; }
html.dark .q-saldo{ background:linear-gradient(135deg,#0B4F4A,#0F766E); box-shadow:none; }
html.dark .q-kv{ border-color:rgba(255,255,255,0.08); }
html.dark .q-kv-v.is-up{ color:#4ADE80; }
html.dark .q-kv-v.is-down{ color:#F87171; }
html.dark .q-news{ border-color:rgba(255,255,255,0.07); }
html.dark .q-news-date{ color:rgb(var(--gray-500)); }


/* ==========================================================
   LAPISAN (z-index) -- sidebar & popup submenu harus SELALU di
   atas konten halaman.
   Masalah sebelumnya: isi kartu diberi z-index:1 (agar di atas
   ornamen lingkaran), sedangkan sidebar Filament di desktop ber
   z-index 0, sehingga popup submenu (saat sidebar diciutkan)
   tertimpa teks kartu.
   Perbaikan: (1) sidebar dinaikkan ke z-index 30 (sama dengan
   nilainya di mobile), (2) tiap kartu dijadikan "isolation" supaya
   z-index isinya terkurung di dalam kartu dan tidak pernah bisa
   menembus elemen lain di luarnya.
   ========================================================== */
.fi-sidebar{ z-index:30 !important; }
.fi-sidebar .fi-dropdown-panel,
.fi-sidebar .fi-sidebar-group-dropdown-panel{ z-index:60 !important; }

.fi-wi-stats-overview-stat,
.q-stat,
.q-todo,
.q-saldo,
.q-panel{
    isolation:isolate;
}