/* ══════════════════════════════════════════════════════
   TEMA BOOTSTRAP — AKADEMI ASN
   Bootstrap-first: semua styling via CSS variable override
   dan class selector Bootstrap yang sudah ada.
   Tidak ada class custom baru kecuali komponen khusus
   yang tidak tersedia di Bootstrap.

   Palet:
   65% Biru   : rgb(22, 88, 191)
   35% Oranye : rgb(239, 153, 102)
══════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   1. CSS VARIABLES — Bootstrap root tokens + extensions
══════════════════════════════════════════════════════ */
:root {
    /* ── Brand ── */
    --bs-primary:                  rgb(22, 88, 191);
    --bs-primary-rgb:              22, 88, 191;
    --bs-secondary:                rgb(239, 153, 102);
    --bs-secondary-rgb:            239, 153, 102;

    /* Subtle tints */
    --bs-primary-bg-subtle:        rgb(220, 230, 252);
    --bs-secondary-bg-subtle:      rgb(253, 225, 208);
    --bs-success-bg-subtle:        rgba(16, 185, 129, .10);
    --bs-danger-bg-subtle:         rgba(220, 38, 38, .10);
    --bs-warning-bg-subtle:        rgba(245, 158, 11, .12);
    --bs-info-bg-subtle:           rgba(14, 165, 233, .10);
    --bs-light-bg-subtle:          #F8FAFF;
    --bs-dark-bg-subtle:           #1F2937;

    /* Text emphasis */
    --bs-primary-text-emphasis:    rgb(14, 56, 124);
    --bs-secondary-text-emphasis:  rgb(155, 75, 28);
    --bs-success-text-emphasis:    #065F46;
    --bs-danger-text-emphasis:     #991B1B;
    --bs-warning-text-emphasis:    #92400E;
    --bs-info-text-emphasis:       #0C4A6E;
    --bs-light-text-emphasis:      #374151;
    --bs-dark-text-emphasis:       #F9FAFB;

    /* ── Typography ── */
    --bs-body-font-family:         "Montserrat", sans-serif;
    --bs-body-font-size:           .875rem;
    --bs-body-font-weight:         400;
    --bs-body-line-height:         1.6;
    --bs-body-color:               #111827;
    --bs-secondary-color:          #4B5563;
    --bs-tertiary-color:           #9CA3AF;
    --bs-emphasis-color:           #030712;
    --bs-headings-font-weight:     800;

    /* ── Surfaces ── */
    --bs-body-bg:                  #EEF2FB;
    --bs-secondary-bg:             #F0F4FC;
    --bs-tertiary-bg:              #E2E9F8;

    /* ── Links ── */
    --bs-link-color:               rgb(22, 88, 191);
    --bs-link-hover-color:         rgb(14, 56, 124);
    --bs-link-color-rgb:           22, 88, 191;
    --bs-link-decoration:          none;

    /* ── Border ── */
    --bs-border-color:             #D6DFF2;
    --bs-border-color-translucent: rgba(22, 88, 191, .12);
    --bs-border-width:             1.5px;
    --bs-border-style:             solid;

    /* ── Radius — sistem konsisten ── */
    --bs-border-radius:            0.625rem;   /* 10px — input, badge default */
    --bs-border-radius-sm:         0.375rem;   /* 6px  — chip, tag kecil */
    --bs-border-radius-lg:         0.875rem;   /* 14px — card */
    --bs-border-radius-xl:         1.25rem;    /* 20px — section card besar */
    --bs-border-radius-2xl:        1.75rem;    /* 28px — hero section */
    --bs-border-radius-pill:       50rem;

    /* ── Shadow ── */
    --bs-box-shadow-sm:            0 2px 10px rgba(22, 88, 191, .07), 0 1px 3px rgba(22, 88, 191, .04);
    --bs-box-shadow:               0 6px 28px rgba(22, 88, 191, .10), 0 2px 8px rgba(22, 88, 191, .05);
    --bs-box-shadow-lg:            0 18px 56px rgba(22, 88, 191, .14), 0 6px 18px rgba(22, 88, 191, .07);
    --bs-box-shadow-inset:         inset 0 1px 3px rgba(0, 0, 0, .06);

    /* ── Transition global ── */
    --bs-transition:               .2s cubic-bezier(.4, 0, .2, 1);

    /* ── Focus ring ── */
    --bs-focus-ring-width:         3px;
    --bs-focus-ring-opacity:       .14;
    --bs-focus-ring-color:         rgba(22, 88, 191, .14);
}


/* ══════════════════════════════════════════════════════
   2. TYPOGRAPHY
══════════════════════════════════════════════════════ */
body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-headings-font-weight);
    color: var(--bs-body-color);
    line-height: 1.25;
}

.lead {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.text-muted { color: var(--bs-tertiary-color) !important; }

a {
    color: var(--bs-link-color);
    text-decoration: none;
    transition: color var(--bs-transition);
}
a:hover { color: var(--bs-link-hover-color); }

hr {
    border-color: var(--bs-border-color);
    opacity: 1;
}

/* ── Focus ring konsisten ── */
:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: 2px;
}


/* ══════════════════════════════════════════════════════
   3. CARD
══════════════════════════════════════════════════════ */
.card {
    border: 1px solid var(--bs-border-color) !important;
    background-color: #fff;
    box-shadow: var(--bs-box-shadow-sm);
    transition: transform var(--bs-transition), box-shadow var(--bs-transition);
}
.card.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--bs-box-shadow);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0 !important;
    padding: .875rem 1.375rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-footer {
    background-color: #FAFBFD;
    border-top: 1px solid var(--bs-border-color);
    padding: .75rem 1.375rem;
}

.card-body { padding: 1.5rem; }

.card-title  { font-weight: 700; margin-bottom: .5rem; }
.card-subtitle {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    margin-top: -.25rem;
    margin-bottom: .75rem;
}
.card-text   { color: var(--bs-secondary-color); font-size: .875rem; }
.card-img-top { height: 220px; object-fit: cover; }
.card-img-overlay { border-radius: var(--bs-border-radius-lg); }

/* Card link */
.card-link {
    color: var(--bs-primary);
    font-size: .8125rem;
    font-weight: 600;
}
.card-link:hover { color: var(--bs-primary-text-emphasis); }

/* Card di dalam section bg-primary */
.bg-primary .card {
    background-color: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15) !important;
    color: #fff;
    box-shadow: none;
}
.bg-primary .card:hover { background-color: rgba(255,255,255,.17); }
.bg-primary .card-text  { color: rgba(255,255,255,.65); }


/* ══════════════════════════════════════════════════════
   4. BUTTON — semua varian lengkap
══════════════════════════════════════════════════════ */
.btn {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    font-size: .8375rem;
    letter-spacing: .01em;
    border-radius: var(--bs-border-radius-pill) !important;
    padding: .5rem 1.4rem;
    border-width: 1.5px;
    transition: transform var(--bs-transition), box-shadow var(--bs-transition),
                background-color var(--bs-transition), border-color var(--bs-transition),
                color var(--bs-transition), opacity var(--bs-transition);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) !important; box-shadow: none !important; }
.btn:disabled, .btn.disabled {
    opacity: .5;
    transform: none !important;
    pointer-events: none;
}

/* ── Solid buttons ── */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bs-primary-text-emphasis);
    border-color: var(--bs-primary-text-emphasis);
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), .32);
    color: #fff;
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: var(--bs-secondary-text-emphasis);
    border-color: var(--bs-secondary-text-emphasis);
    box-shadow: 0 6px 20px rgba(var(--bs-secondary-rgb), .32);
    color: #fff;
}

.btn-success {
    background-color: #10B981;
    border-color: #10B981;
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background-color: #059669;
    border-color: #059669;
    box-shadow: 0 6px 20px rgba(16,185,129,.32);
    color: #fff;
}

.btn-danger {
    background-color: #EF4444;
    border-color: #EF4444;
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #DC2626;
    border-color: #DC2626;
    box-shadow: 0 6px 20px rgba(239,68,68,.32);
    color: #fff;
}

.btn-warning {
    background-color: #F59E0B;
    border-color: #F59E0B;
    color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #D97706;
    border-color: #D97706;
    box-shadow: 0 6px 20px rgba(245,158,11,.32);
    color: #fff;
}

.btn-info {
    background-color: #0EA5E9;
    border-color: #0EA5E9;
    color: #fff;
}
.btn-info:hover, .btn-info:focus {
    background-color: #0284C7;
    border-color: #0284C7;
    box-shadow: 0 6px 20px rgba(14,165,233,.32);
    color: #fff;
}

.btn-light {
    background-color: #F8FAFF;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.btn-light:hover, .btn-light:focus {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.btn-dark {
    background-color: #111827;
    border-color: #111827;
    color: #fff;
}
.btn-dark:hover, .btn-dark:focus {
    background-color: #030712;
    border-color: #030712;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
    color: #fff;
}

/* ── Outline buttons ── */
.btn-outline-primary {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), .22);
}

.btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    background-color: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    box-shadow: none;
}

.btn-outline-success {
    border-color: #10B981;
    color: #059669;
    background-color: transparent;
}
.btn-outline-success:hover, .btn-outline-success:focus {
    background-color: var(--bs-success-bg-subtle);
    border-color: #10B981;
    color: #065F46;
}

.btn-outline-danger {
    border-color: #FCA5A5;
    color: #DC2626;
    background-color: transparent;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: #FEE2E2;
    border-color: #FCA5A5;
    color: #B91C1C;
}

.btn-outline-warning {
    border-color: #F59E0B;
    color: #D97706;
    background-color: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
    background-color: #FEF3C7;
    border-color: #F59E0B;
    color: #B45309;
}

.btn-outline-info {
    border-color: #0EA5E9;
    color: #0284C7;
    background-color: transparent;
}
.btn-outline-info:hover, .btn-outline-info:focus {
    background-color: rgba(14,165,233,.10);
    border-color: #0EA5E9;
    color: #0C4A6E;
}

.btn-outline-light {
    border-color: rgba(255,255,255,.5);
    color: rgba(255,255,255,.85);
}
.btn-outline-light:hover, .btn-outline-light:focus {
    background-color: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}

.btn-outline-dark {
    border-color: #374151;
    color: #111827;
    background-color: transparent;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
    background-color: #111827;
    border-color: #111827;
    color: #fff;
}

/* ── Ghost / link button ── */
.btn-link {
    color: var(--bs-primary);
    font-weight: 600;
    text-decoration: none;
    border-color: transparent;
    background: transparent;
    padding-left: .25rem;
    padding-right: .25rem;
}
.btn-link:hover {
    color: var(--bs-primary-text-emphasis);
    transform: none;
}

/* ── Sizes ── */
.btn-lg { padding: .7rem 2rem; font-size: .95rem; }
.btn-sm { padding: .3rem .9rem; font-size: .775rem; }

/* ── rounded-circle override — bulat sempurna
   Width & height default 34px, bisa di-override dengan class btn-cm
   Contoh: .btn-cm { width: 40px; height: 40px; } ── */
.btn.rounded-circle {
    width: 40px;
    height: 40px;
    min-width: unset;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    flex-shrink: 0;
    line-height: 1;
}
.btn.rounded-circle.btn-sm { width: 30px; height: 30px; }
.btn.rounded-circle.btn-lg { width: 42px; height: 42px; }


/* ══════════════════════════════════════════════════════
   5. FORM CONTROLS — lengkap semua variant
══════════════════════════════════════════════════════ */
.form-label {
    font-size: .775rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    margin-bottom: .3rem;
    letter-spacing: .01em;
}

.form-text {
    font-size: .725rem;
    color: var(--bs-tertiary-color);
    margin-top: .3rem;
}

.form-control,
.form-select {
    border: 1.5px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius) !important;
    font-size: .8375rem;
    font-family: var(--bs-body-font-family);
    color: var(--bs-body-color);
    background-color: rgba(0, 0, 0, .014);
    padding: .475rem .8rem;
    transition: border-color var(--bs-transition), box-shadow var(--bs-transition),
                background-color var(--bs-transition);
    outline: none !important;
    box-shadow: none !important;
}
.form-control:hover,
.form-select:hover {
    border-color: rgba(var(--bs-primary-rgb), .4);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
    background-color: #fff;
    outline: none !important;
}
.form-control::placeholder { color: var(--bs-tertiary-color); }
.form-control:disabled,
.form-select:disabled {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}
.form-control.is-valid,
.form-select.is-valid {
    border-color: #10B981;
    box-shadow: none !important;
}
.form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16,185,129,.15) !important;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #EF4444;
    box-shadow: none !important;
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}
.valid-feedback   { font-size: .725rem; color: #059669; }
.invalid-feedback { font-size: .725rem; color: #DC2626; }

/* Sizes */
.form-control-sm, .form-select-sm { font-size: .775rem; padding: .35rem .7rem; }
.form-control-lg, .form-select-lg { font-size: .9375rem; padding: .65rem 1rem; }

/* Range */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}
.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

/* Check & Radio */
.form-check-input {
    border: 1.5px solid var(--bs-border-color);
    transition: border-color var(--bs-transition), background-color var(--bs-transition);
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
    border-color: var(--bs-primary);
}
.form-check-label {
    font-size: .8375rem;
    color: var(--bs-body-color);
    cursor: pointer;
}

/* Switch */
.form-switch .form-check-input {
    border-radius: var(--bs-border-radius-pill);
}
.form-switch .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Input group */
.input-group-text {
    border: 1.5px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .8rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius) !important;
    transition: border-color var(--bs-transition);
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-left: 0 !important;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
}
.input-group > .input-group-text:first-child {
    border-right: 0;
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius) !important;
}
.input-group > .input-group-text:last-child {
    border-left: 0;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0 !important;
}
.input-group:focus-within .input-group-text {
    border-color: var(--bs-primary);
}

/* Floating label */
.form-floating > .form-control,
.form-floating > .form-select {
    height: 3.25rem;
    padding: 1rem .8rem .25rem;
}
.form-floating > label {
    font-size: .775rem;
    color: var(--bs-tertiary-color);
    padding: 1rem .8rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--bs-primary);
    font-weight: 600;
}

/* Select2 */
.select2 * { outline: none !important; box-shadow: none !important; }
.select2-container--bootstrap-5 .select2-selection {
    border: 1.5px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    font-size: .8375rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color) !important;
}


/* ══════════════════════════════════════════════════════
   6. BADGE — semua warna + soft variant
══════════════════════════════════════════════════════ */
.badge {
    font-family: var(--bs-body-font-family);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .3em .65em;
    border-radius: var(--bs-border-radius-sm) !important;
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

/* ── Solid — hanya primary, secondary, light, dark ── */
.badge.bg-primary   { background-color: var(--bs-primary) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; color: #fff !important; }
.badge.bg-light     { background-color: #F8FAFF !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color); }
.badge.bg-dark      { background-color: #111827 !important; color: #fff !important; }

/* ── Soft / transparan — success, danger, warning, info ── */
.badge.bg-success { background-color: rgba(16,185,129,.12) !important;  color: #065F46 !important; }
.badge.bg-danger  { background-color: rgba(220,38,38,.10) !important;   color: #991B1B !important; }
.badge.bg-warning { background-color: rgba(245,158,11,.13) !important;  color: #92400E !important; }
.badge.bg-info    { background-color: rgba(14,165,233,.12) !important;  color: #0C4A6E !important; }

/* ── Soft / subtle (pakai text-bg-*) ── */
.text-bg-primary {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
}
.text-bg-secondary {
    background-color: var(--bs-secondary-bg-subtle) !important;
    color: var(--bs-secondary-text-emphasis) !important;
}
.text-bg-success {
    background-color: var(--bs-success-bg-subtle) !important;
    color: var(--bs-success-text-emphasis) !important;
}
.text-bg-danger {
    background-color: var(--bs-danger-bg-subtle) !important;
    color: var(--bs-danger-text-emphasis) !important;
}
.text-bg-warning {
    background-color: var(--bs-warning-bg-subtle) !important;
    color: var(--bs-warning-text-emphasis) !important;
}
.text-bg-info {
    background-color: var(--bs-info-bg-subtle) !important;
    color: var(--bs-info-text-emphasis) !important;
}
.text-bg-light {
    background-color: var(--bs-light-bg-subtle) !important;
    color: var(--bs-light-text-emphasis) !important;
}
.text-bg-dark {
    background-color: var(--bs-dark-bg-subtle) !important;
    color: var(--bs-dark-text-emphasis) !important;
}

/* ── Pill badge ── */
.badge.rounded-pill { border-radius: var(--bs-border-radius-pill) !important; }


/* ══════════════════════════════════════════════════════
   7. NAVBAR
══════════════════════════════════════════════════════ */
.navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: background-color .35s ease, box-shadow .35s ease;
}
.navbar.navbar-transparent {
    background-color: transparent !important;
    box-shadow: none !important;
}
.navbar.bg-primary {
    background-color: var(--bs-primary) !important;
    box-shadow: 0 4px 24px rgba(var(--bs-primary-rgb), .22) !important;
}
.navbar-brand {
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -.4px;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.8);
    font-weight: 500;
    border-radius: var(--bs-border-radius-pill);
    padding: .45rem 1rem;
    transition: background var(--bs-transition), color var(--bs-transition);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    background: rgba(255,255,255,.14);
    color: #fff;
}
.navbar-toggler {
    border-color: rgba(255,255,255,.4);
    border-radius: var(--bs-border-radius-sm);
}
.navbar-toggler-icon { filter: invert(1); }


/* ══════════════════════════════════════════════════════
   8. DROPDOWN
══════════════════════════════════════════════════════ */
.dropdown-menu {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: var(--bs-box-shadow);
    padding: .5rem;
    min-width: 220px;
    background-color: #fff;
    animation: dropIn .18s ease both;
}
@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    padding: .5rem .9rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: background var(--bs-transition), color var(--bs-transition);
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--bs-primary);
    color: #fff;
}
.dropdown-item.text-danger:hover {
    background-color: #FEE2E2;
    color: #B91C1C;
}
.dropdown-divider {
    border-color: var(--bs-border-color);
    margin: .3rem .5rem;
}
.dropdown-header {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding: .45rem 1rem .2rem;
}

/* Submenu */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-item::after {
    content: "›"; margin-left: auto;
    font-size: 1rem; color: var(--bs-secondary-color);
}
.dropdown-submenu > .dropdown-menu {
    top: 0; left: 100%;
    margin-top: -.5rem; margin-left: .25rem;
    display: none;
}
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.show > .dropdown-menu { display: block; }

@media (max-width: 991px) {
    .dropdown-submenu > .dropdown-menu {
        position: static; margin-left: 1rem;
        box-shadow: none; animation: none;
        border-left: 2px solid var(--bs-primary-bg-subtle);
        border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    }
    .dropdown-submenu > .dropdown-item::after { content: "↓"; }
}


/* ══════════════════════════════════════════════════════
   9. TABLE
══════════════════════════════════════════════════════ */
.table {
    --bs-table-hover-bg: var(--bs-primary-bg-subtle);
    --bs-table-striped-bg: rgba(var(--bs-primary-rgb), .025);
    font-size: .8375rem;
}
.table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); }
.table-success { --bs-table-bg: var(--bs-success-bg-subtle); }
.table-danger  { --bs-table-bg: var(--bs-danger-bg-subtle); }
.table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); }

table td {
    background-color: transparent !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    vertical-align: middle;
    color: var(--bs-body-color);
}
table th {
    padding: 1rem 1.5rem !important;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    background-color: #FAFBFD;
    white-space: nowrap;
}
table tr:last-child td { border-bottom: none !important; }

.table-responsive {
    border-radius: var(--bs-border-radius-lg) !important;
    border: 1px solid var(--bs-border-color);
    transition: border-color var(--bs-transition);
    overflow: hidden;
}
.table-responsive:hover { border-color: rgba(var(--bs-primary-rgb), .35); }

/* Jika table-responsive berada di dalam card, ikuti radius card */
.card .table-responsive {
    border: none;
    overflow-x: auto;
}


/* ══════════════════════════════════════════════════════
   10. ACCORDION
══════════════════════════════════════════════════════ */
.accordion-item {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius) !important;
    margin-bottom: .5rem;
    overflow: hidden;
}
.accordion-button {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    font-size: .925rem;
    color: var(--bs-body-color);
    background-color: #fff;
    box-shadow: none !important;
    padding: 1rem 1.375rem;
    transition: background-color var(--bs-transition), color var(--bs-transition);
}
.accordion-button:not(.collapsed) {
    color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231658BF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
.accordion-body {
    font-size: .875rem;
    color: var(--bs-secondary-color);
    padding: 0 1.375rem 1.25rem;
    line-height: 1.7;
    background-color: #fff;
}


/* ══════════════════════════════════════════════════════
   11. ALERT
══════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--bs-border-radius) !important;
    border-width: 1px;
    font-size: .8375rem;
    padding: .875rem 1.125rem;
}
.alert-primary {
    background-color: var(--bs-primary-bg-subtle);
    border-color: rgba(var(--bs-primary-rgb), .2);
    color: var(--bs-primary-text-emphasis);
}
.alert-secondary {
    background-color: var(--bs-secondary-bg-subtle);
    border-color: rgba(var(--bs-secondary-rgb), .2);
    color: var(--bs-secondary-text-emphasis);
}
.alert-success {
    background-color: var(--bs-success-bg-subtle);
    border-color: rgba(16,185,129,.2);
    color: var(--bs-success-text-emphasis);
}
.alert-danger {
    background-color: var(--bs-danger-bg-subtle);
    border-color: rgba(220,38,38,.2);
    color: var(--bs-danger-text-emphasis);
}
.alert-warning {
    background-color: var(--bs-warning-bg-subtle);
    border-color: rgba(245,158,11,.2);
    color: var(--bs-warning-text-emphasis);
}
.alert-info {
    background-color: var(--bs-info-bg-subtle);
    border-color: rgba(14,165,233,.2);
    color: var(--bs-info-text-emphasis);
}
.alert-light {
    background-color: var(--bs-light-bg-subtle);
    border-color: var(--bs-border-color);
    color: var(--bs-light-text-emphasis);
}
.alert-dark {
    background-color: rgba(17,24,39,.08);
    border-color: rgba(17,24,39,.15);
    color: #111827;
}
.alert-dismissible .btn-close { padding: .9rem; }


/* ══════════════════════════════════════════════════════
   12. PROGRESS
══════════════════════════════════════════════════════ */
.progress {
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-tertiary-bg);
    height: 8px;
    overflow: hidden;
}
.progress-bar {
    background-color: var(--bs-primary);
    border-radius: var(--bs-border-radius-pill);
    transition: width .5s ease;
}
.progress-bar.bg-success { background-color: #10B981 !important; }
.progress-bar.bg-danger  { background-color: #EF4444 !important; }
.progress-bar.bg-warning { background-color: #F59E0B !important; }
.progress-bar.bg-info    { background-color: #0EA5E9 !important; }
.progress-bar.bg-secondary { background-color: var(--bs-secondary) !important; }


/* ══════════════════════════════════════════════════════
   13. PAGINATION
══════════════════════════════════════════════════════ */
.pagination { gap: 3px; flex-wrap: wrap; }
.page-link {
    border: 1.5px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm) !important;
    font-size: .775rem;
    font-weight: 600;
    color: var(--bs-primary);
    padding: .3rem .65rem;
    transition: all var(--bs-transition);
    background-color: #fff;
}
.page-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    border-color: rgba(var(--bs-primary-rgb), .3);
    color: var(--bs-primary);
}
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .28);
}
.page-item.disabled .page-link {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-tertiary-color);
}


/* ══════════════════════════════════════════════════════
   14. NAV TABS & PILLS
══════════════════════════════════════════════════════ */
/* Tabs */
.nav-tabs {
    border-bottom: 1.5px solid var(--bs-border-color);
    gap: .25rem;
}
.nav-tabs .nav-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem 1rem;
    margin-bottom: -1.5px;
    transition: color var(--bs-transition), border-color var(--bs-transition);
}
.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    border-bottom-color: rgba(var(--bs-primary-rgb), .35);
    background-color: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-primary);
    border-bottom-color: var(--bs-primary);
    background-color: transparent;
}

/* Pills */
.nav-pills { gap: .375rem; }
.nav-pills .nav-link {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    border-radius: var(--bs-border-radius-pill);
    padding: .4rem 1rem;
    transition: background var(--bs-transition), color var(--bs-transition);
}
.nav-pills .nav-link:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), .28);
}


/* ══════════════════════════════════════════════════════
   15. LIST GROUP
══════════════════════════════════════════════════════ */
.list-group { border-radius: var(--bs-border-radius-lg) !important; overflow: hidden; }
.list-group-item {
    border-color: var(--bs-border-color);
    font-size: .8375rem;
    padding: .75rem 1.125rem;
    color: var(--bs-body-color);
    transition: background var(--bs-transition);
}
.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.list-group-item-primary {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.list-group-item-secondary {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
}
.list-group-item-success  { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.list-group-item-danger   { background-color: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }
.list-group-item-warning  { background-color: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.list-group-item-info     { background-color: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis); }


/* ══════════════════════════════════════════════════════
   16. MODAL
══════════════════════════════════════════════════════ */
.modal-content {
    border: none;
    border-radius: var(--bs-border-radius-xl) !important;
    box-shadow: var(--bs-box-shadow-lg);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
    background-color: #fff;
}
.modal-title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--bs-body-color);
}
.modal-body {
    padding: 1.5rem;
    font-size: .875rem;
}
.modal-footer {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    background-color: #FAFBFD;
    gap: .5rem;
}
.modal-backdrop { backdrop-filter: blur(2px); }
.btn-close {
    border-radius: var(--bs-border-radius-sm);
    opacity: .5;
    transition: opacity var(--bs-transition), background-color var(--bs-transition);
}
.btn-close:hover { opacity: 1; }


/* ══════════════════════════════════════════════════════
   17. OFFCANVAS
══════════════════════════════════════════════════════ */
.offcanvas {
    border: none !important;
    box-shadow: var(--bs-box-shadow-lg);
}
.offcanvas-header {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1.25rem 1.5rem;
}
.offcanvas-title {
    font-size: .9375rem;
    font-weight: 700;
}
.offcanvas-body {
    padding: 1.25rem 1.5rem;
    font-size: .875rem;
}


/* ══════════════════════════════════════════════════════
   18. TOOLTIP & POPOVER
══════════════════════════════════════════════════════ */
.tooltip .tooltip-inner {
    background-color: #111827;
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    padding: .3rem .65rem;
}
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #111827; }

.popover {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: var(--bs-box-shadow);
    font-size: .8375rem;
}
.popover-header {
    background-color: var(--bs-primary-bg-subtle);
    border-bottom: 1px solid var(--bs-border-color);
    color: var(--bs-primary-text-emphasis);
    font-weight: 700;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0 !important;
    padding: .75rem 1rem;
}
.popover-body {
    color: var(--bs-body-color);
    padding: .875rem 1rem;
}


/* ══════════════════════════════════════════════════════
   19. TOAST
══════════════════════════════════════════════════════ */
.toast {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: var(--bs-box-shadow);
    font-size: .8375rem;
    background-color: #fff;
}
.toast-header {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: #FAFBFD;
    font-weight: 600;
    font-size: .775rem;
    border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0 !important;
    padding: .6rem 1rem;
}
.toast-body { padding: .875rem 1rem; }


/* ══════════════════════════════════════════════════════
   20. SPINNER
══════════════════════════════════════════════════════ */
.spinner-border { color: var(--bs-primary); }
.spinner-grow   { color: var(--bs-primary); }


/* ══════════════════════════════════════════════════════
   21. BREADCRUMB
══════════════════════════════════════════════════════ */
.breadcrumb {
    font-size: .775rem;
    font-weight: 500;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-tertiary-color); }
.breadcrumb-item a { color: var(--bs-secondary-color); }
.breadcrumb-item a:hover { color: var(--bs-primary); }
.breadcrumb-item.active { color: var(--bs-body-color); font-weight: 600; }


/* ══════════════════════════════════════════════════════
   22. ACCORDION
══════════════════════════════════════════════════════ */
/* (sudah di section 10, tidak duplikasi) */


/* ══════════════════════════════════════════════════════
   23. TABLE
══════════════════════════════════════════════════════ */
/* (sudah di section 9, tidak duplikasi) */


/* ══════════════════════════════════════════════════════
   24. TESTIMONIAL & MISC
══════════════════════════════════════════════════════ */
blockquote.blockquote {
    font-size: .95rem;
    font-style: italic;
    line-height: 1.65;
    border-left: 3px solid var(--bs-primary);
    padding-left: 1rem;
    color: var(--bs-secondary-color);
}
img.avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bs-primary-bg-subtle);
}
.required::after { content: " *"; color: #DC2626; }


/* ══════════════════════════════════════════════════════
   25. LAYOUT — section & spacing
══════════════════════════════════════════════════════ */
section { padding: 5rem 0; }
section.bg-primary {
    background-color: var(--bs-primary) !important;
    border-radius: var(--bs-border-radius-2xl);
    margin: 0 1rem;
}


/* ══════════════════════════════════════════════════════
   26. HERO
══════════════════════════════════════════════════════ */
header {
    margin-top: -120px;
    padding-top: 120px !important;
}
header.bg-primary {
    background: linear-gradient(
        135deg,
        rgb(14, 56, 124) 0%,
        rgb(22, 88, 191) 50%,
        rgb(35, 105, 210) 100%
    ) !important;
    padding: calc(72px + 3.5rem) 0 6rem;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    margin-bottom: -2rem;
}
header.bg-primary::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
header.bg-primary::after {
    content: "";
    position: absolute;
    bottom: -80px; right: -80px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(var(--bs-secondary-rgb),.22) 0%, transparent 70%);
    pointer-events: none;
}
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--bs-border-radius-pill);
    padding: .45rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    backdrop-filter: blur(6px);
}
.hero-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bs-secondary);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; transform: scale(1); }
    50%      { opacity:.6; transform: scale(1.4); }
}
.hero-stat-box {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.2rem 1.5rem;
    backdrop-filter: blur(8px);
    transition: background var(--bs-transition);
}
.hero-stat-box:hover { background: rgba(255,255,255,.17); }
.hero-stat-box .stat-num { font-size: 1.8rem; font-weight: 800; line-height: 1; color: #fff; }
.hero-stat-box .stat-num span { color: var(--bs-secondary); }
.hero-stat-box .stat-label { font-size: .78rem; color: rgba(255,255,255,.65); margin-top: .2rem; }
.hero-progress-wrap {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.2rem 1.5rem;
}
.hero-progress-wrap .subject-label { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85); }
.hero-progress-wrap .subject-pct   { font-size: .78rem; font-weight: 700; color: var(--bs-secondary); }
.hero-progress-wrap .progress { height: 6px; background: rgba(255,255,255,.15); border-radius: var(--bs-border-radius-pill); }
.hero-progress-wrap .progress-bar { background: var(--bs-secondary); }


/* ══════════════════════════════════════════════════════
   27. STATS CARD
══════════════════════════════════════════════════════ */
.stats-card {
    background: linear-gradient(135deg, var(--bs-secondary) 0%, rgb(210,118,65) 100%);
    border-radius: var(--bs-border-radius-xl);
    padding: 2rem 2.5rem;
    position: relative;
    z-index: 10;
    box-shadow: 0 16px 48px rgba(var(--bs-secondary-rgb), .32);
    color: #fff;
}
.stats-card [class*="col-"]:not(:last-child) {
    border-right: 2px solid rgba(255,255,255,.3);
}
@media (max-width: 767px) {
    .stats-card [class*="col-"]:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.2);
        padding-bottom: 1rem; margin-bottom: .5rem;
    }
}


/* ══════════════════════════════════════════════════════
   28. FOOTER
══════════════════════════════════════════════════════ */
footer.bg-dark { background-color: #0A1025 !important; }
footer a {
    color: rgba(255,255,255,.5);
    font-size: .88rem;
    display: block;
    margin-bottom: .45rem;
    transition: color var(--bs-transition);
}
footer a:hover { color: var(--bs-secondary); }
footer hr { border-color: rgba(255,255,255,.1); }


/* ══════════════════════════════════════════════════════
   29. ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity:0; transform: translateY(28px); }
    to   { opacity:1; transform: translateY(0); }
}
.fade-up  { animation: fadeUp .65s ease both; }
.delay-1  { animation-delay: .1s; }
.delay-2  { animation-delay: .2s; }
.delay-3  { animation-delay: .3s; }
.delay-4  { animation-delay: .4s; }


/* ══════════════════════════════════════════════════════
   30. SUMMERNOTE EDITOR
══════════════════════════════════════════════════════ */
.note-editor.note-frame .note-editing-area .note-editable,
.note-editor.fullscreen .note-editing-area .note-editable {
    background-color: #fff !important;
    font-family: var(--bs-body-font-family) !important;
    font-size: .875rem !important;
}


/* ══════════════════════════════════════════════════════
   31. STICKY PAGE HEADER & SAVE BAR
   (komponen khusus halaman form — tidak tersedia di Bootstrap)
══════════════════════════════════════════════════════ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: .9rem 1.375rem;
    box-shadow: var(--bs-box-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.save-bar {
    position: sticky;
    bottom: 0;
    z-index: 99;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    padding: .9rem 1.375rem;
    box-shadow: 0 -4px 20px rgba(17,24,39,.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}


/* ══════════════════════════════════════════════════════
   32. COUNTER BADGE
   (komponen khusus — tidak ada padanannya di Bootstrap)
══════════════════════════════════════════════════════ */
.counter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: .68rem;
    font-weight: 700;
    border-radius: var(--bs-border-radius-pill);
    background-color: var(--bs-primary);
    color: #fff;
    line-height: 1;
}


/* ══════════════════════════════════════════════════════
   33. QUESTION & SELECTED LIST
   (layout list item — tidak tersedia sebagai Bootstrap component)
══════════════════════════════════════════════════════ */
.q-no {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--bs-border-radius-sm);
    background-color: rgba(var(--bs-primary-rgb), .08);
    color: var(--bs-primary);
    font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.s-no {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: var(--bs-border-radius-sm);
    background-color: rgba(var(--bs-secondary-rgb), .12);
    color: var(--bs-secondary);
    font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.question-item,
.selected-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    padding: .875rem 1.375rem;
    border-bottom: 1px solid var(--bs-border-color);
    transition: background var(--bs-transition);
}
.question-item:last-child,
.selected-item:last-child { border-bottom: none; }
.question-item:hover { background-color: rgba(var(--bs-primary-rgb), .03); }
.selected-item:hover { background-color: rgba(var(--bs-secondary-rgb), .04); }
.q-title {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.45;
}
.selected-content-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--bs-body-color);
    line-height: 1.45;
}
.selected-panel-sticky {
    position: sticky;
    top: calc(68px + 1rem);
}
.selected-list-scroll {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}
.selected-list-scroll::-webkit-scrollbar { width: 4px; }
.selected-list-scroll::-webkit-scrollbar-track { background: transparent; }
.selected-list-scroll::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
}
.filter-bar {
    background-color: #FAFBFD;
    border-bottom: 1px solid var(--bs-border-color);
    padding: .875rem 1.375rem;
}
.empty-icon-wrap {
    width: 46px; height: 46px;
    border-radius: var(--bs-border-radius);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem;
}


/* ══════════════════════════════════════════════════════
   34. SCROLLBAR GLOBAL — subtle & konsisten
══════════════════════════════════════════════════════ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--bs-primary-rgb), .3); }


/* ══════════════════════════════════════════════════════
   35. RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    header.bg-primary {
        clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
        padding: calc(68px + 2.5rem) 0 4.5rem;
    }
    section { padding: 3.5rem 0; }
    section.bg-primary { margin: 0 .5rem; }
    .hero-stat-box .stat-num { font-size: 1.4rem; }
    .page-header, .save-bar { border-radius: var(--bs-border-radius); }
    .modal-content { border-radius: var(--bs-border-radius-lg) !important; }
    .card-body { padding: 1.125rem; }
    table td { padding-left: .875rem !important; padding-right: .875rem !important; }
    table th { padding: .75rem .875rem !important; }
}

@media (max-width: 575px) {
    .btn-lg { padding: .6rem 1.5rem; font-size: .9rem; }
    .modal-dialog { margin: .75rem; }
}