/*
 * HCM Suite — Design System
 *
 * Identitas visual: MBD Corp (PT Maju Bersama Digitalindo, mbdcorp.id) —
 * biru MBD, navy, slate, dan aksen kuning #BersamaBertumbuh.
 * Struktur token, skala tipografi/spacing, komponen, dan aturan governance
 * tetap mewarisi MBD ERP (prefix --hcm-*). Semua warna di Blade WAJIB lewat token ini.
 */

/* ========== 1. TOKENS (LIGHT) ========== */
:root {
    /* Palet brand MBD Corp */
    --hcm-brand-blue: #1559ed;
    --hcm-brand-blue-bright: #2872fa;
    --hcm-brand-navy: #11377b;
    --hcm-brand-navy-deep: #192a3d;
    --hcm-brand-slate: #3a4f66;
    --hcm-brand-yellow: #f8d54b;

    --hcm-color-bg: #f2f5f7;
    --hcm-color-surface: #ffffff;
    --hcm-color-surface-elevated: #ffffff;
    --hcm-color-surface-secondary: #fafbfc;
    --hcm-color-border: #e1e8ed;
    --hcm-color-border-hover: #c5cbd0;
    --hcm-color-border-strong: #8a9aab;

    --hcm-color-text-primary: #192a3d;
    --hcm-color-text-secondary: #3a4f66;
    --hcm-color-text-muted: #5b6b7d;
    --hcm-color-text-disabled: #8a9aab;
    --hcm-color-text-inverse: #ffffff;

    --hcm-color-primary: #1559ed;
    --hcm-color-primary-rgb: 21, 89, 237;
    --hcm-color-primary-hover: #11377b;
    --hcm-color-primary-text: #1559ed;
    --hcm-color-primary-subtle: #eaf1fe;
    --hcm-color-primary-border: #bcd2fc;

    /* Aksen kuning MBD: highlight & sorotan, bukan status */
    --hcm-color-accent: #f8d54b;
    --hcm-color-accent-text: #192a3d;
    --hcm-color-accent-subtle: #fff6d6;

    --hcm-color-secondary: #3a4f66;
    --hcm-color-secondary-rgb: 58, 79, 102;
    --hcm-color-secondary-subtle: #f2f5f7;

    --hcm-color-success: #059669;
    --hcm-color-success-rgb: 5, 150, 105;
    --hcm-color-success-subtle: #ecfdf5;
    --hcm-color-success-border: #6ee7b7;

    --hcm-color-warning: #b45309;
    --hcm-color-warning-rgb: 180, 83, 9;
    --hcm-color-warning-subtle: #fffbeb;
    --hcm-color-warning-border: #fcd34d;

    --hcm-color-danger: #dc2626;
    --hcm-color-danger-rgb: 220, 38, 38;
    --hcm-color-danger-subtle: #fef2f2;
    --hcm-color-danger-border: #fca5a5;

    --hcm-color-info: #0e7490;
    --hcm-color-info-rgb: 14, 116, 144;
    --hcm-color-info-subtle: #ecfeff;
    --hcm-color-info-border: #67e8f9;

    --hcm-color-focus-ring: rgba(21, 89, 237, 0.35);

    /* Sidebar navy MBD di kedua tema */
    --hcm-sidebar-bg: #11377b;
    --hcm-sidebar-bg-active: rgba(255, 255, 255, 0.12);
    --hcm-sidebar-bg-hover: rgba(255, 255, 255, 0.07);
    --hcm-sidebar-text: #c9d6ee;
    --hcm-sidebar-text-active: #ffffff;
    --hcm-sidebar-accent: #f8d54b;
    --hcm-sidebar-group: #8fa6d1;
    --hcm-sidebar-divider: rgba(255, 255, 255, 0.14);
    --hcm-sidebar-width: 16.5rem;

    --hcm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hcm-font-size-display: 1.50rem;
    --hcm-font-size-h1: 1.35rem;
    --hcm-font-size-h2: 1.125rem;
    --hcm-font-size-h3: 1.00rem;
    --hcm-font-size-body: 0.875rem;
    --hcm-font-size-label: 0.8125rem;
    --hcm-font-size-caption: 0.75rem;
    --hcm-font-size-meta: 0.725rem;

    --hcm-space-1: 0.25rem;
    --hcm-space-2: 0.5rem;
    --hcm-space-3: 0.75rem;
    --hcm-space-4: 1rem;
    --hcm-space-5: 1.25rem;
    --hcm-space-6: 1.5rem;
    --hcm-space-8: 2rem;

    --hcm-radius-sm: 0.375rem;
    --hcm-radius-md: 0.5rem;
    --hcm-radius-lg: 0.75rem;
    --hcm-radius-xl: 1rem;
    --hcm-radius-pill: 9999px;

    --hcm-shadow-sm: 0 1px 2px 0 rgba(25, 42, 61, 0.06);
    --hcm-shadow-md: 0 4px 6px -1px rgba(25, 42, 61, 0.08), 0 2px 4px -2px rgba(25, 42, 61, 0.05);
    --hcm-shadow-lg: 0 10px 15px -3px rgba(25, 42, 61, 0.12), 0 4px 6px -4px rgba(25, 42, 61, 0.06);
}

/* ========== 2. TOKENS (DARK) ========== */
[data-bs-theme="dark"] {
    --hcm-color-bg: #0b1524;
    --hcm-color-surface: #111e31;
    --hcm-color-surface-elevated: #16263d;
    --hcm-color-surface-secondary: #16263d;
    --hcm-color-border: #22364f;
    --hcm-color-border-hover: #2f4866;
    --hcm-color-border-strong: #4a6385;

    --hcm-color-text-primary: #eef2f7;
    --hcm-color-text-secondary: #a9b8cb;
    --hcm-color-text-muted: #7f92aa;
    --hcm-color-text-disabled: #4a6385;

    /* Tombol tetap biru MBD; teks/link memakai biru terang agar kontras di latar gelap */
    --hcm-color-primary: #1559ed;
    --hcm-color-primary-rgb: 111, 160, 252;
    --hcm-color-primary-hover: #2872fa;
    --hcm-color-primary-text: #6fa0fc;
    --hcm-color-primary-subtle: rgba(40, 114, 250, 0.18);
    --hcm-color-primary-border: #1e4a9c;
    --hcm-color-accent-subtle: rgba(248, 213, 75, 0.16);
    --hcm-color-secondary-rgb: 169, 184, 203;
    --hcm-color-secondary-subtle: #16263d;
    --hcm-color-success: #10b981;
    --hcm-color-success-rgb: 16, 185, 129;
    --hcm-color-success-subtle: rgba(6, 78, 59, 0.45);
    --hcm-color-success-border: #065f46;
    --hcm-color-warning: #f59e0b;
    --hcm-color-warning-rgb: 245, 158, 11;
    --hcm-color-warning-subtle: rgba(120, 53, 15, 0.45);
    --hcm-color-warning-border: #92400e;
    --hcm-color-danger: #f87171;
    --hcm-color-danger-rgb: 248, 113, 113;
    --hcm-color-danger-subtle: rgba(127, 29, 29, 0.45);
    --hcm-color-danger-border: #991b1b;
    --hcm-color-info: #22d3ee;
    --hcm-color-info-rgb: 34, 211, 238;
    --hcm-color-info-subtle: rgba(22, 78, 99, 0.45);
    --hcm-color-info-border: #155e75;
    --hcm-color-focus-ring: rgba(111, 160, 252, 0.45);

    --hcm-sidebar-bg: #0d2350;

    --hcm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --hcm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

/* ========== 3. PEMETAAN KE BOOTSTRAP 5 ========== */
:root,
[data-bs-theme="dark"] {
    --bs-font-sans-serif: var(--hcm-font-family);
    --bs-body-font-family: var(--hcm-font-family);
    --bs-body-font-size: var(--hcm-font-size-body);
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--hcm-color-bg);
    --bs-body-color: var(--hcm-color-text-primary);
    --bs-secondary-color: var(--hcm-color-text-secondary);
    --bs-tertiary-bg: var(--hcm-color-surface-secondary);
    --bs-border-color: var(--hcm-color-border);
    --bs-emphasis-color: var(--hcm-color-text-primary);

    --bs-primary: var(--hcm-color-primary);
    --bs-primary-rgb: var(--hcm-color-primary-rgb);
    --bs-primary-bg-subtle: var(--hcm-color-primary-subtle);
    --bs-primary-border-subtle: var(--hcm-color-primary-border);
    --bs-primary-text-emphasis: var(--hcm-color-primary-text);
    --bs-secondary-rgb: var(--hcm-color-secondary-rgb);
    --bs-secondary-bg-subtle: var(--hcm-color-secondary-subtle);
    --bs-secondary-border-subtle: var(--hcm-color-border);
    --bs-success: var(--hcm-color-success);
    --bs-success-rgb: var(--hcm-color-success-rgb);
    --bs-success-bg-subtle: var(--hcm-color-success-subtle);
    --bs-success-border-subtle: var(--hcm-color-success-border);
    --bs-warning: var(--hcm-color-warning);
    --bs-warning-rgb: var(--hcm-color-warning-rgb);
    --bs-warning-bg-subtle: var(--hcm-color-warning-subtle);
    --bs-warning-border-subtle: var(--hcm-color-warning-border);
    --bs-danger: var(--hcm-color-danger);
    --bs-danger-rgb: var(--hcm-color-danger-rgb);
    --bs-danger-bg-subtle: var(--hcm-color-danger-subtle);
    --bs-danger-border-subtle: var(--hcm-color-danger-border);
    --bs-info: var(--hcm-color-info);
    --bs-info-rgb: var(--hcm-color-info-rgb);
    --bs-info-bg-subtle: var(--hcm-color-info-subtle);
    --bs-info-border-subtle: var(--hcm-color-info-border);

    --bs-link-color: var(--hcm-color-primary-text);
    --bs-link-color-rgb: var(--hcm-color-primary-rgb);
    --bs-link-hover-color: var(--hcm-color-primary-text);
    --bs-focus-ring-color: var(--hcm-color-focus-ring);
    --bs-border-radius: var(--hcm-radius-md);
}

body {
    font-family: var(--hcm-font-family);
    font-size: var(--hcm-font-size-body);
    font-weight: 500;
    background: var(--hcm-color-bg);
    color: var(--hcm-color-text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ========== 4. TIPOGRAFI ========== */
.hcm-display { font-size: var(--hcm-font-size-display); font-weight: 800; }
h1, .h1, .hcm-page-title { font-size: var(--hcm-font-size-h1); font-weight: 800; letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--hcm-font-size-h2); font-weight: 700; }
h3, .h3 { font-size: var(--hcm-font-size-h3); font-weight: 700; }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--hcm-font-size-body); font-weight: 700; }
.small, small { font-size: var(--hcm-font-size-caption); }
.hcm-meta { font-size: var(--hcm-font-size-meta); font-weight: 500; color: var(--hcm-color-text-secondary); }
.hcm-page-pretitle {
    font-size: var(--hcm-font-size-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hcm-color-text-muted);
    margin-bottom: var(--hcm-space-1);
}
.text-secondary { color: var(--hcm-color-text-secondary) !important; }

/* Nilai Rupiah: selalu 1 baris */
.hcm-money { white-space: nowrap !important; font-family: var(--bs-font-monospace); font-weight: 700; }

/* ========== 5. AKSESIBILITAS ========== */
:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible {
    outline: 3px solid var(--hcm-color-focus-ring) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
.visually-hidden-focusable:focus { z-index: 2000; }

/* ========== 6. TOMBOL ========== */
.btn {
    font-size: var(--hcm-font-size-label);
    font-weight: 600;
    border-radius: var(--hcm-radius-md);
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hcm-space-1);
}
.btn-sm { min-height: 32px; }
.btn-primary {
    --bs-btn-color: var(--hcm-color-text-inverse);
    --bs-btn-bg: var(--hcm-color-primary);
    --bs-btn-border-color: var(--hcm-color-primary);
    --bs-btn-hover-color: var(--hcm-color-text-inverse);
    --bs-btn-hover-bg: var(--hcm-color-primary-hover);
    --bs-btn-hover-border-color: var(--hcm-color-primary-hover);
    --bs-btn-active-color: var(--hcm-color-text-inverse);
    --bs-btn-active-bg: var(--hcm-color-primary-hover);
    --bs-btn-active-border-color: var(--hcm-color-primary-hover);
    --bs-btn-disabled-bg: var(--hcm-color-primary);
    --bs-btn-disabled-border-color: var(--hcm-color-primary);
    font-weight: 700;
    box-shadow: var(--hcm-shadow-sm);
}
.btn-outline-secondary {
    --bs-btn-color: var(--hcm-color-text-secondary);
    --bs-btn-border-color: var(--hcm-color-border-hover);
    --bs-btn-hover-color: var(--hcm-color-text-primary);
    --bs-btn-hover-bg: var(--hcm-color-surface-secondary);
    --bs-btn-hover-border-color: var(--hcm-color-border-strong);
    --bs-btn-active-color: var(--hcm-color-text-primary);
    --bs-btn-active-bg: var(--hcm-color-surface-secondary);
    --bs-btn-active-border-color: var(--hcm-color-border-strong);
    background: var(--hcm-color-surface);
}
.btn-outline-danger {
    --bs-btn-color: var(--hcm-color-danger);
    --bs-btn-border-color: var(--hcm-color-danger-border);
    --bs-btn-hover-bg: var(--hcm-color-danger);
    --bs-btn-hover-border-color: var(--hcm-color-danger);
}

/* ========== 7. FORM ========== */
.form-label { font-size: var(--hcm-font-size-label); font-weight: 600; color: var(--hcm-color-text-primary); }
.form-control, .form-select {
    font-size: var(--hcm-font-size-body);
    border-radius: var(--hcm-radius-md);
    border-color: var(--hcm-color-border);
    background-color: var(--hcm-color-surface);
    color: var(--hcm-color-text-primary);
    min-height: 38px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hcm-color-primary);
    box-shadow: 0 0 0 3px var(--hcm-color-focus-ring);
}
.form-control::placeholder { color: var(--hcm-color-text-disabled); }
.form-check-input:checked { background-color: var(--hcm-color-primary); border-color: var(--hcm-color-primary); }

/* ========== 8. KARTU ========== */
.card {
    --bs-card-bg: var(--hcm-color-surface);
    --bs-card-border-color: var(--hcm-color-border);
    --bs-card-border-radius: var(--hcm-radius-xl);
    --bs-card-inner-border-radius: calc(var(--hcm-radius-xl) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: var(--hcm-space-4);
    --bs-card-cap-padding-x: var(--hcm-space-5);
    --bs-card-spacer-y: var(--hcm-space-5);
    --bs-card-spacer-x: var(--hcm-space-5);
    box-shadow: var(--hcm-shadow-sm);
}
.card-header { border-bottom-color: var(--hcm-color-border); }
.card-title { font-size: var(--hcm-font-size-h2); font-weight: 700; margin: 0; }
.stat-card-icon { background: var(--hcm-color-surface); }

/* ========== 9. TABEL ========== */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--hcm-color-text-primary);
    --bs-table-border-color: var(--hcm-color-border);
    --bs-table-hover-bg: var(--hcm-color-surface-secondary);
    margin-bottom: 0;
}
.table > thead th {
    font-size: var(--hcm-font-size-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hcm-color-text-muted);
    background: var(--hcm-color-surface-secondary);
    white-space: nowrap;
    padding: var(--hcm-space-3) var(--hcm-space-4);
}
.table > tbody td { padding: var(--hcm-space-3) var(--hcm-space-4); vertical-align: middle; }
.hcm-th-sortable a { color: inherit; }
.hcm-table-search { min-width: 16rem; }
.hcm-table-search .form-control { padding-left: 2rem; }
.hcm-table-search .bi-search { left: var(--hcm-space-3); }

/* ========== 10. BADGE & ALERT ========== */
.badge {
    font-size: var(--hcm-font-size-caption);
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--hcm-radius-pill);
    padding: 0.3em 0.7em;
}
.alert {
    border: 0;
    border-radius: var(--hcm-radius-lg);
    box-shadow: var(--hcm-shadow-sm);
    font-size: var(--hcm-font-size-body);
}

/* ========== 11. MODAL ========== */
.modal-content { border-radius: var(--hcm-radius-lg); border-color: var(--hcm-color-border); background: var(--hcm-color-surface); }
.modal-title { font-size: var(--hcm-font-size-h2); font-weight: 700; }
.modal-backdrop.show { backdrop-filter: blur(2px); }

/* ========== 12. LAYOUT: SIDEBAR + TOPBAR ========== */
.hcm-app { display: flex; min-height: 100vh; }

.hcm-sidebar {
    width: var(--hcm-sidebar-width);
    flex-shrink: 0;
    background: var(--hcm-sidebar-bg);
    color: var(--hcm-sidebar-text);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.hcm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--hcm-space-3);
    padding: var(--hcm-space-5);
    color: var(--hcm-sidebar-text-active);
    text-decoration: none;
    font-weight: 800;
}
/* Logo MBD Corp: lingkaran biru dengan wordmark "mbd" */
.hcm-brand-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hcm-brand-blue);
    color: var(--hcm-color-text-inverse);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: var(--hcm-font-size-label);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: lowercase;
}
.hcm-brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.hcm-brand-tagline {
    display: inline-block;
    margin-top: var(--hcm-space-1);
    font-size: var(--hcm-font-size-meta);
    font-weight: 700;
    color: var(--hcm-brand-yellow);
}
/* Sorotan aksen kuning MBD (mis. tagline, highlight kartu) */
.hcm-accent { background: var(--hcm-color-accent); color: var(--hcm-color-accent-text); }
.hcm-accent-subtle { background: var(--hcm-color-accent-subtle); color: var(--hcm-color-text-primary); }
.hcm-brand-sub { display: block; font-size: var(--hcm-font-size-meta); font-weight: 500; color: var(--hcm-sidebar-group); }
.hcm-nav { padding: 0 var(--hcm-space-3) var(--hcm-space-6); }
.hcm-nav-group {
    font-size: var(--hcm-font-size-meta);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hcm-sidebar-group);
    padding: var(--hcm-space-4) var(--hcm-space-3) var(--hcm-space-2);
}
.hcm-nav-link {
    display: flex;
    align-items: center;
    gap: var(--hcm-space-3);
    min-height: 40px;
    padding: var(--hcm-space-2) var(--hcm-space-3);
    border-radius: var(--hcm-radius-md);
    color: var(--hcm-sidebar-text);
    text-decoration: none;
    font-size: var(--hcm-font-size-body);
    font-weight: 600;
    border-left: 3px solid transparent;
}
.hcm-nav-link:hover { color: var(--hcm-sidebar-text-active); background: var(--hcm-sidebar-bg-hover); }
.hcm-nav-link.active {
    color: var(--hcm-sidebar-text-active);
    background: var(--hcm-sidebar-bg-active);
    border-left-color: var(--hcm-sidebar-accent);
}
.hcm-nav-link.active .bi { color: var(--hcm-sidebar-accent); }
.hcm-nav-soon {
    margin-left: auto;
    font-size: var(--hcm-font-size-meta);
    font-weight: 700;
    color: var(--hcm-sidebar-group);
    border: 1px solid var(--hcm-sidebar-divider);
    border-radius: var(--hcm-radius-pill);
    padding: 0 var(--hcm-space-2);
}

.hcm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hcm-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: var(--hcm-space-3);
    min-height: 3.75rem;
    padding: var(--hcm-space-2) var(--hcm-space-6);
    background: var(--hcm-color-surface);
    border-bottom: 1px solid var(--hcm-color-border);
}
.hcm-content { padding: var(--hcm-space-6); flex: 1; }
.hcm-footer { padding: var(--hcm-space-4) var(--hcm-space-6); border-top: 1px solid var(--hcm-color-border); }
.hcm-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--hcm-color-primary-subtle);
    color: var(--hcm-color-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--hcm-font-size-caption);
    font-weight: 800;
}

/* Context nav (Level 3) */
.module-context-nav .nav-link { color: var(--hcm-color-text-secondary); font-size: var(--hcm-font-size-label); }
.module-context-nav .nav-link.active { background: var(--hcm-color-surface); color: var(--hcm-color-primary-text); box-shadow: var(--hcm-shadow-sm); }
.module-context-nav .nav-pills { scrollbar-width: none; }

/* Tablet & mobile: sidebar jadi offcanvas */
@media (max-width: 991.98px) {
    .hcm-sidebar {
        position: fixed;
        z-index: 1045;
        left: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .hcm-sidebar.show { transform: translateX(0); box-shadow: var(--hcm-shadow-lg); }
    .hcm-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(9, 9, 11, 0.5);
    }
    .hcm-content { padding: var(--hcm-space-4); }
    .hcm-topbar { padding: var(--hcm-space-2) var(--hcm-space-4); }
}
@media (max-width: 575.98px) {
    .hcm-table-search { min-width: 0; width: 100%; }
}

/* ========== 13. AUTH ========== */
.hcm-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hcm-space-6) var(--hcm-space-4);
    background: var(--hcm-color-bg);
}
.hcm-auth-card { width: 100%; max-width: 26rem; }

/* ========== 14. EMPTY STATE ========== */
.empty-state-icon { width: 4rem; height: 4rem; background: var(--hcm-color-surface-secondary); }
.empty-state p { max-width: 28rem; }

@media print {
    .hcm-sidebar, .hcm-topbar, .hcm-footer { display: none !important; }
}

/* ========== 15. STRUKTUR ORGANISASI ========== */
.hcm-org-unit > .card-header { background: var(--hcm-color-surface-secondary); }
.hcm-org-children {
    border-top: 1px solid var(--hcm-color-border);
    padding-left: var(--hcm-space-6);
    background: var(--hcm-color-bg);
}
.hcm-org-unit-child { border-left: 3px solid var(--hcm-color-primary-border); }
.list-group { --bs-list-group-bg: var(--hcm-color-surface); --bs-list-group-border-color: var(--hcm-color-border); --bs-list-group-color: var(--hcm-color-text-primary); }
dl dt { margin-top: var(--hcm-space-3); }
dl dt:first-child { margin-top: 0; }
@media (max-width: 575.98px) {
    .hcm-org-children { padding-left: var(--hcm-space-3); }
}

.hcm-scroll-list { max-height: 18rem; overflow-y: auto; }

/* Teks multi-baris dari input pengguna (persyaratan, catatan). */
.hcm-prewrap { white-space: pre-line; }