:root {
    --theme-ink: #172033;
    --theme-ink-soft: #526078;
    --theme-muted: #7b879d;
    --theme-line: #e7ebf2;
    --theme-surface: #ffffff;
    --theme-canvas: #f5f7fb;
    --theme-primary: #176b87;
    --theme-primary-dark: #0f526a;
    --theme-sidebar-start: #173b49;
    --theme-sidebar-end: #142d3a;
    --theme-sidebar-accent: #8ce2d7;
    --theme-accent: #e97856;
    --theme-success: #218a70;
    --theme-warning: #c58a29;
    --theme-danger: #c8515b;
    --theme-shadow-sm: 0 4px 14px rgba(23, 32, 51, .06);
    --theme-shadow-md: 0 14px 34px rgba(23, 32, 51, .09);
    --theme-radius: 14px;
}

body.kepro-role {
    --theme-primary: #0f766e;
    --theme-primary-dark: #0a5d56;
    --theme-sidebar-start: #17423d;
    --theme-sidebar-end: #15342f;
    --theme-sidebar-accent: #7de0c3;
    --theme-accent: #2ec4a3;
    --theme-success: #1b9d73;
    --theme-warning: #d8a236;
    --theme-canvas: #f3fbf8;
    --theme-line: #dfeee9;
    font-family: 'Quicksand', sans-serif;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--theme-ink);
    background: var(--theme-canvas);
    -webkit-font-smoothing: antialiased;
}

body.kepro-role .text-primary,
body.kepro-role .card-header .font-weight-bold,
body.kepro-role .page-title,
body.kepro-role .stat-title {
    color: var(--theme-primary) !important;
}

body.kepro-role .sidebar-brand-text,
body.kepro-role .sidebar-brand {
    color: #ffffff !important;
}

body.kepro-role .topbar {
    background: linear-gradient(135deg, #f3fff9, #ffffff 60%) !important;
    border-color: #d9eee5 !important;
}

body.kepro-role .admin-avatar {
    background: linear-gradient(135deg, #0f766e, #24c3a2) !important;
    border-color: rgba(255,255,255,0.3);
}

body.kepro-role .btn-primary,
body.kepro-role .btn-user-primary,
body.kepro-role .hero-btn-primary {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

body.kepro-role .btn-primary:hover,
body.kepro-role .btn-user-primary:hover,
body.kepro-role .hero-btn-primary:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
}

/* Admin workspace rhythm */
#content {
    color: var(--theme-ink);
}

#content > .container-fluid,
#content > .container {
    padding: 0 1.5rem 2rem;
}

#content > .container-fluid > :first-child,
#content > .container > :first-child {
    margin-top: .35rem;
}

#content p,
#content td,
#content th,
#content .form-control,
#content .form-select,
#content .btn,
#content label {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
    color: var(--theme-ink);
}

/* Shared information header for every admin menu */
#content .page-header,
#content .dashboard-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 92px;
    margin: .35rem 0 1.25rem !important;
    padding: 1.15rem 1.35rem 1.15rem 4.25rem;
    border: 1px solid #cce5eb;
    border-radius: var(--theme-radius);
    background: linear-gradient(135deg, #eef9fa, #fff 72%);
    box-shadow: var(--theme-shadow-sm);
}

body.kepro-role #content .page-header,
body.kepro-role #content .dashboard-header {
    border-color: #cfeae2;
    background: linear-gradient(135deg, #edfdf8, #fff 72%);
    box-shadow: 0 10px 24px rgba(15, 118, 110, .08);
}

#content .page-header::before,
#content .dashboard-header::before {
    content: '\2139';
    position: absolute;
    left: 1.35rem;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    background: #d8f0f2;
    color: var(--theme-primary);
    font-size: 1.25rem;
    font-weight: 800;
}

body.kepro-role #content .page-header::before,
body.kepro-role #content .dashboard-header::before {
    background: #dffaf3;
    color: var(--theme-primary);
}

#content .page-header .page-title,
#content .dashboard-header .page-title {
    margin-bottom: .25rem;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.25;
}

#content .page-header .page-subtitle,
#content .dashboard-header .page-subtitle {
    color: var(--theme-ink-soft);
    font-size: .82rem;
    line-height: 1.55;
}

#content .page-header > div:first-child,
#content .dashboard-header > div:first-child {
    min-width: 0;
}

#content .page-header .btn,
#content .dashboard-header .btn {
    flex-shrink: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.nav-link,
.form-label,
.modal-title,
.alert {
    letter-spacing: 0;
}

.card,
.user-card,
.stat-card,
.chart-card,
.filter-box,
.vmts-card {
    border: 1px solid var(--theme-line);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow-sm);
}

.card:hover,
.stat-card:hover,
.chart-card:hover,
.user-card:hover {
    box-shadow: var(--theme-shadow-md);
}

.btn,
.btn-modern,
.btn-user-primary,
.btn-login,
.hero-btn-primary,
.hero-btn-secondary {
    min-height: 42px;
    border-radius: 10px;
    border-width: 1px;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn:hover,
.btn-modern:hover,
.btn-user-primary:hover,
.btn-login:hover,
.hero-btn-primary:hover,
.hero-btn-secondary:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-primary-modern,
.btn-user-primary,
.hero-btn-primary {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary-modern:hover,
.btn-user-primary:hover,
.hero-btn-primary:hover {
    background: var(--theme-primary-dark);
    border-color: var(--theme-primary-dark);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 107, 135, .2);
}

.btn-secondary,
.btn-light-modern,
.hero-btn-secondary {
    background: var(--theme-surface);
    border-color: var(--theme-line);
    color: var(--theme-ink);
}

.btn-secondary:hover,
.btn-light-modern:hover,
.hero-btn-secondary:hover {
    background: #f0f5f7;
    border-color: #cbdce2;
    color: var(--theme-ink);
}

.btn-danger,
.btn-danger-modern {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger-modern:hover {
    background: #a9424c;
    border-color: #a9424c;
    color: #fff;
}

.form-control,
.form-select,
textarea.form-control {
    min-height: 44px;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    color: var(--theme-ink);
    background: var(--theme-surface);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .2rem rgba(23, 107, 135, .13);
}

.form-label,
label {
    color: var(--theme-ink-soft);
    font-size: .82rem;
    font-weight: 700;
}

.modal-content {
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .18);
}

.modal-header,
.modal-footer {
    border-color: var(--theme-line);
}

.modal-header {
    padding: 1.15rem 1.35rem;
}

.modal-body {
    color: var(--theme-ink-soft);
}

.modal-title {
    color: var(--theme-ink);
    font-weight: 800;
}

.alert {
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .9rem;
}

.alert-success {
    color: #176650;
    background: #e8f5f0;
    border-color: #c7e8dc;
}

.alert-warning {
    color: #79591d;
    background: #fff5df;
    border-color: #f4dfad;
}

.alert-danger {
    color: #8f3841;
    background: #fcecee;
    border-color: #f2cbd0;
}

.alert-info {
    color: #195c72;
    background: #e7f4f8;
    border-color: #c5e4ed;
}

.alert-light {
    color: var(--theme-ink-soft);
    background: #f8fafc;
    border-color: var(--theme-line);
}

.alert-modern,
#content .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-height: 46px;
    padding: .8rem 1rem;
    border-radius: 11px;
    box-shadow: none;
}

.alert-modern::before,
#content .alert:not(.alert-dismissible)::before {
    content: '';
    width: 3px;
    align-self: stretch;
    flex: 0 0 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: .65;
}

.alert.text-center,
.alert.text-start {
    display: block;
}

.alert.text-center::before,
.alert.text-start::before {
    display: none;
}

.admin-info-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.15rem;
    border: 1px solid #cce5eb;
    border-radius: var(--theme-radius);
    background: linear-gradient(135deg, #eef9fa, #fff);
    box-shadow: var(--theme-shadow-sm);
}

.admin-info-card .admin-info-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 11px;
    background: #d8f0f2;
    color: var(--theme-primary);
}

.admin-info-card h6 {
    margin: 0 0 .25rem;
    color: var(--theme-ink);
    font-size: .88rem;
    font-weight: 800;
}

.admin-info-card p {
    margin: 0;
    color: var(--theme-ink-soft);
    font-size: .8rem;
    line-height: 1.6;
}

.table {
    color: var(--theme-ink);
}

.table thead th {
    color: var(--theme-ink-soft);
    background: #f7f9fc;
    border-bottom: 1px solid var(--theme-line);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.table tbody td {
    border-color: #eef1f5;
}

.table tbody tr:hover {
    background: #f8fbfc;
}

.badge {
    border-radius: 999px;
    font-weight: 700;
    padding: .45em .7em;
}

.dropdown-menu {
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    box-shadow: var(--theme-shadow-md);
    padding: .45rem;
}

.dropdown-item {
    border-radius: 8px;
    color: var(--theme-ink-soft);
    font-size: .88rem;
    padding: .6rem .75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #edf6f8;
    color: var(--theme-primary-dark);
}

.swal2-popup {
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .18);
}

.swal2-title {
    color: var(--theme-ink);
    font-size: 1.2rem;
}

.swal2-styled.swal2-confirm {
    background: var(--theme-primary);
    border-radius: 10px;
}

.swal2-styled.swal2-cancel {
    background: #eef1f5;
    border-radius: 10px;
    color: var(--theme-ink-soft);
}

.swal-cancel-button {
    color: var(--theme-ink-soft) !important;
}

.home-hero,
.kuesioner-section,
.vmts-section {
    background:
        linear-gradient(135deg, #e7f5f4 0%, #f7f9fc 52%, #fff0ea 100%);
}

.home-hero::before,
.kuesioner-section::before,
.vmts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .24), transparent 42%);
}

.hero-container,
.home-hero > .container,
.kuesioner-section > .container,
.vmts-section > .container {
    position: relative;
    z-index: 1;
}

.question-unanswered {
    border: 1px solid #e7a4a8 !important;
    border-radius: 12px;
    background: #fff8f8;
    box-shadow: 0 0 0 .2rem rgba(200, 81, 91, .1);
    padding: 1rem;
    scroll-margin-top: 100px;
}

.question-unanswered .question-label {
    color: var(--theme-danger);
}

.home-hero {
    background:
        linear-gradient(135deg, #e7f5f4 0%, #f7f9fc 52%, #fff0ea 100%) !important;
}

.home-hero .hero-title {
    color: var(--theme-ink);
    letter-spacing: -.04em;
}

.home-hero .hero-title span {
    color: var(--theme-primary);
}

.home-hero .hero-description {
    color: var(--theme-ink-soft);
}

.thankyou-panel {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    box-shadow: var(--theme-shadow-md);
    backdrop-filter: blur(10px);
}

.thankyou-panel::after {
    content: '';
    position: absolute;
    right: -35px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border: 24px solid rgba(72, 188, 183, .12);
    border-radius: 50%;
}

.thankyou-mark {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 1.5rem;
    place-items: center;
    border-radius: 16px;
    background: var(--theme-primary);
    color: #fff;
    font-size: 1.4rem;
    box-shadow: 0 10px 20px rgba(23, 107, 135, .2);
}

.thankyou-kicker {
    color: var(--theme-primary-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.thankyou-panel h2 {
    margin: .6rem 0 .75rem;
    color: var(--theme-ink);
    font-size: 1.45rem;
    font-weight: 800;
}

.thankyou-panel p {
    color: var(--theme-ink-soft);
    font-size: .9rem;
    line-height: 1.8;
}

.thankyou-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    color: var(--theme-ink-soft);
    font-size: .8rem;
    font-weight: 600;
}

.thankyou-line i {
    width: 28px;
    color: var(--theme-success);
    text-align: center;
}

.page-title,
.chart-title,
.stat-value {
    color: var(--theme-ink);
}

.page-title {
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 800;
}

.page-subtitle,
.stat-title {
    color: var(--theme-muted);
}

.stat-card,
.chart-card {
    background: var(--theme-surface);
}

.stat-card {
    border-top: 3px solid var(--theme-primary);
}

.stat-card:nth-child(2n) {
    border-top-color: var(--theme-accent);
}

.stat-icon {
    background: #e8f4f6;
    color: var(--theme-primary);
}

.dashboard-tabs .nav-link,
.vmts-tabs .nav-link {
    color: var(--theme-ink-soft);
    background: #f5f8fa;
}

.dashboard-tabs .nav-link:hover,
.vmts-tabs .nav-link:hover {
    color: var(--theme-primary-dark);
    background: #e8f3f5;
}

.dashboard-tabs .nav-link.active,
.vmts-tabs .nav-link.active {
    background: var(--theme-primary) !important;
    box-shadow: 0 8px 18px rgba(23, 107, 135, .18);
}

.export-png {
    background: #e6f4ef;
    color: var(--theme-success);
}

.export-pdf {
    background: #fcecee;
    color: var(--theme-danger);
}

.sidebar {
    background: linear-gradient(180deg, var(--theme-sidebar-start), var(--theme-sidebar-end)) !important;
}

.sidebar hr.sidebar-divider {
    border-top-color: rgba(255, 255, 255, .13);
}

.sidebar .sidebar-heading {
    color: rgba(224, 242, 240, .68);
}

.sidebar .nav-item .nav-link,
.sidebar .nav-item .nav-link i {
    color: rgba(255, 255, 255, .78);
}

.sidebar .nav-item .nav-link:hover,
.sidebar .nav-item .nav-link:hover i {
    color: #fff;
}

.sidebar .nav-item.active > .nav-link {
    position: relative;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark)) !important;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16), inset 3px 0 0 var(--theme-sidebar-accent);
}

.sidebar .nav-item.active > .nav-link::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -1px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--theme-sidebar-accent);
}

.sidebar .nav-item.active .nav-link i {
    color: #fff !important;
}

.sidebar .nav-item.active .nav-link:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark), var(--theme-primary)) !important;
    color: #fff !important;
}

.sidebar .nav-item .nav-link:hover {
    background: rgba(255, 255, 255, .08);
}

.sidebar .collapse-inner {
    background: rgba(8, 25, 32, .28);
    border: 1px solid rgba(255, 255, 255, .1);
}

.sidebar .collapse-inner .collapse-item {
    color: rgba(255, 255, 255, .78);
}

.sidebar .collapse-inner .collapse-item:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sidebar .collapse-inner .collapse-item.active {
    background: var(--theme-primary-dark);
    color: #fff;
}

.admin-toolbar-button {
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--theme-ink-soft);
}

.admin-toolbar-button:hover {
    background: #e8f3f5;
    border-color: #cbdfe4 !important;
    color: var(--theme-primary-dark);
}

.admin-nav-icon,
.admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-nav-icon {
    width: 18px;
    font-size: 14px;
}

.admin-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e8f3f5;
    color: var(--theme-primary);
}

.stat-card {
    overflow: hidden;
}

.stat-card-toggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
}

.stat-card-toggle:focus-visible {
    outline: 3px solid rgba(23, 107, 135, .2);
    outline-offset: 4px;
}

.stat-card-toggle .d-flex {
    padding-right: 1.8rem;
}

.stat-card-chevron {
    position: absolute;
    top: 5px;
    right: 0;
    color: var(--theme-muted);
    font-size: .75rem;
    transition: transform .2s ease, color .2s ease;
}

.stat-card-toggle[aria-expanded="true"] .stat-card-chevron {
    color: var(--theme-primary);
    transform: rotate(180deg);
}

.stat-detail {
    border-top: 1px solid var(--theme-line);
    margin-top: 1rem;
    padding-top: .8rem;
}

.toast {
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    box-shadow: var(--theme-shadow-md);
}

.toast-header {
    background: #f7f9fc;
    border-bottom-color: var(--theme-line);
    color: var(--theme-ink);
    font-weight: 700;
}

/* Login */
.login-page {
    background: var(--theme-canvas);
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.login-section {
    min-height: 100svh;
    padding: 2rem 1rem;
    background:
        linear-gradient(135deg, #e7f5f4 0%, #f6f8fb 48%, #fff0ea 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-section .container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(23, 32, 51, .1);
}

.login-left {
    min-height: 560px;
    padding: 4rem 3.5rem;
    background:
        linear-gradient(145deg, rgba(72, 188, 183, .18), transparent 55%),
        var(--theme-ink);
}

.login-left::before {
    content: '';
    position: absolute;
    inset: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    pointer-events: none;
}

.login-brand,
.login-left h1,
.login-left p {
    position: relative;
    z-index: 1;
}

.logo-anim {
    width: 86px;
    margin-bottom: 2rem;
}

.login-left h1 {
    max-width: 360px;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.18;
    letter-spacing: -.03em;
}

.login-left p {
    color: #b6c5d5;
    font-size: .95rem;
}

.login-right {
    padding: 4rem 3.5rem;
}

.login-form-header {
    margin-bottom: 2rem;
}

.login-form-header h2 {
    color: var(--theme-ink);
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    letter-spacing: -.02em;
}

.login-form-header p {
    color: var(--theme-muted);
}

.alert-login {
    color: #8f3841;
    background: #fcecee;
    border: 1px solid #f2cbd0;
    border-radius: 10px;
    padding: .8rem 1rem;
    font-size: .84rem;
}

.input-group-custom {
    margin-bottom: 1.25rem;
}

.input-group-custom label {
    color: var(--theme-ink-soft);
    font-size: .8rem;
    margin-bottom: .5rem;
}

.input-wrapper input {
    height: 48px;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    color: var(--theme-ink);
    background: #fbfcfd;
    font-size: .88rem;
}

.input-wrapper input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .2rem rgba(23, 107, 135, .13);
    background: #fff;
}

.input-wrapper > i,
.input-icon {
    color: var(--theme-muted);
}

.toggle-password {
    color: var(--theme-muted);
}

.toggle-password:hover {
    background: #e8f3f5;
    color: var(--theme-primary-dark);
}

.btn-login-modern,
.btn-back-home {
    height: 48px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 700;
}

.btn-login-modern {
    background: var(--theme-primary);
}

.btn-login-modern:hover {
    background: var(--theme-primary-dark);
    box-shadow: 0 10px 22px rgba(23, 107, 135, .2);
}

.btn-back-home {
    margin-top: .75rem;
    border-color: var(--theme-line);
    color: var(--theme-ink-soft);
}

.btn-back-home:hover {
    background: #edf6f8;
    border-color: #cbdfe4;
    color: var(--theme-primary-dark);
}

@media (max-width: 576px) {
    #content .page-header,
    #content .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
        padding: 1rem 1rem 1rem 3.75rem;
    }

    #content .page-header .btn,
    #content .dashboard-header .btn {
        width: 100%;
    }

    #content .page-header:before,
    #content .dashboard-header:before {
        left: 1rem;
        width: 36px;
        height: 36px;
    }

    .btn,
    .btn-modern,
    .btn-user-primary,
    .hero-btn-primary,
    .hero-btn-secondary {
        min-height: 40px;
    }

    .modal-dialog {
        margin: .75rem;
    }

    .login-section {
        padding: 1rem;
    }

    .login-wrapper {
        border-radius: 14px;
    }

    .login-right {
        padding: 2.5rem 1.5rem;
    }
}

.topbar h5 {
    margin-bottom: .15rem !important;
    color: var(--theme-ink) !important;
    font-size: .95rem;
}

.topbar small {
    color: var(--theme-muted) !important;
    font-size: .72rem;
}

.admin-account-menu {
    min-width: 220px;
    margin-top: .6rem !important;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    box-shadow: 0 16px 34px rgba(23, 32, 51, .14);
}

.admin-account-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .15rem;
    min-height: 40px;
}

.admin-account-menu .dropdown-divider {
    border-color: var(--theme-line);
}

.admin-account-menu .dropdown-item.text-danger:hover {
    background: #fcecee;
    color: var(--theme-danger) !important;
}

.modern-logout-modal {
    overflow: hidden;
    max-width: 440px;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .2);
}

.modern-logout-modal::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--theme-danger), #e97856);
}

.logout-header {
    padding: 1.1rem 1.35rem;
    background: var(--theme-surface);
    border-bottom: 1px solid var(--theme-line);
}

.logout-header .modal-title {
    color: var(--theme-ink);
    font-size: .95rem;
    font-weight: 800;
}

.logout-header .modal-title i {
    color: var(--theme-danger);
}

.logout-header .btn-close {
    opacity: .55;
    transform: scale(.8);
}

.logout-header .btn-close:hover {
    opacity: 1;
}

.modern-logout-modal .modal-body {
    padding: 2rem 1.5rem 1.25rem !important;
}

.logout-icon-wrapper {
    display: grid;
    width: 78px;
    height: 78px;
    margin: 0 auto 1.15rem;
    place-items: center;
    border-radius: 50%;
    background: #fcecee;
    color: var(--theme-danger);
    box-shadow: inset 0 0 0 8px rgba(200, 81, 91, .06);
}

.logout-icon-wrapper i {
    font-size: 1.8rem;
}

.logout-title {
    margin-bottom: .55rem;
    color: var(--theme-ink);
    font-size: 1.3rem;
    font-weight: 800;
}

.logout-subtitle {
    max-width: 300px;
    margin: 0 auto;
    color: var(--theme-ink-soft);
    font-size: .88rem;
    line-height: 1.7;
}

.modern-logout-modal .modal-footer {
    gap: .65rem;
    padding: .75rem 1.35rem 1.35rem !important;
}

.modern-logout-modal .modal-footer .btn-modern {
    min-width: 112px;
    justify-content: center;
}

.modern-logout-modal .btn-light-modern {
    background: #f7f9fc;
}

.modern-logout-modal .btn-danger-modern {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
}

.modern-logout-modal .btn-danger-modern:hover {
    background: #a9424c;
    border-color: #a9424c;
    box-shadow: 0 8px 18px rgba(200, 81, 91, .2);
}

@media (max-width: 576px) {
    .modern-logout-modal .modal-footer {
        flex-direction: column-reverse;
    }

    .modern-logout-modal .modal-footer .btn-modern {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .topbar {
        margin-right: .75rem;
        margin-left: .75rem;
        padding-right: .7rem;
        padding-left: .7rem;
    }
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--theme-muted) !important;
    font-size: .78rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--theme-ink-soft);
    font-size: .78rem;
    font-weight: 700;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .form-select,
.dataTables_wrapper .form-control {
    min-height: 36px;
    height: 36px;
    margin: 0;
    border: 1px solid var(--theme-line);
    border-radius: 9px;
    background: #fff;
    color: var(--theme-ink);
    box-shadow: none;
    font-size: .78rem;
}

.dataTables_wrapper .dataTables_length select {
    min-width: 70px;
    padding: .25rem 1.8rem .25rem .65rem;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 190px;
    padding: .35rem .7rem;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 .18rem rgba(23, 107, 135, .12);
}

.dataTables_wrapper .pagination .page-link {
    min-width: 34px;
    margin: 0 .15rem;
    border: 1px solid var(--theme-line);
    border-radius: 8px !important;
    color: var(--theme-ink-soft);
    text-align: center;
}

.dataTables_wrapper .pagination .page-item.active .page-link {
    border-color: var(--theme-primary);
    background: var(--theme-primary);
    color: #fff;
}

/* Hasil Evaluasi */
.evaluasi-card {
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow-md);
}

.evaluasi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--theme-line);
    background: linear-gradient(135deg, #f7fbfc, #fff);
}

.evaluasi-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 1rem;
}

.evaluasi-card-heading .chart-title {
    color: var(--theme-ink);
    font-size: 1rem;
    font-weight: 800;
}

.evaluasi-card-heading small {
    color: var(--theme-muted) !important;
    font-size: .76rem;
}

.evaluasi-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.evaluasi-action-group #exportButtons {
    display: flex;
    gap: .4rem;
}

.evaluasi-action-group .btn-upload-evaluasi,
.evaluasi-action-group .btn-hapus-evaluasi,
.evaluasi-action-group #exportButtons .btn {
    min-height: 38px;
    height: 38px;
    border-radius: 9px !important;
    padding: .45rem .75rem !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
}

.evaluasi-action-group .btn-upload-evaluasi {
    background: var(--theme-primary);
    border: 1px solid var(--theme-primary);
}

.evaluasi-action-group .btn-upload-evaluasi:hover {
    background: var(--theme-primary-dark);
}

.evaluasi-action-group .btn-hapus-evaluasi {
    background: #fcecee !important;
    border: 1px solid #f2cbd0;
    color: var(--theme-danger) !important;
}

.evaluasi-action-group .btn-hapus-evaluasi:hover {
    background: var(--theme-danger) !important;
    color: #fff !important;
}

.evaluasi-action-group #exportButtons .btn-export-excel {
    background: #e8f5e9 !important;
    border: 1px solid #c8e6c9 !important;
    color: #2e7d32 !important;
}

.evaluasi-action-group #exportButtons .btn-export-excel:hover {
    background: #2e7d32 !important;
    color: #fff !important;
}

.evaluasi-action-group #exportButtons .btn-export-csv {
    background: #e1f5fe !important;
    border: 1px solid #b3e5fc !important;
    color: #0277bd !important;
}

.evaluasi-action-group #exportButtons .btn-export-csv:hover {
    background: #0277bd !important;
    color: #fff !important;
}

.evaluasi-filter-card {
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: #fbfcfd;
    box-shadow: none;
}

.evaluasi-filter-card .card-body {
    padding: 1rem 1.15rem;
}

.filter-title {
    color: var(--theme-ink);
    font-size: .86rem;
    font-weight: 800;
}

.filter-title i {
    color: var(--theme-primary);
}

.evaluasi-filter-box {
    padding: .9rem;
    border: 1px solid var(--theme-line);
    border-radius: 11px;
    background: #fff;
}

.evaluasi-filter-box label {
    color: var(--theme-ink-soft);
    font-size: .76rem;
}

.evaluasi-filter-box .form-control,
.evaluasi-filter-box .btn-filter-evaluasi,
.evaluasi-filter-box .btn-reset-evaluasi {
    min-height: 40px;
    height: 40px;
    border-radius: 9px;
    font-size: .78rem;
}

.evaluasi-filter-box .btn-filter-evaluasi {
    background: var(--theme-primary);
}

.evaluasi-filter-box .btn-reset-evaluasi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-line);
    background: #f7f9fc;
    text-decoration: none;
}

.table-evaluasi {
    border: 1px solid var(--theme-line);
    border-radius: 12px;
}

.table-evaluasi thead th {
    background: #f2f7f8;
    color: var(--theme-ink-soft);
    font-size: .68rem;
}

.table-evaluasi tbody td {
    color: var(--theme-ink);
    font-size: .78rem;
}

/* Hasil Evaluasi: ringkasan filter dan status responden */
.hasil-filter-summary {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.25rem;
    padding: .9rem 1rem;
    border: 1px solid #cde4ea;
    border-radius: 12px;
    background: linear-gradient(135deg, #f1fafc, #fff);
}

.hasil-filter-summary-icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #dff3f6;
    color: var(--theme-primary);
}

.hasil-filter-summary-content {
    display: flex;
    flex: 1 1 180px;
    flex-direction: column;
    gap: .1rem;
}

.hasil-filter-summary-content strong {
    color: var(--theme-ink);
    font-size: .8rem;
}

.hasil-filter-summary-content span {
    color: var(--theme-muted);
    font-size: .72rem;
}

.hasil-filter-summary-tags,
.keterangan-filter-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.hasil-filter-tag,
.keterangan-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    background: #fff;
    color: var(--theme-ink-soft);
    font-size: .7rem;
    font-weight: 700;
}

.hasil-filter-tag i,
.keterangan-filter-pill i {
    color: var(--theme-primary);
}

.hasil-filter-tag-primary,
.keterangan-filter-pill-primary {
    border-color: #cce5eb;
    background: #eaf7f9;
    color: var(--theme-primary-dark);
}

.hasil-filter-count,
.keterangan-filter-total {
    color: var(--theme-muted);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.kolom-status-responden {
    min-width: 160px;
}

.status-responden-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border: 1px solid #cce5eb;
    border-radius: 999px;
    background: #eaf7f9;
    color: var(--theme-primary-dark);
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-asal-internal {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border: 1px solid #bde6d1;
    border-radius: 999px;
    background: #e2f7eb;
    color: #1a7b45;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-asal-eksternal {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .38rem .6rem;
    border: 1px solid #d4d8db;
    border-radius: 999px;
    background: #eff1f3;
    color: #555d66;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
}

.keterangan-card .card-header {
    gap: 1rem;
    padding: 1rem 1.15rem;
}

.keterangan-card .card-header h5 {
    color: var(--theme-ink);
    font-size: .9rem;
    font-weight: 800;
}

@media (max-width: 767.98px) {
    .hasil-filter-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .hasil-filter-summary-tags {
        width: 100%;
    }

    .keterangan-card .card-header {
        align-items: flex-start !important;
        flex-direction: column;
    }
}

.modal-delete-evaluasi {
    overflow: hidden;
    max-width: 430px;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(23, 32, 51, .2);
}

.modal-delete-evaluasi .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f2cbd0;
    background: #fff8f8;
}

.modal-delete-evaluasi .modal-title {
    font-size: .98rem;
    font-weight: 800;
}

.modal-delete-evaluasi .modal-title i {
    color: var(--theme-danger);
}

.modal-delete-body {
    padding: 2rem 1.5rem 1.25rem !important;
}

.modal-delete-icon {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.1rem;
    place-items: center;
    border-radius: 50%;
    background: #fff5df;
    color: var(--theme-warning);
    box-shadow: inset 0 0 0 8px rgba(197, 138, 41, .08);
}

.modal-delete-icon i {
    font-size: 1.8rem;
}

.modal-delete-title {
    color: var(--theme-ink);
    font-size: 1.2rem;
    font-weight: 800;
}

.modal-delete-description {
    max-width: 310px;
    margin: 0 auto 1.15rem;
    color: var(--theme-ink-soft);
    font-size: .84rem;
    line-height: 1.7;
}

.modal-selected-summary {
    display: inline-flex;
    align-items: center;
    padding: .6rem .85rem;
    border: 1px solid #cce5eb;
    border-radius: 9px;
    background: #eef9fa;
    color: var(--theme-primary-dark);
    font-size: .8rem;
}

.modal-delete-footer {
    gap: .6rem;
    padding: .75rem 1.25rem 1.25rem !important;
}

.modal-delete-footer .btn-modern {
    min-width: 108px;
    justify-content: center;
}

.modal-delete-footer .btn-danger-modern {
    background: var(--theme-danger);
    border-color: var(--theme-danger);
}

.modal-delete-footer .btn-danger-modern:hover {
    background: #a9424c;
    border-color: #a9424c;
}

/* Upload Excel */
.import-workflow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: .65rem;
}

.workflow-item {
    min-height: 112px;
    padding: .9rem .7rem;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: #fbfcfd;
    text-align: center;
}

.workflow-number {
    display: grid;
    width: 30px;
    height: 30px;
    margin: 0 auto .6rem;
    place-items: center;
    border-radius: 9px;
    background: #d8f0f2;
    color: var(--theme-primary-dark);
    font-size: .78rem;
    font-weight: 800;
}

.workflow-title {
    color: var(--theme-ink);
    font-size: .75rem;
    font-weight: 800;
}

.workflow-desc {
    margin-top: .35rem;
    color: var(--theme-muted);
    font-size: .68rem;
    line-height: 1.45;
}

.workflow-arrow {
    color: var(--theme-primary);
    font-size: .85rem;
}

.upload-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 1rem;
    border-radius: 16px;
    font-size: 1.65rem;
}

.upload-success {
    background: #e6f4ef;
    color: var(--theme-success);
}

.upload-primary {
    background: #e8f3f5;
    color: var(--theme-primary);
}

.upload-title {
    color: var(--theme-ink);
    font-size: 1.05rem;
    font-weight: 800;
}

.upload-title.text-success {
    color: var(--theme-success) !important;
}

.upload-title.text-primary {
    color: var(--theme-primary) !important;
}

.upload-description {
    min-height: 48px;
    color: var(--theme-ink-soft);
    font-size: .8rem;
}

.btn-success-upload,
.upload-file-box .form-control,
.upload-file-box + .btn {
    border-radius: 9px;
}

.btn-success-upload {
    min-height: 40px;
    padding: .55rem .9rem;
    background: var(--theme-success);
    border: 1px solid var(--theme-success);
    font-size: .78rem;
}

.btn-success-upload:hover {
    background: #176650;
    border-color: #176650;
}

.upload-file-box {
    margin: 1rem 0 .75rem;
    padding: .65rem;
    border: 1px dashed #b8d9df;
    border-radius: 11px;
    background: #f7fbfc;
}

.upload-file-box .form-control {
    min-height: 40px;
    border-color: transparent;
    background: #fff;
    font-size: .76rem;
}

.upload-file-box .form-control:focus {
    border-color: var(--theme-primary);
}

.upload-file-box + .btn-primary-modern {
    width: 100%;
    min-height: 40px;
    font-size: .78rem;
}

.chart-card .list-unstyled li {
    color: var(--theme-ink-soft);
    font-size: .8rem;
}

.chart-card .list-unstyled li i {
    color: var(--theme-success) !important;
}

@media (max-width: 900px) {
    .import-workflow {
        grid-template-columns: repeat(3, 1fr);
    }

    .workflow-arrow {
        display: none;
    }
}

@media (max-width: 576px) {
    .import-workflow {
        grid-template-columns: 1fr;
    }

    .workflow-item {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {
    .evaluasi-card-header,
    .evaluasi-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .evaluasi-action-group {
        width: 100%;
        justify-content: flex-start;
    }

    .evaluasi-action-group .btn-upload-evaluasi,
    .evaluasi-action-group .btn-hapus-evaluasi {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Uji Instrumen */
.instrumen-filter-card {
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    background: #fbfcfd;
    box-shadow: none;
}

.instrumen-filter-card .card-body {
    padding: 1.1rem 1.25rem;
}

.instrumen-label {
    color: var(--theme-ink-soft);
    font-size: .76rem;
    font-weight: 800;
}

.instrumen-select {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    font-size: .8rem;
}

.btn-instrumen {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--theme-primary);
    border-radius: 9px;
    background: var(--theme-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-instrumen:hover {
    background: var(--theme-primary-dark);
    box-shadow: 0 8px 16px rgba(23, 107, 135, .18);
    color: #fff;
    transform: translateY(-1px);
}

.instrumen-card {
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    box-shadow: var(--theme-shadow-md);
}

.instrumen-card > .card-header {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--theme-line);
    background: #f7fbfc;
}

.instrumen-tabs {
    gap: .45rem;
}

.instrumen-tabs .nav-link {
    min-height: 40px;
    align-items: center;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    padding: .55rem .85rem;
    color: var(--theme-ink-soft);
    font-size: .78rem;
    font-weight: 800;
}

.instrumen-tabs .nav-link:hover {
    background: #e8f3f5;
    color: var(--theme-primary-dark);
}

.instrumen-tabs .nav-link.active {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    box-shadow: 0 7px 14px rgba(23, 107, 135, .16);
    color: #fff !important;
}

.instrumen-card > .card-body {
    padding: 1.25rem;
}

.instrumen-card .alert-evaluasi,
.instrumen-card .alert-modern,
.instrumen-card .alert {
    margin-bottom: 0;
    border-radius: 11px;
}

.instrumen-card .text-center.py-5 {
    padding: 3rem 1.25rem !important;
    border: 1px dashed var(--theme-line);
    border-radius: 12px;
    background: #fbfcfd;
}

.instrumen-card .text-center.py-5 h3 {
    font-size: 1.15rem;
    font-weight: 800;
}

.instrumen-card .text-center.py-5 p {
    max-width: 570px;
    margin-right: auto;
    margin-left: auto;
    color: var(--theme-ink-soft) !important;
    font-size: .84rem;
    line-height: 1.7;
}

.instrumen-table-wrapper {
    overflow: auto;
    border: 1px solid var(--theme-line);
    border-radius: 11px;
}

.instrumen-table-wrapper table thead th {
    background: #f2f7f8 !important;
    color: var(--theme-ink-soft);
    font-size: .68rem;
}

.instrumen-table-wrapper table tbody td {
    color: var(--theme-ink);
    font-size: .78rem;
}

.instrumen-table-wrapper .dataTables_length select,
.instrumen-table-wrapper .dataTables_filter input {
    min-height: 36px;
    height: 36px;
    border-radius: 9px !important;
    font-size: .76rem;
}

/* Analisis Kejelasan: keep long questions inside one readable page */
.analisis-kejelasan-table{
    width:100% !important;
    min-width:1158px;
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0;
}

.analisis-kejelasan-table th:first-child,
.analisis-kejelasan-table td:first-child {
    width: 58px !important;
}

.analisis-kejelasan-table th:nth-child(2),
.analisis-kejelasan-table td:nth-child(2){

    width:520px !important;
    min-width:520px;

    text-align:left !important;

    white-space:normal;

    word-break:break-word;

    line-height:1.8;

    font-size:15px;

    font-weight:500;

}

.analisis-kejelasan-table th:nth-child(n+3),
.analisis-kejelasan-table td:nth-child(n+3){

    width:145px !important;
    min-width:145px;

    text-align:center;

    vertical-align:middle;

}

.analisis-kejelasan-table thead tr:first-child th{

    background:#f8fafc;

    font-size:14px;

    font-weight:700;

    color:#344054;

    border-bottom:2px solid #d9e2ec;

}

#dataTableKejelasan_wrapper .dataTables_scrollHeadInner,
#dataTableKejelasan_wrapper .dataTables_scrollHeadInner table,
#dataTableKejelasan_wrapper .dataTables_scrollBody table{

    width:1158px !important;

    min-width:1158px !important;

}

.analisis-kejelasan-table thead th {
    vertical-align: middle;
    white-space: normal;
    line-height: 1.4;
}

.analisis-kejelasan-table thead th small {
    display: block;
    margin-top: .2rem;
    font-size: .6rem;
    line-height: 1.25;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
}

#dataTableKejelasan_wrapper .dataTables_scrollBody,
#dataTableKejelasan_wrapper .table-responsive {
    overflow-x: auto !important;
}
.skala-header{

    text-align:center;

    vertical-align:middle;

    padding:12px 6px;

}

.skala-header .nilai{

    font-size:28px;

    font-weight:700;

    color:#0b6e99;

    line-height:1;

}

.skala-header .singkatan{

    margin-top:6px;

    font-size:13px;

    font-weight:700;

    color:#495057;

    letter-spacing:.5px;

}
.skala-keterangan-box{
    margin-bottom:1.25rem;
    padding:1rem 1.15rem;
    background:linear-gradient(135deg, #f2fafc, #fbfdff);
    border:1px solid #cfe4ea;
    border-radius:12px;
    color:var(--theme-ink-soft);
    font-size:.8rem;
}

.skala-keterangan-title {
    display:flex;
    align-items:center;
    gap:.5rem;
    color:var(--theme-ink);
    font-size:.82rem;
}

.skala-keterangan-title i { color:var(--theme-primary); }

.skala-keterangan-list {
    display:flex;
    flex-wrap:wrap;
    gap:.65rem 1.25rem;
    margin-top:.75rem;
}

.legend-item{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    white-space:nowrap;
}

.legend-badge{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#0b6e99;

    color:#fff;

    font-size:13px;

    font-weight:700;

    flex:0 0 auto;
}
@media (max-width: 767.98px) {
    .analisis-kejelasan-table th:nth-child(2),
    .analisis-kejelasan-table td:nth-child(2) {
        width: 400px !important;
        min-width: 400px;
    }

    .analisis-kejelasan-table th:nth-child(n+3),
    .analisis-kejelasan-table td:nth-child(n+3) {
        width: 130px !important;
        min-width: 130px;
    }
}

#dataTableValiditas_wrapper .dataTables_length,
#dataTableReliabilitas_wrapper .dataTables_length,
#dataTableValiditas_wrapper .dataTables_filter,
#dataTableReliabilitas_wrapper .dataTables_filter {
    display: flex !important;
    align-items: center;
    gap: .45rem;
    color: var(--theme-ink-soft) !important;
}

#dataTableValiditas_wrapper .datatable-length,
#dataTableReliabilitas_wrapper .datatable-length {
    display: flex;
    align-items: center;
    min-height: 36px;
}

#dataTableValiditas_wrapper .dataTables_length label,
#dataTableReliabilitas_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    color: var(--theme-ink-soft);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

#dataTableValiditas_wrapper .dataTables_length select,
#dataTableReliabilitas_wrapper .dataTables_length select,
#dataTableValiditas_wrapper .dataTables_filter input,
#dataTableReliabilitas_wrapper .dataTables_filter input {
    min-height: 36px;
    height: 36px;
    border: 1px solid var(--theme-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--theme-ink) !important;
    font-size: .76rem;
}

.validitas-table tbody td,
.reliabilitas-table tbody td {
    color: var(--theme-ink) !important;
}

.validitas-table tbody td .badge,
.validitas-table tbody td .badge-light {
    background: #f1f5f7 !important;
    color: var(--theme-ink) !important;
    border: 1px solid var(--theme-line);
}

.validitas-table tbody td .badge-success {
    background: #e6f4ef !important;
    color: #176650 !important;
    border-color: #c7e8dc;
}

.validitas-table tbody td .badge-danger {
    background: #fcecee !important;
    color: #8f3841 !important;
    border-color: #f2cbd0;
}

@media (max-width: 767.98px) {
    .instrumen-filter-card .row > div {
        margin-bottom: .75rem;
    }

    .instrumen-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .instrumen-tabs .nav-link {
        justify-content: center;
    }
}

/* Kejelasan percentages and summary */
.analisis-kejelasan-table .percentage-chip {
    display: inline-flex;
    min-width: 64px;
    align-items: center;
    justify-content: center;
    padding: .5rem .75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    margin: .15rem 0;
}

.analisis-kejelasan-table tbody td:nth-child(n+3) {
    padding-right: .6rem !important;
    padding-left: .6rem !important;
}

.percentage-sts {
    background: #fcecee;
    border-color: #f2cbd0;
    color: #8f3841;
}

.percentage-ts {
    background: #fff5df;
    border-color: #f4dfad;
    color: #79591d;
}

.percentage-s {
    background: #e7f4f8;
    border-color: #c5e4ed;
    color: #195c72;
}

.percentage-ss {
    background: #e6f4ef;
    border-color: #c7e8dc;
    color: #176650;
}

.kejelasan-summary-card {
    overflow: hidden;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    box-shadow: var(--theme-shadow-sm);
}

.kejelasan-summary-card .card-header {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--theme-line);
    background: linear-gradient(135deg, #f7fbfc, #fff);
}

.kejelasan-summary-card .card-header i {
    color: var(--theme-primary);
}

.kejelasan-summary-card .card-body {
    padding: 1rem 1.15rem;
}

.kejelasan-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.summary-metric {
    min-height: 92px;
    padding: .85rem;
    border: 1px solid var(--theme-line);
    border-radius: 11px;
    background: #fbfcfd;
}

.summary-metric-label {
    display: block;
    margin-bottom: .5rem;
    color: var(--theme-muted);
    font-size: .7rem;
    font-weight: 800;
}

.summary-metric strong {
    color: var(--theme-ink);
    font-size: 1.25rem;
    font-weight: 800;
}

.summary-metric-primary {
    border-color: #cce5eb;
    background: #eef9fa;
}

.summary-metric-primary strong {
    color: var(--theme-primary-dark);
}

.summary-metric-category {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summary-metric-category .badge {
    font-size: .7rem;
}

@media (max-width: 900px) {
    .kejelasan-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .kejelasan-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-metric strong {
        font-size: 1.05rem;
    }
}

.analisis-kejelasan-table tbody tr:hover td {
    background:#f7fbfc !important;
}

@media (max-width: 767.98px) {
    .skala-keterangan-list {
        display:grid;
        grid-template-columns:1fr;
        gap:.55rem;
    }
}
/* FIX: Memperbaiki tabel di mobile (portrait) agar bisa di-scroll horizontal dan tidak berantakan/terpotong */
@media (max-width: 767.98px) {
    .table, .table-evaluasi, .laporan-table, .table-master, .table-pertanyaan, .table-setting, .table-admin, .validitas-table, .reliabilitas-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table th, .table td,
    .table-evaluasi th, .table-evaluasi td,
    .laporan-table th, .laporan-table td,
    .table-master th, .table-master td,
    .table-pertanyaan th, .table-pertanyaan td,
    .table-setting th, .table-setting td,
    .table-admin th, .table-admin td,
    .validitas-table th, .validitas-table td,
    .reliabilitas-table th, .reliabilitas-table td {
        white-space: nowrap !important;
        word-break: normal !important;
    }
}

#content > .container-fluid.dashboard-page {
    position: relative;
    isolation: isolate;
}

#content > .topbar {
    position: relative;
    z-index: 1020;
    min-height: 64px;
    margin: 0 0 1rem !important;
    padding: .55rem 1.5rem;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 10%, var(--theme-line)) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 1px 2px rgba(23, 32, 51, .025) !important;
    backdrop-filter: blur(10px);
}

#content > .container-fluid.dashboard-page::before {
    position: absolute;
    top: -1.25rem;
    right: 0;
    left: 0;
    z-index: -1;
    height: 480px;
    background:
        radial-gradient(ellipse 78% 125% at 76% -43%, transparent 55%, rgba(23, 107, 135, .045) 55.5% 66%, transparent 66.5%),
        radial-gradient(ellipse 70% 112% at 78% -38%, transparent 64%, rgba(33, 138, 112, .035) 64.5% 76%, transparent 76.5%),
        linear-gradient(180deg, rgba(23, 107, 135, .025), transparent 88%);
    content: "";
    pointer-events: none;
}

#content .dashboard-summary-row .stat-card {
    min-height: 90px;
    border: 1px solid #e1edf2 !important;
    border-top: 1px solid #e1edf2 !important;
    border-radius: 11px !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

#content .dashboard-summary-row .stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--theme-shadow-md) !important;
}

#content .dashboard-summary-row .stat-card .card-body {
    padding: .45rem .65rem !important;
}

#content .dashboard-summary-row .stat-card-toggle .d-flex {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center !important;
    gap: .5rem;
    padding-right: .9rem;
}

#content .dashboard-summary-row .stat-card-toggle .d-flex > div:first-child {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

#content .dashboard-summary-row .stat-icon {
    grid-column: 1;
    grid-row: 1;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #e1f5ef !important;
    color: var(--theme-success) !important;
    font-size: 1rem !important;
}

#content .dashboard-summary-row > .col:nth-child(2) .stat-icon {
    background: #e7f0fb !important;
    color: #3976b8 !important;
}

#content .dashboard-summary-row > .col:nth-child(4) .stat-icon {
    background: #fff3dc !important;
    color: var(--theme-warning) !important;
}

#content .dashboard-summary-row .stat-title {
    margin-bottom: .12rem !important;
    color: var(--theme-ink-soft) !important;
    font-size: .67rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.3;
}

#content .dashboard-summary-row .stat-value {
    margin-top: 0 !important;
    color: var(--theme-ink) !important;
    background: none !important;
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    -webkit-text-fill-color: var(--theme-ink) !important;
}

#content .dashboard-stat-caption {
    margin: .2rem 0 0 3rem;
    display: -webkit-box;
    overflow: hidden;
    color: var(--theme-muted);
    font-size: .6rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

#content .dashboard-summary-row .stat-card-chevron {
    top: .55rem;
    right: .1rem;
    transform: rotate(-90deg);
}

#content .dashboard-summary-row .stat-card-toggle[aria-expanded="true"] .stat-card-chevron {
    transform: rotate(0deg);
}

@media (min-width: 992px) {
    body.sidebar-hidden #content .dashboard-summary-row > .col-xl-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    body.sidebar-hidden #content .dashboard-chart-row > .col-xl-7.col-lg-12 {
        flex: 0 0 58.333333% !important;
        max-width: 58.333333% !important;
    }

    body.sidebar-hidden #content .dashboard-chart-row > .col-xl-5.col-lg-12 {
        flex: 0 0 41.666667% !important;
        max-width: 41.666667% !important;
    }
}

#content .dashboard-chart-row #barWrapper .chart-container {
    height: 420px !important;
}

#content .dashboard-chart-row #pieWrapper .chart-container {
    height: 430px !important;
}

@media (min-width: 768px) {
    body.sidebar-hidden .sidebar {
        width: 0 !important;
        min-width: 0 !important;
        flex: 0 0 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 767.98px) {
    #content > .container-fluid.dashboard-page::before {
        height: 560px;
    }

    #content .dashboard-summary-row .stat-card {
        min-height: 84px;
    }

    #content .dashboard-summary-row .stat-card .card-body {
        padding: .4rem .55rem !important;
    }

    #content .dashboard-summary-row .stat-card-toggle .d-flex {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: .45rem;
    }

    #content .dashboard-summary-row .stat-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: .9rem !important;
    }

    #content .dashboard-summary-row .stat-title {
        font-size: .66rem !important;
    }

    #content .dashboard-summary-row .stat-value {
        font-size: 1.6rem !important;
    }

    #content .dashboard-stat-caption {
        margin-left: 2.65rem;
        font-size: .58rem;
    }

    #content .dashboard-chart-row #barWrapper .chart-container {
        height: 320px !important;
    }

    #content .dashboard-chart-row #pieWrapper .chart-container {
        height: 450px !important;
    }
}

body.kepro-role #content .dashboard-page .period-card-form {
    display: block;
    min-width: 0;
    text-decoration: none;
}

body.kepro-role #content .dashboard-page select.period-card-select {
    min-width: 0;
    min-height: 40px !important;
    height: 40px !important;
    padding: .25rem 1.8rem .25rem .65rem !important;
    font-size: .84rem;
    font-weight: 700;
}

body.kepro-role #content .dashboard-summary-row .period-card-form .select2-container--default .select2-selection--single {
    min-height: 40px !important;
    height: 40px !important;
}

body.kepro-role #content .dashboard-summary-row .period-card-form .select2-selection__rendered {
    line-height: 38px !important;
}

body.kepro-role #content .dashboard-summary-row .period-card-form .select2-selection__arrow {
    height: 38px !important;
}

body.kepro-role #content .dashboard-page .chart-card,
body.kepro-role #content .dashboard-page .dashboard-summary-row > [class*="col-"] {
    min-width: 0;
}

@media (max-width: 1199.98px) {
    body.kepro-role #content .dashboard-page .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    body.kepro-role #content .dashboard-page .dashboard-header > div:first-child {
        width: 100%;
    }

    body.kepro-role #content .dashboard-page .dashboard-right {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }

    body.kepro-role #content .dashboard-page .datetime-box {
        min-width: 0;
        padding: .85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    body.kepro-role #content > .container-fluid.dashboard-page {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    body.kepro-role #content .dashboard-page .dashboard-header {
        padding: 1rem .85rem 1rem 3.6rem;
    }

    body.kepro-role #content .dashboard-page .dashboard-right {
        grid-template-columns: minmax(0, 1fr);
    }

    body.kepro-role #content .dashboard-page .datetime-value {
        overflow-wrap: anywhere;
        font-size: .95rem;
    }

    body.kepro-role #content .dashboard-page .chart-card .card-header > .d-flex {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: .6rem;
    }

    body.kepro-role #content .dashboard-page .chart-bar {
        height: 320px !important;
    }

    body.kepro-role #content > .topbar .navbar-nav,
    body.kepro-role #content > .topbar .nav-item.dropdown,
    body.kepro-role #content > .topbar .nav-link {
        min-width: 0;
    }

    body.kepro-role #content > .topbar .nav-link > .text-end {
        max-width: 44vw;
        margin-right: .5rem !important;
    }

    body.kepro-role #content > .topbar .nav-link > .text-end > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Keep all admin filter controls in the same color family as navigation. */
#content select.form-select,
#content select.form-control,
#content select.filter-select,
#content select.modern-select {
    accent-color: var(--theme-primary);
    border-color: var(--theme-line) !important;
    color: var(--theme-ink) !important;
    background-color: var(--theme-surface) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#content select.form-select:hover,
#content select.form-control:hover,
#content select.filter-select:hover,
#content select.modern-select:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 35%, var(--theme-line)) !important;
}

#content select.form-select:focus,
#content select.form-control:focus,
#content select.filter-select:focus,
#content select.modern-select:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme-primary) 16%, transparent) !important;
    outline: 0 !important;
}

#content select option {
    background-color: #fff;
    color: var(--theme-ink);
}

#content select option:checked {
    background-color: var(--theme-primary);
    color: #fff;
}

body.kepro-role #content select.form-select:not(.form-select-sm),
body.kepro-role #content select.form-control {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px !important;
    height: 48px;
    padding: .6rem 2.4rem .6rem .85rem !important;
    border-radius: 12px !important;
    font-size: .9rem;
    line-height: 1.35;
}

body.kepro-role #content select.form-select-sm {
    min-height: 40px !important;
    height: 40px;
    border-radius: 10px !important;
}

body.kepro-role #content .select2-container {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

body.kepro-role #content .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px !important;
}

body.kepro-role #content .select2-container--default .select2-selection--multiple {
    min-height: 48px;
    border-radius: 12px !important;
}

body.kepro-role #content .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    padding: .65rem 2.4rem .65rem .85rem !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.kepro-role #content .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: .45rem;
    height: 46px;
}

body.kepro-role .select2-dropdown {
    max-width: calc(100vw - 1rem);
}

body.kepro-role .select2-results__options {
    max-height: min(40vh, 280px) !important;
    overflow-y: auto;
}

body.kepro-role .select2-results__option {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

body.admin-role .select2-container--default .select2-selection--single,
body.admin-role .select2-container--default .select2-selection--multiple,
body.kepro-role .select2-container--default .select2-selection--single,
body.kepro-role .select2-container--default .select2-selection--multiple {
    border-color: var(--theme-line) !important;
    border-radius: 10px !important;
    background-color: var(--theme-surface) !important;
    box-shadow: none !important;
    color: var(--theme-ink) !important;
}

body.admin-role .select2-container--default .select2-selection--single .select2-selection__rendered,
body.kepro-role .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--theme-ink) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#content #pertanyaanContainer .select2-container {
    width: 100% !important;
    max-width: 100%;
}

body.admin-role .select2-container--default .select2-selection__arrow b,
body.kepro-role .select2-container--default .select2-selection__arrow b {
    border-top-color: var(--theme-muted) !important;
}

body.admin-role .select2-container--default.select2-container--open .select2-selection--single,
body.admin-role .select2-container--default.select2-container--focus .select2-selection--single,
body.kepro-role .select2-container--default.select2-container--open .select2-selection--single,
body.kepro-role .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme-primary) 16%, transparent) !important;
}

body.admin-role .select2-dropdown,
body.kepro-role .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--theme-line) !important;
    border-radius: 10px !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow-md) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

body.admin-role .select2-results__option,
body.kepro-role .select2-results__option {
    padding: .6rem .8rem !important;
    background: var(--theme-surface) !important;
    color: var(--theme-ink-soft) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    transition: background-color .15s ease, color .15s ease;
}

body.admin-role .select2-container--default .select2-results__option--highlighted[aria-selected],
body.kepro-role .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--theme-primary) 10%, white) !important;
    color: var(--theme-primary-dark) !important;
}

body.admin-role .select2-dropdown .select2-results__option[aria-selected="true"],
body.admin-role .select2-dropdown .select2-results__option--selected,
body.kepro-role .select2-dropdown .select2-results__option[aria-selected="true"],
body.kepro-role .select2-dropdown .select2-results__option--selected {
    background: var(--theme-primary) !important;
    color: #fff !important;
}

body.laporan-admin-page #content,
body.laporan-admin-page #content :not(i):not(.fas):not(.far):not(.fab):not(.fa) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    letter-spacing: 0;
}

body.laporan-admin-page #content select:not(.form-select-sm) {
    width: 100%;
    min-height: 48px !important;
    height: 48px;
    padding: .55rem .8rem !important;
    border: 1px solid var(--theme-line) !important;
    border-radius: 10px !important;
    background-color: var(--theme-surface) !important;
    box-shadow: none !important;
    color: var(--theme-ink) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: .88rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

body.laporan-admin-page #content select:not(.form-select-sm):hover {
    border-color: color-mix(in srgb, var(--theme-primary) 30%, var(--theme-line)) !important;
}

body.laporan-admin-page #content select:not(.form-select-sm):focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme-primary) 16%, transparent) !important;
    outline: 0 !important;
}

body.laporan-admin-page #content .select2-container:not(.report-select-compact) {
    width: 100% !important;
    max-width: 100%;
}

body.laporan-admin-page #content .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    height: 48px;
    border: 1px solid var(--theme-line) !important;
    border-radius: 10px !important;
    background: var(--theme-surface) !important;
    box-shadow: none !important;
}

body.laporan-admin-page #content .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    padding: 0 2.1rem 0 .8rem;
    color: var(--theme-ink) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.laporan-admin-page #content .select2-container--default .select2-selection__arrow {
    top: 1px;
    right: .45rem;
    height: 46px;
}

body.laporan-admin-page #content .select2-container--default .select2-selection--single:focus,
body.laporan-admin-page #content .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--theme-primary) 16%, transparent) !important;
}

body.laporan-admin-page .select2-dropdown .select2-results__options {
    max-height: 250px;
}

body.laporan-admin-page .select2-dropdown .select2-results__option {
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.45;
}

body.laporan-admin-page #content .select2-container.report-select-compact {
    width: 140px !important;
    flex: 0 0 140px;
}

body.laporan-admin-page #content .btn-laporan-solid,
body.laporan-admin-page #content .btn-laporan-primary,
body.laporan-admin-page #content .btn-primary-modern,
body.laporan-admin-page #content .btn-success-modern,
body.laporan-admin-page #content .btn-warning-modern,
body.laporan-admin-page #content .btn-danger-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    padding: .55rem .85rem;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: .8rem;
    font-weight: 700 !important;
    text-decoration: none;
    text-shadow: none !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

body.laporan-admin-page #content .btn-laporan-solid,
body.laporan-admin-page #content .btn-laporan-primary,
body.laporan-admin-page #content .btn-primary-modern {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-laporan-solid:hover,
body.laporan-admin-page #content .btn-laporan-primary:hover,
body.laporan-admin-page #content .btn-primary-modern:hover {
    border-color: var(--theme-primary-dark) !important;
    background: var(--theme-primary-dark) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body.laporan-admin-page #content .btn-light-modern,
body.laporan-admin-page #content .btn-secondary-modern,
body.laporan-admin-page #content .btn-laporan-outline {
    border: 1px solid var(--theme-line) !important;
    border-radius: 8px !important;
    background: var(--theme-surface) !important;
    box-shadow: none !important;
    color: var(--theme-ink-soft) !important;
}

body.laporan-admin-page #content .btn-light-modern:hover,
body.laporan-admin-page #content .btn-secondary-modern:hover,
body.laporan-admin-page #content .btn-laporan-outline:hover {
    border-color: color-mix(in srgb, var(--theme-primary) 28%, var(--theme-line)) !important;
    background: color-mix(in srgb, var(--theme-primary) 5%, white) !important;
    color: var(--theme-primary-dark) !important;
}

body.laporan-admin-page #content .btn-success-modern,
body.laporan-admin-page #content .btn-success-action {
    border-color: var(--theme-success) !important;
    background: var(--theme-success) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-warning-modern,
body.laporan-admin-page #content .btn-warning-action {
    border-color: var(--theme-warning) !important;
    background: var(--theme-warning) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-danger-modern,
body.laporan-admin-page #content .btn-danger-action,
body.laporan-admin-page #content .btn-laporan-delete,
body.laporan-admin-page #content .btn-icon-delete {
    border-color: var(--theme-danger) !important;
    background: var(--theme-danger) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-info-action,
body.laporan-admin-page #content .btn-template-action,
body.laporan-admin-page #content .btn-icon-action,
body.laporan-admin-page #content .btn-icon-edit-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border: 1px solid color-mix(in srgb, var(--theme-primary) 15%, var(--theme-line)) !important;
    border-radius: 8px !important;
    background: #e8f4f6 !important;
    box-shadow: none !important;
    color: var(--theme-primary) !important;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

body.laporan-admin-page #content .btn-info-action:hover,
body.laporan-admin-page #content .btn-template-action:hover,
body.laporan-admin-page #content .btn-icon-action:hover,
body.laporan-admin-page #content .btn-icon-edit-sm:hover {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-template-action.btn-template-delete {
    border-color: var(--theme-danger) !important;
    background: var(--theme-danger) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-template-action.btn-template-delete:hover {
    border-color: color-mix(in srgb, var(--theme-danger) 82%, black) !important;
    background: color-mix(in srgb, var(--theme-danger) 82%, black) !important;
    color: #fff !important;
}

body.laporan-admin-page #content .btn-action {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: .85rem;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.laporan-admin-page #content .btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(23, 32, 51, .12);
}

body.laporan-admin-page #content .laporan-feature-icon,
body.laporan-admin-page #content .template-file-icon,
body.laporan-admin-page #content .generate-template-field > i {
    background: #e8f4f6;
    color: var(--theme-primary);
}

body.laporan-admin-page #content .btn i,
body.laporan-admin-page #content .btn-modern i,
body.laporan-admin-page #content .btn-laporan-solid i,
body.laporan-admin-page #content .btn-laporan-primary i,
body.laporan-admin-page #content .btn-laporan-outline i,
body.laporan-admin-page #content .btn-action i,
body.laporan-admin-page #content .btn-template-action i,
body.laporan-admin-page #content .btn-icon-action i {
    color: currentColor !important;
}

body.laporan-admin-page #content .generate-checklist {
    padding: 1.1rem;
    border: 1px solid var(--theme-line) !important;
    border-radius: 11px !important;
    background: var(--theme-surface) !important;
    box-shadow: var(--theme-shadow-sm) !important;
    color: var(--theme-ink);
}

body.laporan-admin-page #content .generate-checklist .laporan-kicker {
    color: var(--theme-primary-dark);
    font-size: .67rem;
    letter-spacing: .07em;
}

body.laporan-admin-page #content .generate-checklist h2 {
    margin: .35rem 0 .85rem;
    color: var(--theme-ink) !important;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

body.laporan-admin-page #content .generate-checklist .generate-check {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .55rem;
    padding: .5rem .65rem;
    border: 1px solid var(--theme-line);
    border-radius: 8px;
    background: #f8fafb;
    color: var(--theme-ink-soft);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.35;
}

body.laporan-admin-page #content .generate-checklist .generate-check > i {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #eef2f5;
    color: var(--theme-muted);
    font-size: .75rem;
}

body.laporan-admin-page #content .generate-checklist .generate-check.is-ready {
    border-color: #dceee5;
    background: #f8fcf9;
}

body.laporan-admin-page #content .generate-checklist .generate-check.is-ready > i {
    background: #e5f4ed;
    color: var(--theme-success);
}

body.laporan-admin-page #content .generate-checklist > p {
    margin: .9rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--theme-line);
    color: var(--theme-ink-soft) !important;
    font-size: .76rem;
    line-height: 1.55;
}

/* Keep the report workspace in the same visual system as other admin pages. */
#content .laporan-v2-page,
#content .laporan-v2-page :not(i):not(.fas):not(.far):not(.fab):not(.fa) {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#content .laporan-v2-page {
    padding-bottom: 2rem;
    color: var(--theme-ink);
}

#content .laporan-v2-page .laporan-hero {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 1.5rem 1.65rem;
    border: 1px solid #cce5eb;
    border-radius: 12px;
    background: linear-gradient(135deg, #edf8f9, #fff 76%);
    box-shadow: var(--theme-shadow-sm);
    color: var(--theme-ink);
}

body.kepro-role #content .laporan-v2-page .laporan-hero {
    border-color: #cfeae2;
    background: linear-gradient(135deg, #edfdf8, #fff 76%);
}

#content .laporan-v2-page .laporan-eyebrow {
    color: var(--theme-primary-dark);
    letter-spacing: .08em;
}

#content .laporan-v2-page .laporan-hero h1 {
    max-width: 620px;
    margin: .35rem 0 .5rem;
    color: var(--theme-ink) !important;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

#content .laporan-v2-page .laporan-hero p {
    max-width: 620px;
    color: var(--theme-ink-soft) !important;
    font-size: .84rem;
    line-height: 1.6;
}

#content .laporan-v2-page .laporan-hero-actions {
    gap: .6rem;
    margin-top: 1rem;
}

#content .laporan-v2-page .btn-laporan-primary,
#content .laporan-v2-page .btn-laporan-outline {
    min-height: 40px;
    padding: .58rem .85rem;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: .78rem;
    font-weight: 700;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

#content .laporan-v2-page .btn-laporan-primary {
    border: 1px solid var(--theme-primary);
    background: var(--theme-primary);
    color: #fff;
}

#content .laporan-v2-page .btn-laporan-primary:hover {
    border-color: var(--theme-primary-dark);
    background: var(--theme-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

#content .laporan-v2-page .btn-laporan-outline {
    border: 1px solid var(--theme-line);
    background: #fff;
    color: var(--theme-ink-soft);
}

#content .laporan-v2-page .btn-laporan-outline:hover {
    border-color: var(--theme-primary);
    background: #f5fafb;
    color: var(--theme-primary-dark);
    transform: translateY(-1px);
}

#content .laporan-v2-page .laporan-active-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .84);
    box-shadow: none;
    color: var(--theme-ink);
    backdrop-filter: blur(8px);
}

#content .laporan-v2-page .laporan-active-label {
    color: var(--theme-muted);
    letter-spacing: .08em;
}

#content .laporan-v2-page .laporan-active-card strong {
    color: var(--theme-ink);
    font-size: 1.2rem;
}

#content .laporan-v2-page .laporan-active-status {
    color: var(--theme-ink-soft);
}

#content .laporan-v2-page .laporan-active-status i {
    color: var(--theme-success);
}

#content .laporan-v2-page .laporan-active-divider {
    background: var(--theme-line);
}

#content .laporan-v2-page .laporan-active-meta {
    color: var(--theme-ink-soft);
}

#content .laporan-v2-page .laporan-summary-grid {
    gap: .85rem;
    margin-bottom: 1.25rem;
}

#content .laporan-v2-page .laporan-summary-card {
    gap: .75rem;
    padding: .9rem 1rem;
    border-color: var(--theme-line);
    border-radius: 11px;
    box-shadow: var(--theme-shadow-sm);
}

#content .laporan-v2-page .laporan-summary-icon {
    border-radius: 10px;
}

#content .laporan-v2-page .laporan-summary-icon.is-blue,
#content .laporan-v2-page .laporan-summary-icon.is-purple {
    background: #e8f4f6;
    color: var(--theme-primary);
}

#content .laporan-v2-page .laporan-summary-icon.is-green {
    background: #e5f4ed;
    color: var(--theme-success);
}

#content .laporan-v2-page .laporan-summary-icon.is-orange {
    background: #fff3df;
    color: var(--theme-warning);
}

#content .laporan-v2-page .laporan-summary-card span:not(.laporan-summary-icon) {
    color: var(--theme-ink-soft);
}

#content .laporan-v2-page .laporan-summary-card strong {
    color: var(--theme-ink);
    font-size: 1.25rem;
}

#content .laporan-v2-page .laporan-summary-card small {
    color: var(--theme-muted);
}

#content .laporan-v2-page .laporan-workspace {
    margin-bottom: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#content .laporan-v2-page .laporan-section-heading {
    margin-bottom: .85rem;
}

#content .laporan-v2-page .laporan-kicker {
    color: var(--theme-primary-dark);
    letter-spacing: .08em;
}

#content .laporan-v2-page .laporan-section-heading h2 {
    color: var(--theme-ink);
    font-size: 1.1rem;
    font-weight: 700;
}

#content .laporan-v2-page .laporan-placeholder-note {
    background: #e8f4f6;
    color: var(--theme-primary-dark);
}

#content .laporan-v2-page .laporan-feature-grid--three {
    gap: .85rem;
}

#content .laporan-v2-page .laporan-feature-card {
    min-height: 196px;
    padding: 1rem;
    border-color: var(--theme-line);
    border-radius: 10px;
    background: var(--theme-surface);
    color: var(--theme-ink);
    box-shadow: var(--theme-shadow-sm);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#content .laporan-v2-page .laporan-feature-card--accent {
    background: var(--theme-surface);
}

#content .laporan-v2-page .laporan-feature-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--theme-primary) 32%, var(--theme-line));
    color: var(--theme-ink);
    box-shadow: var(--theme-shadow-md);
}

#content .laporan-v2-page .laporan-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #e8f4f6;
    color: var(--theme-primary);
}

#content .laporan-v2-page .laporan-feature-order {
    top: 1rem;
    right: 1rem;
    color: var(--theme-muted);
}

#content .laporan-v2-page .laporan-feature-card h3 {
    color: var(--theme-ink);
    font-size: .92rem;
    font-weight: 700;
}

#content .laporan-v2-page .laporan-feature-card p {
    color: var(--theme-ink-soft);
    font-size: .76rem;
}

#content .laporan-v2-page .laporan-feature-link {
    color: var(--theme-primary-dark);
}

@media (max-width: 767.98px) {
    #content .laporan-v2-page {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    #content .laporan-v2-page .laporan-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        padding: 1.15rem;
        border-radius: 10px;
    }

    #content .laporan-v2-page .laporan-hero h1 {
        font-size: 1.3rem;
    }

    #content .laporan-v2-page .laporan-active-card {
        padding: .85rem;
    }
}

@media (max-width: 767.98px) {
    #content > .container-fluid,
    #content > .container {
        padding-right: .75rem;
        padding-left: .75rem;
        padding-bottom: 1.25rem;
    }

    #content > .topbar {
        min-height: 56px;
        margin: 0 .5rem .75rem !important;
        padding: .35rem .5rem;
        border-radius: 10px;
    }

    #content > .topbar .admin-toolbar-button {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        margin-right: .35rem !important;
    }

    #content > .topbar .navbar-nav {
        min-width: 0;
        margin-left: auto !important;
    }

    #content > .topbar .navbar-nav .nav-link {
        min-width: 0;
        padding: .25rem !important;
    }

    #content > .topbar .nav-link > .text-end {
        max-width: min(42vw, 150px);
        min-width: 0;
        margin-right: .4rem !important;
    }

    #content > .topbar .nav-link > .text-end > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #content .dashboard-summary-row {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }

    #content .dashboard-summary-row .stat-card {
        min-height: 84px;
    }

    #content .dashboard-summary-row .stat-card .card-body {
        padding: .7rem .8rem !important;
    }

    #content .chart-card,
    #content .card,
    #content .dashboard-summary-row > [class*="col-"] {
        min-width: 0;
    }

    #content .chart-card > .card-header {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .75rem !important;
    }

    #content .table-responsive,
    #content .dataTables_wrapper .table-responsive {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        max-width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
    }
}

@media (max-width: 359.98px) {
    #content > .container-fluid,
    #content > .container {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    #content > .topbar .nav-link > .text-end {
        max-width: 34vw;
    }
}