/* TrustBank Digital brand enforcement layer (see public/brand-guidelines.html).
   Loaded last on every page. Navy = authority (sidebar/hero/titles), blue = action,
   sky = soft highlight, teal = success/verified only, gold = sparing accent (<10% of area).
   Red/amber/green severity colors are a deliberate functional exception for risk scanning
   (red flags, gatekeeper failures) and stay outside the five brand hues by design. */

html, body, button, input, select, textarea, .serif {
    font-family: var(--font-ui) !important;
}
h1, h2, h3, h4, h5, h6, .serif, .brand-name, .logo-name {
    font-family: var(--font-display) !important;
}

body { background: var(--bg); color: var(--text); font-size: 12.6px; font-weight: 400; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }

/* Layout and navigation */
.app { background: var(--bg); }
.sidebar { width: 248px; background: var(--navy); border-right: 1px solid var(--navy-2); }
.sidebar-header { height: 64px; padding-inline: 16px; }
.logo-box, .logo-badge { border-radius: var(--radius) !important; background: var(--blue) !important; box-shadow: none !important; }
.logo-name, .topbar-title { font-weight: 700 !important; color: var(--navy); }
.sidebar .logo-name { color: #fff; }
.search-wrap { height: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.search-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12); }
.sidebar .search-wrap { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.sidebar .search-wrap input { color: #fff; }
.nav-group-label { color: rgba(255, 255, 255, .45); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.nav-item { margin: 2px 0; padding: 9px 12px; border-radius: var(--radius); color: rgba(255, 255, 255, .78); }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-badge { border-radius: 20px; background: var(--danger); color: #fff; }
.user-avatar, .avatar-sm { border-radius: 50% !important; background: var(--blue) !important; color: #fff !important; }
.topbar { height: 64px; padding-inline: 32px; border-bottom: 1px solid var(--line); background: #fff; }
.content, .page-content { width: 100%; max-width: 1600px; padding: 24px 32px 48px; margin-inline: auto; }

/* Typography and hierarchy */
.page-title, .dash-greeting-title, h1.title { font-size: 21.6px !important; line-height: 32px; font-weight: 700 !important; letter-spacing: -.01em; color: var(--navy); }
.page-description, .page-sub, .dash-greeting-sub { color: var(--muted); font-size: 12.6px; }
.page-header { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.page-eyebrow { color: var(--muted); font-weight: 700; letter-spacing: .08em; }
h2, h3, h4, h5, h6 { color: var(--navy); }

/* Controls */
.btn, .btn-sm, .btn-ghost, .btn-signin, .role-pill, .dash-periode-select {
    min-height: 36px;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    transform: none !important;
}
.btn-primary, .btn-signin, .btn-sm.primary { color: #fff; background: var(--blue) !important; border-color: var(--blue) !important; }
.btn-primary:hover, .btn-signin:hover, .btn-sm.primary:hover { background: var(--blue-hover) !important; border-color: var(--blue-hover) !important; }
.btn-light, .btn-secondary, .btn-outline-secondary { background: #fff !important; color: var(--navy) !important; border-color: var(--line) !important; }
.btn-light:hover, .btn-secondary:hover, .btn-outline-secondary:hover { background: var(--bg) !important; color: var(--navy) !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; }
.icon-btn { border-radius: var(--radius); }

.form-control, .form-select, .form-control-custom, .input-group-text, .select2-selection {
    min-height: 40px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    background: #fff;
    color: var(--text);
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus, .form-control-custom:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12) !important;
}
.form-label { color: var(--navy); font-size: 11.7px; font-weight: 600; }
.form-text, small.text-muted { color: var(--muted) !important; font-size: 11px; }

/* Surfaces: flat first, restrained cards only where structure needs them */
.card, .crud-card, .content-card, .dash-card, .dash-stat-card, .list-section,
.table-wrapper, .penilaian-panel, .overview-card, .survey-card {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
}
.modal-content { border: 1px solid var(--line); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { background: #fff; border-color: var(--line); }
.modal-header .modal-title { color: var(--navy); font-family: var(--font-display); }
.dropdown-menu, .user-dropdown, .topbar-user-dropdown, .profile-menu {
    border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important;
}

/* Tables: generous padding so content never feels cramped */
.table-wrapper { overflow: hidden; }
.table, .dash-table { color: var(--text); }
.table thead, .dash-table thead { background: var(--bg) !important; }
.table th, .dash-table th { color: var(--navy) !important; font-size: 11px; font-weight: 700 !important; border-color: var(--line) !important; }
.table th, .table td, .dash-table th, .dash-table td { padding: 14px 20px !important; }
.table td, .dash-table td { height: var(--table-row); border-color: var(--line) !important; vertical-align: middle; }
.table tbody tr:hover { background: var(--bg) !important; }

/* Badges and semantic states (functional exception: red/amber/green stay
   outside the brand hues so risk states remain scannable at a glance) */
.badge, .status-pill, .card-tag, .dash-status-pill, .kategori-badge {
    padding: 4px 9px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important;
}
.badge-success, .text-bg-success, .pill-success, .is-success { background: var(--success-soft) !important; color: var(--success) !important; }
.badge-warning, .text-bg-warning, .pill-warn, .is-warn { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge-danger, .text-bg-danger, .pill-danger, .is-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge-info, .text-bg-info, .pill-info { background: #EFF4FE !important; color: var(--blue) !important; }
.badge-secondary, .text-bg-secondary { background: var(--bg) !important; color: var(--muted) !important; }
.role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid; border-radius: var(--radius); font-size: 11px; font-weight: 600; }
.role-admin { background: #EFF4FE; color: var(--blue); border-color: var(--sky); }
.role-verifikator { background: var(--gold-soft); color: #92620E; border-color: #F4CB86; }
.role-respondent { background: var(--teal-soft); color: var(--teal); border-color: #99E6DA; }

/* Dashboard: layout and card styling live in css/pages/dashboard.css.
   Only the shared score-level legend is enforced here. */
.score-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.score-level { min-height: 68px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border-radius: var(--radius); border: 1px solid transparent; }
.score-level strong { font-size: 14.4px; } .score-level span { font-size: 11px; font-weight: 600; }
.level-sangat-baik { background: var(--teal-soft); color: var(--teal); border-color: #99E6DA; }
.level-baik { background: #EFF4FE; color: var(--blue); border-color: var(--sky); }
.level-cukup { background: var(--gold-soft); color: #92620E; border-color: #F4CB86; }
.level-terbatas { background: var(--warning-soft); color: var(--warning); border-color: #F4CB86; }
.level-risiko { background: var(--danger-soft); color: var(--danger); border-color: #F3B3B3; }

.list-section { border-top: 4px solid var(--blue) !important; }
.page-header { padding-left: 14px; border-left: 4px solid var(--blue); }

/* Authentication is allowed one illustrative panel; no copy inside it, controls stay business-like. */
.auth-card { border: 1px solid var(--line); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.brand-icon { border-radius: var(--radius); background: var(--blue); }
.brand-name { font-weight: 700 !important; color: var(--navy); }
.role-selector { border-radius: var(--radius); background: var(--bg); }
.role-pill.active { color: var(--blue); }
.forgot-link, .footer-note a { color: var(--blue); }

/* Respondent portal compatibility. The removed "--teal: var(--teal)" and
   "--blue: var(--blue)" self-references used to look like harmless no-ops
   but are actually circular custom-property declarations: per spec, a
   custom property that references itself resolves to the guaranteed-invalid
   value, which wiped out --blue/--teal (and everything aliased to them) for
   this element and every descendant — i.e. the whole page below <body>. */
body { --primary-blue: var(--blue); --primary-teal: var(--teal); --accent: var(--blue); }
.topbar-brand .logo span { color: var(--blue) !important; }
.profile-trigger, .menu-item { border-radius: var(--radius) !important; }
.topbar-brand { color: inherit; text-decoration: none; cursor: pointer; }
.topbar-brand::after { content: ""; position: absolute; inset: 0; }
.topbar-brand { position: relative; }
.respondent-theme-toggle { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--muted); }
.respondent-theme-toggle:hover { background: var(--bg); color: var(--navy); }
.profile-trigger:hover, .menu-item:hover { background: var(--bg) !important; }
.info-card, .overview-card, .overview-summary-card, .ind-card, .penilaian-p-card,
.normalisasi-info, .hasil-normalisasi, .klarifikasi-item, .redflag-clarification {
    background: #fff !important;
    color: var(--text) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.info-card::before, .overview-card::after, .overview-summary-card::before { display: none !important; }
.info-card:hover, .overview-card:hover, .ind-card:hover { transform: none !important; box-shadow: none !important; }
.info-card-icon, .overview-card-icon, .nav-pilar-icon, .ind-num {
    background: transparent !important;
    color: var(--blue) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.overview-summary-label, .overview-summary-count, .overview-summary-text { color: #fff !important; }
.overview-card .bar, .nav-pilar .bar { background: var(--bg) !important; border-radius: 4px !important; }
.overview-card .bar-fill, .nav-pilar .bar-fill { background: var(--blue) !important; border-radius: 4px !important; }
.overview-card .ring, .overview-card.card-color-0 .ring, .overview-card.card-color-1 .ring,
.overview-card.card-color-2 .ring { background: conic-gradient(var(--blue) calc(var(--pct) * 1%), var(--line) 0) !important; }
.nav-pilar { border-radius: var(--radius) !important; color: var(--muted) !important; }
.nav-pilar:hover { background: var(--bg) !important; color: var(--navy) !important; }
.nav-pilar.active { background: #EFF4FE !important; color: var(--blue) !important; }
.ind-card.open { border-color: var(--sky) !important; box-shadow: none !important; }
.ind-status, .penilaian-status-badge, .s2-checks label { border-radius: 6px !important; }
.p-scale-btn, .q-scale-btn { border-radius: var(--radius) !important; color: var(--navy) !important; background: #fff !important; border-color: var(--line) !important; }
.p-scale-btn.selected, .q-scale-btn.selected { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.fab-cs { background: var(--blue) !important; box-shadow: var(--shadow-lg) !important; }

/* Review detail: information hierarchy without decorative icon tiles. */
.detail-summary-card, .detail-progress-card, .presbu-summary-card, .pilar-item {
    background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: none !important;
}
.detail-summary-icon { width: auto !important; height: auto !important; background: transparent !important; color: var(--blue) !important; border-radius: 0 !important; }
.pilar-toggle { background: var(--bg) !important; }
.pilar-progress-chip, .indikator-status-chip, .indikator-bobot, .penilaian-p-badge { border-radius: 6px !important; }
.detail-progress-track, .detail-progress-fill { border-radius: 4px !important; }
.detail-progress-track { background: var(--bg) !important; }
.detail-progress-fill { background: var(--blue) !important; }

@media (max-width: 1024px) {
    .content, .page-content { padding: 24px; }
}
@media (max-width: 640px) {
    .content, .page-content { padding: 16px 16px 32px; }
    .page-header { align-items: flex-start; }
    .dash-stat-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .score-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark mode uses the same brand hues at adjusted luminance. */
[data-theme="dark"] body, [data-theme="dark"] .app { background: var(--body) !important; color: var(--text) !important; }
[data-theme="dark"] .sidebar, [data-theme="dark"] .topbar, [data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer,
[data-theme="dark"] .card, [data-theme="dark"] .crud-card, [data-theme="dark"] .content-card,
[data-theme="dark"] .dash-card, [data-theme="dark"] .dash-stat-card,
[data-theme="dark"] .list-section, [data-theme="dark"] .table-wrapper,
[data-theme="dark"] .info-card, [data-theme="dark"] .overview-card, [data-theme="dark"] .overview-summary-card,
[data-theme="dark"] .ind-card, [data-theme="dark"] .penilaian-p-card, [data-theme="dark"] .penilaian-panel,
[data-theme="dark"] .profile-menu, [data-theme="dark"] .user-dropdown, [data-theme="dark"] .topbar-user-dropdown {
    background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .sidebar { background: #0B1526 !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 130%) !important; border: none; }
[data-theme="dark"] .page-title, [data-theme="dark"] .dash-greeting-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .dash-hero-name, [data-theme="dark"] .dash-hero-score,
[data-theme="dark"] .dash-stat-value, [data-theme="dark"] .overview-summary-label,
[data-theme="dark"] .overview-summary-count, [data-theme="dark"] .overview-summary-text { color: var(--text) !important; }
[data-theme="dark"] .page-description, [data-theme="dark"] .page-sub,
[data-theme="dark"] .dash-greeting-sub, [data-theme="dark"] .dash-stat-label,
[data-theme="dark"] .form-text, [data-theme="dark"] small { color: var(--text-muted) !important; }
[data-theme="dark"] .form-label, [data-theme="dark"] label { color: var(--text); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select,
[data-theme="dark"] .form-control-custom, [data-theme="dark"] .search-wrap,
[data-theme="dark"] .dokumen-dropzone, [data-theme="dark"] .respondent-theme-toggle {
    background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
[data-theme="dark"] .nav-item:hover, [data-theme="dark"] .menu-item:hover,
[data-theme="dark"] .profile-trigger:hover, [data-theme="dark"] .table tbody tr:hover { background: var(--hover) !important; color: var(--text) !important; }
[data-theme="dark"] .nav-item.active, [data-theme="dark"] .nav-pilar.active { background: var(--blue) !important; color: #fff !important; }
[data-theme="dark"] .table thead, [data-theme="dark"] .dash-table thead,
[data-theme="dark"] .pilar-toggle { background: var(--hover) !important; }
[data-theme="dark"] .table, [data-theme="dark"] .dash-table,
[data-theme="dark"] .table td, [data-theme="dark"] .dash-table td { color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] .dash-stat-card.stat-success { background: var(--success-soft) !important; border-color: #1F5A38 !important; }
[data-theme="dark"] .dash-stat-card.stat-info { background: var(--active) !important; border-color: var(--blue) !important; }
[data-theme="dark"] .dash-stat-card.stat-warning { background: var(--warning-soft) !important; border-color: #6B4E15 !important; }
[data-theme="dark"] .dash-stat-card.stat-danger { background: var(--danger-soft) !important; border-color: #6B2323 !important; }

/* Respondent visual refresh: flat color, responsive topbar, no decorative circles. */
.topbar .profile { display: flex; align-items: center; gap: 8px; }
.respondent-theme-toggle { flex: 0 0 36px; }
.profile-trigger { min-width: 0; }
.profile-menu { top: calc(100% + 10px) !important; }

.survey-info-bar .info-card { border-top: 4px solid var(--blue) !important; }
.survey-info-bar { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.survey-info-bar .info-card:nth-child(1) { background: #EFF4FE !important; border-color: var(--sky) !important; border-top-color: var(--blue) !important; }
.survey-info-bar .info-card:nth-child(2) { background: var(--teal-soft) !important; border-color: #99E6DA !important; border-top-color: var(--teal) !important; }
.survey-info-bar .info-card:nth-child(3) { background: var(--gold-soft) !important; border-color: #F4CB86 !important; border-top-color: var(--gold) !important; }
.survey-info-bar .info-card-icon { width: 32px !important; height: 32px !important; display: grid; place-items: center; border-radius: var(--radius); }
.survey-info-bar .info-card:nth-child(1) .info-card-icon { background: #E0EAFC !important; color: var(--blue) !important; }
.survey-info-bar .info-card:nth-child(2) .info-card-icon { background: #B8F0E4 !important; color: var(--teal) !important; }
.survey-info-bar .info-card:nth-child(3) .info-card-icon { background: #FBE3B8 !important; color: #92620E !important; }

.overview-card.card-color-0 { background: var(--teal-soft) !important; border-color: #99E6DA !important; border-top: 4px solid var(--teal) !important; }
.overview-card.card-color-1 { background: #EFF4FE !important; border-color: var(--sky) !important; border-top: 4px solid var(--blue) !important; }
.overview-card.card-color-2 { background: var(--gold-soft) !important; border-color: #F4CB86 !important; border-top: 4px solid var(--gold) !important; }
.overview-card.card-color-0 .overview-card-icon { background: #B8F0E4 !important; color: var(--teal) !important; }
.overview-card.card-color-1 .overview-card-icon { background: #E0EAFC !important; color: var(--blue) !important; }
.overview-card.card-color-2 .overview-card-icon { background: #FBE3B8 !important; color: #92620E !important; }
.overview-card-icon { width: 30px !important; height: 30px !important; display: grid !important; place-items: center; border-radius: var(--radius); }
.overview-card .ring, .overview-card.card-color-0 .ring, .overview-card.card-color-1 .ring,
.overview-card.card-color-2 .ring {
    width: auto !important; height: auto !important; padding: 5px 8px; border-radius: 6px !important;
    background: #fff !important; border: 1px solid currentColor; color: var(--blue);
}
.overview-card.card-color-0 .ring { color: var(--teal); }
.overview-card.card-color-2 .ring { color: #92620E; }
.overview-card .ring span { width: auto; height: auto; border-radius: 0; background: transparent; color: currentColor; }
.overview-card.card-color-0 .bar-fill { background: var(--teal) !important; }
.overview-card.card-color-1 .bar-fill { background: var(--blue) !important; }
.overview-card.card-color-2 .bar-fill { background: var(--gold) !important; }
.overview-summary-card { background: linear-gradient(135deg, var(--navy), var(--blue)) !important; color: #fff !important; border: none !important; }
.overview-summary-card .overview-summary-label, .overview-summary-card .overview-summary-count { color: #fff !important; }
.fab-cs { border-radius: var(--radius-lg) !important; }

[data-theme="dark"] .survey-info-bar .info-card:nth-child(1),
[data-theme="dark"] .overview-card.card-color-1 { background: var(--surface) !important; border-color: var(--blue) !important; }
[data-theme="dark"] .survey-info-bar .info-card:nth-child(2),
[data-theme="dark"] .overview-card.card-color-0 { background: var(--surface) !important; border-color: var(--teal) !important; }
[data-theme="dark"] .survey-info-bar .info-card:nth-child(3),
[data-theme="dark"] .overview-card.card-color-2 { background: var(--surface) !important; border-color: var(--gold) !important; }

@media (max-width: 768px) {
    .topbar { min-height: 64px; padding: calc(10px + var(--safe-top)) 12px 10px !important; gap: 8px; }
    .topbar-brand { flex: 1 1 auto; overflow: hidden; }
    .topbar .profile { flex: 0 0 auto; gap: 6px; }
    .respondent-theme-toggle { width: 34px; height: 34px; flex-basis: 34px; }
    .profile-trigger { width: 34px; height: 34px; padding: 0 !important; }
    .avatar-sm { width: 34px; height: 34px; }
    .profile-menu { position: fixed !important; top: calc(62px + var(--safe-top)) !important; left: 12px !important; right: 12px !important; width: auto !important; z-index: 1000 !important; }

    .survey-info-bar { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; overflow: visible !important; padding-bottom: 0 !important; }
    .survey-info-bar .info-card { width: 100% !important; min-width: 0 !important; scroll-snap-align: none !important; }

    .body { padding-bottom: calc(96px + var(--safe-bottom)) !important; }
    /* The respondent pilar-nav bar reuses the ".sidebar" class name (as a
       <div>) for its mobile floating-card treatment below, but the admin
       layout's real navigation sidebar is an <aside class="sidebar"> — so
       this is scoped to the element type to avoid also repositioning and
       recoloring the admin sidebar on mobile. */
    div.sidebar {
        left: 10px !important; right: 10px !important; bottom: calc(10px + var(--safe-bottom)) !important;
        width: auto !important; padding: 7px !important; border: 1px solid var(--line) !important;
        border-radius: 18px !important; background: #fff !important; backdrop-filter: none !important;
        box-shadow: 0 10px 30px rgba(11, 30, 74, .18) !important;
    }
    #pilarNav { width: 100%; gap: 5px !important; }
    .nav-pilar { min-height: 58px; padding: 7px 3px !important; border-radius: var(--radius-md) !important; color: var(--muted) !important; }
    .nav-pilar-icon { width: 24px !important; height: 24px !important; color: currentColor !important; }
    .nav-pilar.active { background: var(--blue) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(29, 78, 216, .22); }
    .nav-pilar.active .nav-pilar-icon, .nav-pilar.active .nav-pilar-label { color: #fff !important; }
    .nav-pilar-label { color: currentColor !important; font-size: 11px !important; }
    .nav-pilar-check { top: 3px !important; right: 8px !important; background: transparent !important; color: var(--success) !important; }
    .nav-pilar.active .nav-pilar-check { color: #fff !important; }
    .fab-cs { bottom: calc(92px + var(--safe-bottom)) !important; }
}

/* High-contrast dark mode: textual content stays legible, semantic badges keep their level color. */
[data-theme="dark"] body,
[data-theme="dark"] body p,
[data-theme="dark"] body span,
[data-theme="dark"] body div,
[data-theme="dark"] body strong,
[data-theme="dark"] body small,
[data-theme="dark"] body label,
[data-theme="dark"] body th,
[data-theme="dark"] body td,
[data-theme="dark"] body a,
[data-theme="dark"] body button,
[data-theme="dark"] body h1,
[data-theme="dark"] body h2,
[data-theme="dark"] body h3,
[data-theme="dark"] body h4,
[data-theme="dark"] body h5,
[data-theme="dark"] body h6 {
    color: var(--text) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text) !important;
    opacity: 1;
}

[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-group-label,
[data-theme="dark"] .user-role,
[data-theme="dark"] .profile-role,
[data-theme="dark"] .logo-sub,
[data-theme="dark"] .page-description,
[data-theme="dark"] .page-sub,
[data-theme="dark"] .dash-greeting-sub,
[data-theme="dark"] .dash-stat-label,
[data-theme="dark"] .dash-bar-label,
[data-theme="dark"] .dash-bar-value,
[data-theme="dark"] .overview-card-count,
[data-theme="dark"] .info-label,
[data-theme="dark"] .info-value,
[data-theme="dark"] .nav-pilar,
[data-theme="dark"] .nav-pilar-label,
[data-theme="dark"] .form-text,
[data-theme="dark"] .text-muted {
    color: var(--text) !important;
}
[data-theme="dark"] .sidebar .nav-item,
[data-theme="dark"] .sidebar .nav-group-label { color: rgba(255, 255, 255, .78) !important; }

/* Dark button system. Avoid white button surfaces and preserve action hierarchy. */
[data-theme="dark"] .btn,
[data-theme="dark"] .btn-sm,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .action-btn,
[data-theme="dark"] button.dt-button {
    background: var(--hover) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn-sm:hover,
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .action-btn:hover,
[data-theme="dark"] button.dt-button:hover {
    background: var(--active) !important;
    color: var(--text) !important;
    border-color: var(--blue) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-sm.primary,
[data-theme="dark"] .btn-signin,
[data-theme="dark"] .nav-pilar.active {
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue-hover) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-sm.primary:hover,
[data-theme="dark"] .btn-signin:hover {
    background: var(--blue-hover) !important;
    border-color: var(--blue-hover) !important;
}

[data-theme="dark"] .btn-danger,
[data-theme="dark"] .btn-outline-danger {
    background: var(--danger) !important;
    color: #fff !important;
    border-color: var(--danger) !important;
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] button:disabled {
    background: var(--body) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    opacity: .75;
}

[data-theme="dark"] .page-link {
    background: var(--hover) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .page-item.active .page-link {
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue-hover) !important;
}

[data-theme="dark"] .nav-pilar.active,
[data-theme="dark"] .nav-pilar.active .nav-pilar-icon,
[data-theme="dark"] .nav-pilar.active .nav-pilar-label,
[data-theme="dark"] .nav-pilar.active .nav-pilar-check,
[data-theme="dark"] .overview-summary-card,
[data-theme="dark"] .overview-summary-card .overview-summary-label,
[data-theme="dark"] .overview-summary-card .overview-summary-count {
    color: #fff !important;
}

/* Semantic level colors remain meaningful and readable. */
[data-theme="dark"] .kategori-badge.kategori-sangat-baik { color: var(--teal) !important; }
[data-theme="dark"] .kategori-badge.kategori-baik { color: var(--blue) !important; }
[data-theme="dark"] .kategori-badge.kategori-cukup { color: var(--gold) !important; }
[data-theme="dark"] .kategori-badge.kategori-terbatas { color: var(--warning) !important; }
[data-theme="dark"] .kategori-badge.kategori-risiko,
[data-theme="dark"] .kategori-badge.kategori-gagal { color: var(--danger) !important; }
[data-theme="dark"] .score-level.level-sangat-baik { color: var(--teal) !important; }
[data-theme="dark"] .score-level.level-baik { color: var(--blue) !important; }
[data-theme="dark"] .score-level.level-cukup { color: var(--gold) !important; }
[data-theme="dark"] .score-level.level-terbatas { color: var(--warning) !important; }
[data-theme="dark"] .score-level.level-risiko { color: var(--danger) !important; }
[data-theme="dark"] .score-level strong,
[data-theme="dark"] .score-level span { color: inherit !important; }
[data-theme="dark"] .review-status.is-pending { color: var(--warning) !important; }
[data-theme="dark"] .review-status.is-clear { color: var(--success) !important; }
[data-theme="dark"] .role-badge { background: var(--hover) !important; color: var(--text) !important; }
[data-theme="dark"] .role-badge.role-admin { border-color: var(--blue) !important; }
[data-theme="dark"] .role-badge.role-verifikator { border-color: var(--gold) !important; }
[data-theme="dark"] .role-badge.role-respondent { border-color: var(--teal) !important; }

/* Dark respondent controls and progress labels need solid contrast. */
[data-theme="dark"] .btn-tour-replay {
    background: var(--hover) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
[data-theme="dark"] .btn-tour-replay i { color: var(--sky) !important; }
[data-theme="dark"] .btn-tour-replay:hover { background: var(--active) !important; border-color: var(--blue) !important; }
[data-theme="dark"] .overview-card .ring,
[data-theme="dark"] .overview-card.card-color-0 .ring,
[data-theme="dark"] .overview-card.card-color-1 .ring,
[data-theme="dark"] .overview-card.card-color-2 .ring {
    background: var(--hover) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
[data-theme="dark"] .overview-card .ring span { color: var(--text) !important; }
[data-theme="dark"] .overview-card .bar,
[data-theme="dark"] .nav-pilar .bar { background: var(--border) !important; }

/* Financial Governance Design System v1.0 */
:root {
    --brand-primary:#2157E5; --brand-primary-hover:#1849C9; --brand-secondary:#13AAA7;
    --navy-950:#031A4A; --navy-900:#06245C; --navy-800:#0A3274; --navy-700:#114292;
    --blue-700:#1646C8; --blue-600:#2157E5; --blue-500:#2F6BFF; --blue-400:#5790FF;
    --teal-700:#087E85; --teal-600:#07999B; --teal-500:#13AAA7; --teal-400:#3FC5C0;
    --bg-main:#F5F8FE; --bg-soft:#EDF4FC; --bg-blue-soft:#E5F0FD; --surface:#FFFFFF;
    --text-primary:#172033; --text-secondary:#475569; --text-muted:#8492A6;
    --border:#DFE7F2; --divider:#E7EDF5;
    --success:#0F9F91; --success-bg:#E7F8F5; --warning:#E9A23B; --warning-bg:#FFF7E6;
    --danger:#D94B56; --danger-bg:#FFF0F1; --info:#2F6BFF; --info-bg:#EDF4FF;
    --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
    --shadow-xs:0 1px 3px rgba(16,35,75,.05); --shadow-sm:0 3px 10px rgba(16,35,75,.06);
    --shadow-md:0 8px 24px rgba(16,35,75,.08); --shadow-floating:0 18px 50px rgba(11,39,91,.14);
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
    --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
    --blue:var(--brand-primary); --blue-hover:var(--brand-primary-hover); --navy:var(--navy-950);
    --navy-2:var(--navy-900); --teal:var(--teal-600); --bg:var(--bg-main); --line:var(--border);
    --text:var(--text-primary); --muted:var(--text-secondary); --radius:var(--radius-md);
    --font-ui:"Plus Jakarta Sans","Inter",system-ui,sans-serif; --font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
    --sidebar-gradient:linear-gradient(180deg,#0B3A80 0%,#072A5E 46%,#063E4C 100%);
}
/* This design system's tokens (--surface, --text-primary, --border, --success,
   --warning, --danger, --info, ...) had no dark-mode remap at all, so every
   rule built on them — the large majority of the app's chrome — silently
   stayed at its light-mode color once data-theme switched to dark, while
   :root's unconditional declarations kept out-cascading theme/variables.css's
   [data-theme="dark"] block for the few token names both files share. This
   is the single highest-impact fix for that: remap the same tokens here so
   every alias built on them (--text, --muted, --navy, --blue, --bg, --line)
   reacts to the theme automatically. */
[data-theme="dark"] {
    --brand-primary:#5790FF; --brand-primary-hover:#7CA9FF;
    --bg-main:#0B1526; --bg-soft:#16223D; --bg-blue-soft:#172A4D; --surface:#111C34;
    --text-primary:#F1F5F9; --text-secondary:#CBD5E1; --text-muted:#94A3B8;
    --border:#24304A; --divider:#24304A;
    --success:#4FD5C6; --success-bg:#12332F; --warning:#FBBF24; --warning-bg:#3F2E10;
    --danger:#F0808A; --danger-bg:#3F1B1B; --info:#7CA9FF; --info-bg:#172A4D;
}
html { font-size:16px; }
body { background:var(--bg-main)!important; color:var(--text-primary); font-family:var(--font-ui)!important; font-size:14px; line-height:22px; }
h1,.page-title,.dash-greeting-title { font-size:32px!important; line-height:40px!important; font-weight:700!important; color:#10234B!important; }
[data-theme="dark"] h1,[data-theme="dark"] .page-title,[data-theme="dark"] .dash-greeting-title { color:var(--text-primary)!important; }
h2 { font-size:26px; line-height:34px; font-weight:700; } h3 { font-size:20px; line-height:28px; font-weight:700; }
h4 { font-size:17px; line-height:24px; font-weight:600; } small,.small { font-size:12px!important; line-height:16px; }
:focus-visible { outline:3px solid rgba(47,107,255,.3)!important; outline-offset:2px; }

.sidebar { width:248px; background:var(--sidebar-gradient,linear-gradient(180deg,#0B3A80 0%,#072A5E 46%,#063E4C 100%))!important; border-color:rgba(255,255,255,.08)!important; }
.sidebar .logo-box { background:linear-gradient(135deg,var(--brand-primary),var(--teal-500))!important; }
.nav-item.active { background:linear-gradient(100deg,var(--brand-primary),#1E6FD9)!important; color:#fff!important; box-shadow:0 6px 16px rgba(33,87,229,.28)!important; }
.nav-item.active .nav-icon, .nav-item.active .nav-label { color:#fff!important; }
.sidebar-footer { background:transparent!important; border-color:rgba(255,255,255,.12)!important; }
.sidebar .user-name { color:#fff; } .sidebar .user-role,.sidebar .user-menu-chevron { color:rgba(255,255,255,.62); }
.nav-item { min-height:44px; border-radius:var(--radius-md)!important; }
.nav-item.active { background:var(--brand-primary)!important; box-shadow:inset 3px 0 0 #8DB8FF; }
.nav-icon { font-size: 16.2px!important; } .topbar { min-height:64px; }
.content,.page-content { width:100%; max-width:1440px; padding:32px 40px 48px; margin-inline:auto; }

.card,.crud-card,.content-card,.dash-card,.dash-stat-card,.list-section,.table-wrapper,.penilaian-panel,.survey-card {
    border:1px solid #E4EBF5!important; border-radius:var(--radius-lg)!important; box-shadow:var(--shadow-sm)!important;
}
.btn,.btn-sm,.btn-ghost,.btn-signin { min-height:42px; border-radius:var(--radius-md)!important; transition:color .18s ease,background .18s ease,border .18s ease,box-shadow .18s ease,transform .18s ease; }
.btn:hover { transform:translateY(-1px)!important; }
.btn-primary,.btn-signin,.btn-sm.primary { background:var(--brand-primary)!important; border-color:var(--brand-primary)!important; }
.btn-primary:hover,.btn-signin:hover,.btn-sm.primary:hover { background:var(--brand-primary-hover)!important; border-color:var(--brand-primary-hover)!important; }
.form-control,.form-select,.form-control-custom,.input-group-text,.select2-selection { min-height:44px; border-radius:var(--radius-md)!important; border-color:#CBD7E5!important; }
.form-control:focus,.form-select:focus,.form-control-custom:focus { border-color:var(--blue-500)!important; box-shadow:0 0 0 3px rgba(47,107,255,.12)!important; }
.form-label,label { font-size: 11.7px; font-weight:600; color:#26324A; }
.table thead,.dash-table thead { background:#F5F8FC!important; }
.table th,.table td,.dash-table th,.dash-table td { padding:14px 20px!important; }
.table td,.dash-table td { height:54px; } .table tbody tr:hover { background:#F8FBFF!important; }
.badge,.status-pill,.card-tag,.dash-status-pill,.kategori-badge { min-height:26px; padding:4px 10px!important; }
.modal-content { border-radius:var(--radius-xl)!important; box-shadow:var(--shadow-floating)!important; }
.dropdown-menu,.user-dropdown,.topbar-user-dropdown,.profile-menu { border-radius:var(--radius-lg)!important; box-shadow:var(--shadow-floating)!important; }

body:has(.auth-card) { padding:0!important; background:#fff!important; }
.auth-card { width:100%!important; max-width:none!important; min-height:100vh; display:grid; grid-template-columns:55% 45%!important; grid-template-areas:"visual form"; border:0!important; border-radius:0!important; box-shadow:none!important; }
.auth-card .visual-panel { grid-area:visual; } .auth-card .form-panel { grid-area:form; }
.auth-card .form-panel { padding:64px clamp(48px,6vw,96px); overflow-y:auto; }
.auth-card .brand { position:static; margin:0 0 64px; }
.auth-card .form-control-custom { min-height:52px; } .auth-card .btn-signin { min-height:48px; }
.auth-card h1.title { font-size:32px!important; line-height:40px!important; }

.app { background:var(--bg-main)!important; }
.info-card,.overview-card,.overview-summary-card,.ind-card,.penilaian-p-card { border-radius:var(--radius-lg)!important; border-color:#E4EBF5!important; box-shadow:var(--shadow-sm)!important; }
.overview-summary-card { background:linear-gradient(135deg,var(--blue-700),var(--blue-500))!important; color:#fff!important; }
.info-card::before,.overview-card::after,.overview-summary-card::before { display:none!important; }
.nav-pilar { min-height:48px; border-radius:var(--radius-md)!important; }
.sidebar .nav-pilar { color:rgba(255,255,255,.78)!important; }
.sidebar .nav-pilar .nav-pilar-icon { color:rgba(255,255,255,.72)!important; }
.sidebar .nav-pilar .pct { color:rgba(255,255,255,.6)!important; }
.sidebar .nav-pilar:hover { background:rgba(255,255,255,.08)!important; color:#fff!important; }
.nav-pilar.active { background:var(--brand-primary)!important; color:#fff!important; box-shadow:inset 3px 0 0 #8DB8FF; }
.nav-pilar.active .nav-pilar-icon { color:#fff!important; }
.p-scale-btn.selected,.q-scale-btn.selected { background:var(--brand-primary)!important; }
@media(max-width:1024px){.content,.page-content{padding:24px}}
@media(max-width:900px){.auth-card{display:block}.auth-card .visual-panel{display:none}.auth-card .form-panel{min-height:100vh}}
@media(max-width:640px){.content,.page-content{padding:16px 16px 32px}h1,.page-title,.dash-greeting-title{font-size:26px!important;line-height:34px!important}}

/* Reusable enterprise components */
.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:0 0 24px; margin:0 0 24px; border:0; border-bottom:1px solid var(--divider); }
.page-header-left { min-width:0; }
.page-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--text-muted); font-size: 11px; line-height:16px; }
.page-breadcrumb a { color:var(--text-secondary); text-decoration:none; }
.page-breadcrumb i { font-size: 11px; }
.page-description { max-width:720px; margin:4px 0 0; color:var(--text-secondary); font-size: 12.6px; line-height:22px; }
.toolbar,.table-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.btn-group,.toolbar-actions { display:inline-flex; align-items:center; gap:8px; }
.pagination { gap:4px; }
.page-link { min-width:34px; min-height:34px; display:grid; place-items:center; border-color:var(--border); color:var(--text-secondary); border-radius:var(--radius-sm)!important; }
.page-item.active .page-link { background:var(--brand-primary); border-color:var(--brand-primary); }
.table-responsive { border-radius:var(--radius-lg); }
.table thead th { position:sticky; top:0; z-index:2; color:#394760!important; font-size: 11px!important; line-height:16px; font-weight:600!important; }
.table tbody td { color:var(--text-secondary); font-size: 12.6px; line-height:22px; }
.table-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-top:1px solid var(--divider); color:var(--text-secondary); font-size: 11.7px; }
.empty-state { min-height:280px; padding:48px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--text-secondary); }
.empty-state-icon { width:56px; height:56px; display:grid; place-items:center; margin-bottom:16px; color:var(--brand-primary); background:var(--info-bg); border-radius:var(--radius-lg); }
.empty-state-icon i { font-size: 21.6px; }
.empty-state h3 { margin:0 0 8px; font-size: 15.3px; line-height:24px; }
.empty-state p { max-width:420px; margin:0; }
.table-loading { min-height:160px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-secondary); font-size: 11.7px; }
.spinner-border { color:var(--brand-primary); }
.alert { padding:14px 16px; border-radius:var(--radius-md); border-width:1px; font-size: 12.6px; }
.alert-success { color:var(--teal-700); background:var(--success-bg); border-color:#BDE8E1; }
.alert-warning { color:#8A5C12; background:var(--warning-bg); border-color:#F4D59B; }
.alert-danger { color:#B73645; background:var(--danger-bg); border-color:#F2C2C8; }
.alert-info { color:var(--blue-700); background:var(--info-bg); border-color:#C9DAFF; }
.form-check-input { width:18px; height:18px; border-color:#B9C7DA; }
.form-check-input:checked { background-color:var(--brand-primary); border-color:var(--brand-primary); }
.form-check-input:focus { border-color:var(--brand-primary); box-shadow:0 0 0 3.6px rgba(33,87,229,.25); }
.form-switch .form-check-input { width:40px; }
[data-theme="dark"] .form-check-input { border-color:var(--border); }
textarea.form-control { min-height:112px; padding:12px 14px; resize:vertical; }
.dokumen-dropzone,.dropzone { min-height:144px; padding:24px; border:1px dashed #AFC0D8!important; border-radius:var(--radius-lg)!important; background:#F8FBFF!important; }
.dokumen-dropzone:hover,.dropzone:hover { border-color:var(--brand-primary)!important; background:var(--info-bg)!important; }
.offcanvas { width:min(480px,100vw)!important; border-color:var(--border); box-shadow:var(--shadow-floating); }
.offcanvas-header,.offcanvas-footer { padding:20px 24px; border-bottom:1px solid var(--divider); }
.offcanvas-body { padding:24px; }
.toast-area,#toast-container { top:20px!important; right:20px!important; bottom:auto!important; }
.toast { border-radius:var(--radius-md)!important; box-shadow:var(--shadow-floating)!important; }
.skeleton { position:relative; overflow:hidden; background:#E7EDF5; border-radius:var(--radius-sm); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent); animation:fg-shimmer 1.4s infinite; }
@keyframes fg-shimmer { to { transform:translateX(100%); } }
.nav-group-label,.sidebar-title,.logo-sub,.profile-role,.profile-menu .info span,.nav-pilar .pct,.ind-kode,.ind-status,.info-label,.overview-card-count,.overview-summary-label,.penilaian-status-badge,.char-counter { font-size: 11px!important; line-height:16px; }
.nav-item,.menu-item,.nav-pilar,.form-text,.penilaian-p-row label { font-size: 11.7px!important; line-height:18px; }
@media(max-width:768px){.page-header{align-items:flex-start;flex-direction:column}.page-header-right{width:100%}.page-header-right .btn{width:100%}.toolbar,.table-toolbar{padding:12px 16px}.table-footer{align-items:flex-start;flex-direction:column}}

/* Topbar notification bell: real pending-verification count, links to the queue. */
.topbar-bell { position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--text-secondary); text-decoration:none; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.topbar-bell:hover { background:var(--bg-soft); border-color:var(--blue-400); color:var(--brand-primary); }
.topbar-bell-dot { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:var(--radius-full); background:var(--danger); color:#fff; font-size: 11px; font-weight:700; line-height:1; box-shadow:0 0 0 2px var(--surface); }
[data-theme="dark"] .topbar-bell { background:var(--hover)!important; border-color:var(--border)!important; color:var(--text)!important; }

/* Respondent shell aligned with the admin application */
.app > .topbar { height:64px; min-height:64px; padding:0 24px; border-top:0; background:var(--surface)!important; border-bottom:1px solid var(--border); box-shadow:var(--shadow-xs); }
.topbar-brand .logo-badge { background:var(--brand-primary)!important; border-radius:var(--radius-md)!important; box-shadow:none!important; }
.topbar-brand .logo { color:var(--heading); font-size:15px!important; font-weight:700; }
.topbar-brand .logo-sub { color:var(--text-muted); font-size:12px!important; }
.respondent-theme-toggle { width:40px; height:40px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--text-secondary); }
.profile-trigger { min-height:44px; padding:4px 10px 4px 4px; border:1px solid var(--border); border-radius:var(--radius-md)!important; background:var(--surface)!important; }
.profile-name { color:var(--text); font-size:13px!important; font-weight:600; }
.profile-role { color:var(--text-muted); font-size:12px!important; }
.body > .sidebar { width:248px; padding:24px 12px; background:var(--sidebar-gradient)!important; border-right:1px solid rgba(255,255,255,.08); box-shadow:none; }
.body > .sidebar .sidebar-title { padding:0 12px 12px; color:rgba(255,255,255,.5); font-size:11px!important; letter-spacing:.08em; }
.body > .sidebar .nav-pilar { min-height:52px; margin-bottom:4px; padding:8px 10px; color:rgba(255,255,255,.78)!important; border-radius:var(--radius-md)!important; }
.body > .sidebar .nav-pilar-icon { width:36px; height:36px; color:rgba(255,255,255,.78)!important; background:rgba(255,255,255,.08)!important; border-radius:var(--radius-md)!important; }
.body > .sidebar .nav-pilar-label { color:inherit!important; font-size:13px!important; }
.body > .sidebar .nav-pilar .pct { color:rgba(255,255,255,.62)!important; font-size:12px!important; }
.body > .sidebar .nav-pilar .bar { background:rgba(255,255,255,.12)!important; }
.body > .sidebar .nav-pilar .bar-fill { background:var(--teal-400)!important; }
.body > .sidebar .nav-pilar:hover { background:rgba(255,255,255,.08)!important; color:#fff!important; }
.body > .sidebar .nav-pilar.active { background:var(--brand-primary)!important; color:#fff!important; box-shadow:inset 3px 0 0 #8DB8FF!important; }
.body > .sidebar .nav-pilar.active .nav-pilar-icon { color:#fff!important; background:rgba(255,255,255,.12)!important; }
.body > .main { padding:32px 40px 52px; background:var(--bg-main)!important; background-image:none!important; }
.survey-info-bar { gap:16px; margin-bottom:24px; }
.survey-info-bar .info-card { min-height:88px; padding:20px; background:var(--surface)!important; border:1px solid var(--border)!important; border-radius:var(--radius-lg)!important; box-shadow:var(--shadow-sm)!important; }
.info-card-icon { width:44px; height:44px; color:var(--brand-primary)!important; background:var(--info-bg)!important; border-radius:var(--radius-md)!important; }
.info-label { color:var(--text-muted)!important; font-size:12px!important; }
.info-value { color:var(--text)!important; font-size:15px!important; }
.pilar-section .section-title { min-height:40px; margin-bottom:16px; color:var(--heading); font-size:20px!important; }
.overview-grid { gap:16px; }
.overview-card { padding:20px!important; background:var(--surface)!important; border:1px solid var(--border)!important; box-shadow:var(--shadow-sm)!important; }
.overview-card-title { color:var(--text); font-size:14px!important; }
.overview-card-count { color:var(--text-secondary)!important; font-size:13px!important; }
.ind-card { margin-bottom:16px; background:var(--surface)!important; }
.ind-head { min-height:68px; padding:16px 20px; }
.ind-nama { color:var(--text); font-size:14px!important; }
.ind-body { background:var(--bg-soft)!important; }
.penilaian-p-card { padding:20px!important; }

[data-theme="dark"] .app > .topbar,[data-theme="dark"] .profile-trigger,[data-theme="dark"] .respondent-theme-toggle,[data-theme="dark"] .profile-menu { background:var(--surface)!important; border-color:var(--border)!important; }
[data-theme="dark"] .topbar-brand .logo,[data-theme="dark"] .profile-name { color:var(--text)!important; }
[data-theme="dark"] .body > .main { background:var(--bg-main)!important; }
[data-theme="dark"] .survey-info-bar .info-card,[data-theme="dark"] .overview-card,[data-theme="dark"] .ind-card,[data-theme="dark"] .penilaian-p-card { background:var(--surface)!important; border-color:var(--border)!important; box-shadow:none!important; }
[data-theme="dark"] .info-card-icon { background:var(--bg-blue-soft)!important; color:var(--blue)!important; }
[data-theme="dark"] .ind-body { background:var(--bg-soft)!important; }
[data-theme="dark"] .penilaian-halaman,[data-theme="dark"] .penilaian-input,[data-theme="dark"] .penilaian-kutipan,[data-theme="dark"] .jawaban-klarifikasi,[data-theme="dark"] .jawaban-redflag { background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
[data-theme="dark"] .p-scale-btn { background:var(--surface)!important; color:var(--text)!important; border-color:var(--border)!important; }
[data-theme="dark"] .p-scale-btn.selected { background:var(--brand-primary)!important; color:#fff!important; }

@media(max-width:1024px){.body > .main{padding:24px}}
@media(max-width:768px){
    .app > .topbar{height:60px;min-height:60px;padding:0 16px}.body > .main{padding:20px 16px 104px}
    .body > .sidebar{background:var(--surface)!important;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(16,35,75,.08)}
    .body > .sidebar .nav-pilar{min-height:56px;color:var(--text-muted)!important;padding:6px 4px;border-radius:var(--radius-sm)!important}
    .body > .sidebar .nav-pilar-icon{width:28px;height:28px;color:var(--text-muted)!important;background:transparent!important}
    .body > .sidebar .nav-pilar.active{background:var(--bg-blue-soft)!important;color:var(--brand-primary)!important;box-shadow:none!important}
    .body > .sidebar .nav-pilar.active .nav-pilar-icon{color:var(--brand-primary)!important;background:transparent!important}
    .body > .sidebar .nav-pilar-label{font-size:12px!important}
    [data-theme="dark"] .body > .sidebar{background:var(--surface)!important;border-color:var(--border)}
}