/*
 * Tema panel admin: nuansa biru langit.
 * CSS biasa (tanpa build Tailwind) yang menimpa kelas hook `fi-*` bawaan Filament v3.
 */

:root {
    --pdam-sky-50: #f0f9ff;
    --pdam-sky-100: #e0f2fe;
    --pdam-sky-200: #bae6fd;
    --pdam-sky-300: #7dd3fc;
    --pdam-sky-400: #38bdf8;
    --pdam-sky-500: #0ea5e9;
    --pdam-sky-600: #0284c7;
    --pdam-sky-700: #0369a1;
    --pdam-sky-800: #075985;
    --pdam-sky-900: #0c4a6e;
    --pdam-sidebar-bg: linear-gradient(180deg, #0ea5e9 0%, #0284c7 45%, #075985 100%);
    --pdam-body-bg:
        radial-gradient(1200px 500px at 100% -10%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(900px 400px at -10% 110%, rgba(14, 165, 233, 0.12), transparent 60%),
        #f3f9fe;
    --pdam-card-ring: rgba(14, 165, 233, 0.14);
    --pdam-card-shadow: 0 1px 2px rgba(12, 74, 110, 0.04), 0 8px 24px -12px rgba(2, 132, 199, 0.25);
}

.dark {
    --pdam-sidebar-bg: linear-gradient(180deg, #0c4a6e 0%, #082f49 60%, #04192a 100%);
    --pdam-body-bg:
        radial-gradient(1200px 500px at 100% -10%, rgba(14, 165, 233, 0.16), transparent 60%),
        #07131f;
    --pdam-card-ring: rgba(56, 189, 248, 0.14);
    --pdam-card-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- Latar halaman ---------- */
.fi-body {
    background: var(--pdam-body-bg) fixed !important;
}

/* ---------- Sidebar ---------- */
.fi-sidebar {
    background: var(--pdam-sidebar-bg) !important;
    box-shadow: 4px 0 24px -12px rgba(3, 105, 161, 0.55);
}

.fi-sidebar-header {
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 6px 18px -10px rgba(3, 105, 161, 0.6) !important;
    border-bottom: 3px solid var(--pdam-sky-300);
}

.dark .fi-sidebar-header {
    background: #0b2536 !important;
    border-bottom-color: var(--pdam-sky-700);
}

.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.fi-sidebar-group-label,
.fi-sidebar-group-icon,
.fi-sidebar-group-collapse-button,
.fi-sidebar-group-collapse-button svg {
    color: rgba(224, 242, 254, 0.75) !important;
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
}

.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.92) !important;
}

.fi-sidebar-item-icon {
    color: rgba(224, 242, 254, 0.8) !important;
}

.fi-sidebar-item-grouped-border div {
    background-color: rgba(224, 242, 254, 0.45) !important;
}

.fi-sidebar-item-button,
.fi-sidebar-group-button > button,
.fi-sidebar-group > div > button {
    border-radius: 0.75rem !important;
    transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.14) !important;
    transform: translateX(2px);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: #ffffff !important;
    box-shadow: 0 6px 16px -8px rgba(8, 47, 73, 0.6);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--pdam-sky-700) !important;
    font-weight: 700 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border div {
    background-color: var(--pdam-sky-600) !important;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background: rgba(56, 189, 248, 0.2) !important;
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* ---------- Topbar ---------- */
.fi-topbar > nav {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 1px 0 var(--pdam-card-ring), 0 6px 20px -16px rgba(2, 132, 199, 0.6) !important;
}

.dark .fi-topbar > nav {
    background: rgba(7, 19, 31, 0.82) !important;
}

/* ---------- Judul halaman ---------- */
.fi-header-heading {
    background: linear-gradient(90deg, var(--pdam-sky-800), var(--pdam-sky-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.dark .fi-header-heading {
    background-image: linear-gradient(90deg, #e0f2fe, var(--pdam-sky-400));
}

/* ---------- Kartu: section, tabel, widget ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-tabs {
    border-radius: 1rem !important;
    box-shadow: var(--pdam-card-shadow) !important;
    --tw-ring-color: var(--pdam-card-ring) !important;
}

.fi-section-header,
.fi-ta-header-ctn {
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.9), rgba(240, 249, 255, 0));
}

.dark .fi-section-header,
.dark .fi-ta-header-ctn {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08), transparent);
}

.fi-section-header-heading,
.fi-ta-header-heading {
    color: var(--pdam-sky-900) !important;
    font-weight: 700 !important;
}

.dark .fi-section-header-heading,
.dark .fi-ta-header-heading {
    color: var(--pdam-sky-100) !important;
}

/* Kepala tabel bernuansa biru */
.fi-ta-table thead tr {
    background-color: var(--pdam-sky-50) !important;
}

.dark .fi-ta-table thead tr {
    background-color: rgba(14, 165, 233, 0.08) !important;
}

.fi-ta-header-cell-label {
    color: var(--pdam-sky-800) !important;
}

.dark .fi-ta-header-cell-label {
    color: var(--pdam-sky-200) !important;
}

.fi-ta-row:hover {
    background-color: rgba(224, 242, 254, 0.45) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(14, 165, 233, 0.07) !important;
}

/* ---------- Kartu statistik ---------- */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 55%, var(--pdam-sky-50)) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--pdam-sky-400), var(--pdam-sky-700));
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -14px rgba(2, 132, 199, 0.45) !important;
}

.dark .fi-wi-stats-overview-stat {
    background: linear-gradient(135deg, #0b1d2b 55%, rgba(14, 165, 233, 0.12)) !important;
}

.fi-wi-stats-overview-stat-value {
    color: var(--pdam-sky-800) !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #ffffff !important;
}

/* ---------- Banner sambutan dashboard ---------- */
.pdam-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: 1.25rem;
    color: #ffffff;
    background: linear-gradient(120deg, #38bdf8 0%, #0ea5e9 35%, #0284c7 70%, #075985 100%);
    box-shadow: 0 18px 40px -20px rgba(2, 132, 199, 0.8);
}

.pdam-banner-waves {
    position: absolute;
    inset: auto 0 0 0;
    height: 70%;
    opacity: 0.25;
    pointer-events: none;
    background:
        radial-gradient(60% 90% at 15% 120%, #ffffff 0, transparent 60%),
        radial-gradient(50% 80% at 70% 130%, #e0f2fe 0, transparent 60%);
}

.pdam-banner-body {
    position: relative;
}

.pdam-banner-date {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.pdam-banner-title {
    margin-top: 0.35rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
}

.pdam-banner-text {
    margin-top: 0.4rem;
    opacity: 0.9;
}

.pdam-banner-icon {
    position: relative;
    flex-shrink: 0;
    width: 5.5rem;
    height: 5.5rem;
    padding: 1rem;
    border-radius: 1.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
    .pdam-banner {
        padding: 1.25rem;
    }

    .pdam-banner-title {
        font-size: 1.25rem;
    }

    .pdam-banner-icon {
        display: none;
    }
}

/* ---------- Tombol utama ---------- */
.fi-btn-color-primary:not(.fi-btn-outlined) {
    background-image: linear-gradient(135deg, var(--pdam-sky-500), var(--pdam-sky-700)) !important;
    box-shadow: 0 6px 16px -8px rgba(2, 132, 199, 0.8) !important;
}

/* ---------- Halaman login ---------- */
.fi-simple-layout {
    background:
        radial-gradient(800px 400px at 0% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
        linear-gradient(135deg, #7dd3fc 0%, #0ea5e9 45%, #0369a1 100%) !important;
}

.dark .fi-simple-layout {
    background: linear-gradient(135deg, #0c4a6e 0%, #082f49 60%, #04192a 100%) !important;
}

.fi-simple-main {
    border-radius: 1.5rem !important;
    box-shadow: 0 30px 60px -25px rgba(8, 47, 73, 0.65) !important;
}