/* =============================================================================
   SIAGA — "Fresh" theme layer over Metronic 8 (Bootstrap 5)
   Re-themes the WHOLE backoffice to SIAGA corporate colours (navy / red / gold)
   with a modern, premium feel — without touching page markup or JS.
   Loaded AFTER style.bundle.css so it wins.
   ============================================================================= */

/* ---- Colour system: primary -> SIAGA navy (Metronic uses these vars app-wide) ---- */
:root,
[data-bs-theme="light"] {
    --bs-primary: #1f47a6;
    --bs-primary-active: #163a86;
    --bs-primary-light: #eef2fc;
    --bs-primary-light-rgb: 238, 242, 252;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 31, 71, 166;

    --bs-link-color: #1f47a6;
    --bs-link-color-rgb: 31, 71, 166;
    --bs-link-hover-color: #163a86;

    --bs-warning: #f0a91c;
    --bs-warning-active: #de911d;
    --bs-warning-light: #fff8e6;
    --bs-warning-rgb: 240, 169, 28;
    --bs-warning-inverse: #ffffff;

    --bs-danger: #db1c0c;
    --bs-danger-active: #b8160a;
    --bs-danger-light: #fff1f0;
    --bs-danger-rgb: 219, 28, 12;

    --bs-text-primary: #1f47a6;
}

/* ---- Typography: keep Inter for body, Manrope for headings ---- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.fw-bolder, .card-title, .page-title, .fs-2qx, .fs-3 {
    font-family: "Manrope", "Inter", Helvetica, sans-serif;
    letter-spacing: -.01em;
}

/* ---- App background: subtle fresh wash ---- */
body, .app-default, .app-blank { background-color: #f3f6fb; }
.app-default .app-wrapper { background:
    radial-gradient(48rem 34rem at 100% -6%, rgba(31,71,166,.05), transparent 60%),
    radial-gradient(40rem 28rem at -6% 8%, rgba(219,28,12,.035), transparent 58%); }

/* ---- Buttons: gradient primary, rounder, soft shadow ---- */
.btn { border-radius: .7rem; font-weight: 600; }
.btn.btn-sm { border-radius: .6rem; }
.btn.btn-primary {
    background-image: linear-gradient(135deg, #2a5cc0, #163a86);
    border-color: transparent;
    box-shadow: 0 10px 22px -10px rgba(22, 53, 122, .55);
}
.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active,
.btn.btn-primary.active, .btn.btn-primary:first-child:active {
    background-image: linear-gradient(135deg, #234fb0, #122e6e);
    border-color: transparent; color: #fff;
}
.btn.btn-light-primary { background-color: var(--bs-primary-light); color: var(--bs-primary); }
.btn.btn-light-primary:hover { background-color: #e3eafb; color: var(--bs-primary-active); }

/* ---- Cards: modern radius + soft elevation ---- */
.card {
    border-radius: 1rem !important;
    border: 1px solid #eceff5;
    box-shadow: 0 1px 3px rgba(16, 32, 80, .04), 0 16px 36px -24px rgba(16, 32, 80, .26) !important;
}
.card .card-header { border-top-left-radius: 1rem; border-top-right-radius: 1rem; min-height: 64px; }
/* Opt-in compact header for title-only / info cards: the default 64px band is
   sized for a title + action-bar; on a header that only holds a heading it
   leaves a large dead gap above the content. Add `card-header-tight` to drop
   the band to its natural height and pull the body up. Opt-in only — untagged
   headers (incl. all Cycle-1 cards) are unaffected. */
.card > .card-header.card-header-tight { min-height: auto; padding-top: 1.5rem; padding-bottom: .25rem; }
.card > .card-header.card-header-tight h4 { margin-bottom: 0; }
.card > .card-header.card-header-tight + .card-body { padding-top: .75rem; }

/* ---- Forms: rounder fields, navy focus ring ---- */
.form-control, .form-select {
    border-radius: .7rem;
}
.form-control:focus, .form-select:focus {
    border-color: #2f5ad6;
    box-shadow: 0 0 0 .2rem rgba(47, 90, 214, .18);
}
.form-control-solid { background-color: #f4f6fb; }

/* ---- Tables ---- */
.table thead th { letter-spacing: .03em; }

/* ---- Badges: rounder ---- */
.badge { border-radius: .55rem; }

/* ---- Top header: clean hairline ---- */
.app-header { box-shadow: 0 1px 0 rgba(16, 32, 80, .06); }

/* =============================================================================
   Sidebar — navy gradient (uses Metronic's dark-sidebar mode: light text built in)
   ============================================================================= */
[data-kt-app-layout="dark-sidebar"] .app-sidebar {
    /* Softer royal-blue at the TOP (px-anchored to the logo zone) so the logo's
       navy-blue identity reads against it, deepening to navy for the menu below
       (keeps the light menu text readable). */
    background: linear-gradient(180deg,
        #3b5fb8 0px, #2c4ca4 72px, #1a3578 200px, #102a63 360px, #0d2156 100%) !important;
    border-right: 0 !important;
    /* NOTE: do not set position here — Metronic keeps .app-sidebar position:fixed
       for the fixed-sidebar layout; overriding it breaks the whole page layout. */
}
/* gold top accent line */
[data-kt-app-layout="dark-sidebar"] .app-sidebar::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #f0a91c, #fadb5f, #f0a91c); z-index: 5;
}
/* Logo zone: transparent over the navy — the white-text logo sits naturally,
   no box. A faint divider under it separates the brand from the menu. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 1.4rem !important;
    min-height: 72px;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    display: flex; align-items: center; justify-content: center;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo img { height: 40px !important; width: auto !important; }
.siaga-logo-glass { display: flex; align-items: center; }
/* active / hover menu items — gold+navy accent */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
    background: linear-gradient(135deg, rgba(47, 90, 214, .55), rgba(219, 28, 12, .28)) !important;
    box-shadow: inset 3px 0 0 #fadb5f;
    border-radius: .65rem;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover {
    background: rgba(255, 255, 255, .07) !important; border-radius: .65rem;
}
/* section headings inside the menu */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-heading {
    color: rgba(255, 255, 255, .45) !important; letter-spacing: .08em;
}
/* sidebar footer "Versi" button */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-footer .btn {
    background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .12);
}

/* ---- Menu (light surfaces elsewhere) active tint already follows --bs-primary ---- */

/* ---- Links ---- */
a.link-primary, .link-primary { color: var(--bs-primary) !important; }
a.link-primary:hover { color: var(--bs-primary-active) !important; }

/* =============================================================================
   NAVBAR (header) — fresher
   ============================================================================= */
.app-header { border-bottom: 1px solid #eceff5; }
.app-header .page-heading li { font-family: "Manrope", "Inter", sans-serif; }
.app-header #countdownDate { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.app-navbar .btn.btn-icon { border-radius: .7rem; transition: background-color .15s, color .15s; }
.app-navbar .btn.btn-icon:hover { background: var(--bs-primary-light); color: var(--bs-primary) !important; }

/* theme toggle icon visibility — !important to beat the .d-inline-flex utility */
.siaga-theme-toggle .siaga-ico-light { display: inline-flex !important; }
.siaga-theme-toggle .siaga-ico-dark  { display: none !important; }
[data-bs-theme="dark"] .siaga-theme-toggle .siaga-ico-light { display: none !important; }
[data-bs-theme="dark"] .siaga-theme-toggle .siaga-ico-dark  { display: inline-flex !important; }

/* =============================================================================
   DARK MODE  (Metronic build ships no dark css, so we provide it here)
   Flips Bootstrap 5.3 neutral vars + a few hardcoded surfaces.
   ============================================================================= */
[data-bs-theme="dark"] {
    --bs-body-bg: #0b1220;
    --bs-body-color: #c7d1e0;
    --bs-card-bg: #131d31;
    --bs-card-border-color: rgba(255, 255, 255, .08);
    --bs-card-cap-bg: #131d31;
    --bs-border-color: rgba(255, 255, 255, .10);
    --bs-border-color-translucent: rgba(255, 255, 255, .10);
    --bs-secondary-bg: #18243b;
    --bs-tertiary-bg: #131d31;
    --bs-secondary-color: #9aa6bd;
    --bs-emphasis-color: #f1f5fb;
    --bs-heading-color: #ffffff;
    --bs-text-muted: #8995ad;
    --bs-primary-light: #18294b;
    --bs-gray-100: #18243b; --bs-gray-200: #1e2c46; --bs-gray-300: #2a3a59;
    --bs-gray-400: #475370; --bs-gray-500: #6f7c98; --bs-gray-600: #9aa6bd;
    --bs-gray-700: #bcc6d8; --bs-gray-800: #dbe2ed; --bs-gray-900: #f1f5fb;
    --bs-gray-100-rgb: 24, 36, 59;
    --bs-gray-200-rgb: 30, 44, 70;
    --bs-gray-300-rgb: 42, 58, 89;
    --bs-gray-800-rgb: 219, 226, 237;
    --bs-gray-900-rgb: 241, 245, 251;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-default,
[data-bs-theme="dark"] .app-blank { background-color: #0b1220 !important; }
[data-bs-theme="dark"] .app-default .app-wrapper {
    background: radial-gradient(48rem 34rem at 100% -6%, rgba(47, 90, 214, .12), transparent 60%);
}
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-header.bg-white { background-color: #0e1626 !important; border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .card { background-color: #131d31 !important; border-color: rgba(255, 255, 255, .08) !important; }
[data-bs-theme="dark"] .bg-white:not(.app-sidebar-logo) { background-color: #131d31 !important; }
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-gray-900,
[data-bs-theme="dark"] .text-gray-800 { color: #e6ecf6 !important; }
[data-bs-theme="dark"] .text-gray-700 { color: #c0cad9 !important; }
[data-bs-theme="dark"] .text-gray-600,
[data-bs-theme="dark"] .text-gray-500 { color: #9aa6bd !important; }
[data-bs-theme="dark"] .text-muted { color: #8995ad !important; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #0f1a2c; border-color: rgba(255, 255, 255, .12); color: #e6ecf6; }
[data-bs-theme="dark"] .form-control-solid { background-color: #16223a !important; color: #e6ecf6; }
[data-bs-theme="dark"] .form-control::placeholder { color: #66728c; }
[data-bs-theme="dark"] .menu-sub-dropdown,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .offcanvas { background-color: #131d31 !important; border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .table { --bs-table-color: #c7d1e0; --bs-table-bg: transparent; color: #c7d1e0; }
[data-bs-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] table.dataTable thead th { color: #9aa6bd; border-color: rgba(255, 255, 255, .10) !important; }
[data-bs-theme="dark"] .dataTables_wrapper { color: #9aa6bd; }
[data-bs-theme="dark"] .separator { border-bottom-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .symbol-label { background-color: #1c2840; color: #c7d1e0; }
[data-bs-theme="dark"] .page-link, [data-bs-theme="dark"] .paginate_button { background: #131d31; border-color: rgba(255,255,255,.1); color: #c7d1e0; }
[data-bs-theme="dark"] .btn.btn-light { background-color: #1c2840; color: #dbe2ed; border-color: transparent; }
[data-bs-theme="dark"] .btn.btn-light:hover { background-color: #243353; }
[data-bs-theme="dark"] .app-navbar .btn.btn-icon:hover { background: rgba(255,255,255,.08); color: #fff !important; }

/* =============================================================================
   Sidebar user card (footer) + version  — replaces the old "Versi 1.0" button
   ============================================================================= */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-footer { border-top: 0; padding-top: .25rem !important; }
[data-kt-app-layout="dark-sidebar"] .siaga-user-card {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .6rem; border-radius: .9rem; cursor: pointer;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    transition: background-color .15s, border-color .15s;
}
[data-kt-app-layout="dark-sidebar"] .siaga-user-card:hover {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18);
}
.siaga-user-ava { position: relative; flex-shrink: 0; }
.siaga-user-ava img { width: 38px; height: 38px; border-radius: .7rem; object-fit: cover; display: block; background: #fff; }
.siaga-user-dot { position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #34d399; border: 2px solid #0e2257; }
.siaga-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; flex: 1 1 auto; }
.siaga-user-name { color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siaga-user-role { color: rgba(255, 255, 255, .55); font-size: .7rem; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.siaga-user-caret { color: rgba(255, 255, 255, .45); flex-shrink: 0; }
.siaga-version { text-align: center; color: rgba(255, 255, 255, .32); font-size: .66rem; letter-spacing: .06em; margin-top: .6rem; }

/* =============================================================================
   Extra polish — fresher menu, header, scrollbar
   ============================================================================= */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu > .menu-item > .menu-link { border-radius: .65rem; margin-bottom: 2px; }
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-link .menu-icon .svg-icon { color: rgba(255,255,255,.65); }
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i { color: #fff; }
/* header: a touch more air + clean title */
.app-header .page-heading li { font-size: 1.05rem; }
.app-header .page-heading .bullet.bg-danger { background: linear-gradient(180deg, #f0a91c, #db1c0c) !important; width: 4px !important; height: 18px !important; border-radius: 2px !important; }
/* refined card header title */
.card .card-title .card-label { font-family: "Manrope","Inter",sans-serif; }
/* slim navy scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(31,71,166,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31,71,166,.55); }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }

/* =============================================================================
   Modern header — search bar + avatar dropdown
   ============================================================================= */
.siaga-search { position: relative; display: flex; align-items: center; }
.siaga-search svg { position: absolute; left: 13px; width: 16px; height: 16px; color: #93a3bd; pointer-events: none; }
.siaga-search input {
    width: 230px; height: 40px; padding: 0 40px 0 38px;
    border-radius: .85rem; border: 1px solid #e6e9f1;
    background: #f5f7fb; color: #2a3547; font-size: .9rem; outline: none;
    transition: width .2s ease, border-color .15s, box-shadow .15s, background-color .15s;
}
.siaga-search input::placeholder { color: #93a3bd; }
.siaga-search input:focus { width: 280px; border-color: #2f5ad6; background: #fff; box-shadow: 0 0 0 4px rgba(47, 90, 214, .14); }
.siaga-kbd {
    position: absolute; right: 9px; height: 22px; min-width: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; border: 1px solid #e2e6ef; background: #fff;
    font-size: .72rem; font-weight: 700; color: #93a3bd; pointer-events: none;
}
[data-bs-theme="dark"] .siaga-search input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #e6ecf6; }
[data-bs-theme="dark"] .siaga-search input:focus { background: #0f1a2c; }
[data-bs-theme="dark"] .siaga-kbd { background: #16223a; border-color: rgba(255, 255, 255, .12); color: #8995ad; }

.siaga-avatar-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.siaga-avatar-btn img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
.siaga-avatar-btn:hover { box-shadow: 0 0 0 3px rgba(47, 90, 214, .28); }
.siaga-avatar-btn.show, .siaga-avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(47, 90, 214, .45); }
.siaga-avatar-dot { position: absolute; bottom: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #34d399; border: 2px solid #fff; }
[data-bs-theme="dark"] .siaga-avatar-dot { border-color: #0e1626; }
.mw-150px { max-width: 150px; }

/* =============================================================================
   Header v2 — hero search, avatar fallback, refined notif badge
   ============================================================================= */
/* hero search (left) */
.siaga-search-lg input { width: 22rem; }
.siaga-search-lg input:focus { width: 26rem; }
@media (max-width: 1200px) { .siaga-search-lg input { width: 16rem; } .siaga-search-lg input:focus { width: 19rem; } }

/* avatar initials fallback (shows if avatar image is broken) */
.siaga-avatar-fallback {
    position: absolute; inset: 0; display: grid; place-items: center;
    border-radius: 50%; z-index: 0;
    background: linear-gradient(135deg, #2a5cc0, #163a86);
    color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em;
}
.siaga-avatar-btn img { position: relative; z-index: 1; }
.siaga-avatar-dot { z-index: 2; }

/* refined notification badge on the bell */
#container-total-notification { position: absolute; top: 1px; right: 2px; }
#container-total-notification .total-notification {
    font-size: .62rem !important; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    box-shadow: 0 0 0 2px #fff;
}
[data-bs-theme="dark"] #container-total-notification .total-notification { box-shadow: 0 0 0 2px #0e1626; }
/* make sure the bell button is the positioning context */
.app-navbar-item .btn.btn-icon { position: relative; }

/* =============================================================================
   HEADER v3 — premium glass look (bring the Tailwind topbar quality to Metronic)
   ============================================================================= */
.app-header {
    /* SOLID, not glass. A glass header (backdrop-filter / isolation) turns the
       element into a containing block + stacking context that traps the
       position:fixed notif/avatar dropdowns — off-screen on desktop, behind the
       glass cards on mobile. Solid keeps the dropdowns free on every screen size. */
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid rgba(16, 32, 80, .07) !important;
    box-shadow: 0 1px 2px rgba(16, 32, 80, .03) !important;
}
[data-bs-theme="dark"] .app-header,
[data-bs-theme="dark"] .app-header.bg-white {
    background: #0e1626 !important;
    border-bottom-color: rgba(255, 255, 255, .07) !important;
}

/* even rhythm in the right action cluster */
.app-navbar { gap: .25rem; }
.app-navbar .app-navbar-item { margin-left: 0 !important; margin-right: 0 !important; }
.app-navbar .app-navbar-item + .app-navbar-item { margin-left: .15rem !important; }

/* icon buttons (theme toggle + bell): clean, uniform, soft hover */
.app-navbar .btn.btn-icon {
    width: 42px !important; height: 42px !important; border-radius: .85rem !important;
    color: #5a6b86 !important; transition: background-color .15s, color .15s, transform .15s;
}
.app-navbar .btn.btn-icon:hover { background: rgba(31, 71, 166, .09) !important; color: #1f47a6 !important; }
.app-navbar .btn.btn-icon:active { transform: scale(.94); }
[data-bs-theme="dark"] .app-navbar .btn.btn-icon { color: #b6c1d6 !important; }
[data-bs-theme="dark"] .app-navbar .btn.btn-icon:hover { background: rgba(255, 255, 255, .09) !important; color: #fff !important; }

/* search field — cleaner, premium */
.siaga-search input {
    height: 44px; border-radius: .95rem; background: rgba(16, 32, 80, .035);
    border-color: transparent;
}
.siaga-search input:hover { background: rgba(16, 32, 80, .055); }
.siaga-search input:focus { background: #fff; border-color: #2f5ad6; }
.siaga-search svg { left: 15px; }
.siaga-search input { padding-left: 42px; }
[data-bs-theme="dark"] .siaga-search input { background: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .siaga-search input:hover { background: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .siaga-search input:focus { background: #0f1a2c; }

/* avatar button — slightly larger, subtle ring */
.siaga-avatar-btn { width: 42px; height: 42px; box-shadow: 0 0 0 2px rgba(16,32,80,.06); }
.siaga-avatar-btn img { width: 42px; height: 42px; }
.siaga-avatar-fallback { font-size: 1rem; }

/* a touch more vertical room + crisp dividers */
.app-header .app-container { min-height: 72px; }

/* =============================================================================
   Dashboard — premium KPI cards
   ============================================================================= */
.siaga-kpi {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid #eceff5; border-radius: 1.1rem;
    padding: 1.1rem 1.25rem; height: 100%;
    box-shadow: 0 1px 3px rgba(16, 32, 80, .04), 0 16px 36px -24px rgba(16, 32, 80, .26);
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
}
.siaga-kpi:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -22px rgba(16, 32, 80, .4); }
[data-bs-theme="dark"] .siaga-kpi { background: #131d31; border-color: rgba(255, 255, 255, .08); }
.siaga-kpi-ico { flex-shrink: 0; width: 52px; height: 52px; border-radius: .9rem; display: grid; place-items: center; box-shadow: 0 10px 22px -10px rgba(16, 32, 80, .45); }
.siaga-kpi-ico svg { width: 24px; height: 24px; }
.siaga-kpi-meta { min-width: 0; }
.siaga-kpi-val { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; font-size: 1.8rem; line-height: 1; letter-spacing: -.03em; color: #0d1b3e; font-variant-numeric: tabular-nums; }
[data-bs-theme="dark"] .siaga-kpi-val { color: #fff; }
.siaga-kpi-label { font-size: .82rem; color: #6b7f99; margin-top: .4rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.siaga-kpi-tag { font-size: .62rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: #eef2fc; color: #1f47a6; }
.siaga-kpi-tag.tag-green { background: #e8f7ee; color: #15803d; }
.siaga-kpi-glow { position: absolute; right: -1.5rem; top: -2rem; width: 8rem; height: 8rem; border-radius: 50%; filter: blur(42px); opacity: .18; pointer-events: none; }

/* dashboard chart-card headers a touch crisper */
#kt_app_content .card .card-label { font-size: 1.05rem !important; }

/* =============================================================================
   Header greeting (left)
   ============================================================================= */
.siaga-greeting { line-height: 1.15; }
.siaga-greeting-hi { font-size: .78rem; color: #6b7f99; font-weight: 500; }
.siaga-greeting-name { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; font-size: 1.18rem; color: #0d1b3e; letter-spacing: -.01em; }
[data-bs-theme="dark"] .siaga-greeting-hi { color: #93a3bd; }
[data-bs-theme="dark"] .siaga-greeting-name { color: #fff; }
.siaga-wave { display: inline-block; transform-origin: 70% 70%; animation: siaga-wave 2.4s ease-in-out infinite; }
@keyframes siaga-wave { 0%,55%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }
@media (prefers-reduced-motion: reduce) { .siaga-wave { animation: none; } }

/* =============================================================================
   GLASSMORPHISM + GRADIENT v2 (Tailwind-style)
   Visible gradient mesh behind content + frosted glass cards.
   ============================================================================= */
/* gradient mesh background on the content area */
body.app-default, .app-default .app-wrapper {
    background-color: #eaf0f8 !important;
    background-image:
        radial-gradient(52rem 36rem at 100% -8%, rgba(47, 90, 214, .14), transparent 55%),
        radial-gradient(44rem 30rem at 2% 14%, rgba(219, 28, 12, .07), transparent 50%),
        radial-gradient(48rem 34rem at 62% 112%, rgba(240, 169, 28, .10), transparent 55%) !important;
    background-attachment: fixed !important;
}
[data-bs-theme="dark"] body.app-default, [data-bs-theme="dark"] .app-default .app-wrapper {
    background-color: #0a1020 !important;
    background-image:
        radial-gradient(52rem 36rem at 100% -8%, rgba(47, 90, 214, .28), transparent 55%),
        radial-gradient(44rem 30rem at 2% 14%, rgba(219, 28, 12, .14), transparent 50%),
        radial-gradient(48rem 34rem at 62% 112%, rgba(240, 169, 28, .12), transparent 55%) !important;
}

/* KPI cards -> frosted glass + stronger colour glow */
.siaga-kpi {
    background: rgba(255, 255, 255, .58) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow: 0 1px 2px rgba(16, 32, 80, .04), 0 20px 44px -24px rgba(16, 32, 80, .34) !important;
}
[data-bs-theme="dark"] .siaga-kpi {
    background: rgba(19, 29, 49, .55) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    backdrop-filter: blur(20px) saturate(150%);
}
.siaga-kpi-glow { opacity: .32 !important; filter: blur(38px) !important; width: 9.5rem !important; height: 9.5rem !important; }

/* content cards -> subtle frosted glass (still readable) */
#kt_app_content .card {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .55) !important;
}
[data-bs-theme="dark"] #kt_app_content .card {
    background: rgba(19, 29, 49, .68) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}

/* header kept solid (see HEADER v3) so the fixed header dropdowns are never
   trapped by a backdrop-filter containing block / stacking context. */

/* sidebar a touch of depth */
[data-kt-app-layout="dark-sidebar"] .app-sidebar { box-shadow: 12px 0 40px -28px rgba(0,0,0,.7); }

/* =============================================================================
   LIGHT SIDEBAR (chosen) — clean white sidebar, navy/gold accents, natural logo
   ============================================================================= */
[data-kt-app-layout="light-sidebar"] .app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e7ebf3 !important;
    position: relative;
    box-shadow: 10px 0 40px -34px rgba(16, 32, 80, .5);
}
/* gold top accent */
[data-kt-app-layout="light-sidebar"] .app-sidebar::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #f0a91c, #fadb5f, #f0a91c); z-index: 6;
}
/* logo sits naturally on white — no box */
[data-kt-app-layout="light-sidebar"] .app-sidebar .app-sidebar-logo {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    min-height: 72px; padding: 0 1.4rem !important; margin: 0 !important;
    border-bottom: 1px solid #eef1f6;
    display: flex; align-items: center; justify-content: flex-start;
    backdrop-filter: none !important;
}
[data-kt-app-layout="light-sidebar"] .app-sidebar .app-sidebar-logo img { height: 38px !important; }

/* menu */
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link { color: #46546b; border-radius: .65rem; font-weight: 500; }
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover { background: #f2f5fb; color: #16223a; }
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
    background: linear-gradient(135deg, rgba(31, 71, 166, .12), rgba(31, 71, 166, .04)) !important;
    color: #1f47a6 !important; font-weight: 600; box-shadow: inset 3px 0 0 #f0a91c;
}
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i { color: #1f47a6 !important; }
[data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-heading { color: #98a4b8 !important; letter-spacing: .08em; }

/* user card (footer) for light */
[data-kt-app-layout="light-sidebar"] .app-sidebar-footer { border-top: 1px solid #eef1f6; }
[data-kt-app-layout="light-sidebar"] .siaga-user-card { background: #f5f7fb; border: 1px solid #e7ebf3; }
[data-kt-app-layout="light-sidebar"] .siaga-user-card:hover { background: #eef2f8; border-color: #d8e0ee; }
[data-kt-app-layout="light-sidebar"] .siaga-user-name { color: #1a2233; }
[data-kt-app-layout="light-sidebar"] .siaga-user-role { color: #6b7f99; }
[data-kt-app-layout="light-sidebar"] .siaga-user-caret { color: #98a4b8; }
[data-kt-app-layout="light-sidebar"] .siaga-version { color: #98a4b8; }
[data-kt-app-layout="light-sidebar"] .siaga-user-dot { border-color: #f5f7fb; }

/* dark mode -> sidebar goes dark too */
[data-bs-theme="dark"][data-kt-app-layout="light-sidebar"] .app-sidebar { background: #0e1626 !important; border-right-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"][data-kt-app-layout="light-sidebar"] .app-sidebar .app-sidebar-logo { background: #fff !important; border-radius: .8rem; margin: .8rem .9rem !important; padding: .5rem .7rem !important; min-height: 0; border-bottom: 0; }
[data-bs-theme="dark"][data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link { color: #b6c1d6; }
[data-bs-theme="dark"][data-kt-app-layout="light-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover { background: rgba(255,255,255,.06); color: #fff; }
[data-bs-theme="dark"][data-kt-app-layout="light-sidebar"] .siaga-user-name { color: #fff; }

/* =============================================================================
   COMPONENTS — Tailwind-style refresh for inputs / select2 / tables / pagination
   Clean white surfaces, subtle borders, soft navy focus ring, airy spacing.
   ============================================================================= */

/* ---- Labels ---- */
.form-label,
label.fs-6.fw-semibold,
.form-group > label { color: #334155; font-weight: 600; }
.required:after { color: #db1c0c !important; }

/* ---- Text inputs / textarea / native select ---- */
.form-control,
.form-select,
textarea.form-control {
    border-radius: .7rem;
    border: 1px solid #e3e8f1;
    background-color: #fff;
    color: #1e293b;
    padding: .68rem .95rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder { color: #9aa6b8; opacity: 1; }
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) { border-color: #cdd6e6; }
.form-control:focus,
.form-select:focus {
    border-color: #2f5ad6;
    background-color: #fff;
    box-shadow: 0 0 0 .22rem rgba(47, 90, 214, .16);
}
.form-control-sm, .form-select-sm { border-radius: .6rem; padding: .5rem .8rem; }
.form-control-lg, .form-select-lg { border-radius: .8rem; }
/* solid variant (Metronic) -> soft grey, lifts to white on focus */
.form-control-solid, .form-select-solid {
    background-color: #f4f6fb !important; border-color: #eef1f7 !important;
}
.form-control-solid:focus, .form-select-solid:focus {
    background-color: #fff !important; border-color: #2f5ad6 !important;
}
.form-control.is-invalid, .form-select.is-invalid,
.was-validated .form-control:invalid { border-color: #db1c0c; }
.form-control.is-valid, .form-select.is-valid { border-color: #16a34a; }
/* helper / error text */
.form-text { color: #7c8aa0; }
.invalid-feedback, p.text-danger { font-size: .85rem; margin-top: .35rem; }

/* ---- Input groups ---- */
.input-group-text {
    border-radius: .7rem; border: 1px solid #e3e8f1; background: #f4f6fb; color: #64748b;
}

/* ---- Checkbox / radio / switch ---- */
.form-check-input { border-color: #cbd5e3; border-radius: .4rem; cursor: pointer; }
.form-check-input:focus { border-color: #2f5ad6; box-shadow: 0 0 0 .2rem rgba(47, 90, 214, .15); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.form-switch .form-check-input { border-radius: 2rem; }

/* =============================================================================
   SELECT2 (bootstrap5 theme used by Metronic via data-control="select2")
   ============================================================================= */
.select2-container--bootstrap5 .select2-selection {
    border-radius: .7rem !important;
    border: 1px solid #e3e8f1 !important;
    min-height: calc(1.5em + 1.36rem + 2px) !important;
    padding: .2rem .55rem !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: #2f5ad6 !important;
    box-shadow: 0 0 0 .22rem rgba(47, 90, 214, .16) !important;
}
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.9 !important; color: #1e293b !important; padding-left: .35rem !important;
}
.select2-container--bootstrap5 .select2-selection--single .select2-selection__placeholder { color: #9aa6b8 !important; }
/* dropdown panel */
.select2-dropdown {
    border-radius: .8rem !important;
    border: 1px solid #e3e8f1 !important;
    box-shadow: 0 20px 44px -20px rgba(16, 32, 80, .32) !important;
    overflow: hidden; padding: .25rem;
}
.select2-container--bootstrap5 .select2-results__option {
    border-radius: .55rem; padding: .55rem .7rem; margin: 1px 0; color: #334155;
}
.select2-container--bootstrap5 .select2-results__option--highlighted.select2-results__option--selectable {
    background: linear-gradient(135deg, #2a5cc0, #1f47a6) !important; color: #fff !important;
}
.select2-container--bootstrap5 .select2-results__option--selected {
    background: var(--bs-primary-light) !important; color: var(--bs-primary) !important; font-weight: 600;
}
.select2-search--dropdown .select2-search__field {
    border-radius: .6rem !important; border: 1px solid #e3e8f1 !important; padding: .5rem .7rem;
}
.select2-search--dropdown .select2-search__field:focus { border-color: #2f5ad6 !important; }
/* multi-select tags */
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice {
    background: var(--bs-primary-light) !important; color: var(--bs-primary) !important;
    border: 1px solid rgba(31, 71, 166, .18) !important; border-radius: .5rem !important;
}
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__choice__remove { color: var(--bs-primary) !important; }

/* =============================================================================
   TABLES + DataTables (yajra + dataTables.bootstrap5)
   ============================================================================= */
table.table thead th,
table.dataTable thead th {
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .045em;
    font-weight: 700;
    color: #64748b;
    border-bottom: 1px solid #e7ebf3 !important;
    padding-top: .85rem; padding-bottom: .85rem;
}
.table-row-dashed tr { border-bottom-color: #eef1f6 !important; }
table.table tbody tr,
table.dataTable tbody tr { transition: background-color .12s ease; }
table.table tbody tr:hover,
table.dataTable tbody tr:hover { background-color: #f7f9fd; }
table.table td, table.dataTable td { color: #334155; vertical-align: middle; }
/* DataTables toolbar (length select + search) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 1rem; }
.dataTables_wrapper .dataTables_filter input {
    border-radius: .7rem !important; border: 1px solid #e3e8f1 !important;
    padding: .55rem .9rem !important; min-width: 230px; margin-left: .5rem;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: #2f5ad6 !important; box-shadow: 0 0 0 .22rem rgba(47, 90, 214, .16) !important; }
.dataTables_wrapper .dataTables_info { color: #7c8aa0; font-size: .88rem; padding-top: 1rem; }
/* pagination (Bootstrap + DataTables) */
.page-link {
    border-radius: .6rem !important; margin: 0 3px; border: 1px solid #e7ebf3;
    color: #475569; min-width: 38px; text-align: center; transition: all .12s ease;
}
.page-link:hover { background: var(--bs-primary-light); color: var(--bs-primary); border-color: #d8e0ef; }
.page-item.active .page-link {
    background: linear-gradient(135deg, #2a5cc0, #1f47a6); border-color: transparent; color: #fff;
    box-shadow: 0 8px 16px -8px rgba(31, 71, 166, .6);
}
.page-item.disabled .page-link { color: #b6c0ce; background: #fff; }

/* ---- daterangepicker ---- */
.daterangepicker { border-radius: .9rem; border-color: #e7ebf3; box-shadow: 0 20px 48px -20px rgba(16, 32, 80, .32); font-family: inherit; }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--bs-primary); }
.daterangepicker td.in-range { background: var(--bs-primary-light); color: var(--bs-primary); }
.daterangepicker .ranges li.active { background: var(--bs-primary); }
.daterangepicker .drp-buttons .btn { border-radius: .6rem; }

/* =============================================================================
   DARK MODE variants for the components above
   ============================================================================= */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control {
    background-color: #0f192c; border-color: rgba(255, 255, 255, .10); color: #cdd6e6;
}
[data-bs-theme="dark"] .form-control-solid, [data-bs-theme="dark"] .form-select-solid {
    background-color: #131f36 !important; border-color: rgba(255, 255, 255, .08) !important;
}
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #0f192c; border-color: #3a63d6; }
[data-bs-theme="dark"] .form-label, [data-bs-theme="dark"] label.fs-6.fw-semibold { color: #c7d1e0; }
[data-bs-theme="dark"] .input-group-text { background: #131f36; border-color: rgba(255,255,255,.1); color: #9fb0c8; }
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-selection {
    background-color: #0f192c !important; border-color: rgba(255, 255, 255, .10) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered { color: #cdd6e6 !important; }
[data-bs-theme="dark"] .select2-dropdown { background: #131f36 !important; border-color: rgba(255, 255, 255, .10) !important; }
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-results__option { color: #c7d1e0; }
[data-bs-theme="dark"] table.table thead th, [data-bs-theme="dark"] table.dataTable thead th { color: #93a2ba; border-bottom-color: rgba(255,255,255,.10) !important; }
[data-bs-theme="dark"] .table-row-dashed tr { border-bottom-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] table.table tbody tr:hover, [data-bs-theme="dark"] table.dataTable tbody tr:hover { background-color: rgba(255,255,255,.03); }
[data-bs-theme="dark"] table.table td, [data-bs-theme="dark"] table.dataTable td { color: #c7d1e0; }
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: #0f192c; border-color: rgba(255,255,255,.1) !important; color: #cdd6e6; }
[data-bs-theme="dark"] .page-link { background: #131f36; border-color: rgba(255,255,255,.1); color: #b6c1d6; }
[data-bs-theme="dark"] .page-item.disabled .page-link { background: #131f36; }

/* =============================================================================
   BUTTONS + CARDS + UI COMPONENTS — Tailwind-style refresh (palette navy/emas)
   ============================================================================= */

/* ---- Buttons: solid hierarchy (primary = gradient hero, others soft+lift) ---- */
.btn { transition: color .15s, background-color .15s, background-image .15s, border-color .15s, box-shadow .15s, transform .12s ease; }
.btn-secondary, .btn-danger, .btn-success, .btn-warning, .btn-info, .btn-dark { border-color: transparent; }
.btn-danger  { box-shadow: 0 10px 22px -12px rgba(219, 28, 12, .50); }
.btn-success { box-shadow: 0 10px 22px -12px rgba(22, 163, 74, .45); }
.btn-warning { box-shadow: 0 10px 22px -12px rgba(240, 169, 28, .50); }
.btn-info    { box-shadow: 0 10px 22px -12px rgba(13, 110, 253, .42); }
.btn-dark    { box-shadow: 0 10px 22px -12px rgba(17, 24, 39, .50); }
.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-success:hover,
.btn-warning:hover, .btn-info:hover, .btn-dark:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-success:active,
.btn-warning:active, .btn-info:active, .btn-dark:active { transform: translateY(0); }
.btn.disabled, .btn:disabled { opacity: .55; box-shadow: none; transform: none; }
/* icon buttons + soft light buttons */
.btn.btn-icon { border-radius: .7rem; }
.btn-light { background-color: #f1f4f9; color: #334155; }
.btn-light:hover { background-color: #e7ecf4; color: #1e293b; }
.btn-light-primary  { background-color: var(--bs-primary-light) !important; color: var(--bs-primary) !important; }
.btn-light-danger   { background-color: #fff1f0 !important; color: #db1c0c !important; }
.btn-light-success  { background-color: #e9f9ef !important; color: #16a34a !important; }
.btn-light-warning  { background-color: #fff8e6 !important; color: #d9920f !important; }
.btn-light-info     { background-color: #eaf1ff !important; color: #2563eb !important; }
.btn-light-primary:hover, .btn-light-danger:hover, .btn-light-success:hover,
.btn-light-warning:hover, .btn-light-info:hover { filter: brightness(.97); }
/* outline */
.btn-outline { border: 1px solid #e3e8f1; color: #334155; }
.btn-outline:hover { border-color: var(--bs-primary); color: var(--bs-primary); background: var(--bs-primary-light); }
[class*="btn-outline-"] { transition: all .15s; }

/* ---- Cards: variants + interactive hover ---- */
.card .card-header { border-bottom: 1px solid #eef1f6; }
.card .card-title { font-family: "Manrope", "Inter", sans-serif; font-weight: 700; color: #1e293b; }
.card.card-bordered { box-shadow: none !important; border: 1px solid #e7ebf3; }
.card.card-dashed { box-shadow: none !important; border: 1px dashed #d7deea; }
.card.card-flush > .card-header { border-bottom: 0; }
.card-hover, a.card { transition: transform .15s ease, box-shadow .2s ease; }
.card-hover:hover, a.card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(16, 32, 80, .34) !important; }

/* ---- Badges: clean pills + light tints ---- */
.badge { border-radius: .55rem; font-weight: 600; padding: .42em .68em; letter-spacing: .005em; }
.badge.badge-circle, .badge.badge-square { padding: 0; }
.badge-light-primary { background: var(--bs-primary-light); color: var(--bs-primary); }
.badge-light-danger  { background: #fff1f0; color: #db1c0c; }
.badge-light-success { background: #e9f9ef; color: #16a34a; }
.badge-light-warning { background: #fff8e6; color: #d9920f; }
.badge-light-info    { background: #eaf1ff; color: #2563eb; }
.badge-light-secondary { background: #eef1f6; color: #475569; }

/* ---- Alerts: rounded, soft tint, left accent ---- */
.alert { border-radius: .85rem; border: 0; border-left: 4px solid transparent; }
.alert-primary { background: var(--bs-primary-light); color: #163a86; border-left-color: var(--bs-primary); }
.alert-danger  { background: #fff1f0; color: #a8160a; border-left-color: #db1c0c; }
.alert-success { background: #e9f9ef; color: #15803d; border-left-color: #16a34a; }
.alert-warning { background: #fff8e6; color: #92660b; border-left-color: #f0a91c; }
.alert-info    { background: #eaf1ff; color: #1d4ed8; border-left-color: #2563eb; }

/* ---- Modals ---- */
.modal-content { border-radius: 1.1rem; border: 0; box-shadow: 0 44px 90px -28px rgba(16, 32, 80, .45); overflow: hidden; }
.modal-header { border-bottom: 1px solid #eef1f6; }
.modal-footer { border-top: 1px solid #eef1f6; }
.modal-backdrop.show { opacity: .42; }

/* ---- Dropdown menus (Bootstrap + Metronic .menu-sub-dropdown) ---- */
.dropdown-menu, .menu-sub-dropdown {
    border-radius: .9rem !important; border: 1px solid #eef1f6 !important;
    box-shadow: 0 22px 48px -22px rgba(16, 32, 80, .34) !important; padding: .4rem !important;
}
.dropdown-item { border-radius: .55rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bs-primary-light); color: var(--bs-primary); }
.menu-sub-dropdown .menu-link { border-radius: .55rem; }
.menu-state-bg .menu-item .menu-link.active,
.menu-state-bg .menu-item .menu-link:hover { background-color: var(--bs-primary-light) !important; color: var(--bs-primary) !important; }

/* ---- Nav: tabs / line-tabs / pills ---- */
.nav-line-tabs .nav-item .nav-link.active,
.nav-line-tabs .nav-item.show .nav-link { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.nav-tabs .nav-link { border-radius: .6rem .6rem 0 0; }
.nav-pills .nav-link { border-radius: .65rem; font-weight: 600; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, #2a5cc0, #1f47a6); box-shadow: 0 8px 16px -8px rgba(31, 71, 166, .55); }

/* ---- Tooltips ---- */
.tooltip-inner { border-radius: .55rem; background: #1e293b; color: #fff; padding: .45rem .7rem; font-size: .8rem; box-shadow: 0 10px 24px -10px rgba(16, 32, 80, .5); }
.tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #1e293b; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #1e293b; }

/* ---- Accordion ---- */
.accordion-item { border-radius: .8rem !important; border: 1px solid #eef1f6; overflow: hidden; margin-bottom: .6rem; }
.accordion-button { border-radius: .8rem !important; font-weight: 600; }
.accordion-button:not(.collapsed) { background: var(--bs-primary-light); color: var(--bs-primary); box-shadow: none; }
.accordion-button:focus { border-color: transparent; box-shadow: 0 0 0 .2rem rgba(47, 90, 214, .14); }

/* ---- Progress ---- */
.progress { border-radius: 1rem; background-color: #eef1f6; height: .7rem; }
.progress-bar { background: linear-gradient(90deg, #2a5cc0, #1f47a6); border-radius: 1rem; }

/* ---- Symbols / avatars ---- */
.symbol > img { object-fit: cover; }
.symbol.symbol-circle .symbol-label, .symbol.symbol-circle > img { border-radius: 50%; }

/* ---- Breadcrumb (section header) ---- */
.breadcrumb-item, .breadcrumb-item a { color: #94a3b8; font-size: .85rem; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--bs-primary); }
.breadcrumb-item.active { color: var(--bs-primary); font-weight: 600; }

/* ---- SweetAlert2 ---- */
.swal2-popup { border-radius: 1.2rem; }
.swal2-title { font-family: "Manrope", "Inter", sans-serif; color: #1e293b; }
.swal2-styled { border-radius: .7rem !important; }
.swal2-styled:focus { box-shadow: 0 0 0 .22rem rgba(47, 90, 214, .18) !important; }

/* =============================================================================
   DARK MODE variants for the surfaces above
   ============================================================================= */
[data-bs-theme="dark"] .btn-light { background-color: #1a2740; color: #cdd6e6; }
[data-bs-theme="dark"] .btn-light:hover { background-color: #213152; color: #fff; }
[data-bs-theme="dark"] .card .card-header, [data-bs-theme="dark"] .modal-header { border-bottom-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .modal-footer { border-top-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .modal-content { background: #131d31; }
[data-bs-theme="dark"] .dropdown-menu, [data-bs-theme="dark"] .menu-sub-dropdown { background: #16223a !important; border-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .dropdown-item { color: #c7d1e0; }
[data-bs-theme="dark"] .accordion-item { background: #131d31; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .accordion-button { background: #131d31; color: #c7d1e0; }
[data-bs-theme="dark"] .progress { background-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .card.card-bordered { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .swal2-popup { background: #16223a; color: #c7d1e0; }
[data-bs-theme="dark"] .swal2-title { color: #fff; }

/* =============================================================================
   DARK MODE — sidebar harmonises with the dark body (deeper navy gradient)
   Top stays a muted indigo so the logo's navy-blue lobe still reads; deepens to
   near-black navy that matches --bs-body-bg below.
   ============================================================================= */
[data-bs-theme="dark"][data-kt-app-layout="dark-sidebar"] .app-sidebar {
    background: linear-gradient(180deg,
        #26407e 0px, #1b2e5a 80px, #14213f 220px, #0d1830 380px, #0a1224 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .05) !important;
}
[data-bs-theme="dark"][data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}

/* =============================================================================
   GLOBAL FONT — Manrope for the entire app (single consistent family)
   Overrides Bootstrap/Metronic's default Inter so header, menu and body match.
   ============================================================================= */
:root, [data-bs-theme="dark"], [data-bs-theme="light"] {
    --bs-font-sans-serif: "Manrope", "Inter", Helvetica, "sans-serif";
    --bs-body-font-family: "Manrope", "Inter", Helvetica, sans-serif;
}
body, .app-default, .app-blank, .app-root,
.menu, .btn, .badge, .form-label, label,
input, select, textarea, button,
.form-control, .form-select,
.dropdown-menu, .menu-sub, .modal, .offcanvas,
.table, .swal2-popup, .select2-container {
    font-family: "Manrope", "Inter", Helvetica, sans-serif;
}

/* =============================================================================
   WEIGHT HIERARCHY — one family (Manrope), contrast comes from font-weight
   Body = regular; headings / table headers / titles = bold.
   ============================================================================= */
body, .app-default, .app-blank { font-weight: 400; }
p, td, .text-muted, .text-gray-600, .text-gray-700, .form-text { font-weight: 400; }

/* headings */
h1, .h1, .fs-2qx, .page-heading { font-weight: 800; letter-spacing: -.02em; }
h2, .h2, h3, .h3, .fs-1, .fs-2 { font-weight: 700; letter-spacing: -.01em; }
h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; }
.card-title, .card-title .card-label, .card-label { font-weight: 700; }
.siaga-greeting-name, .siaga-kpi-val { font-weight: 800; }

/* table headers — clearly bolder than the body rows */
table thead th, table.dataTable thead th, .table thead th { font-weight: 700 !important; }
table tbody td, table.dataTable tbody td { font-weight: 400; }

/* form labels = medium; buttons = semibold (already) */
.form-label, label.fs-6, .fw-semibold { font-weight: 600; }

/* =============================================================================
   GLASS CARDS — frosted translucent surfaces (like the Tailwind version)
   Glass needs colour behind it, so the wrapper mesh is strengthened a touch.
   ============================================================================= */
.app-default .app-wrapper {
    background:
        radial-gradient(52rem 38rem at 100% -8%, rgba(31, 71, 166, .12), transparent 60%),
        radial-gradient(44rem 32rem at -8% 6%, rgba(219, 28, 12, .07), transparent 58%),
        radial-gradient(40rem 30rem at 55% 116%, rgba(240, 169, 28, .07), transparent 60%) !important;
}
.card {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: blur(16px) saturate(165%);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow:
        0 1px 3px rgba(16, 32, 80, .04),
        0 20px 44px -26px rgba(16, 32, 80, .30),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}
.card .card-header, .card .card-footer { background: transparent; }
/* bordered / dashed variants: a bit more opaque so dense content stays crisp */
.card.card-bordered, .card.card-dashed { background: rgba(255, 255, 255, .84) !important; }

/* dark-mode glass */
[data-bs-theme="dark"] .card {
    background: rgba(19, 29, 49, .56) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 20px 44px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
[data-bs-theme="dark"] .card.card-bordered, [data-bs-theme="dark"] .card.card-dashed { background: rgba(19, 29, 49, .74) !important; }
[data-bs-theme="dark"] .app-default .app-wrapper {
    background:
        radial-gradient(52rem 38rem at 100% -8%, rgba(47, 90, 214, .16), transparent 60%),
        radial-gradient(44rem 32rem at -8% 6%, rgba(219, 28, 12, .06), transparent 58%) !important;
}

/* =============================================================================
   Notification panel — header image full-bleed (override the generic dropdown
   padding so the blue header reaches the rounded corners cleanly)
   ============================================================================= */
#kt_menu_notifications { padding: 0 !important; overflow: hidden; }
#kt_menu_notifications > .rounded-top,
#kt_menu_notifications .bgi-no-repeat { border-top-left-radius: .9rem !important; border-top-right-radius: .9rem !important; }

/* =============================================================================
   SIDEBAR expand/collapse toggle (Metronic app-sidebar-minimize)
   ============================================================================= */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo { position: relative; }
.siaga-sidebar-toggle {
    width: 36px !important; height: 36px !important;
    background: linear-gradient(135deg, #fadb5f, #f0a91c) !important;  /* gold — pops on navy AND on light content */
    border: 2px solid #ffffff !important;
    color: #0d2156 !important;                                        /* navy arrow */
    box-shadow: 0 6px 16px -4px rgba(240, 169, 28, .65), 0 2px 6px rgba(16, 32, 80, .35) !important;
    z-index: 30;
    transition: background-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.siaga-sidebar-toggle:hover {
    background: linear-gradient(135deg, #ffe680, #f4b52a) !important;
    border-color: #ffffff !important;
    color: #0d2156 !important;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 8px 22px -4px rgba(240, 169, 28, .8), 0 2px 6px rgba(16, 32, 80, .4) !important;
}
.siaga-sidebar-toggle i { color: inherit !important; font-size: 1.4rem !important; }
[data-bs-theme="dark"] .siaga-sidebar-toggle { border-color: #0e1626 !important; }
/* drawer mode on mobile -> no minimize toggle */
@media (max-width: 991.98px) { .siaga-sidebar-toggle { display: none !important; } }

/* =============================================================================
   PROFILE page — hero banner, avatar, password show/hide
   ============================================================================= */
.siaga-profile-hero { overflow: hidden; }
.siaga-profile-cover {
    height: 132px; position: relative; border-radius: 1rem 1rem 0 0;
    background: linear-gradient(120deg, #163a86 0%, #2a5cc0 48%, #0d2058 100%);
}
.siaga-profile-cover::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background:
        radial-gradient(34rem 16rem at 88% -55%, rgba(240, 169, 28, .42), transparent 60%),
        radial-gradient(28rem 14rem at 8% 120%, rgba(219, 28, 12, .22), transparent 60%);
}
.siaga-profile-ava {
    position: relative; width: 116px; height: 116px; margin-top: -58px; flex-shrink: 0;
    border-radius: 24px; border: 4px solid #fff; background: #fff; overflow: hidden;
    box-shadow: 0 14px 34px -14px rgba(16, 32, 80, .5);
}
.siaga-profile-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.siaga-profile-dot {
    position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px;
    border-radius: 50%; background: #16a34a; border: 3px solid #fff;
}
[data-bs-theme="dark"] .siaga-profile-ava { border-color: #16223a; background: #16223a; }
[data-bs-theme="dark"] .siaga-profile-dot { border-color: #16223a; }

.siaga-ava-preview { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 1px solid #e3e8f1; background: #f4f6fb; }
.siaga-ava-preview img { width: 100%; height: 100%; object-fit: cover; }

.siaga-pw-field { padding-right: 2.8rem !important; }
.siaga-pw-eye {
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: #94a3b8; border-radius: .5rem;
}
.siaga-pw-eye:hover { color: var(--bs-primary); background: var(--bs-primary-light); }
.siaga-pw-eye .siaga-eye-closed { display: none; }
.siaga-pw-eye.siaga-pw-on .siaga-eye-open { display: none; }
.siaga-pw-eye.siaga-pw-on .siaga-eye-closed { display: inline-flex; }

/* =============================================================================
   LOGIN / AUTH — glass card + branded illustration panel
   ============================================================================= */
.siaga-auth {
    min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden;
    background:
        radial-gradient(60rem 50rem at 12% 8%, #2a5cc0, transparent 55%),
        radial-gradient(52rem 42rem at 92% 94%, #0c1c4a, transparent 55%),
        linear-gradient(135deg, #122e6e 0%, #0b1838 60%, #0d2058 100%);
}
.siaga-auth::before, .siaga-auth::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0;
}
.siaga-auth::before { width: 34rem; height: 34rem; top: -10rem; right: -6rem; background: radial-gradient(circle, rgba(240, 169, 28, .45), transparent 70%); }
.siaga-auth::after  { width: 30rem; height: 30rem; bottom: -12rem; left: -8rem; background: radial-gradient(circle, rgba(219, 28, 12, .34), transparent 70%); }

/* form glass card */
.siaga-auth-card {
    max-width: 460px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 1.5rem;
    box-shadow: 0 44px 100px -34px rgba(0, 0, 0, .6);
}
/* input with leading icon */
.siaga-input-ico { display: block; }
.siaga-input-ico > i:first-child {
    position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
    color: #9aa6b8; font-size: 1.2rem; z-index: 2; pointer-events: none;
}
.siaga-input-ico .form-control { padding-left: 2.9rem; }
.siaga-captcha-img { background: #fff; min-width: 118px; display: flex; align-items: center; justify-content: center; }
.siaga-captcha-img img { max-height: 38px; }

/* illustration side */
.siaga-auth-illu { position: relative; z-index: 1; }
.siaga-illu-stage { position: relative; width: 100%; max-width: 27rem; margin: 1.5rem auto; }
.siaga-illu-card {
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-radius: 1.3rem; box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .6); padding: 1.5rem 1.6rem;
}
.siaga-illu-muted { font-size: .8rem; color: rgba(255, 255, 255, .72); font-weight: 600; }
.siaga-illu-big { font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.siaga-illu-pill { display: inline-flex; align-items: center; gap: .2rem; background: rgba(22, 163, 74, .25); color: #9af5bd; border: 1px solid rgba(22, 163, 74, .4); border-radius: 2rem; padding: .25rem .6rem; font-weight: 700; font-size: .78rem; }
.siaga-illu-chart { display: block; }
.siaga-illu-badge {
    position: absolute; display: flex; align-items: center; gap: .6rem;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 1rem; padding: .65rem .85rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .55);
}
.siaga-illu-badge-1 { top: -1.6rem; right: -1.4rem; animation: siagaFloat 5s ease-in-out infinite; }
.siaga-illu-badge-2 { bottom: -1.8rem; left: -1.6rem; animation: siagaFloat 6s ease-in-out infinite reverse; }
.siaga-illu-ico { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.siaga-illu-ico.bg-gold { background: linear-gradient(135deg, #f0a91c, #f7b733); color: #0d2058; }
.siaga-illu-ico.bg-green { background: linear-gradient(135deg, #16a34a, #22c55e); }
.siaga-illu-bt { font-weight: 700; font-size: .85rem; }
.siaga-illu-bs { font-size: .72rem; color: rgba(255, 255, 255, .65); }
@keyframes siagaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .siaga-illu-badge { animation: none !important; } }

/* =============================================================================
   LOGIN — Option 2 (centered glass) + Option 3 (corporate) + preview switcher
   ============================================================================= */
/* Opt 2 */
.siaga-auth-card--center { max-width: 440px; width: 100%; position: relative; z-index: 2; }
.siaga-auth2-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); z-index: 1; }
.siaga-auth2-orb-1 { width: 13rem; height: 13rem; top: 9%; left: 9%; background: rgba(255, 255, 255, .05); }
.siaga-auth2-orb-2 { width: 9rem; height: 9rem; bottom: 12%; right: 11%; background: rgba(240, 169, 28, .10); }

/* Opt 3 */
.siaga-auth3 { min-height: 100vh; min-height: 100dvh; }
.siaga-auth3-brand {
    position: relative; overflow: hidden;
    background:
        radial-gradient(40rem 30rem at 82% 8%, #2a5cc0, transparent 55%),
        radial-gradient(34rem 26rem at 8% 102%, rgba(240, 169, 28, .16), transparent 60%),
        linear-gradient(160deg, #122e6e 0%, #0a1530 70%, #0d2058 100%);
}
.siaga-auth3-brand::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 22px 22px;
}
.siaga-auth3-form { background: #f5f8fc; }
[data-bs-theme="dark"] .siaga-auth3-form { background: #0b1220; }
.siaga-feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.siaga-feat li { display: flex; align-items: center; gap: .85rem; font-weight: 600; font-size: 1.02rem; }
.siaga-feat li i {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: rgba(240, 169, 28, .16); color: #fadb5f; font-size: 1.25rem; flex-shrink: 0;
}

/* preview switcher */
.siaga-auth-switch {
    position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 1000;
    display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem;
    background: rgba(13, 21, 37, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 2rem; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
}
.siaga-auth-switch-label { color: rgba(255, 255, 255, .75); font-size: .76rem; font-weight: 700; padding: 0 .35rem; }
.siaga-auth-switch-btn {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none; background: rgba(255, 255, 255, .12); transition: all .15s;
}
.siaga-auth-switch-btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.siaga-auth-switch-btn.active { background: linear-gradient(135deg, #fadb5f, #f0a91c); color: #0d2058; box-shadow: 0 6px 14px -4px rgba(240, 169, 28, .6); }

/* =============================================================================
   LOGIN — illustration variants 2/3/4 (option-1 layout right panel)
   ============================================================================= */
/* Illu 2 — trust shield */
.siaga-shield-wrap { position: relative; width: 17rem; height: 17rem; margin: .5rem auto 0; display: flex; align-items: center; justify-content: center; }
.siaga-shield-wrap::before { content: ""; position: absolute; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, rgba(58, 107, 224, .6), transparent 70%); filter: blur(34px); }
.siaga-orbit { position: absolute; border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: 50%; }
.siaga-orbit-1 { inset: 0; }
.siaga-orbit-2 { inset: 2.6rem; border-style: dotted; }
.siaga-shield-svg { position: relative; z-index: 2; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4)); }
.siaga-shield-chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .24);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 2rem; padding: .4rem .8rem; font-weight: 700; font-size: .82rem; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
}
.siaga-shield-chip i { color: #fadb5f; }
.siaga-shield-chip-1 { top: 1rem; left: -1rem; animation: siagaFloat 5s ease-in-out infinite; }
.siaga-shield-chip-2 { bottom: 2.4rem; right: -1.4rem; animation: siagaFloat 6s ease-in-out infinite reverse; }
.siaga-shield-chip-3 { bottom: -.6rem; left: 3rem; animation: siagaFloat 5.5s ease-in-out infinite; }

/* Illu 3 — case flow */
.siaga-flow { position: relative; width: 100%; max-width: 23rem; margin: .5rem auto 0; display: flex; flex-direction: column; gap: .9rem; }
.siaga-flow::before { content: ""; position: absolute; left: 27px; top: 24px; bottom: 24px; width: 2px; background: rgba(255, 255, 255, .16); z-index: 0; }
.siaga-flow-item {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem; padding: .75rem 1rem; box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .5);
}
.siaga-flow-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.siaga-flow-t { font-weight: 700; font-size: .95rem; }
.siaga-flow-s { font-size: .76rem; color: rgba(255, 255, 255, .66); }

/* Illu 4 — stats grid */
.siaga-statgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; width: 100%; max-width: 25rem; margin: .5rem auto 0; }
.siaga-stat {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 1.1rem; padding: 1.1rem 1.2rem; box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .5);
}
.siaga-stat-ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
.siaga-stat-num { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.siaga-stat-lbl { font-size: .78rem; color: rgba(255, 255, 255, .7); font-weight: 600; margin-top: .25rem; }

/* =============================================================================
   LOGIN v2 — "SIAGA V2" reference: 2-column (form + illustration). SVG separated.
   ============================================================================= */
.siaga-login { min-height: 100vh; min-height: 100dvh; }
.siaga-login-grid { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100dvh; }

/* form side */
.siaga-login-form { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: #fff; }
.siaga-login-inner { width: 100%; max-width: 392px; }
.siaga-login-brand { margin-bottom: 30px; }
.siaga-login-brand img { height: 46px; }
.siaga-login-title { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.4px; color: #16223a; }
.siaga-login-sub { margin: 0 0 24px; color: #6b7a93; font-size: 14.5px; line-height: 1.5; }

.siaga-field-label { display: block; font-size: 12.5px; font-weight: 700; color: #5b6b86; margin: 14px 0 7px; }
.siaga-field {
    display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px;
    border: 1.5px solid #d8e0ee; border-radius: 10px; background: #f6f8fc;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.siaga-field:focus-within { border-color: #2f5ad6; background: #fff; box-shadow: 0 0 0 .22rem rgba(47, 90, 214, .15); }
.siaga-field-ico { color: #9aa6b8; flex: none; }
.siaga-field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 14.5px; color: #16223a; }
.siaga-field input::placeholder { color: #9aa6b8; }
.siaga-field.siaga-field-err { border-color: #db1c0c; }
.siaga-field-msg { color: #db1c0c; font-size: 12px; margin-top: 6px; }
.siaga-field-hint { color: #9aa6b8; font-size: 12px; margin-top: 7px; }
.siaga-field .siaga-pw-eye { position: static; transform: none; width: auto; height: auto; background: transparent; color: #9aa6b8; cursor: pointer; display: inline-flex; flex: none; }
.siaga-field .siaga-pw-eye:hover { color: #2f5ad6; background: transparent; }

/* captcha row */
.siaga-captcha-row { display: flex; gap: 10px; align-items: stretch; }
.siaga-captcha-code {
    display: flex; align-items: center; justify-content: center; width: 108px; height: 46px; flex: none;
    border-radius: 10px; background: linear-gradient(135deg, #dfe6f2, #eef2f9); border: 1px solid #e6ebf3; overflow: hidden;
}
.siaga-captcha-code img { max-height: 42px; max-width: 100%; }
.siaga-captcha-row .siaga-field-grow { flex: 1; }
.siaga-captcha-reload {
    width: 46px; height: 46px; flex: none; border: 0; border-radius: 10px; background: #eef2fc; color: #1f47a6;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.siaga-captcha-reload:hover { background: #e1e9fb; }

/* submit */
.siaga-login-btn {
    width: 100%; height: 48px; margin-top: 22px; border: 0; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2a5cc0, #163a86); color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 12px 24px -10px rgba(22, 53, 122, .6);
}
.siaga-login-btn:hover, .siaga-login-btn:focus, .siaga-login-btn:active { color: #fff; background: linear-gradient(135deg, #234fb0, #122e6e); }
.siaga-login-foot { margin: 22px 0 0; text-align: center; color: #9aa6b8; font-size: 12.5px; }

/* illustration side */
.siaga-login-illu {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 56px;
    background: linear-gradient(150deg, #15265f 0%, #1e3a8a 48%, #2747a8 100%);
}
.siaga-login-glow { position: absolute; top: -80px; right: -60px; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(241, 90, 36, .55), rgba(225, 29, 42, 0) 70%); }
.siaga-login-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .11); }
.siaga-login-ring-1 { bottom: -120px; left: -80px; width: 420px; height: 420px; }
.siaga-login-ring-2 { bottom: -60px; left: -40px; width: 300px; height: 300px; }
.siaga-login-illu-inner { position: relative; color: #fff; max-width: 480px; width: 100%; margin: auto; }
.siaga-login-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-size: 12.5px; font-weight: 700; letter-spacing: .4px; margin-bottom: 22px; }
.siaga-login-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ef0b0; box-shadow: 0 0 0 4px rgba(94, 240, 176, .2); }
.siaga-login-h2 { margin: 0 0 28px; font-size: 34px; line-height: 1.14; font-weight: 800; letter-spacing: -.8px; }

@media (max-width: 991.98px) {
    .siaga-login-grid { grid-template-columns: 1fr; }
    .siaga-login-illu { display: none; }
    .siaga-login-form { min-height: 100dvh; }
}

/* handshake illustration sizing (login illustration panel) */
.siaga-login-illu-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: .5rem auto 0; }

/* login illustration headline -> white (was inheriting --bs-heading-color) + subtitle */
.siaga-login-h2 { color: #fff !important; margin-bottom: 14px; }
.siaga-login-illu-sub { color: rgba(255, 255, 255, .78); font-size: 15px; line-height: 1.6; margin: 0 0 8px; max-width: 30rem; }

/* Cloudflare Turnstile widget spacing on login */
.siaga-turnstile { margin: 4px 0 2px; min-height: 65px; }

/* login: breathing room after the title now the subtitle is removed */
.siaga-login-title { margin-bottom: 22px; }

/* =============================================================================
   LOGIN — frosted-glass form card + symmetric Turnstile
   ============================================================================= */
.siaga-login-form {
    background:
        radial-gradient(42rem 32rem at 8% -5%, rgba(31, 71, 166, .08), transparent 60%),
        radial-gradient(38rem 30rem at 105% 105%, rgba(240, 169, 28, .07), transparent 60%),
        #eef2f9 !important;
}
.siaga-login-inner {
    max-width: 420px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(22px) saturate(165%); -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 22px;
    box-shadow: 0 30px 70px -30px rgba(16, 32, 80, .32), inset 0 1px 0 rgba(255, 255, 255, .6);
    padding: 40px 38px;
}
/* symmetric turnstile (flexible fills width; centred as fallback for normal size) */
.siaga-turnstile { display: flex; justify-content: center; margin: 4px 0 2px; min-height: 65px; }