/* =====================================================================
   SIDASAWISMA — Tema "Navy & Emas" (2026)
   Biru tua elegan + aksen kuning keemasan, permukaan terang lembut,
   kaca buram (glass) pada topbar, sudut membulat, bayangan berlapis.
   Kelas Bootstrap "success" dipetakan ulang ke biru merek agar seragam.
   ===================================================================== */

:root {
    /* Merek */
    --navy-950: #071631;
    --navy-900: #0B1F44;
    --navy-800: #12305F;
    --blue-600: #1D4ED8;
    --blue-500: #2563EB;
    --blue-400: #3B82F6;
    --blue-50:  #EEF4FF;

    --gold-600: #B7862C;
    --gold-500: #D4A437;
    --gold-400: #E9C46A;
    --gold-300: #F4DB9B;
    --gold-50:  #FFF7E6;

    --gold-grad: linear-gradient(100deg, #B7862C 0%, #D4A437 38%, #F4DB9B 100%);
    --blue-grad: linear-gradient(135deg, #1D4ED8 0%, #2563EB 55%, #3B82F6 100%);
    --navy-grad: linear-gradient(180deg, #0B1F44 0%, #0E2752 55%, #071631 100%);

    /* Netral */
    --ink: #0F172A;
    --ink-soft: #55627A;
    --surface: #FFFFFF;
    --surface-2: #F6F8FC;
    --canvas: #F3F6FB;
    --line: #E6EAF2;

    /* Alias nama lama (kompatibilitas) */
    --gold-1: var(--gold-500); --gold-2: var(--gold-300); --gold-3: var(--gold-600);
    --sw-green: var(--blue-600); --sw-green-deep: var(--navy-900); --sw-green-soft: var(--blue-50);

    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .04);
    --shadow-md: 0 10px 30px -12px rgba(15, 35, 80, .18), 0 2px 6px rgba(15, 23, 42, .05);
    --ring: 0 0 0 .22rem rgba(212, 164, 55, .28);

    /* Bootstrap: "success" & "primary" = biru merek, "warning" = emas */
    --bs-primary: #2563EB;       --bs-primary-rgb: 37, 99, 235;
    --bs-success: #1D4ED8;       --bs-success-rgb: 29, 78, 216;
    --bs-warning: #D4A437;       --bs-warning-rgb: 212, 164, 55;
    --bs-success-text-emphasis: #12305F;
    --bs-success-bg-subtle: #EEF4FF;
    --bs-success-border-subtle: #C7D7FE;
    --bs-link-color: #1D4ED8;    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #12305F;
    --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-border-radius: 12px;
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    letter-spacing: -0.01em;
    background:
        radial-gradient(900px 420px at 100% -10%, rgba(37, 99, 235, .07), transparent 60%),
        radial-gradient(700px 380px at 20% 110%, rgba(212, 164, 55, .08), transparent 60%),
        var(--canvas);
    background-attachment: fixed;
}

::selection { background: rgba(212, 164, 55, .35); }

/* ------------------------------------------------------------------ */
/* Layout                                                             */
/* ------------------------------------------------------------------ */
.app-wrapper { min-height: 100vh; }
.main-content { min-width: 0; background: transparent; }
main { background: transparent; }

/* Sidebar navy dengan kilau emas */
.sidebar {
    flex: 0 0 268px;          /* jangan ikut menyusut oleh konten lebar */
    width: 268px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    background: var(--navy-grad) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04), 8px 0 30px -18px rgba(7, 22, 49, .6);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100vh;
}
.sidebar::before {
    content: "";
    position: absolute; inset: -120px -80px auto auto;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 164, 55, .22), transparent 65%);
    pointer-events: none;
}
.sidebar-brand { position: relative; border-bottom: 1px solid rgba(233, 196, 106, .16) !important; }
.sidebar-brand i { color: var(--gold-400); filter: drop-shadow(0 2px 8px rgba(212, 164, 55, .45)); }
.sidebar-brand .fw-bold {
    letter-spacing: .04em;
    background: linear-gradient(90deg, #fff 30%, var(--gold-300));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sidebar-section {
    color: var(--gold-400);
    opacity: .8;
    font-size: .67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em;
    padding: 1.15rem .95rem .4rem;
}

.nav-link-custom {
    position: relative;
    display: flex; align-items: center; gap: .72rem;
    margin: 3px 10px; padding: .62rem .9rem;
    border-radius: 12px;
    color: rgba(226, 232, 245, .82);
    font-size: .92rem; font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}
.nav-link-custom i { font-size: 1.05rem; color: rgba(233, 196, 106, .85); transition: color .2s; }
.nav-link-custom:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(2px); }
.nav-link-custom:hover i { color: var(--gold-300); }
.nav-link-custom.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(212, 164, 55, .22), rgba(212, 164, 55, .06));
    box-shadow: inset 0 0 0 1px rgba(233, 196, 106, .22);
}
.nav-link-custom.active i { color: var(--gold-300); }
.nav-link-custom.active::before {
    content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
    width: 4px; border-radius: 4px; background: var(--gold-grad);
    box-shadow: 0 0 12px rgba(233, 196, 106, .7);
}

/* Topbar kaca buram + garis emas */
.topbar {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(230, 234, 242, .9) !important;
}
.topbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-500) 20%, var(--gold-300) 50%, var(--blue-400) 85%, transparent);
    opacity: .85;
}
.topbar h6 { color: var(--navy-900) !important; font-weight: 700; letter-spacing: -0.02em; }
.topbar .badge.text-bg-light {
    background: var(--gold-50) !important; color: var(--gold-600) !important;
    border: 1px solid var(--gold-300) !important;
    font-weight: 700; border-radius: 999px; padding: .42rem .8rem;
}

/* ------------------------------------------------------------------ */
/* Kartu                                                              */
/* ------------------------------------------------------------------ */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card-stat {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card-stat:hover { box-shadow: var(--shadow-md); border-color: #DCE3F0; }

.card-header {
    position: relative;
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--navy-900);
    font-weight: 700; letter-spacing: -0.01em;
    padding: .95rem 1.15rem;
}
.card-header::before {
    content: ""; position: absolute; left: 1.15rem; bottom: -1px;
    width: 46px; height: 3px; border-radius: 3px; background: var(--gold-grad);
}

.card-stat .icon-circle {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.icon-green { background: var(--blue-50); color: var(--blue-600); box-shadow: inset 0 0 0 1px #D6E2FF; }
.icon-gold  { background: var(--gold-50); color: var(--gold-600); box-shadow: inset 0 0 0 1px var(--gold-300); }
.card-stat .fs-4.fw-bold, .card-stat .fs-5.fw-bold { color: var(--navy-900); letter-spacing: -0.03em; }

/* ------------------------------------------------------------------ */
/* Tombol                                                             */
/* ------------------------------------------------------------------ */
.btn { border-radius: 12px; font-weight: 600; letter-spacing: -0.01em; transition: all .2s ease; }
.btn-success, .btn-primary {
    --bs-btn-color: #fff;
    background: var(--blue-grad); border: 0;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .7);
}
.btn-success:hover, .btn-success:focus, .btn-primary:hover, .btn-primary:focus {
    color: #fff; background: linear-gradient(135deg, #1E40AF, #1D4ED8 60%, #2563EB);
    transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .8);
}
.btn-outline-success, .btn-outline-primary {
    color: var(--blue-600); border-color: #BFD1FB; background: #fff;
}
.btn-outline-success:hover, .btn-outline-primary:hover { color: #fff; background: var(--blue-600); border-color: var(--blue-600); }
.btn-warning, .btn-gold {
    background: var(--gold-grad); border: 0; color: #3B2A06; font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(183, 134, 44, .8);
}
.btn-warning:hover, .btn-gold:hover { color: #2A1D03; filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline-warning { color: var(--gold-600); border-color: var(--gold-300); }
.btn-outline-warning:hover { background: var(--gold-500); border-color: var(--gold-500); color: #2A1D03; }
.btn-light { background: var(--surface-2); border-color: var(--line); }

a { color: var(--blue-600); }
a:hover { color: var(--navy-800); }
.text-success, .text-success-emphasis { color: var(--blue-600) !important; }
.text-warning { color: var(--gold-600) !important; }

/* ------------------------------------------------------------------ */
/* Tabel                                                              */
/* ------------------------------------------------------------------ */
.table { --bs-table-color: var(--ink); --bs-table-bg: transparent; }
.table > thead th {
    background: var(--surface-2);
    color: var(--ink-soft);
    font-size: .76rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.table > tbody td { vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: #F4F8FF; }

/* ------------------------------------------------------------------ */
/* Badge & status                                                     */
/* ------------------------------------------------------------------ */
.badge { border-radius: 999px; font-weight: 600; padding: .42em .8em; }
.text-bg-success { background: var(--blue-600) !important; color: #fff !important; }
.text-bg-warning { background: var(--gold-400) !important; color: #3B2A06 !important; }
.badge-draft         { background: #94A3B8; }
.badge-diajukan      { background: var(--blue-400); }
.badge-perbaikan     { background: #E11D48; }
.badge-terverifikasi { background: var(--blue-600); }
.badge-final         { background: var(--gold-grad); color: #3B2A06 !important; }

.bg-success-subtle { background: var(--blue-50) !important; }
.bg-warning-subtle { background: var(--gold-50) !important; }

/* ------------------------------------------------------------------ */
/* Form                                                               */
/* ------------------------------------------------------------------ */
.form-control, .form-select {
    border-radius: 12px; border-color: var(--line); background-color: #fff;
    padding: .56rem .85rem; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus { border-color: var(--gold-500); box-shadow: var(--ring); }
.form-check-input:checked { background-color: var(--blue-600); border-color: var(--blue-600); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--gold-500); }
.form-label { color: var(--ink-soft); }
.form-text { color: var(--ink-soft); }

.nav-tabs { border-bottom-color: var(--line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-radius: 12px 12px 0 0; color: var(--ink-soft); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--blue-600); background: var(--blue-50); }
.nav-tabs .nav-link.active { color: var(--navy-900); background: #fff; box-shadow: inset 0 -3px 0 var(--gold-500); }

.modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(7, 22, 49, .45); }
.modal-header { border-bottom-color: var(--line); }
.modal-footer { border-top-color: var(--line); }
.dropdown-menu { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown-item { border-radius: 10px; }
.dropdown-item:active { background: var(--blue-600); }

/* ------------------------------------------------------------------ */
/* Notifikasi                                                         */
/* ------------------------------------------------------------------ */
.alert { border-radius: 14px; border: 1px solid transparent; }
.alert-success { background: var(--blue-50); color: var(--navy-800); border-color: #D6E2FF; }
.alert-warning { background: var(--gold-50); color: #7A5712; border-color: var(--gold-300); }
.alert-danger  { background: #FFF1F2; color: #9F1239; border-color: #FECDD3; }
.alert-info    { background: #F0F9FF; color: #075985; border-color: #BAE6FD; }

/* ------------------------------------------------------------------ */
/* Halaman login                                                      */
/* ------------------------------------------------------------------ */
.auth-bg {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(700px 380px at 10% 0%, rgba(212, 164, 55, .28), transparent 60%),
        radial-gradient(800px 460px at 100% 100%, rgba(37, 99, 235, .35), transparent 60%),
        var(--navy-grad);
}
.auth-card {
    max-width: 440px; width: 100%;
    border: 1px solid rgba(255, 255, 255, .6); border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55);
    overflow: hidden;
}
.auth-card::before { content: ""; display: block; height: 4px; background: var(--gold-grad); }
.auth-brand-badge {
    width: 68px; height: 68px; margin: 0 auto; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    color: var(--gold-400); background: var(--navy-grad);
    box-shadow: 0 12px 26px -10px rgba(11, 31, 68, .8), inset 0 0 0 1px rgba(233, 196, 106, .35);
}

/* ------------------------------------------------------------------ */
/* Dashboard                                                          */
/* ------------------------------------------------------------------ */
.dash-greet h2 {
    font-size: 1.55rem; letter-spacing: -0.03em;
    background: linear-gradient(90deg, var(--navy-900), var(--blue-600));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.status-tile { height: 100%; padding: 1rem; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.status-label { display: flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.status-value { margin-top: .35rem; font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-900); }
.status-bar { height: 6px; margin-top: .7rem; border-radius: 6px; background: var(--line); overflow: hidden; }
.status-bar > span { display: block; height: 100%; border-radius: 6px; }

.page-title, h3, h4, h5 { letter-spacing: -0.02em; }

/* Plugin */
.select2-container--default .select2-selection--single { border-radius: 12px !important; border-color: var(--line) !important; height: auto !important; padding: .3rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--blue-600) !important; }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 10px; border: 1px solid var(--line); }
.page-item.active .page-link { background: var(--blue-600); border-color: var(--blue-600); }
.page-link { color: var(--blue-600); }

/* ------------------------------------------------------------------ */
/* Responsif & aksesibilitas                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .sidebar { position: fixed; left: 0; z-index: 1050; transform: translateX(-100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
    .sidebar.show { transform: translateX(0); }
}
:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =====================================================================
   MOBILE-FIRST — kenyamanan kader menginput lewat HP
   ===================================================================== */
.kartu-data { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-bottom: .7rem; overflow: hidden; box-shadow: var(--shadow-sm); }
.kartu-utama { display: block; padding: .9rem 1rem .75rem; color: inherit; text-decoration: none; cursor: pointer; }
.kartu-utama:active { background: var(--blue-50); }
.kartu-judul { font-weight: 700; color: var(--navy-900); font-size: 1.02rem; line-height: 1.3; }
.kartu-sub { color: var(--ink-soft); font-size: .84rem; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kartu-meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .5rem; font-size: .82rem; color: var(--ink-soft); }
.kartu-meta i { color: var(--gold-600); }
.kartu-aksi { display: flex; border-top: 1px solid var(--line); }
.kartu-aksi > * { flex: 1; border-radius: 0 !important; border: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-weight: 600; }
.kartu-aksi > * + * { border-left: 1px solid var(--line); }

.fab-tambah {
    position: fixed; right: 18px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40;
    width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: var(--blue-grad); color: #fff; font-size: 1.6rem; box-shadow: 0 14px 30px -10px rgba(29, 78, 216, .75);
}
.fab-tambah:active { transform: scale(.95); color: #fff; }

.nav-bawah {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; justify-content: space-around; align-items: flex-end;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgba(15, 35, 80, .35);
}
.nav-bawah a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .35rem 0; color: var(--ink-soft); text-decoration: none; font-size: .72rem; font-weight: 600; }
.nav-bawah a i { font-size: 1.35rem; }
.nav-bawah a.aktif { color: var(--blue-600); }
.nav-bawah a.tengah i {
    width: 52px; height: 52px; margin-top: -26px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    background: var(--gold-grad); color: #3B2A06; font-size: 1.5rem; box-shadow: 0 10px 22px -8px rgba(183, 134, 44, .9);
}
.latar-menu { position: fixed; inset: 0; z-index: 1040; background: rgba(7, 22, 49, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
.latar-menu.show { opacity: 1; pointer-events: auto; }

@media (max-width: 767.98px) {
    body { font-size: 15px; }
    main.p-3 { padding: .85rem !important; }
    main.ada-nav-bawah { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
    .card-body { padding: .95rem; }
    .card-header { padding: .8rem .95rem; }
    .judul-halaman { font-size: .98rem; max-width: 62vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Input: 16px agar iPhone tidak memperbesar layar; area sentuh >= 44px */
    .form-control, .form-select, .form-control-sm, .form-select-sm, .input-group .btn { font-size: 16px !important; min-height: 46px; }
    textarea.form-control { min-height: 84px; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 40px; padding-left: .8rem; padding-right: .8rem; }
    .form-label { font-size: .86rem; margin-bottom: .3rem; }
    .form-check { padding: .55rem .75rem .55rem 2.2rem; border: 1px solid var(--line); border-radius: 12px; margin-bottom: .45rem; background: #fff; }
    .form-check-input { width: 1.3em; height: 1.3em; margin-top: .1em; }
    .form-check-label { font-size: .93rem !important; }

    /* Filter lanjutan dilipat; muncul saat tombol filter ditekan */
    #formFilter:not(.filter-terbuka) .filter-extra { display: none !important; }

    /* Tab dapat digeser ke samping, tidak bertumpuk */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: .6rem .85rem; }

    /* Aksi di halaman detail */
    .aksi-detail { align-items: stretch !important; }
    .aksi-detail > a { flex: 0 0 auto; }
    .aksi-tombol { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; }
    .aksi-tombol > .badge, .aksi-tombol > form { grid-column: span 2; }
    .aksi-tombol .btn, .aksi-tombol .badge, .aksi-tombol .btn-group { width: 100%; justify-content: center; }

    /* Tombol simpan menempel di bawah layar */
    .aksi-simpan {
        position: sticky; bottom: 0; z-index: 30; margin: 1rem -.95rem -.95rem; padding: .7rem .95rem calc(.7rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: flex; gap: .6rem;
    }
    .ada-nav-bawah .aksi-simpan { bottom: calc(64px + env(safe-area-inset-bottom)); }
    .aksi-simpan .btn { flex: 1; min-height: 48px; font-size: 1rem; }

    /* Modal layar penuh: header & tombol simpan tetap terlihat */
    .modal-fullscreen-md-down .modal-content, .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
    .modal-header { position: sticky; top: 0; z-index: 2; background: #fff; }
    .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px -16px rgba(15, 35, 80, .4); }
    .modal-footer .btn { flex: 1; min-height: 48px; }

    /* Tabel lain tetap bisa digeser di dalam kartunya, halaman tidak melebar */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table { font-size: .88rem; }
    .pagination .page-link { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; }
    .sidebar { width: 82vw; max-width: 300px; }
}