:root {
    --layak-primary: #0f766e;
    --layak-primary-dark: #115e59;
    --layak-primary-soft: #ecfdf5;
    --layak-accent: #22c55e;
    --layak-ink: #0f172a;
    --layak-muted: #64748b;
    --layak-line: #e2e8f0;
    --layak-surface: #ffffff;
    --layak-bg: #f6f8fb;
    --layak-radius: 18px;
    --layak-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);
    --layak-shadow-hover: 0 18px 45px rgba(15, 23, 42, 0.11);
}

html { scroll-behavior: smooth; }

body.layak-modern,
body.layak-auth,
body.layak-public {
    color: var(--layak-ink);
    background: var(--layak-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===== Internal dashboard ===== */
body.layak-modern {
    background:
        radial-gradient(circle at 92% 6%, rgba(34, 197, 94, .08), transparent 28rem),
        radial-gradient(circle at 65% 45%, rgba(15, 118, 110, .05), transparent 32rem),
        var(--layak-bg);
}

.layak-modern .nk-sidebar {
    background: linear-gradient(180deg, #0b3b36 0%, #0f5d54 52%, #0b3b36 100%) !important;
    border-right: 0 !important;
    box-shadow: 8px 0 32px rgba(15, 23, 42, .12);
}

.layak-modern .nk-sidebar-head {
    min-height: 78px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.layak-modern .nk-sidebar-brand .logo-img {
    max-height: 48px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
}

.layak-modern .nk-sidebar .nk-menu-heading .overline-title,
.layak-modern .nk-sidebar .text-primary-alt {
    color: rgba(255,255,255,.58) !important;
    letter-spacing: .12em;
}

.layak-modern .nk-sidebar .nk-menu-link,
.layak-modern .nk-sidebar .nk-menu-icon,
.layak-modern .nk-sidebar .nk-menu-text,
.layak-modern .nk-sidebar .nk-menu-toggle:after {
    color: rgba(255,255,255,.82) !important;
}

.layak-modern .nk-sidebar .nk-menu-link {
    margin: 3px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.layak-modern .nk-sidebar .nk-menu-link:hover {
    background: rgba(255,255,255,.09);
    transform: translateX(2px);
}

.layak-modern .nk-sidebar .nk-menu-item.active > .nk-menu-link,
.layak-modern .nk-sidebar .nk-menu-item.current-page > .nk-menu-link {
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 8px 18px rgba(0,0,0,.10);
}

.layak-modern .nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.layak-modern .nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-text,
.layak-modern .nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-icon,
.layak-modern .nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-text {
    color: #fff !important;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: .875rem;
}

.layak-modern .nk-header {
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226,232,240,.82) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.04);
}

.layak-modern .nk-header .user-avatar,
.layak-modern .user-avatar {
    background: linear-gradient(135deg, var(--layak-primary), #16a34a);
    box-shadow: 0 7px 18px rgba(15,118,110,.22);
}

.layak-modern .nk-content { padding-top: 28px; }
.layak-modern .nk-content-body { min-width: 0; }

.layak-modern .page-title,
.layak-modern .nk-block-title {
    color: var(--layak-ink);
    font-weight: 800;
    letter-spacing: -.02em;
}

.layak-modern .nk-block-des,
.layak-modern .text-soft { color: var(--layak-muted) !important; }

.layak-modern .card,
.layak-modern .nk-block .card {
    border: 1px solid rgba(226,232,240,.92);
    border-radius: var(--layak-radius) !important;
    box-shadow: var(--layak-shadow);
    background: rgba(255,255,255,.96);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.layak-modern .card:hover {
    border-color: rgba(148,163,184,.42);
    box-shadow: var(--layak-shadow-hover);
}

.layak-modern .card-header,
.layak-modern .card-inner {
    border-color: var(--layak-line);
}

.layak-modern .card-title,
.layak-modern .card-title .title {
    color: var(--layak-ink);
    font-weight: 750;
}

.layak-modern .btn {
    border-radius: 11px;
    font-weight: 650;
    box-shadow: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.layak-modern .btn:hover { transform: translateY(-1px); }
.layak-modern .btn-primary {
    background: linear-gradient(135deg, var(--layak-primary), #16a34a);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(15,118,110,.18);
}
.layak-modern .btn-primary:hover {
    background: linear-gradient(135deg, var(--layak-primary-dark), #15803d);
    box-shadow: 0 10px 24px rgba(15,118,110,.25);
}

.layak-modern .form-control,
.layak-modern .form-select,
.layak-modern .custom-select,
.layak-modern .select2-container--default .select2-selection--single,
.layak-modern .select2-container--default .select2-selection--multiple {
    border-radius: 11px !important;
    border-color: #d7dee8 !important;
    min-height: 42px;
    box-shadow: none !important;
}

.layak-modern .form-control:focus,
.layak-modern .form-select:focus {
    border-color: rgba(15,118,110,.55) !important;
    box-shadow: 0 0 0 4px rgba(15,118,110,.10) !important;
}

.layak-modern .table {
    color: #334155;
    margin-bottom: 0;
}

.layak-modern .table thead th {
    background: #f8fafc;
    color: #475569;
    border-bottom-color: #dbe3ec;
    font-weight: 750;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    white-space: nowrap;
}

.layak-modern .table tbody td {
    border-color: #edf1f5;
    vertical-align: middle;
}

.layak-modern .table-hover tbody tr:hover { background: #f8fbfa; }
.layak-modern .table-responsive,
.layak-modern .dataTables_wrapper { border-radius: 12px; }

.layak-modern .dataTables_wrapper .dataTables_filter input,
.layak-modern .dataTables_wrapper .dataTables_length select {
    border: 1px solid #d7dee8;
    border-radius: 9px;
    background: #fff;
}

.layak-modern .pagination .page-link {
    border-radius: 8px !important;
    margin: 0 2px;
    border-color: #e2e8f0;
    color: #475569;
}
.layak-modern .pagination .active .page-link {
    background: var(--layak-primary);
    border-color: var(--layak-primary);
}

.layak-modern .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15,23,42,.22);
}
.layak-modern .modal-header,
.layak-modern .modal-footer { border-color: #edf1f5; }

.layak-modern .dropdown-menu {
    border: 1px solid #e5eaf0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15,23,42,.14);
}

.layak-modern .badge,
.layak-modern .status-badge { letter-spacing: .01em; }

.layak-modern .alert {
    border-radius: 13px;
    border-width: 1px;
}

.layak-modern .nk-footer {
    background: transparent;
    color: #64748b;
}

/* WhatsApp page polish */
.layak-modern .wa-connection-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: .78rem;
    font-weight: 700;
}

/* ===== Auth ===== */
body.layak-auth {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(34,197,94,.16), transparent 23rem),
        radial-gradient(circle at 90% 80%, rgba(15,118,110,.16), transparent 28rem),
        #f4f7f8;
}

.layak-auth-shell {
    width: min(1040px, calc(100% - 32px));
    min-height: 610px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 90px rgba(15,23,42,.16);
}

.layak-auth-visual {
    position: relative;
    overflow: hidden;
    padding: 52px;
    color: #fff;
    background: linear-gradient(145deg, #083d38 0%, #0f766e 56%, #15803d 100%);
}

.layak-auth-visual::before,
.layak-auth-visual::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}
.layak-auth-visual::before { width: 360px; height: 360px; right: -170px; top: -120px; }
.layak-auth-visual::after { width: 240px; height: 240px; left: -110px; bottom: -95px; }

.layak-auth-visual > * { position: relative; z-index: 1; }
.layak-auth-logo { width: 190px; max-width: 70%; filter: drop-shadow(0 10px 24px rgba(0,0,0,.15)); }
.layak-auth-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 800; opacity: .76; }
.layak-auth-title { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; font-weight: 850; letter-spacing: -.04em; }
.layak-auth-copy { color: rgba(255,255,255,.78); max-width: 440px; line-height: 1.75; }

.layak-auth-panel { padding: 54px 52px; display: flex; flex-direction: column; justify-content: center; }
.layak-auth-panel h1 { color: var(--layak-ink); font-weight: 850; letter-spacing: -.03em; }
.layak-auth-panel .auth-subtitle { color: var(--layak-muted); }
.layak-auth-panel label { color: #334155; font-weight: 700; font-size: .85rem; }
.layak-auth-panel input {
    width: 100%;
    border: 1px solid #dbe2ea;
    border-radius: 13px;
    background: #fff;
    padding: 13px 14px;
    outline: none;
    transition: border .2s ease, box-shadow .2s ease;
}
.layak-auth-panel input:focus { border-color: #0f766e; box-shadow: 0 0 0 4px rgba(15,118,110,.10); }
.layak-auth-submit {
    width: 100%;
    border: 0;
    border-radius: 13px;
    padding: 13px 18px;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #0f766e, #16a34a);
    box-shadow: 0 12px 26px rgba(15,118,110,.22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.layak-auth-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(15,118,110,.28); }

/* ===== Public landing ===== */
body.layak-public { overflow-x: hidden; }
.layak-public header {
    background: rgba(7, 56, 50, .92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.layak-public header img { filter: drop-shadow(0 5px 12px rgba(0,0,0,.15)); }
.layak-public > section:first-of-type {
    position: relative;
    overflow: hidden;
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
    background: linear-gradient(135deg, #0b4d45, #0f766e 55%, #15803d) !important;
}
.layak-public > section:first-of-type::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -230px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.layak-public .card,
.layak-public .bg-white.shadow-lg,
.layak-public .bg-white.shadow-xl {
    border: 1px solid #e4e9ef;
    border-radius: 18px !important;
    box-shadow: var(--layak-shadow) !important;
}
.layak-public .bg-white.p-6.rounded-2xl.shadow-lg {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.layak-public .bg-white.p-6.rounded-2xl.shadow-lg:hover {
    transform: translateY(-4px);
    box-shadow: var(--layak-shadow-hover) !important;
}
.layak-public .card-header {
    background: #fff;
    border-bottom: 1px solid #e9eef3;
}
.layak-public .table-responsive { border-radius: 12px; }
.layak-public .table thead th { white-space: nowrap; background: #f8fafc; }
.layak-public .modal-content { border: 0; border-radius: 20px; overflow: hidden; }

@media (max-width: 1199.98px) {
    .layak-modern .nk-sidebar { box-shadow: 16px 0 40px rgba(15,23,42,.18); }
    .layak-modern .nk-content { padding-top: 20px; }
}

@media (max-width: 991.98px) {
    .layak-auth-shell { grid-template-columns: 1fr; max-width: 620px; min-height: auto; }
    .layak-auth-visual { min-height: 270px; padding: 34px; }
    .layak-auth-title { max-width: 460px; }
    .layak-auth-panel { padding: 38px 34px; }

    .layak-public .row { margin-left: 0; margin-right: 0; }
    .layak-public .chart .card-body[style*="height"] { height: 440px !important; }
}

@media (max-width: 767.98px) {
    .layak-modern .nk-content { padding: 16px 0 0; }
    .layak-modern .container-xl,
    .layak-modern .wide-xl { padding-left: 14px; padding-right: 14px; }
    .layak-modern .nk-block-head { margin-bottom: 18px; }
    .layak-modern .page-title { font-size: 1.45rem; }
    .layak-modern .card { border-radius: 15px !important; }
    .layak-modern .card-inner { padding: 16px; }
    .layak-modern .table-responsive,
    .layak-modern .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .layak-modern .dataTables_wrapper .dataTables_filter { text-align: left !important; }
    .layak-modern .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 6px 0 0 !important; }
    .layak-modern .dataTables_wrapper .dataTables_length,
    .layak-modern .dataTables_wrapper .dataTables_info,
    .layak-modern .dataTables_wrapper .dataTables_paginate { padding-left: 0 !important; padding-right: 0 !important; }
    .layak-modern .modal-dialog { margin: .65rem; }
    .layak-modern .nk-footer-wrap { text-align: center; justify-content: center; }

    .layak-public { padding-top: 70px !important; }
    .layak-public header .container { gap: 10px; }
    .layak-public header nav { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
    .layak-public > section:first-of-type { padding: 3rem 1rem !important; }
    .layak-public > section:first-of-type h2 { font-size: 1.75rem !important; line-height: 1.25; }
    .layak-public .pengumuman-section .container,
    .layak-public .statistik-section .container,
    .layak-public #bap-section .container { padding-left: .9rem !important; padding-right: .9rem !important; }
    .layak-public .card-header { flex-direction: column; align-items: flex-start !important; gap: 10px; }
    .layak-public .card-header .d-flex { width: 100%; align-items: center; gap: 8px; }
    .layak-public .card-header .form-select { width: 100% !important; }
    .layak-public .chart .card-body[style*="height"] { height: 360px !important; }
}

@media (max-width: 575.98px) {
    .layak-auth-shell { width: min(100% - 18px, 520px); border-radius: 21px; }
    .layak-auth-visual { min-height: 220px; padding: 28px 24px; }
    .layak-auth-visual .layak-auth-copy { display: none; }
    .layak-auth-logo { width: 150px; }
    .layak-auth-panel { padding: 30px 24px; }

    .layak-modern .btn { min-height: 40px; }
    .layak-modern .nk-header-brand .logo-img { max-height: 38px; }
    .layak-modern .nk-block-between { gap: 10px; }

    .layak-public .grid { gap: .85rem !important; }
    .layak-public .bg-white.p-6.rounded-2xl.shadow-lg { padding: 1.15rem !important; }
    .layak-public .bg-white.p-6.rounded-2xl.shadow-lg h3 { font-size: 2rem !important; }
}

/* ===== Sidebar navigation v2: polished submenu + responsive performance ===== */
.layak-modern .nk-sidebar .nk-sidebar-content {
    background: transparent !important;
}

.layak-modern .nk-sidebar .nk-menu {
    padding: 12px 8px 24px;
}

.layak-modern .nk-sidebar .nk-menu-heading {
    padding: 8px 14px 4px;
}

.layak-modern .nk-sidebar .nk-menu-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 4px 4px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.layak-modern .nk-sidebar .nk-menu-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    transition: background-color .16s ease, transform .16s ease;
}

.layak-modern .nk-sidebar .nk-menu-icon .icon {
    font-size: 1.15rem;
}

.layak-modern .nk-sidebar .nk-menu-link:hover .nk-menu-icon,
.layak-modern .nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.layak-modern .nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-icon {
    background: rgba(255,255,255,.13);
}

/* DashLite's submenu can inherit a light background; force a coherent dark glass panel. */
.layak-modern .nk-sidebar .nk-menu-sub {
    margin: 3px 4px 8px 18px !important;
    padding: 7px !important;
    background: rgba(4, 44, 40, .40) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item {
    position: relative;
    margin: 1px 0;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link {
    min-height: 38px;
    margin: 0 !important;
    padding: 8px 11px 8px 29px !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: rgba(240,253,250,.76) !important;
    font-size: .84rem;
    line-height: 1.35;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
    background: rgba(167,243,208,.48);
    box-shadow: 0 0 0 3px rgba(167,243,208,.04);
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-text {
    color: rgba(240,253,250,.76) !important;
    font-weight: 560;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link:hover {
    background: rgba(255,255,255,.075) !important;
    color: #fff !important;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link:hover .nk-menu-text {
    color: #fff !important;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link,
.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.current-page > .nk-menu-link {
    background: rgba(255,255,255,.11) !important;
    color: #fff !important;
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link::before,
.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.current-page > .nk-menu-link::before {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: #6ee7b7;
    box-shadow: 0 0 0 4px rgba(110,231,183,.10);
}

.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.active .nk-menu-text,
.layak-modern .nk-sidebar .nk-menu-sub .nk-menu-item.current-page .nk-menu-text {
    color: #fff !important;
    font-weight: 700;
}

.layak-modern .nk-sidebar .has-sub > .nk-menu-toggle::after {
    opacity: .72;
    transition: transform .18s ease;
}

.layak-modern .nk-sidebar .has-sub.active > .nk-menu-toggle::after {
    opacity: 1;
}

/* Lighter rendering cost on long dashboard pages. */
@supports (content-visibility: auto) {
    .layak-modern .nk-content .card,
    .layak-modern .nk-content .nk-block {
        content-visibility: auto;
        contain-intrinsic-size: 1px 420px;
    }
}

/* Avoid expensive movement effects on touch devices and respect accessibility preferences. */
@media (hover: none), (pointer: coarse) {
    .layak-modern .nk-sidebar .nk-menu-link:hover,
    .layak-modern .card:hover,
    .layak-modern .btn:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .layak-modern *,
    .layak-modern *::before,
    .layak-modern *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 1199.98px) {
    .layak-modern .nk-sidebar .nk-menu {
        padding-top: 10px;
    }
    .layak-modern .nk-sidebar .nk-menu-link {
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .layak-modern .nk-sidebar .nk-menu-sub {
        margin-left: 10px !important;
        margin-right: 2px !important;
    }
    .layak-modern .nk-sidebar .nk-menu-sub .nk-menu-link {
        min-height: 40px;
        font-size: .86rem;
    }
}