/*
 * Tema CMS BPR di atas Filament (tanpa build CSS).
 * Palet biru mengikuti desain halaman login PT BPR Garut.
 */
:root {
    --cms-blue-950: #09275f; /* biru tua */
    --cms-blue-800: #075ba5; /* biru */
    --cms-blue-600: #0878c9; /* biru aksen (tombol, tautan) */
    --cms-blue-500: #168bd2; /* biru muda */
    --cms-blue-200: #9fd3ff; /* aksen di atas latar gelap */
    --cms-blue-50: #eaf4ff;
    --cms-ink: #123d75; /* teks judul */
}

/* ---------- Brand (topbar) ---------- */
.cms-brand { display: inline-flex; align-items: center; gap: 0.625rem; height: 100%; }
.cms-brand-logo { width: 2rem; height: 2rem; flex-shrink: 0; object-fit: contain; }
.cms-brand-text { display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; line-height: 1.2; }
.cms-brand-title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--cms-ink); }
.cms-brand-separator { font-size: 1rem; color: rgb(156 163 175); margin: 0 0.125rem; }
.cms-brand-institution { font-size: 1rem; font-weight: 700; color: var(--cms-blue-600); }
.dark .cms-brand-title { color: #fff; }
.dark .cms-brand-institution { color: var(--cms-blue-200); }

/* Layar kecil: cukup judul, ukuran lebih kecil. */
@media (max-width: 640px) {
    .cms-brand-separator, .cms-brand-institution { display: none; }
    .cms-brand-title { font-size: 0.9375rem; }
}

/* ---------- Topbar: garis aksen biru tua → biru muda ---------- */
.fi-topbar {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--cms-blue-950), var(--cms-blue-800) 58%, var(--cms-blue-500)) 1;
}

/* ---------- Latar konten (sama dengan latar halaman login) ---------- */
.fi-body:not(.dark *) {
    background:
        radial-gradient(circle at 10% 10%, #dceeff 0, transparent 35%),
        linear-gradient(135deg, #f4f8fd, #e8f1fb);
    background-attachment: fixed;
}

/* ---------- Sidebar biru (gradasi panel kiri halaman login) ---------- */
.fi-body .fi-sidebar {
    background: linear-gradient(180deg, var(--cms-blue-950) 0%, var(--cms-blue-800) 62%, #0a6cbc 100%);
}

.fi-sidebar .fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar .fi-sidebar-header { background: var(--cms-blue-950); box-shadow: none; }
.fi-sidebar .fi-sidebar-header .cms-brand-title { color: #fff; }
.fi-sidebar .fi-sidebar-header .cms-brand-institution { color: var(--cms-blue-200); }
.fi-sidebar .fi-sidebar-header-controls::after { border-color: rgb(255 255 255 / 0.12); }

.fi-sidebar .fi-sidebar-group-label {
    color: rgb(255 255 255 / 0.55);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fi-sidebar .fi-sidebar-group-btn .fi-icon,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn .fi-icon { color: rgb(255 255 255 / 0.5); }

.fi-sidebar .fi-sidebar-item-label { color: rgb(226 238 255); }
.fi-sidebar .fi-sidebar-item-btn > .fi-icon { color: rgb(159 200 240); }
.fi-sidebar .fi-sidebar-item-grouped-border-part { background-color: rgb(255 255 255 / 0.35); }
/* Garis penghubung submenu (mis. Wilayah → Kabupaten, Kecamatan, Desa). */
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar .fi-sidebar-item-grouped-border-part-not-last { background-color: rgb(255 255 255 / 0.2); }
/* Menu induk tanpa halaman (Wilayah) tidak bisa diklik; jangan beri efek hover. */
.fi-sidebar .fi-sidebar-item:not(.fi-sidebar-item-has-url) > .fi-sidebar-item-btn { cursor: default; }

.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.fi-sidebar .fi-sidebar-group-dropdown-trigger-btn:hover,
.cms-sidebar-logout .fi-sidebar-item-btn:hover { background-color: rgb(255 255 255 / 0.08); }

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgb(255 255 255 / 0.16);
    box-shadow: inset 3px 0 0 var(--cms-blue-200);
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: #fff; font-weight: 600; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: #fff; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-grouped-border-part { background-color: var(--cms-blue-200); }

/*
 * Tombol utama mengikuti tombol LOGIN: gradasi biru, teks & ikon putih (juga di modal).
 * Filament memilih warna teks otomatis lewat variabel --text; variabelnya yang diganti agar
 * tidak kalah oleh selector Filament yang lebih spesifik. Gradasi memakai background-image
 * karena Filament hanya mengatur background-color.
 */
.fi-btn.fi-color-primary:not(.fi-outlined) {
    --text: #fff;
    --dark-text: #fff;
    --hover-text: #fff;
    --dark-hover-text: #fff;
    background-image: linear-gradient(90deg, #0754a0, #1388dc);
    color: #fff;
}
.fi-btn.fi-color-primary:not(.fi-outlined):hover,
.fi-btn.fi-color-primary:not(.fi-outlined):focus-visible {
    background-image: linear-gradient(90deg, #064a8d, #0f78c4);
}
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon,
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-loading-indicator { color: #fff; }

.fi-sidebar .fi-sidebar-footer { border-color: rgb(255 255 255 / 0.12); }
.fi-sidebar .fi-icon-btn { color: rgb(255 255 255 / 0.7); }
.fi-sidebar .fi-icon-btn:hover { background-color: rgb(255 255 255 / 0.08); }

/* ---------- Halaman login (desain dua kolom PT BPR Garut) ---------- */
.fi-simple-layout:has(.cms-login-shell) {
    padding: 28px;
    justify-content: center;
    background:
        radial-gradient(circle at 10% 10%, #dceeff 0, transparent 35%),
        linear-gradient(135deg, #f4f8fd, #e8f1fb);
}
.dark .fi-simple-layout:has(.cms-login-shell) { background: linear-gradient(135deg, #0b1220, #101a33); }

/* Kartu bawaan Filament dikosongkan; kartu dua kolom digambar oleh .cms-login-shell. */
.fi-simple-main:has(> .cms-login-shell) {
    margin: 0;
    padding: 0;
    max-width: 1120px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.cms-login-shell {
    width: 100%;
    min-height: 650px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(14 48 94 / 0.17);
}
.dark .cms-login-shell { background: rgb(17 24 39); box-shadow: 0 24px 70px rgb(0 0 0 / 0.5); }

.cms-login-visual {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 42px 48px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(145deg, #09275f 0%, #075ba5 58%, #168bd2 100%);
}
.cms-login-visual::before,
.cms-login-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.13);
}
.cms-login-visual::before { width: 440px; height: 440px; right: -210px; top: -180px; }
.cms-login-visual::after { width: 330px; height: 330px; left: -210px; bottom: -180px; }

.cms-login-visual-brand { display: flex; align-items: center; gap: 15px; }
.cms-login-visual-brand img {
    display: block;
    width: 76px;
    height: 76px;
    object-fit: contain;
    background: #fff;
    border-radius: 14px;
    padding: 7px;
}
.cms-login-visual-brand-name { font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: 0.7px; }
.cms-login-visual-brand-sub { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 2px; font-weight: 500; opacity: 0.8; }

.cms-login-intro { margin-top: 28px; }
.cms-login-intro h1 { max-width: 470px; margin: 0 0 13px; font-size: clamp(27px, 3vw, 37px); line-height: 1.18; font-weight: 700; }
.cms-login-intro p { max-width: 440px; margin: 0; color: rgb(255 255 255 / 0.82); font-size: 14px; line-height: 1.8; }

.cms-login-illustration { width: 100%; max-width: 490px; align-self: center; margin: 10px 0; }
.cms-login-illustration img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 270px;
    object-fit: contain;
    filter: drop-shadow(0 15px 18px rgb(0 0 0 / 0.16));
}
.cms-login-visual-footer { font-size: 11px; color: rgb(255 255 255 / 0.7); }

.cms-login-form {
    padding: clamp(34px, 5vw, 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cms-login-heading { margin-bottom: 34px; }
.cms-login-heading h2 { margin: 0 0 9px; color: #123d75; font-size: 29px; font-weight: 700; line-height: 1.2; }
.cms-login-heading p { margin: 0; color: #71839b; font-size: 14px; line-height: 1.6; }
.dark .cms-login-heading h2 { color: #fff; }
.dark .cms-login-heading p { color: rgb(156 163 175); }

/* Komponen form Filament disesuaikan dengan desain. */
.cms-login-form .fi-fo-field-label-content { font-size: 13px; font-weight: 650; color: #344e6e; }
.dark .cms-login-form .fi-fo-field-label-content { color: rgb(209 213 219); }
.cms-login-form .fi-input-wrp { border-radius: 9px; min-height: 49px; }
.cms-login-form .fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgb(22 131 209 / 0.15); }
.cms-login-form .fi-input { min-height: 47px; font-size: 14px; }
.cms-login-form .fi-fo-field-wrp-helper-text { font-size: 12px; color: #71839b; }
.cms-login-form .fi-form-actions .fi-btn,
.cms-login-form .fi-ac .fi-btn {
    min-height: 50px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: #fff;
    background: linear-gradient(90deg, #0754a0, #1388dc);
    box-shadow: 0 8px 18px rgb(8 105 190 / 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cms-login-form .fi-form-actions .fi-btn:hover,
.cms-login-form .fi-ac .fi-btn:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgb(8 105 190 / 0.27); }

.cms-login-copyright { margin-top: 42px; text-align: center; color: #9aa9bb; font-size: 11px; line-height: 1.7; }

@media (max-width: 820px) {
    .fi-simple-layout:has(.cms-login-shell) { padding: 18px; }
    .fi-simple-main:has(> .cms-login-shell) { max-width: 620px; }
    .cms-login-shell { grid-template-columns: 1fr; min-height: auto; }
    .cms-login-visual { padding: 30px 34px 22px; }
    .cms-login-visual-brand img { width: 65px; height: 65px; }
    .cms-login-intro { margin-top: 23px; }
    .cms-login-intro h1 { font-size: 29px; }
    .cms-login-intro p { max-width: 520px; }
    .cms-login-illustration { max-width: 380px; }
    .cms-login-visual-footer { margin-top: 6px; }
    .cms-login-form { padding: 42px 46px 38px; }
    .cms-login-heading { margin-bottom: 27px; }
    .cms-login-copyright { margin-top: 30px; }
}

@media (max-width: 480px) {
    .fi-simple-layout:has(.cms-login-shell) { display: block; padding: 10px; }
    .cms-login-shell { border-radius: 17px; }
    .cms-login-visual { padding: 23px 22px 17px; }
    .cms-login-visual-brand { gap: 11px; }
    .cms-login-visual-brand img { width: 56px; height: 56px; border-radius: 11px; }
    .cms-login-visual-brand-name { font-size: 16px; }
    .cms-login-visual-brand-sub { font-size: 8px; letter-spacing: 1.4px; }
    .cms-login-intro h1 { font-size: 25px; }
    .cms-login-intro p { font-size: 12px; }
    .cms-login-illustration { max-width: 290px; margin: 4px auto; }
    .cms-login-illustration img { max-height: 175px; }
    .cms-login-visual-footer { font-size: 10px; }
    .cms-login-form { padding: 34px 23px 29px; }
    .cms-login-heading h2 { font-size: 25px; }
    .cms-login-copyright { margin-top: 27px; }
}