/* =================================================================
   Sistem Sensus RSKD Dadi — Custom Stylesheet
   Color palette:
     primary  : #0d6efd  (biru bootstrap)
     accent   : #20c997  (teal)
     sidebar  : #1a2942  (navy gelap)
     bg-soft  : #f4f7fb  (background lembut)
   ================================================================= */

:root {
    --rskd-primary: #0d6efd;
    --rskd-primary-dark: #0a58ca;
    --rskd-accent: #20c997;
    --rskd-sidebar-bg: #1a2942;
    --rskd-sidebar-bg-active: #243657;
    --rskd-sidebar-text: #b9c4d6;
    --rskd-sidebar-text-active: #ffffff;
    --rskd-content-bg: #f4f7fb;
    --rskd-card-shadow: 0 2px 8px rgba(15, 35, 75, 0.06);
    --rskd-card-shadow-hover: 0 6px 20px rgba(15, 35, 75, 0.1);
    --rskd-radius: 0.85rem;
    --rskd-transition: all 0.25s ease;
}

/* ===== Body / global ===== */
body.app-body {
    background-color: var(--rskd-content-bg);
    color: #2c3e50;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.925rem;
    min-height: 100vh;
}

/* REFACTOR: Fluid typography pakai clamp() — scale otomatis di 320px-2560px.
   Format: clamp(min, preferred, max). Preferred dipilih supaya naik linear
   antara breakpoint min & max viewport (320-1440px). */
.app-body h1, .app-body .h1 { font-size: clamp(1.5rem,  1.18rem + 1.0vw, 2rem); }
.app-body h2, .app-body .h2 { font-size: clamp(1.25rem, 1.02rem + 0.7vw, 1.6rem); }
.app-body h3, .app-body .h3 { font-size: clamp(1.1rem,  0.96rem + 0.45vw, 1.35rem); }
.app-body h4, .app-body .h4 { font-size: clamp(1rem,    0.91rem + 0.3vw, 1.2rem); }
.app-body h5, .app-body .h5 { font-size: clamp(0.95rem, 0.91rem + 0.13vw, 1.05rem); }
.app-body h6, .app-body .h6 { font-size: 0.95rem; }

/* ===== App layout ===== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 260px;
    transition: var(--rskd-transition);
    min-width: 0;
}

/* REFACTOR: untuk halaman tanpa sidebar (anonymous user / error page) */
.app-main.app-main-anon {
    margin-left: 0;
}

/* ===== Sidebar ===== */
.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background-color: var(--rskd-sidebar-bg);
    color: var(--rskd-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: var(--rskd-transition);
}

.sidebar-brand {
    padding: 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-link {
    display: flex;
    align-items: center;
    color: var(--rskd-sidebar-text-active);
    text-decoration: none;
    transition: var(--rskd-transition);
}

.brand-link:hover { color: var(--rskd-accent); }

.brand-icon {
    font-size: 1.75rem;
    color: var(--rskd-accent);
    margin-right: 0.75rem;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 700; font-size: 1rem; }
.brand-subtitle { font-size: 0.72rem; opacity: 0.7; }

.sidebar-close {
    background: transparent;
    border: 0;
    color: var(--rskd-sidebar-text);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* Sidebar nav */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0;
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.nav-list { list-style: none; padding: 0; margin: 0; }

.nav-section {
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1rem 1.5rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.nav-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0;
    white-space: nowrap;
}

.nav-section-badge i { font-size: 0.7em; }

.nav-item { padding: 0 0.75rem; }

.nav-link {
    display: flex !important;
    align-items: center;
    color: var(--rskd-sidebar-text);
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.15rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--rskd-transition);
}

.nav-link i {
    font-size: 1.1rem;
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--rskd-sidebar-text-active);
}

.nav-link.active {
    background-color: var(--rskd-sidebar-bg-active);
    color: var(--rskd-sidebar-text-active);
    box-shadow: inset 3px 0 0 var(--rskd-accent);
}

.sidebar-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.sidebar-footer .text-muted { color: rgba(255, 255, 255, 0.4) !important; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1029;
}
.sidebar-overlay.show { display: block; }

/* ===== Topbar ===== */
.app-topbar {
    background-color: #ffffff;
    height: 64px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-toggle {
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    color: #5a6c7d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.4rem;
    transition: var(--rskd-transition);
}

.topbar-toggle:hover { background-color: var(--rskd-content-bg); }

.topbar-title {
    flex: 1;
    padding: 0 1rem;
    color: #2c3e50;
    min-width: 0;  /* memungkinkan truncate di flex container */
}
/* REFACTOR Phase 7.5: topbar pakai <h1> (page heading utama untuk a11y).
   Visual size dijaga supaya layout tetap kompak. */
.topbar-title h1,
.topbar-title h6 {
    font-weight: 600;
    font-size: 1rem;  /* dioverride oleh clamp() di bawah */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    line-height: 1.4;
}

.user-menu-btn {
    color: #2c3e50 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.user-menu-btn:hover { color: var(--rskd-primary) !important; }

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rskd-primary), var(--rskd-accent));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 0.5rem;
}

.user-info { display: inline-flex; flex-direction: column; line-height: 1.2; text-align: left; margin-right: 0.25rem; }
.user-name { font-weight: 600; font-size: 0.875rem; }
.user-role { font-size: 0.7rem; color: #8492a6; }

/* ===== Content area ===== */
.app-content {
    flex: 1;
    /* REFACTOR: fluid padding — 1rem di mobile, 2rem di desktop besar */
    padding: clamp(1rem, 0.65rem + 1.5vw, 2rem);
}

.page-breadcrumb { margin-bottom: 1rem; }
.page-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    flex-wrap: nowrap;
    overflow: hidden;
}
.page-breadcrumb .breadcrumb-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.page-breadcrumb a { color: var(--rskd-primary); text-decoration: none; }

.page-heading { padding-bottom: 0.5rem; }
.page-title {
    font-weight: 600;
    color: #1a2942;
    margin-bottom: 0.25rem;
    font-size: 1.5rem;
}

/* ===== Footer ===== */
.app-footer {
    background-color: #ffffff;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #5a6c7d;
}

/* ===== Card ===== */
.card {
    border-radius: var(--rskd-radius);
    box-shadow: var(--rskd-card-shadow);
    transition: var(--rskd-transition);
}

.card:hover { box-shadow: var(--rskd-card-shadow-hover); }

.card-header {
    background: transparent;
    border-bottom: 1px solid #f0f3f7;
    padding: 1rem 1.25rem;
}

.card-header h6 { font-weight: 600; }

/* ===== Stat card ===== */
.stat-card .stat-label {
    color: #8492a6;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.stat-card .stat-value {
    font-weight: 700;
    color: #1a2942;
    /* REFACTOR: fluid — angka KPI 1.4rem mobile, 1.8rem desktop besar */
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
    margin: 0.25rem 0;
    line-height: 1.15;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.bg-primary-soft { background-color: rgba(13, 110, 253, 0.1); color: var(--rskd-primary); }
.bg-success-soft { background-color: rgba(32, 201, 151, 0.1); color: var(--rskd-accent); }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.12); color: #d39e00; }
.bg-info-soft    { background-color: rgba(13, 202, 240, 0.1);  color: #0aa2c0; }
.bg-danger-soft  { background-color: rgba(220, 53, 69, 0.1);   color: #dc3545; }

/* ===== Button ===== */
.btn {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: var(--rskd-transition);
}

.btn-primary {
    background-color: var(--rskd-primary);
    border-color: var(--rskd-primary);
}

.btn-primary:hover {
    background-color: var(--rskd-primary-dark);
    border-color: var(--rskd-primary-dark);
    transform: translateY(-1px);
}

.btn-success {
    background-color: var(--rskd-accent);
    border-color: var(--rskd-accent);
}

.btn-success:hover {
    background-color: #1ba37a;
    border-color: #1ba37a;
}

/* ===== Form ===== */
.form-control, .form-select {
    border-radius: 0.5rem;
    border-color: #dde3eb;
    padding: 0.6rem 0.875rem;
    font-size: 0.9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--rskd-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
}

.form-floating > label {
    color: #8492a6;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--rskd-primary);
}

/* ===== Quick actions ===== */
.quick-actions { display: flex; flex-direction: column; gap: 0.5rem; }

.quick-action-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--rskd-content-bg);
    color: #2c3e50;
    text-decoration: none;
    transition: var(--rskd-transition);
}

.quick-action-link:hover {
    background-color: rgba(13, 110, 253, 0.06);
    color: var(--rskd-primary);
    transform: translateX(3px);
}

.quick-action-link i {
    font-size: 1.5rem;
    color: var(--rskd-primary);
}

.quick-action-link strong { display: block; font-size: 0.9rem; }
.quick-action-link small { color: #8492a6; font-size: 0.78rem; }

/* ===== Empty state ===== */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.empty-state.empty-sm { padding: 1.25rem 1rem; }
.empty-state.empty-lg { padding: 2.5rem 1rem; }

.empty-icon {
    font-size: 3.25rem;
    color: #c1ccd9;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.empty-state.empty-sm .empty-icon { font-size: 2.25rem; }
.empty-state.empty-lg .empty-icon { font-size: 4rem; }

.empty-icon-wrapper {
    background: var(--rskd-content-bg);
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Bg gradient ===== */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--rskd-primary) 0%, var(--rskd-accent) 100%);
}

.ruangan-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
}

/* ===== Model info ===== */
.model-info { padding: 0.5rem 0; }

.model-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.825rem;
    font-weight: 600;
}

/* ===== Error pages ===== */
.error-page {
    text-align: center;
    padding: 2rem 1rem;
}

.error-page .error-icon { font-size: 3.5rem; margin-bottom: 0.5rem; }
.error-page .error-code {
    font-size: 3rem;
    font-weight: 800;
    color: #1a2942;
    margin: 0.5rem 0;
}

/* Tabel yang flush dengan pinggir card (.card-body.p-0):
   beri padding ekstra di cell pertama & terakhir supaya konten tidak
   menempel ke tepi card. */
.card-body.p-0 .table > thead > tr > th:first-child,
.card-body.p-0 .table > tbody > tr > td:first-child,
.card-body.p-0 .table > tfoot > tr > th:first-child,
.card-body.p-0 .table > tfoot > tr > td:first-child {
    padding-left: 1.25rem;
}
.card-body.p-0 .table > thead > tr > th:last-child,
.card-body.p-0 .table > tbody > tr > td:last-child,
.card-body.p-0 .table > tfoot > tr > th:last-child,
.card-body.p-0 .table > tfoot > tr > td:last-child {
    padding-right: 1.25rem;
}

/* ===== DataTables override ===== */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--rskd-primary) !important;
    color: white !important;
    border-color: var(--rskd-primary) !important;
}

table.dataTable thead th { font-weight: 600; color: #1a2942; }

/* Sort indicator override:
   DataTables 1.13 default menumpuk panah ▲ + ▼ di kolom belum-sorted,
   sehingga terlihat seperti permata "♦". Kita ganti dengan single chevron
   yang lebih bersih & dekat dengan teks header. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    position: relative;
    padding-right: 1.75rem !important;
    cursor: pointer;
}

/* Matikan pseudo default DataTables (panah dobel) */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead th.sorting_asc_disabled::before,
table.dataTable thead th.sorting_asc_disabled::after,
table.dataTable thead th.sorting_desc_disabled::before,
table.dataTable thead th.sorting_desc_disabled::after {
    content: '' !important;
    display: none !important;
}

/* Re-enable hanya satu pseudo per state, pakai Unicode triangle
   (BLACK UP-POINTING SMALL TRIANGLE / DOWN — render konsisten di semua font) */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    display: inline-block !important;
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    line-height: 1;
}

/* Unsorted: ⇅ (up-down arrow), samar */
table.dataTable thead th.sorting::after {
    content: "\21C5" !important;
    opacity: 0.3;
    font-size: 0.95em;
}
/* Ascending: ▲ */
table.dataTable thead th.sorting_asc::after {
    content: "\25B2" !important;
    color: var(--rskd-primary);
}
/* Descending: ▼ */
table.dataTable thead th.sorting_desc::after {
    content: "\25BC" !important;
    color: var(--rskd-primary);
}

/* ===================================================================
   LOGIN PAGE — refined visual identity
   =================================================================== */
body.login-body {
    background:
        radial-gradient(ellipse at top left,  #e7eef9 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, #e8f6f1 0%, transparent 50%),
        linear-gradient(135deg, #f4f7fb 0%, #eef2f9 100%);
    min-height: 100vh;
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

.login-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ===== Branding side (kiri) ===== */
.login-brand-side {
    flex: 1;
    background: linear-gradient(135deg, #0a1d3a 0%, #1a2942 35%, #0d56c7 75%, #20c997 130%);
    color: white;
    padding: 3rem 3.5rem;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Subtle glow layer */
.login-brand-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 18% 25%, rgba(255,255,255,0.08) 0%, transparent 35%),
        radial-gradient(circle at 82% 78%, rgba(32,201,151,0.20) 0%, transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(13,110,253,0.30) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Decorative floating blobs */
.brand-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    animation: brandFloat 14s ease-in-out infinite;
}

.brand-blob-1 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, #20c997, transparent 70%);
    top: -80px; right: -80px;
    animation-delay: 0s;
}
.brand-blob-2 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #4ea1ff, transparent 70%);
    bottom: -60px; left: -60px;
    animation-delay: -4s;
}
.brand-blob-3 {
    width: 180px; height: 180px;
    background: radial-gradient(circle, #ffffff66, transparent 70%);
    top: 45%; right: 35%;
    opacity: 0.25;
    animation-delay: -8s;
    animation-duration: 18s;
}

@keyframes brandFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, -25px) scale(1.05); }
    66%      { transform: translate(-15px, 20px) scale(0.95); }
}

.brand-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 100%;
    animation: fadeSlideRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.brand-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.brand-name {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #d8ecff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.brand-tagline {
    font-size: 1.05rem;
    opacity: 0.85;
    margin-bottom: 2.5rem;
    line-height: 1.5;
    max-width: 90%;
}

.brand-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.07);
    padding: 1rem 1.25rem;
    border-radius: 0.85rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    animation: fadeSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.4s + var(--delay, 0s));
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
    border-color: rgba(32, 201, 151, 0.4);
}

.feature-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 0.6rem;
    background: rgba(32, 201, 151, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #5dffc6;
}

.feature-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.feature-text small {
    opacity: 0.75;
    font-size: 0.8rem;
    line-height: 1.4;
}

.brand-footer {
    margin-top: 2.5rem;
    opacity: 0.55;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Form side (kanan) ===== */
.login-form-side {
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

/* Decorative shapes di form side untuk depth */
.form-decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.form-decoration-1 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(13,110,253,0.06), transparent 70%);
    top: -100px; right: -100px;
}
.form-decoration-2 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(32,201,151,0.08), transparent 70%);
    bottom: -50px; left: -80px;
}

.login-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    background: white;
    padding: 2.5rem 2.25rem;
    border-radius: 1.1rem;
    box-shadow:
        0 1px 2px rgba(15, 35, 75, 0.04),
        0 12px 40px rgba(15, 35, 75, 0.08);
    border: 1px solid rgba(15, 35, 75, 0.04);
    animation: fadeSlideLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeSlideLeft {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.login-header {
    text-align: center;
    margin-bottom: 1.85rem;
}

.login-logo {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rskd-primary) 0%, var(--rskd-accent) 100%);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin: 0 auto 1.1rem;
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.28);
    position: relative;
}

.login-logo::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--rskd-primary), var(--rskd-accent));
    opacity: 0.18;
    z-index: -1;
    filter: blur(8px);
}

.login-header h3 {
    font-weight: 700;
    color: #1a2942;
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.login-header p {
    font-size: 0.9rem;
    margin: 0;
}

/* Animasi staggered untuk input fields */
.input-anim {
    animation: fadeSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(0.25s + var(--delay, 0s));
}

.login-form .form-control {
    padding-top: 1.4rem;
    padding-bottom: 0.5rem;
    height: calc(3.5rem + 2px);
    border: 1.5px solid #e3e8f0;
    background: #fafbfd;
    transition: all 0.2s ease;
}

.login-form .form-control:hover:not(:focus) {
    border-color: #c8d3e2;
    background: #ffffff;
}

.login-form .form-control:focus {
    background: #ffffff;
    border-color: var(--rskd-primary);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.login-form .form-control.is-invalid {
    border-color: #dc3545;
    background: #fff5f5;
}

.login-form .form-floating > label {
    padding-left: 0.875rem;
    color: #8492a6;
    font-weight: 500;
}

.login-form .form-floating > label i {
    margin-right: 0.4rem;
    font-size: 0.92em;
}

.password-wrapper { position: relative; }

.password-toggle {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #8492a6;
    cursor: pointer;
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    transition: all 0.2s ease;
    z-index: 5;
}

.password-toggle:hover {
    color: var(--rskd-primary);
    background: rgba(13, 110, 253, 0.08);
}

.btn-login {
    background: linear-gradient(135deg, var(--rskd-primary) 0%, var(--rskd-primary-dark) 100%);
    border: 0;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.95rem 1rem;
    border-radius: 0.7rem;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.btn-login::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-login:hover {
    box-shadow: 0 10px 28px rgba(13, 110, 253, 0.42);
    transform: translateY(-2px);
}

.btn-login:hover::before {
    transform: translateX(100%);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login i {
    transition: transform 0.3s ease;
}

.btn-login:hover i {
    transform: translateX(3px);
}

/* Footer di card */
.login-card-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f3f7;
    text-align: center;
}

.login-card-footer i {
    color: var(--rskd-accent);
    margin-right: 0.25rem;
}

/* Footer mobile */
.login-mobile-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: #8492a6;
}

/* Alert di card login */
.login-card .alert {
    border-radius: 0.6rem;
    border: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.login-card .alert-danger { background: #fff0f0; color: #c92a2a; }
.login-card .alert-warning { background: #fff8e6; color: #b67d00; }
.login-card .alert-success { background: #e8f8f1; color: #0f7d52; }
.login-card .alert-info { background: #e8f3ff; color: #1c6cd9; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* Chart container — constrain canvas height supaya tidak meledak ke
   atas/bawah saat viewport berubah (Chart.js responsive akan resize
   sesuai container parent). */
.card-body canvas {
    max-width: 100% !important;
    max-height: 320px;
}

/* ===================================================================
   REFACTOR — RESPONSIVE BREAKPOINT
   Strategi sidebar:
     - ≤767.98px (mobile)         : sidebar overlay (hidden by default, .show toggle)
     - 768-991.98px (tablet land.) : sidebar mini 72px icon-only — selalu tampil
     - ≥992px (desktop)           : sidebar full 260px
   Breakpoint mengikuti Bootstrap (sm:576, md:768, lg:992, xl:1200, xxl:1400)
   =================================================================== */

/* ===== Mobile (≤767.98px) — sidebar overlay, app-main full width ===== */
@media (max-width: 767.98px) {
    .app-sidebar {
        transform: translateX(-100%);
        width: min(280px, 85vw);  /* tidak melebihi viewport */
    }
    .app-sidebar.show {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }
    .app-main {
        margin-left: 0;
    }

    /* Topbar lebih ringkas */
    .app-topbar { padding: 0 1rem; }
    .topbar-title { padding: 0 0.5rem; }

    /* Breadcrumb: truncate panjang */
    .page-breadcrumb .breadcrumb-item { max-width: 140px; }

    /* Card-body lebih padat di mobile */
    .card-body { padding: 1rem; }

    /* Canvas chart bounded height */
    .card-body canvas { max-height: 260px; }

    /* App-footer stack */
    .app-footer { flex-direction: column; gap: 0.25rem; text-align: center; }
}

/* ===== Tablet portrait & landscape (768-991.98px) — sidebar mini 72px =====
   Default: mini (icon only). Expand penuh saat:
     - mouse hover (desktop dengan mouse)
     - focus-within (keyboard nav)
     - .show class (manual toggle via topbar button untuk touchscreen)
*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .app-sidebar {
        width: 72px;
        overflow: hidden;
    }
    .app-sidebar:hover,
    .app-sidebar:focus-within,
    .app-sidebar.show {
        width: 260px;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.12);
        overflow: visible;
    }

    /* Mini mode: sembunyikan teks, sisakan icon */
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .brand-text,
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .nav-link span,
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .nav-section-badge,
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .sidebar-footer,
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .sidebar-close {
        display: none;
    }
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .sidebar-brand { justify-content: center; padding: 1rem 0; }
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .nav-section {
        padding: 0.75rem 0;
        font-size: 0;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .nav-link {
        padding: 0.65rem !important;
        justify-content: center;
    }
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .nav-link i {
        margin-right: 0;
        font-size: 1.25rem;
    }
    .app-sidebar:not(:hover):not(:focus-within):not(.show) .brand-icon { margin-right: 0; }

    .app-main {
        margin-left: 72px;
    }

    /* Topbar toggle tetap visible untuk touchscreen tablet — manual expand */
    .topbar-toggle { display: inline-flex; }
}

/* ===== Topbar title size: clamp untuk seluruh viewport ===== */
.topbar-title h1,
.topbar-title h6 {
    font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
}

/* ===== Login card responsive ===== */
@media (max-width: 991.98px) {
    .login-form-side { flex: 1; padding: 1.5rem; }
    .login-card { padding: 2rem 1.5rem; }
    .login-header { margin-bottom: 1.5rem; }
    .brand-name { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); }
}

@media (max-width: 575.98px) {
    .login-card {
        padding: 1.75rem 1.25rem;
        border-radius: 0.95rem;
    }
    .login-logo { width: 54px; height: 54px; font-size: 1.65rem; }
    .login-header h3 { font-size: 1.3rem; }
}

/* ===== Desktop besar (≥1400px) — sidebar sedikit lebih lebar untuk ruang lega ===== */
@media (min-width: 1400px) {
    .app-sidebar { width: 280px; }
    .app-main { margin-left: 280px; }
}

/* ===== Ultra-wide (≥1920px) — batasi lebar konten supaya tidak terlalu lebar ===== */
@media (min-width: 1920px) {
    .app-content {
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
    }
}

/* ===================================================================
   LIST PAGES & TABLES
   =================================================================== */

/* Pill kode (mis. PJI-01) */
.kode-pill {
    background: #eef3fa;
    color: #2c3e50;
    padding: 0.18rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #dde6f1;
}

/* Avatar mini (di tabel user) */
.avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rskd-primary), var(--rskd-accent));
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* DataTables tweak — kasih horizontal padding pada baris control (length menu,
   search, info, pagination) supaya tidak menempel ke pinggir card saat tabel
   dipasang dalam .card-body.p-0 */
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child {
    padding: 0.5rem 1rem;
}

.dataTables_filter input,
.dataTables_length select {
    border-radius: 0.4rem !important;
    border: 1px solid #dde3eb !important;
}

.dataTables_filter input {
    padding: 0.35rem 0.65rem !important;
}

/* Select butuh padding kanan lebih besar untuk menampung panah dropdown
   bawaan Bootstrap (background-image SVG). Tanpa ini, angka di select
   akan tertumpuk panah. */
.dataTables_length select {
    padding: 0.35rem 2rem 0.35rem 0.65rem !important;
    min-width: 4.5rem;
}

table.dataTable.table-hover tbody tr:hover {
    background-color: #f8fbff;
}

table.dataTable.table-hover tbody tr {
    transition: background-color 0.15s ease;
}

/* Action buttons di tabel */
table.dataTable td .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}

table.dataTable td .btn-sm + .btn-sm {
    margin-left: 0.15rem;
}

/* REFACTOR: utility .action-buttons — flex-wrap container untuk tombol aksi di
   tabel. Menggantikan tombol inline yang berdesakan di mobile, sekaligus
   menjamin touch target ≥ 36px desktop / ≥ 44px mobile (WCAG 2.5.5). */
.action-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.action-buttons .btn,
.action-buttons .badge {
    min-height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    /* Mobile: enforce WCAG touch target 44×44 untuk action buttons */
    .action-buttons .btn,
    .action-buttons .badge {
        min-height: 40px;
        min-width: 40px;
        padding: 0.4rem 0.6rem;
    }
}

/* Form control touch target di mobile — input/select Bootstrap default
   sudah ~38px, sm variant ~31px. Naikkan sm di mobile untuk gampang di-tap. */
@media (max-width: 575.98px) {
    .form-control-sm,
    .form-select-sm {
        min-height: 38px;
        font-size: 0.9rem;
    }
}

/* Badge dengan ikon */
.badge i {
    margin-right: 0.2rem;
    font-size: 0.85em;
}

/* REFACTOR: badge size variants — menggantikan inline style="font-size: 0.65rem" */
.badge-xs {
    font-size: 0.65rem !important;
    padding: 0.2em 0.45em;
}

/* ===== Modal ===== */
.modal-content {
    border: 0;
    border-radius: var(--rskd-radius);
    box-shadow: 0 20px 60px rgba(15, 35, 75, 0.18);
}

.modal-header {
    border-bottom: 1px solid #f0f3f7;
    padding: 1rem 1.5rem;
}

.modal-header .modal-title {
    font-weight: 600;
    color: #1a2942;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #f0f3f7;
    padding: 1rem 1.5rem;
}

/* Form label — konsisten di semua form (modal, page, filter card) */
.app-body .form-label {
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

/* Saat label di row 2-kolom punya panjang berbeda (salah satu wrap ke 2 baris),
   input/select/textarea tetap horizontal aligned. Caranya: kolom jadi flex
   column, dan input "stuck to bottom" via margin-top: auto. */
.app-body .row > [class*="col-"]:has(> .form-label) {
    display: flex;
    flex-direction: column;
}
.app-body .row > [class*="col-"]:has(> .form-label) > .form-control,
.app-body .row > [class*="col-"]:has(> .form-label) > .form-select,
.app-body .row > [class*="col-"]:has(> .form-label) > textarea,
.app-body .row > [class*="col-"]:has(> .form-label) > .input-group {
    margin-top: auto;
}

.app-body .form-text {
    font-size: 0.78rem;
}

/* ===== Form aesthetic =====
   Section title dengan divider tipis di sebelah kanan — pengelompokan visual
   yang jelas tapi tidak ramai. */
.form-section + .form-section {
    margin-top: 1.5rem;
}

.form-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: #8492a6;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.form-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ecf0f5;
}

/* Selection card pakai .btn-check + label.btn-outline-primary
   (mis. radio "Jenis Laporan"). Default Bootstrap warnanya solid biru →
   bikin visual berat. Soften jadi card style yang aktif kalau di-pilih. */
.btn-check + .btn-outline-primary {
    background-color: #ffffff;
    color: #5a6c7d;
    border-color: #e3e8ef;
    text-align: left;
    font-weight: 500;
    transition: var(--rskd-transition);
}
.btn-check + .btn-outline-primary:hover {
    background-color: #f4f7fb;
    border-color: #c7d2dd;
    color: var(--rskd-primary);
}
.btn-check + .btn-outline-primary i {
    margin-right: 0.4rem;
    opacity: 0.7;
}
.btn-check:checked + .btn-outline-primary {
    background-color: #eff5ff;
    color: var(--rskd-primary);
    border-color: var(--rskd-primary);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--rskd-primary) inset;
}
.btn-check:checked + .btn-outline-primary i {
    opacity: 1;
}

/* Quick preset chip — tombol kecil "7 hari", "30 hari", dst */
.preset-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.preset-chips .preset-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8492a6;
    font-weight: 600;
    margin-right: 0.25rem;
}
.preset-chips .btn {
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-padding-x: 0.7rem;
    --bs-btn-font-size: 0.78rem;
    border-radius: 999px;
    border-color: #e3e8ef;
    color: #5a6c7d;
    background-color: #ffffff;
}
.preset-chips .btn:hover {
    background-color: #f4f7fb;
    color: var(--rskd-primary);
    border-color: #c7d2dd;
}

/* REFACTOR: touch target di mobile — preset chip tombol jadi lebih besar */
@media (max-width: 575.98px) {
    .preset-chips {
        gap: 0.5rem;
    }
    .preset-chips .btn {
        --bs-btn-padding-y: 0.4rem;
        --bs-btn-padding-x: 0.85rem;
        min-height: 36px;
    }
    .preset-chips .preset-label {
        flex-basis: 100%;
        margin-bottom: 0.25rem;
    }
}

/* Form footer — tempat tombol submit/cancel di bawah form. Kasih jarak
   atas yang lebih lega supaya tidak terkesan menempel ke field terakhir. */
.form-footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f0f3f7;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.form-footer .form-footer-end {
    margin-left: auto;
}

/* Form switch */
.form-check-input:checked {
    background-color: var(--rskd-primary);
    border-color: var(--rskd-primary);
}

.form-switch .form-check-input {
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

/* ===================================================================
   UPLOAD ZONE (file picker)
   =================================================================== */
.upload-zone {
    border: 2px dashed #c1ccd9;
    border-radius: 0.6rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background-color: #fafbfd;
    cursor: pointer;
    transition: var(--rskd-transition);
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--rskd-primary);
    background-color: rgba(13, 110, 253, 0.04);
}

.upload-zone.drag-over {
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}

.upload-zone .upload-icon {
    font-size: 3rem;
    color: var(--rskd-primary);
    display: block;
    margin-bottom: 0.5rem;
}

.upload-zone input[type="file"] {
    cursor: pointer;
}

/* Soft danger background for table rows */
.table-danger-soft {
    background-color: #fff5f5 !important;
}

/* ===================================================================
   NAV PILLS (untuk tab mode di rekap sensus)
   =================================================================== */
.nav-pills .nav-link {
    color: #5a6c7d;
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    border-radius: 0.45rem;
    transition: var(--rskd-transition);
}

.nav-pills .nav-link:hover {
    background-color: rgba(13, 110, 253, 0.06);
    color: var(--rskd-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--rskd-primary);
    color: white;
}

.nav-pills .nav-link i {
    margin-right: 0.3rem;
}

/* ===================================================================
   LAPORAN — preview & print styles
   =================================================================== */
.report-body {
    background-color: #e8edf3;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a2942;
}

.report-toolbar {
    background-color: #ffffff;
    border-bottom: 1px solid #dde3eb;
    padding: 0.65rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.report-page {
    background-color: #ffffff;
    max-width: 21cm;
    min-height: 29.7cm;
    margin: 1.5rem auto;
    padding: 1.8cm 2cm;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* === Kop surat === */
.report-header { margin-bottom: 1.25rem; }

.kop-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kop-logo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--rskd-primary), var(--rskd-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    flex-shrink: 0;
}

.kop-text { flex: 1; line-height: 1.3; }
.kop-title { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
.kop-subtitle { font-size: 1rem; font-weight: 600; color: #2c3e50; }
.kop-address { color: #5a6c7d; margin-top: 0.2rem; }

.kop-divider {
    border: 0;
    border-top: 3px double #1a2942;
    margin: 0.65rem 0 0;
}

/* === Title block === */
.report-title-block {
    text-align: center;
    margin: 1.5rem 0 1.25rem;
}

.report-title {
    font-weight: 700;
    text-decoration: underline;
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
}

.report-subtitle { font-size: 0.95rem; }
.report-filter { margin-top: 0.4rem; }

/* === Summary grid === */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 1.25rem 0;
    border: 1px solid #dde3eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.summary-cell {
    padding: 0.75rem 1rem;
    text-align: center;
    border-right: 1px solid #f0f3f7;
    border-bottom: 1px solid #f0f3f7;
    background-color: #fafbfd;
    display: flex;
    flex-direction: column;
}

.summary-cell:nth-child(3n) { border-right: 0; }
.summary-cell:nth-last-child(-n+3) { border-bottom: 0; }

.summary-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #5a6c7d;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.summary-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--rskd-primary);
    margin-top: 0.15rem;
}

/* === Tabel laporan === */
.report-table-wrapper { margin: 1.5rem 0; }

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.report-table th,
.report-table td {
    padding: 0.45rem 0.65rem;
    border: 1px solid #aab3c0;
}

.report-table thead th {
    background-color: #1a2942;
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 0.85rem;
}

.report-table tbody tr:nth-child(even) {
    background-color: #f7f9fc;
}

.report-table tbody tr.row-empty {
    color: #b1bbc8;
}

.report-table tfoot tr.row-total {
    background-color: #eef3fa;
    font-weight: 700;
    color: #1a2942;
}

.report-table .text-center { text-align: center; }

/* === Tanda tangan === */
.report-signature {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
}

.sig-block {
    text-align: center;
    line-height: 1.5;
    min-width: 280px;
}

.sig-space { height: 4rem; }
.sig-name { font-weight: 600; }

.report-footer {
    margin-top: 2rem;
    padding-top: 0.85rem;
    border-top: 1px solid #dde3eb;
    text-align: center;
}

/* ===================================================================
   PRINT MEDIA QUERY
   =================================================================== */
@media print {
    .no-print { display: none !important; }

    body, .report-body {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-page {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 1.5cm 1.8cm !important;
        max-width: 100% !important;
        min-height: auto !important;
    }

    /* Cegah memotong elemen di tengah halaman */
    .report-table, .summary-grid, .report-signature {
        page-break-inside: avoid;
    }

    .report-table thead { display: table-header-group; }
    .report-table tfoot { display: table-footer-group; }

    .summary-cell { background: #fafbfd !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .report-table thead th { background: #1a2942 !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .kop-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    @page {
        size: A4 portrait;
        margin: 1cm;
    }
}

/* ===================================================================
   FEATURE LIST (modul ML)
   =================================================================== */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed #f0f3f7;
    line-height: 1.4;
}

.feature-list li:last-child {
    border-bottom: 0;
}

.feature-list code {
    color: var(--rskd-primary);
    font-weight: 600;
    background: rgba(13, 110, 253, 0.06);
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.78rem;
    margin-right: 0.4rem;
}

/* ===================================================================
   HEATMAP KORELASI
   =================================================================== */
.heatmap {
    font-size: 0.7rem;
    table-layout: fixed;
    /* REFACTOR: min-width memastikan cell tetap terbaca di mobile,
       container parent (.table-responsive) akan scroll horizontal. */
    min-width: max-content;
}

.heatmap th,
.heatmap td {
    padding: 0.25rem 0.3rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #e9ecef !important;
    min-width: 56px;
}

.heatmap-cell {
    font-weight: 500;
    color: #1a2942;
    white-space: nowrap;
}

.heatmap th.rotate {
    height: 100px;
    width: 40px;
    white-space: nowrap;
    vertical-align: bottom;
    padding: 0.25rem 0.1rem;
    background: #f8f9fa;
}

.heatmap th.rotate > div {
    transform: translate(8px, -8px) rotate(-60deg);
    width: 20px;
    overflow: visible;
}

.heatmap th.rotate > div > span {
    font-size: 0.7rem;
    font-weight: 600;
    color: #2c3e50;
}

.heatmap thead tr th:first-child { background: #f8f9fa; }
.heatmap tbody th { background: #f8f9fa; padding-right: 0.5rem; font-weight: 500; }

.legend-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border-radius: 2px;
    margin-right: 0.25rem;
    border: 1px solid #ddd;
}

/* ===================================================================
   MODEL CARD (training page)
   =================================================================== */
.model-list { display: flex; flex-direction: column; gap: 0.75rem; }

.model-card {
    border: 1px solid #e9ecef;
    border-radius: 0.6rem;
    padding: 1rem 1.15rem;
    transition: var(--rskd-transition);
    background-color: #ffffff;
}

.model-card:hover {
    border-color: var(--rskd-primary);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
}

.model-card.active {
    border-color: var(--rskd-accent);
    background-color: rgba(32, 201, 151, 0.04);
    box-shadow: inset 4px 0 0 var(--rskd-accent);
}

.model-card h6 a {
    color: #1a2942;
    font-weight: 600;
}

.model-card h6 a:hover { color: var(--rskd-primary); }

/* Metrics row */
.metrics-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.metric-pill {
    display: inline-flex;
    flex-direction: column;
    padding: 0.35rem 0.65rem;
    background-color: #f4f7fb;
    border-radius: 0.4rem;
    border: 1px solid #e9ecef;
    line-height: 1.1;
    min-width: 70px;
}

.metric-pill .metric-label {
    font-size: 0.65rem;
    color: #8492a6;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.metric-pill .metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a2942;
}

.metric-pill.good { border-color: #20c997; background-color: rgba(32, 201, 151, 0.1); }
.metric-pill.good .metric-value { color: #1ba37a; }

.metric-pill.ok { border-color: #ffc107; background-color: rgba(255, 193, 7, 0.1); }
.metric-pill.ok .metric-value { color: #d39e00; }

.metric-pill.poor { border-color: #dc3545; background-color: rgba(220, 53, 69, 0.08); }
.metric-pill.poor .metric-value { color: #dc3545; }

/* R² card di detail page */
.r2-card.r2-good { background: linear-gradient(135deg, #ffffff 0%, rgba(32,201,151,0.08) 100%); }
.r2-card.r2-good .stat-value { color: #1ba37a; }

.r2-card.r2-ok { background: linear-gradient(135deg, #ffffff 0%, rgba(255,193,7,0.08) 100%); }
.r2-card.r2-ok .stat-value { color: #d39e00; }

.r2-card.r2-poor { background: linear-gradient(135deg, #ffffff 0%, rgba(220,53,69,0.06) 100%); }
.r2-card.r2-poor .stat-value { color: #dc3545; }

/* Visualization images */
.viz-img {
    max-width: 100%;
    border-radius: 0.4rem;
    border: 1px solid #f0f3f7;
}

/* REFACTOR: variant tall — untuk sample tree visualization yang vertikal */
.viz-img-tall {
    max-height: clamp(320px, 50vh, 600px);
    width: auto;
}

/* REFACTOR: scrollable pane utility — menggantikan inline style="max-height:Xpx; overflow-y:auto" */
.scroll-pane {
    max-height: clamp(300px, 60vh, 500px);
    overflow-y: auto;
}

/* REFACTOR: min-w-0 utility — perlu untuk flex item supaya text-truncate child bekerja */
.min-w-0 {
    min-width: 0;
}

/* ===== Animasi ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-content > * { animation: fadeInUp 0.35s ease-out; }

/* ===================================================================
   REFACTOR — A11y & Modern UX
   =================================================================== */

/* :focus-visible — fokus ring jelas untuk keyboard nav, tapi tidak muncul
   untuk klik mouse. Kontras WCAG AA terhadap background terang. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
a:focus-visible {
    outline: 2px solid var(--rskd-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15);
}

/* Sidebar gelap → fokus ring lebih terang supaya kontras */
.app-sidebar .nav-link:focus-visible,
.app-sidebar .brand-link:focus-visible {
    outline: 2px solid #ffd54f;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(255, 213, 79, 0.25);
}

/* Skip-to-content link — muncul saat di-focus via keyboard Tab */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 1100;
    background: var(--rskd-primary);
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 1rem;
    color: white;
    text-decoration: none;
}

/* prefers-reduced-motion — disable animasi & transisi untuk user yang prefer */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .app-content > * { animation: none; }
}

/* 100dvh fallback — iOS Safari memotong 100vh karena address bar.
   100dvh = dynamic viewport height (modern, support 92%+). */
@supports (height: 100dvh) {
    body.app-body { min-height: 100dvh; }
    .app-wrapper { min-height: 100dvh; }
    .app-sidebar { bottom: 0; height: 100dvh; }
}

/* ===================================================================
   REFACTOR — Toast container responsive
   - Desktop (≥576px): tetap top-right (Bootstrap default via class)
   - Mobile (<576px) : pindah ke bottom full-width supaya tidak menutupi
     topbar / sidebar toggle dan lebih natural untuk thumb reach
   =================================================================== */
@media (max-width: 575.98px) {
    .toast-container.position-fixed {
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        padding: 0.75rem !important;
        width: 100%;
    }
    .toast-container .toast {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* ===================================================================
   REFACTOR — Form filter row utility
   Default semua field full-width di mobile, 2-kolom di sm, layout asal
   (col-md-N) di md+. Mengganti pattern `col-md-3 col-md-3 col-md-3 col-md-3`
   yang rapat di tablet portrait.
   =================================================================== */
.form-filter-row {
    --filter-gap: 0.75rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--filter-gap);
    align-items: end;
}

@media (min-width: 576px) {
    .form-filter-row { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .form-filter-row {
        /* Auto-fit dengan minimum 160px supaya kolom tidak terlalu rapat */
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

/* Tombol di action area filter: rentangkan full-width di mobile, normal di sm+ */
.form-filter-row .filter-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.form-filter-row .filter-actions .btn {
    flex: 1 1 auto;
    min-height: 38px;
}

@media (min-width: 576px) {
    .form-filter-row .filter-actions .btn { flex: 0 1 auto; }
}

/* ===================================================================
   REFACTOR — Text truncate utility helper
   Bootstrap punya .text-truncate tapi membutuhkan parent width fix.
   .truncate-2 / truncate-3 = line-clamp untuk content multi-line.
   =================================================================== */
.truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* ===================================================================
   REFACTOR — Responsive table strategy
   .table-responsive-stack : kolom dgn class .col-hide-md disembunyikan
     di mobile, tetap muncul di ≥768px.
   .col-hide-md : helper untuk sembunyikan kolom secondary di mobile.
   .col-hide-sm : sembunyikan di <576px saja.
   =================================================================== */
@media (max-width: 767.98px) {
    .col-hide-md { display: none !important; }
}

@media (max-width: 575.98px) {
    .col-hide-sm { display: none !important; }
}

/* Modal: paksa fullscreen di mobile untuk modal yang punya class helper.
   Bootstrap punya .modal-fullscreen-sm-down — kita tambah variant -md-down
   supaya semua modal CRUD di tablet portrait jadi fullscreen (lebih lega) */
.modal-fullscreen-md-down {
}
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down .modal-dialog {
        max-width: 100%;
        margin: 0;
        height: 100%;
    }
    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto;
    }
}