:root {
    --kasi-blue: #0ea5e9;
    --kasi-purple: #6d28d9;
    --kasi-green: #22c55e;
    --kasi-orange: #f97316;
    --kasi-pink: #d946ef;
}

.fi-body {
    background:
        radial-gradient(circle at top left, rgba(14,165,233,.16), transparent 28rem),
        radial-gradient(circle at top right, rgba(217,70,239,.16), transparent 28rem),
        linear-gradient(135deg, #f8fbff 0%, #eef4ff 42%, #fff7ed 100%) !important;
    color: #111827 !important;
}

/* Supaya dark mode tetap terbaca */
.dark .fi-body {
    background:
        radial-gradient(circle at top left, rgba(14,165,233,.12), transparent 28rem),
        radial-gradient(circle at top right, rgba(217,70,239,.12), transparent 28rem),
        linear-gradient(135deg, #020617 0%, #111827 48%, #1e1b4b 100%) !important;
    color: #f9fafb !important;
}

.fi-main,
.fi-main h1,
.fi-main h2,
.fi-main h3,
.fi-main p,
.fi-main span,
.fi-main label,
.fi-section,
.fi-section *,
.fi-wi-widget,
.fi-wi-widget *,
.fi-wi-stats-overview-stat,
.fi-wi-stats-overview-stat *,
.fi-ta,
.fi-ta *,
.fi-ta-ctn,
.fi-ta-ctn *,
.fi-in,
.fi-in *,
.fi-fo-field-wrp,
.fi-fo-field-wrp *,
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-helper-text {
    color: #111827 !important;
}

.dark .fi-main,
.dark .fi-main h1,
.dark .fi-main h2,
.dark .fi-main h3,
.dark .fi-main p,
.dark .fi-main span,
.dark .fi-main label,
.dark .fi-section,
.dark .fi-section *,
.dark .fi-wi-widget,
.dark .fi-wi-widget *,
.dark .fi-wi-stats-overview-stat,
.dark .fi-wi-stats-overview-stat *,
.dark .fi-ta,
.dark .fi-ta *,
.dark .fi-ta-ctn,
.dark .fi-ta-ctn *,
.dark .fi-in,
.dark .fi-in *,
.dark .fi-fo-field-wrp,
.dark .fi-fo-field-wrp *,
.dark .fi-fo-field-wrp-label,
.dark .fi-fo-field-wrp-helper-text {
    color: #f9fafb !important;
}

.fi-sidebar {
    background: linear-gradient(180deg, #2563eb 0%, #6d28d9 58%, #7c3aed 100%) !important;
    color: #fff !important;
    box-shadow: 0 22px 50px rgba(49,46,129,.24);
}

.fi-sidebar .fi-sidebar-header {
    background: rgba(255,255,255,.96) !important;
    border-radius: 0 0 20px 20px;
    margin-bottom: .75rem;
}

.fi-sidebar .fi-sidebar-nav-groups,
.fi-sidebar .fi-sidebar-group,
.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-icon {
    color: #fff !important;
}

.fi-sidebar .fi-sidebar-item-active > a,
.fi-sidebar .fi-sidebar-item a:hover {
    background: rgba(255,255,255,.95) !important;
    color: #4f46e5 !important;
    border-radius: 14px !important;
}

.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item a:hover .fi-sidebar-item-icon {
    color: #4f46e5 !important;
}

.fi-topbar {
    background: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(148,163,184,.25);
}

.dark .fi-topbar {
    background: rgba(15,23,42,.75) !important;
}

.fi-section,
.fi-wi-widget,
.fi-ta-ctn,
.fi-fo-tabs,
.fi-modal-window {
    border: 1px solid rgba(148,163,184,.22) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(15,23,42,.08) !important;
    overflow: hidden;
}

.fi-wi-stats-overview-stat {
    border-radius: 20px !important;
    box-shadow: 0 14px 30px rgba(15,23,42,.08) !important;
}

.fi-wi-stats-overview-stat:nth-child(1) { background: linear-gradient(135deg, #eff6ff, #ffffff) !important; }
.fi-wi-stats-overview-stat:nth-child(2) { background: linear-gradient(135deg, #f0fdf4, #ffffff) !important; }
.fi-wi-stats-overview-stat:nth-child(3) { background: linear-gradient(135deg, #fff7ed, #ffffff) !important; }
.fi-wi-stats-overview-stat:nth-child(4) { background: linear-gradient(135deg, #faf5ff, #ffffff) !important; }

.dark .fi-wi-stats-overview-stat,
.dark .fi-section,
.dark .fi-wi-widget,
.dark .fi-ta-ctn {
    background: #111827 !important;
    border-color: rgba(255,255,255,.12) !important;
}

.fi-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
}

.fi-btn-color-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
}

.fi-input-wrp,
.fi-select-input,
.fi-fo-field-wrp {
    border-radius: 14px !important;
}

.fi-logo img {
    max-height: 3.25rem !important;
}

.kasi-login-card {
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,249,255,.92));
}

.dark .kasi-login-card {
    background: #111827;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
    .fi-main {
        padding-inline: .75rem !important;
    }

    .fi-section,
    .fi-wi-widget,
    .fi-ta-ctn {
        border-radius: 16px !important;
    }
}

/* =========================
   LIGHT MODE FIX
========================= */

html:not(.dark) .fi-section,
html:not(.dark) .fi-wi-widget,
html:not(.dark) .fi-ta-ctn,
html:not(.dark) .fi-modal-window {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #111827 !important;
}

html:not(.dark) .fi-ta-header,
html:not(.dark) thead,
html:not(.dark) thead tr,
html:not(.dark) thead th {
    background: #f8fafc !important;
    color: #111827 !important;
}

html:not(.dark) tbody tr {
    background: #ffffff !important;
    color: #111827 !important;
}

html:not(.dark) tbody tr:hover {
    background: #f1f5f9 !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .fi-input-wrp,
html:not(.dark) .fi-select-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
}

/* =========================
   DARK MODE ONLY
========================= */

.dark .fi-section,
.dark .fi-wi-widget,
.dark .fi-modal-window {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    border-radius: 20px !important;
}

.dark .fi-ta-ctn {
    background: #111827 !important;
    border: 1px solid #334155 !important;
    border-radius: 20px !important;
}

.dark .fi-ta-header,
.dark thead,
.dark thead tr,
.dark thead th {
    background: #1e1b4b !important;
    color: white !important;
    font-weight: 700 !important;
}

.dark tbody tr {
    background: #111827 !important;
    border-bottom: 1px solid #1e293b !important;
}

.dark tbody tr:hover {
    background: #1e293b !important;
}

.dark .fi-input-wrp,
.dark .fi-select-input,
.dark .fi-input,
.dark input,
.dark select,
.dark textarea {
    background: #1e1b4b !important;
    border: 1px solid #4c1d95 !important;
    color: white !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #cbd5e1 !important;
}

.dark .fi-fo-field-wrp-label {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

.dark .fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, #0f172a, #111827) !important;
    border: 1px solid #334155 !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.02),
        0 10px 25px rgba(0,0,0,.35) !important;
}

.dark .fi-section-header-heading,
.dark .fi-header-heading {
    color: #ffffff !important;
}

.dark .text-success-600,
.dark .text-success-500 {
    color: #22c55e !important;
}