/* AMES Core Design System DNA */

html {
    font-size: 90%;
}

:root {
    --primary: #C8102E;
    --primary-hover: #A50D26;
    --primary-light: rgba(200, 16, 46, 0.1);
    --brand-orange: #ED1C24;
    --header-gradient: linear-gradient(135deg, #C8102E 0%, #ED1C24 100%);
    --sidebar-gradient: linear-gradient(180deg, #C8102E 0%, #ED1C24 100%);
    --bg-app: #F9FAFB;
    --bg-card: #FFFFFF;
    --navy-main: #001A41; /* Navy Authority */
    --navy-light: rgba(0, 26, 65, 0.08);
    --navy-focus: rgba(0, 26, 65, 0.15);
    --text-main: #001A41; /* Deep Midnight Navy */
    --text-sub: #6B7280;
    --border-color: #E5E7EB;
    --success: #22C55E;
    --success-light: rgba(34, 197, 94, 0.1);
    --warning: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.1);
    --error: #EF4444;
    --error-light: rgba(239, 68, 68, 0.1);
    --sidebar-width: 216px;
    --sidebar-collapsed-width: 70px;
    /* Gap floating sidebar (kiri viewport & kanan sidebar) — nilai sama
       dengan offset vertikal (top:12px) supaya konsisten di 4 sisi. */
    --sidebar-gap: 12px;
}

.bg-soft-primary { background-color: var(--primary-light) !important; color: var(--primary); }
.bg-soft-danger { background-color: var(--error-light) !important; color: var(--error); }
.bg-soft-success { background-color: var(--success-light) !important; color: var(--success); }
.bg-soft-warning { background-color: var(--warning-light) !important; color: var(--warning); }
.bg-navy-soft { background-color: var(--navy-light) !important; color: var(--navy-main) !important; }
.bg-navy { background-color: var(--navy-main) !important; color: #FFFFFF !important; }
.bg-ames-primary { background-color: var(--primary) !important; color: #FFFFFF !important; }
.text-navy { color: var(--navy-main) !important; }
.border-navy { border-color: var(--navy-main) !important; }
.border-navy-subtle { border-color: var(--navy-focus) !important; }

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.card-header-accent h4,
.card-header-accent h5,
.card-header-accent h6 {
    border-left: 4px solid var(--primary);
    padding-left: 10px;
    margin-bottom: 0;
}

/* ============================================================
   AMES MODERN SIDEBAR OVERRIDES
   ============================================================ */

/* --- Smooth transition on sidebar width --- */
.pe-app-sidebar {
    transition: width 0.3s ease-in-out !important;
    overflow: hidden !important;
    /* Chrome aplikasi (header 1021 < overlay mobile 1025 < sidebar 1026 <
       tombol toggle 1027) sengaja DI BAWAH lapisan overlay Bootstrap:
       offcanvas-backdrop 1040, offcanvas 1045, modal-backdrop 1050, modal 1055.
       Nilai lama (sidebar 1050 / toggle 1060) membuat sidebar + tombolnya
       tetap menyala di atas backdrop saat offcanvas "Riwayat PTPP" dibuka —
       terlihat seperti sidebar ikut terbuka. Urutan relatif antar elemen
       chrome dipertahankan persis seperti sebelumnya. */
    z-index: 1026 !important;
    top: 12px !important;
    /* Sidebar berhenti DI ATAS footer (bukan cuma di atas viewport bottom) —
       tinggi footer aktual (var(--pe-app-footer-height), diukur 60px runtime)
       + 12px gap tambahan di antara ujung sidebar dan footer, supaya tidak
       overlap sama sekali. */
    height: calc(100vh - 12px - var(--pe-app-footer-height) - 12px) !important;
    /* Gap horizontal: sidebar diberi offset kiri sebesar --sidebar-gap (samakan
       dengan gap vertikal 12px), dan lebar panel dikurangi 2x gap supaya ada
       ruang kosong yang sama di kanan panel juga — bukan cuma kiri. --sidebar-width
       tetap dipakai apa adanya sebagai "lane" oleh .app-wrapper/.footer/.app-header
       (tidak berubah, tidak regresi), jadi ruang kanan otomatis terbentuk di
       antara tepi kanan panel (sidebar-width - gap) dan awal konten (sidebar-width). */
    left: var(--sidebar-gap) !important;
    width: calc(var(--sidebar-width) - (var(--sidebar-gap) * 2)) !important;
    /* border-radius 12px mengikuti token floating-panel yang sudah dipakai
       (.ames-slim-toast, .ames-swal-toast) — bukan 16px, biar konsisten. */
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
}

.pe-nav-link {
    padding: 10px 16px !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap;
    overflow: hidden;
}

/* --- Hover state: soft background highlight --- */
.pe-nav-link:hover:not(.active) {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
}

/* --- Active state: left border indicator + soft tint --- */
.pe-main-menu .pe-nav-link.active,
.pe-slide-menu .pe-nav-link.active {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    position: relative;
    border-left: 3px solid var(--primary);
    padding-left: 13px !important;
}

/* --- COLLAPSED (icon) mode --- */
[data-sidebar="icon"] .pe-app-sidebar {
    /* left tetap warisan dari .pe-app-sidebar (var(--sidebar-gap)) — hanya
       lebar panel yang menyusut, dikurangi gap yang sama seperti mode expanded. */
    width: calc(var(--sidebar-collapsed-width) - (var(--sidebar-gap) * 2)) !important;
}

/* Hide text labels, arrows, and titles in icon/collapsed mode */
[data-sidebar="icon"] .pe-nav-content,
[data-sidebar="icon"] .pe-nav-arrow,
[data-sidebar="icon"] .pe-menu-title {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Centre icons perfectly in collapsed mode */
[data-sidebar="icon"] .pe-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border-left: none !important;
}

/* Active state in collapsed mode: tinted square */
[data-sidebar="icon"] .pe-main-menu .pe-nav-link.active {
    border-left: none !important;
    padding: 12px !important;
}

/* Centre nav-icon */
[data-sidebar="icon"] .pe-nav-icon {
    margin: 0 !important;
    font-size: 1.2rem !important;
    display: block !important;
}

/* Hide dropdown submenus in collapsed mode */
[data-sidebar="icon"] .pe-slide-menu {
    display: none !important;
}

/* Default expanded mode: show nav-icon with margin */
.pe-nav-icon {
    font-size: 1.05rem;
    min-width: 20px;
    text-align: center;
}

/* --- Logo area consistency --- */
.pe-app-sidebar-logo {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap;
    height: 70px !important;
    transition: all 0.3s ease-in-out !important;
}

.logo-text {
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

[data-sidebar="icon"] .logo-text {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important; /* Move out of flow to ensure centering */
}

[data-sidebar="icon"] .pe-app-sidebar-logo {
    justify-content: center !important;
    padding: 0 !important;
}

/* Vendor punya rule [data-sidebar=icon] .pe-app-sidebar .pe-app-sidebar-logo
   { position:fixed; top:0; width:var(--pe-app-sidebar-sm-width) } — narik
   logo keluar dari flow sidebar (nempel viewport-top, bukan ikut top:12px
   milik .pe-app-sidebar), dan lebar vendor (84.8px) tidak sinkron dengan
   --sidebar-collapsed-width (70px) AMES. Kembalikan ke in-flow + lebar
   penuh sidebar collapsed aktual. */
[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
}

[data-sidebar="icon"] .pe-app-sidebar-logo a {
    margin: 0 auto !important;
    display: block !important;
    width: auto !important;
    padding: 0 !important;
}

[data-sidebar="icon"] .pe-app-sidebar-logo img {
    margin: 0 auto !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
}

/* --- Main content area: smooth shift to match sidebar --- */
.app-wrapper {
    transition: margin-left 0.3s ease-in-out, padding-left 0.3s ease-in-out, margin-inline-start 0.3s ease-in-out !important;
    padding-top: 10px !important;
    margin-inline-start: var(--sidebar-width) !important;
    /* Topbar global disembunyikan di desktop (tidak ada strip) → konten mulai dari
       atas, sejajar dengan logo sidebar. Offset 70px hanya di mobile (lihat @media). */
    margin-block-start: 0 !important;
}

[data-sidebar="icon"] .app-wrapper {
    margin-inline-start: var(--sidebar-collapsed-width) !important;
}

/* Footer ditarik keluar dari margin-inline-start .app-wrapper (negative
   margin) supaya full-width menembus area di bawah sidebar — sidebar sudah
   floating dengan gap 12px (Fase 1) jadi footer full-width akan tampak
   "melayang" di baliknya, bukan cuma mulai dari tepi kanan sidebar. */
.footer {
    margin-inline-start: calc(var(--sidebar-width) * -1) !important;
    width: calc(100% + var(--sidebar-width)) !important;
}

[data-sidebar="icon"] .footer {
    margin-inline-start: calc(var(--sidebar-collapsed-width) * -1) !important;
    width: calc(100% + var(--sidebar-collapsed-width)) !important;
}

/* min-height vendor (calc(100vh - header-height - footer-height)) diwarisi
   dari struktur lama saat footer masih SIBLING .app-wrapper (jadi floor-nya
   perlu sisakan ruang footer di LUAR dirinya sendiri). Sekarang footer sudah
   jadi flex-CHILD .app-wrapper — tinggi footer (60px) otomatis ikut terhitung
   sebagai bagian dari tinggi .app-wrapper sendiri, jadi kalau footer-height
   masih dikurangi dari floor, itu double-counting (floor jadi 60px terlalu
   rendah). Header-height juga sudah tidak relevan (topbar disembunyikan,
   margin-block-start:0). Floor yang benar = 100vh, titik. */
.app-wrapper {
    min-height: 100vh !important;
}

.app-header {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out !important;
}

/* ============================================================
   LUCIDE ICONS — Sizing & Flex Layout Fix (No Overlap)
   ============================================================ */

/* Lucide SVG rendered as SVG element — force correct size */
.pe-nav-icon svg,
i[data-lucide].pe-nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0;
    stroke-width: 1.75;
    position: static !important; /* remove any inherited position */
}

.pe-sub-icon svg,
i[data-lucide].pe-sub-icon svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-shrink: 0;
    stroke-width: 1.75;
    position: static !important;
    opacity: 0.75;
}

/* ---- CORE OVERLAP FIX: Flexbox for ALL nav links ---- */
.pe-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
}

/* Sub-menu items: flex + smaller indent */
.pe-slide-menu .pe-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 2.5rem !important;
}

/* Text label: shrinks but truncates cleanly */
.pe-nav-link > .pe-nav-content,
.pe-nav-link > span:not(.pe-nav-arrow):not(.badge) {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow stays pinned to the right */
.pe-nav-arrow {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Collapsed mode overrides */
[data-sidebar="icon"] .pe-nav-link {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

[data-sidebar="icon"] .pe-sub-icon {
    display: none !important;
}

/* =========================================
   SIDEBAR CLEANUP: Remove Default Bullets
   ========================================= */
.pe-slide-menu .pe-nav-link::before,
.pe-slide-menu .pe-nav-link::after,
.pe-slide-menu .pe-slide-item::before,
.pe-slide-menu .pe-slide-item::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

/* =========================================
   UI REFINEMENT: Custom Buttons & Elements
   ========================================= */

.btn-ames-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
}

.btn-ames-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #FFFFFF !important;
}

.btn-outline-ames-primary {
    background-color: transparent !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    transition: all 0.3s ease !important;
}

.btn-outline-ames-primary:hover {
    background-color: var(--primary) !important;
    color: #FFFFFF !important;
}

.text-ames-primary {
    color: var(--primary) !important;
}

/* Global Checkbox Sync */
input[type="checkbox"].custom-check-input, 
input[type="checkbox"] {
    accent-color: var(--navy-main) !important;
    cursor: pointer;
}

.custom-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #CBD5E1;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0;
    vertical-align: middle;
}

.custom-check-input:checked {
    background-color: var(--navy-main) !important;
    border-color: var(--navy-main) !important;
}

.custom-check-input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* =========================================================
   AMES PAGINATION SYSTEM v2 — The "Ames Circular" Protocol
   Source of truth for global pagination and DataTables.
   ========================================================= */
.pagination {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: none !important;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-link {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 10px !important; /* Squircle DNA */
    background-color: #F8FAFC !important;
    color: #001A41 !important; /* Midnight Navy */
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.pagination .page-item.active .page-link {
    background-color: #C8102E !important; /* Ames Crimson */
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(200, 16, 46, 0.2) !important;
}

.pagination .page-link:hover:not(.active) {
    background-color: #E2E8F0 !important;
    transform: translateY(-2px);
    color: #001A41 !important;
}

.pagination .page-item.disabled .page-link {
    background-color: #F9FAFB !important;
    color: #9CA3AF !important;
    opacity: 0.6;
}

/* Arrow Precision for Lucide icons */
.pagination .page-item:first-child .page-link, 
.pagination .page-item:last-child .page-link {
    font-size: 1.2rem !important;
}

.pagination .page-link svg, 
.pagination .page-link i[data-lucide] {
    width: 18px !important;
    height: 18px !important;
}

/* DataTables & Global Pagination Info — "Subtle Info" Protocol */
.dataTables_info,
.pagination-summary-text {
    margin-right: 2rem !important;
    color: var(--text-sub) !important; /* Muted Gray #6B7280 */
    font-weight: 400 !important;
    font-size: 0.85rem !important;
}

/* Ensure numbers/strong text inside info isn't too bold */
.dataTables_info strong,
.dataTables_info .fw-semibold,
.pagination-summary-text strong,
.pagination-summary-text .fw-semibold {
    font-weight: 600 !important;
    color: var(--text-sub) !important;
}

/* Theme Switcher Clean */
.theme-btn-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-sub) !important;
    font-size: 1.15rem !important;
    padding: 0.25rem 0.5rem !important;
    opacity: 0.7;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}
.theme-btn-clean:hover,
.theme-btn-clean.active {
    opacity: 1;
    color: var(--primary) !important;
    background: transparent !important;
}
.dark-mode-container-clean {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Header Clean Identity */
.app-header {
    background: #FFFFFF !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.app-header .header-icon,
.app-header .bi,
.app-header .ri-menu-2-line,
.app-header .text-body-emphasis,
.app-header h3 {
    color: var(--text-main) !important;
}

.app-header .header-profile-btn .fw-semibold {
    color: var(--text-main) !important;
}

.app-header .header-profile-btn .text-muted {
    color: var(--text-sub) !important;
}

/* =========================================
   USER-MENU DI DALAM x-page-header (partials/_user-menu)
   -----------------------------------------
   User-menu yang dipindah ke header konten berada DI LUAR .app-header, sehingga
   rule .app-header di atas + struktur vendor (.app-header .header-profile-btn di
   app.min.css) tidak berlaku. Blok ini me-mirror styling itu, di-scope ke
   .page-header (root <x-page-header>). Nilai DISALIN persis dari sumber lama:
     - warna teks: var(--text-main)/var(--text-sub)  → dari rule .app-header di atas
     - struktur pill+avatar: dari .app-header .header-profile-btn di app.min.css
   Tidak bentrok dgn versi lama: .page-header (86 view) & .app-header (16 view)
   adalah konteks yang saling eksklusif — di 86 view, user-menu global .app-header
   memang tidak dirender (di-suppress via flag), jadi rule .app-header tak match.
   ========================================= */
.page-header .header-profile-btn {
    display: flex;
    align-items: center;
    border: 1px solid var(--pe-border-color);
    border-radius: .75rem;
    height: 44px;
    padding: 6px;
}

.page-header .header-profile-btn .header-btn {
    background-color: transparent;
    border-color: transparent;
    height: 34px;
    width: 34px;
    /* Properti di bawah hilang dari mirror sebelumnya — disalin persis dari
       rule vendor .app-header .header-btn (app.min.css) supaya avatar/ikon
       benar-benar center dan tombol berbentuk lingkaran, bukan kotak. */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.page-header .header-profile-btn .fw-semibold {
    color: var(--text-main) !important;
}

.page-header .header-profile-btn .text-muted {
    color: var(--text-sub) !important;
}

/* Ikon dropdown item (View Profile / Sign Out) — samakan dgn .app-header .bi */
.page-header .dropdown-menu .bi {
    color: var(--text-main) !important;
}

/* =========================================
   SIDEBAR CLEAN IDENTITY
   ========================================= */

.pe-app-sidebar {
    background: #FFFFFF !important;
    border-right: 1px solid var(--border-color) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Teks Logo */
.pe-app-sidebar h3.text-body-emphasis {
    color: var(--text-main) !important;
}

/* Hide light logo, show dark logo */
.pe-app-sidebar .logo-dark {
    display: inline-block !important;
}
.pe-app-sidebar .logo-light {
    display: none !important;
}

/* Menu Titles (MAIN, DATA, AUDIT) */
.pe-app-sidebar .pe-menu-title {
    color: var(--text-sub) !important;
}

/* Nav Links - Inactive State */
.pe-app-sidebar .pe-nav-link {
    color: var(--text-sub) !important;
}
.pe-app-sidebar .pe-nav-link .pe-nav-icon,
.pe-app-sidebar .pe-nav-link .pe-sub-icon,
.pe-app-sidebar .pe-nav-link .pe-nav-arrow {
    color: var(--text-sub) !important;
}

/* Nav Links - Hover State */
.pe-app-sidebar .pe-nav-link:hover:not(.active) {
    background-color: var(--bg-app) !important;
    color: var(--text-main) !important;
}
.pe-app-sidebar .pe-nav-link:hover:not(.active) .pe-nav-icon,
.pe-app-sidebar .pe-nav-link:hover:not(.active) .pe-sub-icon,
.pe-app-sidebar .pe-nav-link:hover:not(.active) .pe-nav-arrow {
    color: var(--text-main) !important;
}

/* Nav Links - Active State */
.pe-app-sidebar .pe-main-menu .pe-nav-link.active,
.pe-app-sidebar .pe-slide-menu .pe-nav-link.active,
.pe-app-sidebar [data-sidebar="icon"] .pe-main-menu .pe-nav-link.active {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

.pe-app-sidebar .pe-nav-link.active .pe-nav-icon,
.pe-app-sidebar .pe-nav-link.active .pe-sub-icon,
.pe-app-sidebar .pe-nav-link.active .pe-nav-arrow {
    color: var(--primary) !important;
}

/* =========================================
   TYPOGRAPHY HIERARCHY (Midnight Navy)
   ========================================= */

h1, h2, h3, h4, h5, h6, th, td, .card-title {
    color: var(--text-main) !important;
}

small, .text-muted, .card-subtitle {
    color: var(--text-sub) !important;
}

::placeholder {
    color: var(--text-sub) !important;
    opacity: 0.8 !important;
}

/* Bootstrap menyembunyikan placeholder di dalam .form-floating
   (`.form-floating > .form-control::placeholder { color: transparent }`) karena
   perannya digantikan oleh <label> yang mengambang DI ATAS field. Rule
   `::placeholder` global di atas memakai !important sehingga menang atas rule
   Bootstrap itu — akibatnya placeholder DAN label tampil bersamaan dan saling
   bertumpuk (terlihat di textarea Why 1/2/3 pada form PTPP auditee).
   Dikembalikan ke transparan khusus di dalam .form-floating; spesifisitas lebih
   tinggi + !important supaya menang atas rule global di atas. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-select::placeholder {
    color: transparent !important;
    opacity: 1 !important;
}

/* =========================================
   MULTI-SELECT (LISTBOX) — SELECTION STATE
   -----------------------------------------
   <select multiple> memakai warna seleksi bawaan browser/OS (biru terang
   Highlight system) yang bentrok dengan palet navy/merah AMES — terlihat pada
   pemilihan Standar di modal Buat/Edit Skema Audit
   (master/standards/index.blade.php). Chrome & Safari mengabaikan
   `background-color` pada <option>, jadi warnanya dipaksa lewat
   `background-image: linear-gradient(...)` — teknik standar untuk kasus ini.
   `background-image: none` pada select-nya menghapus panah dropdown bawaan
   .form-select yang tidak relevan untuk listbox multiple.
   ========================================= */

select[multiple].form-select,
select[size].form-select {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

select[multiple].form-select option,
select[size].form-select option {
    padding: 6px 10px !important;
    border-radius: 6px !important;
}

select[multiple].form-select option:checked,
select[size].form-select option:checked {
    background: var(--navy-main) linear-gradient(0deg, var(--navy-main) 0%, var(--navy-main) 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* =========================================
   NAVY MIGRATION & ACTION LAYER OVERRIDES
   ========================================= */

.btn-outline-ames-navy {
    background-color: transparent !important;
    border: 1px solid var(--navy-main) !important;
    color: var(--navy-main) !important;
    transition: all 0.3s ease !important;
}

.btn-outline-ames-navy:hover {
    background-color: var(--navy-main) !important;
    color: #FFFFFF !important;
}

.btn-ames-navy {
    background-color: var(--navy-main) !important;
    border-color: var(--navy-main) !important;
    color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

.btn-ames-navy:hover {
    background-color: #000c1f !important; /* Deep Navy */
    border-color: #000c1f !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 26, 65, 0.2) !important;
}

.btn-ames-navy:focus, .btn-ames-navy:active {
    box-shadow: none !important;
    outline: 0 !important;
}

/* --- Clean-to-Solid Outline Protocol --- */
.btn-outline-ames-navy {
    background-color: transparent !important;
    border: 1.5px solid #001A41 !important;
    color: #001A41 !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.btn-outline-ames-navy:hover {
    background-color: #001A41 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 26, 65, 0.2) !important;
}

.btn-outline-ames-navy:focus, .btn-outline-ames-navy:active {
    box-shadow: none !important;
    outline: 0 !important;
}


.form-control, .form-select, .form-check-input, textarea {
    border-radius: 8px !important;
}

.form-select:focus, .form-control:focus, .form-check-input:focus, textarea:focus {
    border-color: #001A41 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 26, 65, 0.15) !important;
    outline: 0 !important;
}

/* --- Select Option Branding Protocol --- */
.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23001A41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
}

select option:checked,
select:focus > option:checked {
    background-color: #001A41 !important;
    background: #001A41 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px 100px #001A41 inset !important; /* The Option Shield */
    text-shadow: 0 0 0 #FFFFFF;
}

/* --- RCA Logic Connector Protocol --- */
.rca-line {
    position: absolute;
    left: -25px;
    top: -25px;
    width: 25px;
    height: 50px;
    border-left: 2px solid #cbd5e1 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    opacity: 0.5;
}

/* --- Activity Log UI Cleanup --- */
#offcanvasLog .offcanvas-body { border: none !important; }
#offcanvasLog .timeline { border-right: none !important; }
#offcanvasLog .bg-white.border { border: 1px solid #E5E7EB !important; }

/* --- Sidebar Navigation Standard --- */
.pe-nav-link {
    gap: 10px !important;
}

.pe-nav-icon, .pe-sub-icon {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.75 !important;
    color: #001A41 !important;
}

.pe-nav-arrow {
    width: 14px !important;
    height: 14px !important;
    stroke-width: 1.75 !important;
}

/* =========================================
   SIDEBAR TOGGLE BUTTON — Modern Style
   ========================================= */
.sidebar-toggle-modern {
    position: fixed !important;
    /* Nempel di tepi kanan panel sidebar aktual (bukan di batas lane
       var(--sidebar-width)) — tepi kanan panel sekarang lebih ke dalam
       sebesar --sidebar-gap karena gap horizontal Fase 2. */
    left: calc(var(--sidebar-width) - var(--sidebar-gap) - 14px) !important;
    /* 47px = 35px (kalibrasi lama, sidebar top:0) + 12px (offset floating
       sidebar Fase 1, top:12px) — supaya toggle ikut turun bareng sidebar. */
    top: 47px !important;
    transform: none !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 1px solid rgba(0, 26, 65, 0.15) !important;
    box-shadow: 0 2px 8px rgba(0, 26, 65, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    /* Lihat catatan z-index di .pe-app-sidebar — harus tetap tepat di atas
       sidebar, tapi di bawah backdrop offcanvas/modal dan SweetAlert2 (1060). */
    z-index: 1027 !important;
    transition: left 0.3s ease-in-out, background 0.2s ease !important;
}

[data-sidebar="icon"] .sidebar-toggle-modern {
    left: calc(var(--sidebar-collapsed-width) - var(--sidebar-gap) - 14px) !important;
}

.sidebar-toggle-modern:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 2px 12px rgba(200, 16, 46, 0.3) !important;
}

.sidebar-toggle-modern:hover svg {
    color: #fff !important;
    stroke: #fff !important;
}

.sidebar-toggle-modern .icon-open {
    display: block !important;
}
.sidebar-toggle-modern .icon-closed {
    display: none !important;
}

[data-sidebar="icon"] .sidebar-toggle-modern .icon-open {
    display: none !important;
}
[data-sidebar="icon"] .sidebar-toggle-modern .icon-closed {
    display: block !important;
}






/* --- Squircle Navy Button for Forms --- */
.btn-ames-navy-squircle {
    background-color: var(--navy-main) !important;
    border-color: var(--navy-main) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease !important;
}

.btn-ames-navy-squircle:hover {
    background-color: #00102b !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 26, 65, 0.2) !important;
}

/* --- Dropdown Selection Sync --- */
.form-select {
    cursor: pointer;
}
.form-select option:checked {
    background-color: var(--navy-main) !important;
    color: #FFFFFF !important;
}



/* =========================================
   BUTTON PROTOCOL: Slim-Long Pill
   ========================================= */
.btn-slim-long {
    padding: 8px 24px !important;
    font-size: 0.875rem !important; /* 14px */
    font-weight: 600 !important;
    border-radius: 50rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

.btn-slim-long:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(200, 16, 46, 0.2) !important;
}

.btn-outline-ames-navy {
    background-color: transparent !important;
    border: 1px solid var(--navy-main) !important;
    color: var(--navy-main) !important;
    transition: all 0.3s ease !important;
}

.btn-outline-ames-navy:hover {
    background-color: var(--navy-main) !important;
    color: #FFFFFF !important;
}

/* Purge Remaining Blues & Focus Shadows */
.btn-slim-long:focus,
.btn-outline-ames-navy:focus,
.btn-outline-ames-primary:focus {
    box-shadow: none !important;
    outline: none !important;
}

.btn-slim-long.btn-slim-compact {
    padding: 5px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.btn-toggle-view {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: none;
    background-color: rgba(0, 26, 65, 0.08);
    color: var(--navy-main);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.btn-toggle-view.active {
    background-color: var(--navy-main);
    color: #FFFFFF;
}
.btn-toggle-view:hover:not(.active) {
    background-color: rgba(0, 26, 65, 0.15);
}

/* Sidebar Navigation Question Button */
.question-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 26, 65, 0.1);
    background: #F9FAFB;
    color: #6B7280;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.question-btn:hover {
    background: #E5E7EB;
    color: #111827;
    transform: scale(1.05);
}
.question-btn.active-q {
    background: var(--navy-main) !important;
    color: #FFFFFF !important;
    border-color: var(--navy-main) !important;
    box-shadow: 0 4px 8px rgba(0, 26, 65, 0.2);
}
.question-btn.active-q:hover {
    transform: scale(1.08);
}
.question-btn.active-q::after {
    display: none;
}
.question-btn.done-q {
    background: #F0FDF4;
    border: 1.5px solid #86EFAC;
    color: #15803D;
    font-weight: 700;
}
.question-btn.done-q:hover {
    background: #DCFCE7;
    transform: scale(1.05);
}
.question-btn.done-q::after {
    display: none;
}

/* =========================================
   BUTTON PROTOCOL: Search & Reset Pair
   Search = Ghost-to-Solid Crimson Pill (36px)
   Reset  = Light Squircle (36x36px)
   Always use together in d-flex align-items-center gap-2
   ========================================= */
.btn-search-ames {
    height: 36px !important;             /* Lock height to match squircle standard */
    background-color: transparent !important;
    border: 1.5px solid var(--primary) !important; /* Crimson outline */
    color: var(--primary) !important;
    border-radius: 50rem !important;     /* Pill shape */
    padding: 4px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    cursor: pointer;
    line-height: 1 !important;           /* Prevent accidental height growth */
}
.btn-search-ames:hover {
    background-color: var(--primary) !important;  /* Solid Crimson on hover */
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.25) !important;
}
.btn-search-ames:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Reset Button — paired with .btn-search-ames */
.btn-reset-ames {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;      /* Squircle, matches table action buttons */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background-color: #F3F4F6 !important;
    color: #6B7280 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none !important;
}
.btn-reset-ames:hover {
    background-color: #E5E7EB !important;
    color: #374151 !important;
}
.btn-reset-ames:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Back Button — Squircle Style */
.btn-back-ames {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.btn-back-ames:hover {
    background: #F8FAFC;
    transform: translateX(-3px);
    border-color: var(--navy-main);
}

/* Global Pill-Button Protocol */
.btn {
    border-radius: 50rem !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: all 0.3s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Table & group action buttons — Rounded Square override */
.table .btn,
.btn-group .btn,
.btn-sm {
    border-radius: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 3px;
}

/* Theme buttons / large / custom pill — enforce pill shape for ALL btn-ames-* variants
   (sebelumnya cuma .btn-ames-primary yang pill, class tema lain jatuh ke radius default
   Bootstrap dan terlihat kotak — lihat docs/audit-log konsistensi tombol/popup) */
.btn-ames-primary,
.btn-outline-ames-primary,
.btn-ames-navy,
.btn-outline-ames-navy,
.btn-ames-crimson,
.btn-ames-success,
.btn-ames-neutral,
.btn-lg,
.btn-pill-custom {
    border-radius: 50rem !important;
}

/* Risk Level Badge — Soft Curve Override */
.badge-risk {
    border-radius: 8px !important;
    font-size: 0.72rem !important;
    padding: 3px 9px !important;
    font-weight: 600 !important;
}

/* Soft Tint badge variants — for Risk Level column */
.badge-risk.bg-danger  { background-color: rgba(220, 53, 69,  0.12) !important; color: #B02A37 !important; }
.badge-risk.bg-warning { background-color: rgba(255, 193, 7,  0.15) !important; color: #856404 !important; }
.badge-risk.bg-success { background-color: rgba(25,  135, 84, 0.12) !important; color: #146C43 !important; }
.badge-risk.bg-secondary { background-color: rgba(108, 117, 125, 0.12) !important; color: #4A5568 !important; }
.badge-risk.bg-primary { background-color: rgba(13, 110, 253, 0.10) !important; color: #0A58CA !important; }

/* Dot Indicator — for Status Respon column */
.dot-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #001A41;
}
.dot-indicator::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-indicator.dot-success::before { background-color: #198754; }
.dot-indicator.dot-danger::before  { background-color: #DC3545; }


/* =========================================================
   AMES ACTION BUTTON SYSTEM v2 — Global Table Squircle
   Source of truth for ALL table action buttons.
   DO NOT use btn-sm, btn-outline-*, or btn-group in tables.
   ========================================================= */

/* Base: shared geometry — all variants inherit this */
.btn-action-ames {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    flex-shrink: 0;
}

/* 1. Edit — Static Muted, scales on hover */
.btn-edit-ames {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    background-color: #F3F4F6 !important;
    color: #001A41 !important; /* Midnight Navy */
}
.btn-edit-ames:hover {
    background-color: #E5E7EB !important;
    transform: scale(1.05);
    color: #001A41 !important;
}

/* 2. Delete — Crimson Soft, fills on hover */
.btn-delete-ames {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    background-color: rgba(200, 16, 46, 0.08) !important;
    color: #C8102E !important; /* Ames Crimson */
}
.btn-delete-ames:hover {
    background-color: #C8102E !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
}

/* 3. View/Detail — Navy Soft, fills on hover */
.btn-view-ames {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    background-color: rgba(0, 26, 65, 0.08) !important;
    color: #001A41 !important; /* Midnight Navy */
}
.btn-view-ames:hover {
    background-color: #001A41 !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
}

/* Purge all focus rings on action buttons */
.btn-edit-ames:focus,
.btn-delete-ames:focus,
.btn-view-ames:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* ============================================================
   SIDEBAR & COLLAPSE FIXES (The Ghost-Free Protocol)
   ============================================================ */

/* 1. Force Text Contrast (White Background Sidebar) */
.pe-app-sidebar .pe-slide .pe-slide-menu .pe-nav-link {
    color: #001A41 !important; /* Midnight Navy */
    opacity: 0.8;
}

.pe-app-sidebar .pe-slide .pe-slide-menu .pe-nav-link:hover {
    opacity: 1;
    background: rgba(0, 26, 65, 0.05) !important; /* Soft Tint Hover */
}

/* 2. Fixing Collapse Overflow (Force display on .show) */
.collapse.show {
    visibility: visible !important;
    display: block !important;
    height: auto !important;
}

/* 3. Active State Indicator (Ames Crimson Line Only) */
.pe-main-menu .pe-nav-link.active,
.pe-slide-menu .pe-nav-link.active {
    background-color: var(--primary-light) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--primary) !important;
    padding-left: 13px !important;
    font-weight: 600 !important;
}


/* =========================================================
   AMES SLIM ELEGANT TOAST (The "Clean Logic" Protocol)
   Position: Bottom Right | Color: Midnight Navy
   ========================================================= */

.ames-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.ames-slim-toast {
    pointer-events: auto;
    background: #001A41 !important;
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 400px;
    animation: amesToastIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.ames-slim-toast .toast-icon {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ames-slim-toast .toast-icon i {
    font-size: 12px;
    color: #FFFFFF;
}

.ames-slim-toast .toast-text {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
}

.ames-slim-toast.exit {
    animation: amesToastOut 0.4s ease-in forwards !important;
}

@keyframes amesToastIn {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes amesToastOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* --- AmesNotify SweetAlert2 Toast Override --- */
.ames-swal-toast {
    background: #001A41 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,26,65,0.3) !important;
}
.ames-swal-toast .swal2-title {
    color: #ffffff !important;
    font-size: 0.9rem !important;
}
.ames-swal-toast .swal2-icon {
    border-color: rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
}
.ames-swal-toast .swal2-timer-progress-bar {
    background: rgba(255,255,255,0.4) !important;
}

/* --- Slim Tab Protocol --- */
.nav-tabs .nav-link, .nav-pills .nav-link {
    display: flex !important;
    flex-direction: row !important; /* Sejajarkan Ikon & Teks */
    align-items: center !important;
    gap: 8px !important; /* Beri jarak antara ikon dan judul */
    padding: 0.6rem 1.2rem !important; /* Rampingkan padding vertikal */
    transition: all 0.3s ease !important;
    border: none !important;
    color: #64748b !important; /* Slate color for inactive */
    background: transparent !important;
}

.nav-tabs .nav-link i, .nav-pills .nav-link i,
.nav-tabs .nav-link [data-lucide], .nav-pills .nav-link [data-lucide] {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.75 !important;
    margin-bottom: 0 !important; /* Remove legacy vertical bulk */
    display: inline-flex !important;
}

/* Active State Styles */
.nav-tabs .nav-link.active, .nav-pills .nav-link.active {
    color: #001A41 !important;
    font-weight: 700 !important;
    background: transparent !important;
    border-bottom: 2.5px solid #001A41 !important;
}

/* Hover State */
.nav-tabs .nav-link:hover:not(.active) {
    background: rgba(0, 26, 65, 0.04) !important;
    border-radius: 6px !important;
}

/* --- Pulse & Clone Protocol --- */
@keyframes ames-clone-slide {
    0% { transform: translate(0, 0); opacity: 1; }
    50% { transform: translate(3px, -3px); opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 1; }
}


/* Menghilangkan Biru saat Accordion Aktif/Fokus */
.accordion-button:not(.collapsed) {
    background-color: rgba(0, 26, 65, 0.05) !important; /* Soft Navy Background */
    color: #001A41 !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125) !important;
}


/* =========================================
   GLASS HEADER — Topbar & Sidebar Sync
   ========================================= */

/* Topbar glass effect */
.app-header {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 1px solid rgba(0, 26, 65, 0.08) !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: var(--sidebar-width) !important;
    /* Lihat catatan z-index di .pe-app-sidebar. 1021 = tepat di atas
       .sticky-top Bootstrap (1020), di bawah overlay mobile sidebar (1025). */
    z-index: 1021 !important;
    transition: left 0.3s ease-in-out !important;
    height: 70px !important;
    /* Desktop: topbar disembunyikan total (isinya hanya hamburger mobile).
       Elemen tetap ada di DOM untuk app.js/scroll handler; ditampilkan lagi
       < 768px via media query di bawah. */
    display: none !important;
    align-items: center !important;
}

/* Saat sidebar collapsed, topbar ikut menyesuaikan */
[data-sidebar="icon"] .app-header {
    left: var(--sidebar-collapsed-width) !important;
}


/* Efek Depth saat di-scroll */
.app-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 26, 65, 0.05) !important;
    background: rgba(255, 255, 255, 0.85) !important; /* Sedikit lebih solid saat jalan */
}

/* Mobile (< 768px): tampilkan kembali topbar untuk hamburger, dan beri offset
   70px pada konten agar tidak tertutup bar fixed. Batas 767.98px disamakan dengan
   `d-md-none` pada tombol hamburger supaya tidak ada bar kosong di 768–992px. */
@media (max-width: 767.98px) {
    .app-header {
        display: flex !important;
        align-items: center !important;
    }
    .app-wrapper {
        margin-block-start: 70px !important;
    }
}

/* =========================================================
   SELECT2 MIDNIGHT OVERRIDES (The "Midnight Select" Protocol)
   ========================================================= */

/* 1. Selection Highlight (The Blue Killer) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #001A41 !important; /* Midnight Navy Authority */
    color: #FFFFFF !important;
}

/* 2. Input Box & Focus State */
.select2-container--default .select2-selection--single {
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    height: 38px !important;
    padding-top: 4px !important;
    transition: all 0.2s ease !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #001A41 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 26, 65, 0.15) !important; /* Navy Focus Glow */
}

/* 3. Dropdown Search Field Styling */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 6px !important;
    border: 1px solid #E5E7EB !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #001A41 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 26, 65, 0.15) !important;
    outline: 0 !important;
}

/* Adjusting Arrow & Text Alignment */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
    color: #001A41 !important;
    padding-left: 12px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}





/* =========================================================
   SAFE-DELETE PROTOCOL UTILITIES
   ========================================================= */

.btn-ames-crimson {
    background-color: #C8102E !important;
    border-color: #C8102E !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.btn-ames-crimson:hover {
    background-color: #A50D26 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3) !important;
}

.btn-ames-success {
    background-color: var(--success-light) !important;
    border: 1px solid var(--success) !important;
    color: var(--success) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.btn-ames-success:hover {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}
.btn-ames-success:focus, .btn-ames-success:active {
    box-shadow: none !important;
    outline: 0 !important;
}

.btn-ames-neutral {
    background-color: #F3F4F6;
    color: #374151;
    border: 1px solid #D1D5DB;
    transition: all 0.2s ease;
}
.btn-ames-neutral:hover {
    background-color: #E5E7EB;
    color: #1F2937;
    border-color: #9CA3AF;
}
.btn-ames-neutral:focus,
.btn-ames-neutral:active {
    background-color: #E5E7EB;
    color: #1F2937;
    outline: none;
    box-shadow: none;
}

.delete-preview-box {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 1rem !important;
}

.text-warning-subtle {
    color: #EF4444 !important;
    opacity: 0.85;
    font-size: 0.875rem;
}

/* ===== Third-party: Flatpickr ===== */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
    background: var(--navy-main) !important;
    border-color: var(--navy-main) !important;
    color: #fff !important;
    border-radius: 50% !important;
    z-index: 2;
}

.flatpickr-day.inRange {
    background: rgba(0, 26, 65, 0.08) !important;
    border-radius: 8px !important;
    margin: 2px 1px !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--navy-main) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--navy-main) !important;
    font-weight: 700 !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 700 !important;
    color: var(--navy-main) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--navy-main) !important;
}

/* =========================================
   MOBILE RESPONSIVE SIDEBAR
   ========================================= */
@media (max-width: 992px) {
    /* Sidebar hidden by default on mobile */
    .pe-app-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        /* Floating look (gap horizontal+vertikal, rounded corner, shadow) khusus
           desktop — di mobile sidebar tetap overlay penuh edge-to-edge seperti
           semula (left:0, lebar penuh var(--sidebar-width), tanpa gap kanan). */
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: var(--sidebar-width) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Topbar full width on mobile */
    .app-header {
        left: 0 !important;
    }

    /* Content full width on mobile */
    .app-wrapper {
        margin-left: 0 !important;
    }

    /* Show sidebar when mobile-open class active.
       display wajib di-override: vendor app.min.css memasang
       .pe-app-sidebar{display:none} di @media (max-width:991.98px), dan tanpa
       ini transform di bawah jadi no-op (transform tidak berefek pada elemen
       display:none) — sidebar mobile tidak pernah muncul. block = display asli
       sidebar di desktop. */
    .sidebar-mobile-open .pe-app-sidebar {
        display: block !important;
        transform: translateX(0) !important;
    }

    /* Overlay when sidebar open on mobile */
    .sidebar-mobile-open::before {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        /* Lihat catatan z-index di .pe-app-sidebar — tetap di bawah sidebar
           (1026) supaya sidebar mobile tidak ikut tergelapkan. */
        z-index: 1025 !important;
    }
}

/* =========================================
   AMESv2 SIDEBAR LOCKUP (menggantikan logo lama)
   -----------------------------------------
   Selector di-scope ke `.pe-app-sidebar .pe-app-sidebar-logo` (spesifisitas
   0,3,x) agar MENANG atas warna/inheritance link default Bootstrap pada <a>
   tanpa mengandalkan !important pada tiap properti. Warna teks juga di-set
   LANGSUNG pada tiap span (bukan diwariskan dari <a>) supaya biru link tidak
   bocor ke wordmark/tagline.
   ========================================= */
.pe-app-sidebar .pe-app-sidebar-logo {
    padding-inline: 16px;
}

/* Anchor: reset warna link default + layout flex chip+teks */
.pe-app-sidebar .pe-app-sidebar-logo a.ames-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--navy-main);
    text-decoration: none;
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex: 0 0 40px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(200, 16, 46, 0.25);
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-icon i {
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    overflow: hidden;
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-word {
    font-weight: 800;
    font-size: 15px;
    color: var(--navy-main);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-word .ames-lockup-v2 {
    color: var(--primary);
}

.pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    margin-top: 1px;
    white-space: nowrap;
}

/* Collapsed (icon) mode — hanya shield, ter-center */
[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo,
[data-sidebar="icon"] .pe-app-sidebar-logo {
    padding-inline: 0;
}

[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo a.ames-lockup {
    /* !important di sini KHUSUS untuk menimpa legacy rule
       `[data-sidebar="icon"] .pe-app-sidebar-logo a { display:block !important }`
       (baris ~172) yang dibuat untuk logo <img> lama. */
    display: flex !important;
    justify-content: center;
    margin: 0 auto;
    width: auto;
    gap: 0;
}

[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-text {
    display: none;
}

[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 9px;
}

[data-sidebar="icon"] .pe-app-sidebar .pe-app-sidebar-logo .ames-lockup-icon i {
    font-size: 17px;
}