* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, system-ui, sans-serif;
    background: #eef2f7;
    color: #0f172a;
}

a {
    text-decoration: none;
    color: inherit;
}

.layout {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    width: 260px;
    background: #0f172a;
    color: white;
    padding: 24px;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 18px;
}

.profile {
    background: #1e293b;
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 22px;
    line-height: 1.5;
}

.profile span {
    color: #cbd5e1;
    font-size: 13px;
}

.sidebar nav a {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 8px;
    color: #e2e8f0;
    font-weight: 700;
}

.sidebar nav a:hover {
    background: #1e293b;
}

.content {
    margin-left: 260px;
    width: calc(100% - 260px);
    padding: 28px;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat {
    text-align: center;
}

.stat b {
    display: block;
    font-size: 34px;
}

.stat span {
    color: #64748b;
    font-weight: 700;
}

label {
    display: block;
    font-weight: 700;
    margin-bottom: 12px;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font: inherit;
}

textarea {
    min-height: 80px;
}

button,
.btn {
    border: 0;
    background: #0f172a;
    color: white;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
}

.btn-secondary {
    background: #475569;
}

.btn-danger {
    background: #991b1b;
}

.btn-success {
    background: #047857;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 900px;
    background: white;
}

th,
td {
    padding: 11px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}

th {
    background: #f8fafc;
}

.filter {
    display: grid;
    grid-template-columns: 1fr 180px 180px 120px;
    gap: 10px;
    margin-bottom: 14px;
}

.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e2e8f0;
    font-size: 12px;
    font-weight: 700;
}

.badge-success {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.pagination {
    margin-top: 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination a {
    padding: 8px 11px;
    background: white;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-weight: 700;
}

.pagination a.active {
    background: #0f172a;
    color: white;
}

.alert {
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 700;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #dbeafe, #f8fafc);
}

.login-box {
    width: 100%;
    max-width: 430px;
}

.note {
    background: #fffbeb;
    color: #92400e;
    padding: 14px;
    border-radius: 14px;
    line-height: 1.6;
}

.answer {
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 16px;
    background: white;
    cursor: pointer;
}

.typebox {
    background: #0f172a;
    color: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    font-size: 46px;
    font-weight: 900;
}

.bar {
    height: 18px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 6px 0 14px;
}

.bar div {
    height: 100%;
    background: #0f172a;
}

@media print {
    .sidebar,
    .no-print {
        display: none;
    }

    .content {
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

@media (max-width: 900px) {
    .layout {
        display: block;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .content {
        margin: 0;
        width: 100%;
        padding: 14px;
    }

    .grid-2,
    .grid-4,
    .filter {
        grid-template-columns: 1fr;
    }
}


/* CAMERA DAN TIMER TES */
.test-monitor {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 18px;
    align-items: start;
}

.camera-box {
    background: #0f172a;
    color: white;
    border-radius: 18px;
    padding: 14px;
}

.camera-box video,
.camera-box canvas {
    width: 100%;
    border-radius: 14px;
    background: #020617;
    display: block;
}

.camera-status {
    font-size: 13px;
    margin-top: 8px;
    color: #cbd5e1;
    line-height: 1.5;
}

.timer-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 18px;
}

.timer-number {
    font-size: 42px;
    font-weight: 900;
    margin: 8px 0;
}

.timer-warning {
    color: #b45309;
}

.timer-danger {
    color: #991b1b;
}

.timer-info {
    color: #64748b;
    line-height: 1.6;
}

@media(max-width:900px){
    .test-monitor {
        grid-template-columns: 1fr;
    }
}

.btn + .btn { margin-left: 4px; margin-top: 4px; }
small { color:#64748b; }

#monitoringArea table{min-width:auto}#monitoringArea .bar{margin-top:14px}


/* ===============================
   PT DAYACIPTA KEMASINDO THEME
   =============================== */
:root {
    --primary: #087a35;
    --primary-dark: #064e2a;
    --primary-soft: #dff4e7;
    --primary-border: #9bd5b2;
    --text-dark: #102016;
    --bg-soft: #eef7f1;
}

body {
    background: var(--bg-soft);
    color: var(--text-dark);
}

.sidebar {
    background: linear-gradient(180deg, #064e2a 0%, #087a35 100%);
}

.profile {
    background: rgba(255,255,255,.12);
}

.sidebar nav a:hover {
    background: rgba(255,255,255,.14);
}

.brand-with-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    line-height: 1.2;
}

.brand-with-logo img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    background: rgba(255,255,255,.92);
    border-radius: 12px;
    padding: 4px;
}

button,
.btn {
    background: var(--primary);
}

.btn-secondary {
    background: #166534;
}

.btn-success {
    background: #087a35;
}

.btn-danger {
    background: #991b1b;
}

.pagination a.active {
    background: var(--primary);
}

.typebox {
    background: linear-gradient(135deg, #064e2a, #087a35);
}

.bar div {
    background: var(--primary);
}

.badge-success {
    background: var(--primary-soft);
    color: var(--primary-dark);
}

.card {
    border: 1px solid rgba(8,122,53,.08);
}

.login-page {
    background: linear-gradient(135deg, #dff4e7, #f8fff9);
}

.login-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
    margin: 0 auto 14px auto;
}

.report-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 16px;
    margin-bottom: 18px;
}

.report-header img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.report-title h1,
.report-title h2,
.report-title p {
    margin: 0;
}

.report-title h2 {
    color: var(--primary-dark);
}

@media print {
    .report-header {
        border-bottom: 2px solid #087a35;
    }
}



/* =========================================================
   PROFESSIONAL CORPORATE UI - PT DAYACIPTA KEMASINDO
   ========================================================= */

:root {
    --primary: #087a35;
    --primary-700: #06642d;
    --primary-800: #064e2a;
    --primary-900: #04391f;
    --primary-soft: #e6f6ec;
    --primary-soft-2: #f4fbf7;
    --surface: #ffffff;
    --surface-soft: #f8faf9;
    --border: #dbe7df;
    --text: #102016;
    --muted: #64746a;
    --danger: #991b1b;
    --warning: #b45309;
    --shadow-sm: 0 4px 14px rgba(4, 78, 42, .08);
    --shadow-md: 0 14px 35px rgba(4, 78, 42, .12);
    --radius: 18px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, system-ui, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(8,122,53,.10), transparent 35%),
        linear-gradient(180deg, #f5faf7 0%, #edf6f0 100%);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.layout {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
    width: 286px;
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    padding: 22px 18px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(4,57,31,.96), rgba(8,122,53,.96)),
        radial-gradient(circle at top, rgba(255,255,255,.16), transparent 42%);
    box-shadow: 12px 0 32px rgba(4, 57, 31, .20);
}

.brand {
    margin-bottom: 20px;
}

.brand-with-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px 18px;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

.brand-with-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
    background: rgba(255,255,255,.96);
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.brand-with-logo span {
    font-size: 17px;
    font-weight: 850;
    line-height: 1.22;
    letter-spacing: .2px;
}

.profile {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding: 14px;
    margin: 14px 0 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.profile b {
    font-size: 14px;
}

.profile span {
    color: #d9f3e3;
    font-size: 12px;
    font-weight: 600;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 11px 13px;
    border-radius: 14px;
    color: #f5fff8;
    font-weight: 720;
    font-size: 13.5px;
    transition: .18s ease;
    border: 1px solid transparent;
}

.sidebar nav a:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.16);
    transform: translateX(3px);
}

/* CONTENT */
.content {
    margin-left: 286px;
    width: calc(100% - 286px);
    padding: 30px;
}

.content > h1:first-child {
    margin-top: 0;
}

h1 {
    font-size: 28px;
    letter-spacing: -.4px;
    margin: 0 0 20px;
    color: #092819;
}

h2 {
    font-size: 20px;
    margin: 0 0 15px;
    color: #0a2f1c;
}

h3 {
    font-size: 16px;
    margin: 0 0 12px;
    color: #12251a;
}

p {
    color: #334a3b;
}

/* CARD */
.card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(8,122,53,.10);
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.stat {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 24px;
}

.stat::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -34px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: rgba(8,122,53,.10);
}

.stat b {
    display: block;
    font-size: 38px;
    line-height: 1;
    color: var(--primary-800);
    margin-bottom: 8px;
}

.stat span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* FORM */
label {
    display: block;
    margin-bottom: 14px;
    font-weight: 750;
    color: #183523;
}

input,
select,
textarea {
    width: 100%;
    margin-top: 7px;
    padding: 12px 14px;
    border: 1px solid #cbded1;
    border-radius: 14px;
    background: #fff;
    color: #102016;
    font: inherit;
    outline: none;
    transition: .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(8,122,53,.12);
}

textarea {
    min-height: 94px;
    resize: vertical;
}

button,
.btn {
    border: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-700));
    color: #fff;
    border-radius: 14px;
    padding: 11px 16px;
    font-weight: 820;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    box-shadow: 0 8px 18px rgba(8,122,53,.20);
    transition: .18s ease;
}

button:hover,
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(8,122,53,.24);
}

button:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background: linear-gradient(135deg, #475569, #334155);
}

.btn-success {
    background: linear-gradient(135deg, #087a35, #059447);
}

.btn-danger {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

.btn + .btn,
button + .btn {
    margin-left: 6px;
    margin-top: 6px;
}

/* TABLE */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 900px;
    background: white;
}

th,
td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf3ef;
    text-align: left;
    vertical-align: top;
}

th {
    background: linear-gradient(180deg, #f4fbf7, #edf7f1);
    color: #164528;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .45px;
    font-weight: 850;
}

tr:hover td {
    background: #fbfffc;
}

/* FILTER */
.filter {
    display: grid;
    grid-template-columns: 1fr 190px 190px 124px;
    gap: 12px;
    margin-bottom: 16px;
    align-items: end;
}

/* BADGE ALERT */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8eef0;
    color: #334155;
    font-size: 12px;
    font-weight: 820;
}

.badge-success {
    background: #dcfce7;
    color: #166534;
}

.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-weight: 750;
    border: 1px solid transparent;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.note {
    background: #f0fdf4;
    color: #14532d;
    border: 1px solid #bbf7d0;
    padding: 15px 16px;
    border-radius: 16px;
    line-height: 1.7;
}

/* LOGIN */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        linear-gradient(135deg, rgba(6,78,42,.88), rgba(8,122,53,.68)),
        radial-gradient(circle at top right, rgba(255,255,255,.30), transparent 30%),
        #e8f7ed;
}

.login-box {
    width: 100%;
    max-width: 460px;
    padding: 32px;
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(4,57,31,.28);
}

.login-box h1 {
    text-align: center;
    font-size: 24px;
}

.login-box p {
    text-align: center;
}

.login-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    display: block;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: 20px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
}

/* TEST */
.test-monitor {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    align-items: start;
}

.camera-box {
    background: linear-gradient(180deg, #05391f, #087a35);
    color: white;
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.camera-box h3 {
    color: white;
}

.camera-box video,
.camera-box canvas {
    width: 100%;
    border-radius: 16px;
    background: #052e1a;
    display: block;
    border: 1px solid rgba(255,255,255,.16);
}

.camera-status {
    font-size: 13px;
    margin-top: 10px;
    color: #dbf8e5;
    line-height: 1.6;
}

.timer-box {
    background: linear-gradient(180deg, #ffffff, #f7fcf9);
    border: 1px solid #dbe7df;
    border-radius: 22px;
    padding: 22px;
}

.timer-number {
    font-size: 46px;
    font-weight: 950;
    color: var(--primary-800);
    letter-spacing: -1px;
    margin: 6px 0 12px;
}

.timer-warning {
    color: var(--warning);
}

.timer-danger {
    color: var(--danger);
}

.answer {
    border: 1px solid #cfe0d4;
    border-radius: 18px;
    padding: 18px 20px;
    background: #fff;
    cursor: pointer;
    transition: .18s ease;
}

.answer:hover {
    border-color: var(--primary);
    background: #f4fbf7;
    box-shadow: 0 8px 22px rgba(8,122,53,.10);
}

/* RESULT */
.typebox {
    background:
        linear-gradient(135deg, #04391f, #087a35),
        radial-gradient(circle at top right, rgba(255,255,255,.18), transparent 38%);
    color: white;
    border-radius: 24px;
    padding: 34px;
    text-align: center;
    font-size: 48px;
    font-weight: 950;
    letter-spacing: .5px;
    box-shadow: var(--shadow-md);
}

.bar {
    height: 18px;
    background: #e5efe8;
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 16px;
}

.bar div {
    height: 100%;
    background: linear-gradient(90deg, #087a35, #16a34a);
}

.report-header {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(8,122,53,.12);
    border-left: 6px solid var(--primary);
    border-radius: 22px;
    padding: 20px 22px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

.report-header img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.report-title h2 {
    margin: 0 0 4px;
    color: var(--primary-800);
    font-size: 24px;
}

.report-title p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

/* PAGINATION */
.pagination {
    margin-top: 18px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.pagination a {
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #cbded1;
    border-radius: 12px;
    font-weight: 800;
}

.pagination a.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* MONITORING */
#monitoringArea table {
    min-width: auto;
}

#monitoringArea .card {
    border-left: 5px solid var(--primary);
}

/* PRINT */
@media print {
    body {
        background: white;
    }

    .sidebar,
    .no-print,
    button,
    .btn {
        display: none !important;
    }

    .content {
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .card,
    .report-header {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .layout {
        display: block;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 0 0 24px 24px;
    }

    .content {
        margin: 0;
        width: 100%;
        padding: 18px;
    }

    .grid-2,
    .grid-4,
    .filter,
    .test-monitor {
        grid-template-columns: 1fr;
    }
}


.brand-with-logo small{font-size:13px;color:#d9f3e3;font-weight:750;}

.dashboard-hero{background:linear-gradient(135deg,#ffffff,#f0fdf4);border-left:6px solid #087a35}.dashboard-hero h1{margin-bottom:6px}.dashboard-hero p{margin:0;color:#52705d;font-weight:650}


/* PREMIUM TEMPLATE UI */
:root{
  --p:#087a35;--p2:#064e2a;--p3:#04391f;--soft:#f0fdf4;--line:#dbe7df;
  --text:#102016;--muted:#64748b;--white:#fff;
  --shadow:0 10px 25px rgba(15,23,42,.06);--shadow2:0 18px 45px rgba(8,122,53,.12);
}
body{
  background:radial-gradient(circle at top left,rgba(22,163,74,.14),transparent 34%),
             radial-gradient(circle at top right,rgba(187,247,208,.35),transparent 32%),
             linear-gradient(180deg,#f8fbf9 0%,#eef7f1 100%);
  color:var(--text);font-size:14px;
}
.sidebar{
  width:300px;padding:24px 18px;background:linear-gradient(180deg,rgba(3,46,27,.98),rgba(6,100,45,.96));
  box-shadow:20px 0 50px rgba(3,46,27,.18);
}
.content{margin-left:300px;width:calc(100% - 300px);padding:28px 34px 40px}
.brand-with-logo{padding:10px 10px 22px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand-with-logo img{width:66px;height:66px;border-radius:20px;padding:8px}
.brand-with-logo span{font-size:18px;letter-spacing:-.1px}
.brand-with-logo small{display:block;margin-top:3px;color:rgba(255,255,255,.78);font-size:12px;letter-spacing:.35px;text-transform:uppercase}
.profile{margin:18px 4px;padding:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:22px}
.profile:before{content:"Logged in";display:inline-block;margin-bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(220,252,231,.15);color:#dcfce7;font-size:10px;font-weight:900;letter-spacing:.7px;text-transform:uppercase}
.sidebar nav a{position:relative;padding:12px 14px 12px 18px;border-radius:16px;font-size:13.5px;font-weight:760;letter-spacing:.1px}
.sidebar nav a:before{content:"";width:7px;height:7px;border-radius:99px;background:rgba(220,252,231,.70);margin-right:10px;flex:0 0 7px}
.sidebar nav a:hover{transform:translateX(4px);background:rgba(255,255,255,.13)}
.app-topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;padding:16px 20px;background:rgba(255,255,255,.82);border:1px solid rgba(8,122,53,.10);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.topbar-title{font-size:18px;font-weight:900;color:var(--p2);letter-spacing:-.2px}
.topbar-subtitle{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px}
.topbar-user{display:flex;align-items:center;gap:12px;min-width:230px;justify-content:flex-end}
.topbar-user img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:14px;padding:5px;border:1px solid #dcfce7}
.topbar-user b{display:block;line-height:1.1;color:#0f172a}.topbar-user span{color:var(--muted);font-size:12px;font-weight:700}
h1{font-size:30px;font-weight:950;letter-spacing:-.7px;color:#0b2918}h2{font-size:21px;font-weight:900}h3{font-weight:850}
.card{border-radius:26px;border:1px solid rgba(8,122,53,.10);background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92));box-shadow:var(--shadow);transition:.18s}
.card:hover{transform:translateY(-1px);box-shadow:var(--shadow2)}
.dashboard-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(6,100,45,.98),rgba(8,122,53,.88));color:#fff;border:0}
.dashboard-hero:after{content:"";position:absolute;right:-70px;bottom:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.10)}
.dashboard-hero h1,.dashboard-hero p{color:#fff;position:relative;z-index:1}
.grid-4 .stat{min-height:138px;background:linear-gradient(180deg,#ffffff,#f7fff9);border-bottom:4px solid var(--p)}
.stat b{font-size:42px;color:var(--p2)}
input,select,textarea{border-radius:16px;border-color:#d4e5d9;background:#fbfffc}
input:hover,select:hover,textarea:hover{border-color:#a7d7b8}
button,.btn{border-radius:16px;font-weight:850;letter-spacing:.15px}
button,.btn-success{background:linear-gradient(135deg,#0a8c3e,#06642d)}
.btn-secondary{background:linear-gradient(135deg,#475569,#1e293b)}.btn-danger{background:linear-gradient(135deg,#dc2626,#991b1b)}
.table-wrap{border-radius:22px}th{background:#f1fbf5;color:#064e2a}td{color:#253d2d}
.answer{min-height:98px;display:block;border-radius:22px;position:relative}.answer input[type=radio]{width:auto;transform:scale(1.12);accent-color:var(--p)}
.camera-box,.timer-box{border-radius:26px}.timer-number{font-variant-numeric:tabular-nums}
.login-page{background:linear-gradient(135deg,rgba(3,46,27,.92),rgba(8,122,53,.78)),radial-gradient(circle at top left,rgba(255,255,255,.25),transparent 36%)}
.login-box{border-radius:32px;border:1px solid rgba(255,255,255,.35)}
.login-box:before{content:"PT DAYACIPTA KEMASINDO";display:block;text-align:center;margin-bottom:12px;color:var(--p);font-size:11px;font-weight:950;letter-spacing:1.3px}
.report-header{border-radius:26px;border-left-width:8px}.report-title h2{font-size:26px}
.report-footer-note{background:#f8fffa;border-left:6px solid var(--p);color:#34513d;font-size:13px}
@media(max-width:900px){.content{margin:0;width:100%;padding:16px}.app-topbar{flex-direction:column;align-items:flex-start;gap:14px}.topbar-user{justify-content:flex-start;min-width:0}}


/* PAPI diagram uses .bar component */


/* PAPI CIRCULAR RADAR */
.papi-radar-card {
    background: linear-gradient(180deg, #ffffff, #f8fffa);
    border-radius: 24px;
}

.papi-radar-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.3fr) minmax(280px, .7fr);
    gap: 22px;
    align-items: start;
}

.papi-radar-wrap {
    width: 100%;
    overflow-x: auto;
    text-align: center;
}

.papi-radar-wrap canvas {
    max-width: 100%;
    height: auto;
    border-radius: 24px;
    background: white;
    box-shadow: inset 0 0 0 1px rgba(8,122,53,.08);
}

.papi-radar-side {
    background: #f8fffa;
    border: 1px solid #dbe7df;
    border-radius: 22px;
    padding: 18px;
}

.papi-summary-box {
    background: white;
    border: 1px solid #dbe7df;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
}

.papi-summary-box > b {
    display: block;
    margin-bottom: 10px;
    color: #064e2a;
}

.papi-factor-line {
    display: grid;
    grid-template-columns: 34px 1fr 34px;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed #dbe7df;
    font-size: 13px;
}

.papi-factor-line:last-child {
    border-bottom: 0;
}

.papi-factor-line span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #65e522;
    color: #052e16;
    border-radius: 10px;
    font-weight: 900;
    height: 28px;
}

.papi-factor-line strong {
    text-align: center;
    color: #087a35;
    font-size: 16px;
}

@media print {
    .papi-radar-layout {
        grid-template-columns: 1fr;
    }

    .papi-radar-side {
        page-break-inside: avoid;
    }
}

@media (max-width: 1000px) {
    .papi-radar-layout {
        grid-template-columns: 1fr;
    }
}


/* PAPI GRAPH SHEET */
.papi-graph-sheet {
    background: #ffffff;
    border: 1px solid #dbe7df;
    border-radius: 24px;
    padding: 18px;
    overflow-x: auto;
}

.papi-graph-sheet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 16px;
}

.papi-logo-text {
    font-size: 54px;
    font-weight: 950;
    letter-spacing: 4px;
    color: #111827;
    line-height: .9;
}

.papi-logo-sub {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .8px;
    color: #334155;
}

.papi-graph-meta {
    min-width: 260px;
    background: #f8fffa;
    border: 1px solid #dbe7df;
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
}

.papi-graph-meta div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dashed #dbe7df;
    padding: 5px 0;
}

.papi-graph-meta div:last-child {
    border-bottom: 0;
}

.papi-graph-sheet canvas {
    width: 100%;
    max-width: 1120px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 0 0 1px #e5e7eb;
}

.papi-graph-note {
    margin-top: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
}

@media print {
    .papi-graph-sheet {
        page-break-inside: avoid;
        border: 1px solid #ddd;
    }

    .papi-graph-sheet canvas {
        max-width: 100%;
    }
}


/* PAPI EXECUTIVE REPORT */
.papi-executive-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr;
    gap: 18px;
    margin-bottom: 20px;
}

.papi-profile-card {
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
    border-left: 7px solid #087a35;
}

.papi-mini-row {
    display: grid;
    grid-template-columns: 42px 1fr 38px;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #e5eee8;
    padding: 10px 0;
}

.papi-mini-row:last-child {
    border-bottom: 0;
}

.papi-mini-row span {
    background: #dcfce7;
    color: #064e2a;
    height: 34px;
    width: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.papi-mini-row small {
    display: block;
    color: #64748b;
    font-weight: 700;
}

.papi-mini-row strong {
    font-size: 20px;
    color: #087a35;
    text-align: center;
}

.muted-row span {
    background: #fef3c7;
    color: #92400e;
}

.muted-row strong {
    color: #92400e;
}

.papi-heatmap {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
}

.papi-heatmap-item {
    border-radius: 18px;
    padding: 14px;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, .08);
    min-height: 120px;
}

.factor-code {
    font-size: 24px;
    font-weight: 950;
}

.factor-score {
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    margin: 6px 0;
}

.factor-name {
    font-weight: 800;
    font-size: 12px;
    line-height: 1.3;
}

.factor-level {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.score-very-high { background: #bbf7d0; }
.score-high { background: #dcfce7; }
.score-medium { background: #fef9c3; }
.score-low { background: #fed7aa; }
.score-very-low { background: #fecaca; }

.job-match-list {
    display: grid;
    gap: 12px;
}

.job-match-row {
    display: grid;
    grid-template-columns: 1fr 58px;
    gap: 12px;
    align-items: center;
    background: #f8fffa;
    border: 1px solid #dbe7df;
    border-radius: 18px;
    padding: 14px;
}

.job-match-row span {
    display: block;
    color: #64748b;
    font-size: 12px;
    margin-top: 3px;
}

.job-match-row strong {
    font-size: 22px;
    color: #087a35;
    text-align: right;
}

.job-match-bar {
    grid-column: 1 / -1;
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.job-match-bar div {
    height: 100%;
    background: linear-gradient(90deg, #087a35, #16a34a);
}

/* PAPI MODERN GRAPH SHEET */
.papi-modern-sheet {
    background: linear-gradient(180deg, #ffffff, #f8fffa);
    border: 1px solid #dbe7df;
    border-radius: 24px;
    padding: 18px;
    overflow-x: auto;
}

.papi-modern-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.papi-modern-head h3 {
    margin-bottom: 3px;
}

.papi-modern-head p {
    margin: 0;
    color: #64748b;
    font-weight: 650;
}

.papi-modern-legend {
    white-space: nowrap;
    color: #334155;
    font-weight: 800;
    font-size: 13px;
    background: white;
    border: 1px solid #dbe7df;
    border-radius: 999px;
    padding: 9px 12px;
}

.papi-modern-legend span {
    display: inline-block;
    width: 26px;
    height: 5px;
    border-radius: 999px;
    vertical-align: middle;
    margin: 0 6px 2px 10px;
}

.papi-modern-legend span:first-child {
    margin-left: 0;
}

.legend-role {
    background: #064e2a;
}

.legend-need {
    background: #0284c7;
}

.papi-modern-sheet canvas {
    width: 100%;
    max-width: 1180px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 22px;
    box-shadow: 0 0 0 1px #e5e7eb;
    background: white;
}

@media (max-width: 1200px) {
    .papi-executive-grid {
        grid-template-columns: 1fr;
    }

    .papi-heatmap {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 700px) {
    .papi-heatmap {
        grid-template-columns: 1fr;
    }

    .papi-modern-head {
        flex-direction: column;
    }
}


/* CLEANER PAPI GRAPH OVERRIDE */
.papi-modern-sheet {
    padding: 22px;
}

.papi-modern-head {
    margin-bottom: 18px;
}

.papi-modern-head h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

.papi-modern-head p {
    font-size: 14px;
}

.papi-modern-sheet canvas {
    max-width: 1400px;
    min-width: 980px;
    border-radius: 26px;
}

@media (max-width: 1100px) {
    .papi-modern-sheet {
        overflow-x: auto;
    }
}


/* CLEAN READABLE PAPI RADAR OVERRIDE */
.clean-radar-card {
    background: #ffffff;
    border-radius: 28px;
}

.clean-radar-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.05fr) minmax(360px, .95fr);
    gap: 24px;
    align-items: start;
}

.clean-radar-wrap {
    background: #ffffff;
    border: 1px solid #dbe7df;
    border-radius: 28px;
    padding: 16px;
    overflow-x: auto;
}

.clean-radar-wrap canvas {
    width: 100%;
    max-width: 1000px;
    min-width: 620px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.clean-radar-side {
    background: #f8fffa;
    border: 1px solid #dbe7df;
    border-radius: 28px;
    padding: 20px;
}

.clean-radar-side h3 {
    margin-bottom: 6px;
    color: #064e2a;
}

.legend-desc {
    color: #64748b;
    margin-top: 0;
    font-size: 13px;
}

.clean-legend-group {
    background: #ffffff;
    border: 1px solid #e2eee6;
    border-radius: 18px;
    margin-bottom: 12px;
    overflow: hidden;
}

.clean-legend-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    font-weight: 950;
    color: #102016;
    background: #f1fbf5;
    border-bottom: 1px solid #e2eee6;
}

.clean-legend-title span {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    display: inline-block;
}

.clean-legend-row {
    display: grid;
    grid-template-columns: 42px 1fr 36px;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px dashed #edf3ef;
    font-size: 13px;
}

.clean-legend-row:last-child {
    border-bottom: 0;
}

.clean-code {
    width: 34px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5bea18;
    color: #053b1e;
    font-weight: 950;
}

.clean-legend-row strong {
    color: #087a35;
    font-size: 16px;
    text-align: right;
}

@media (max-width: 1100px) {
    .clean-radar-layout {
        grid-template-columns: 1fr;
    }
}


/* PAPI INSIDE CIRCLE CLEAN OVERRIDE */
.circle-only-radar-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 22px;
}

.circle-only-radar-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.circle-only-radar-head h3 {
    margin-bottom: 4px;
    color: #064e2a;
    font-size: 22px;
}

.circle-only-radar-head p {
    margin: 0;
    color: #64748b;
    font-weight: 650;
}

.circle-only-radar-wrap {
    background: #ffffff;
    border: 1px solid #dbe7df;
    border-radius: 30px;
    padding: 16px;
    overflow-x: auto;
}

.circle-only-radar-wrap canvas {
    width: 100%;
    max-width: 1200px;
    min-width: 760px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 28px;
    box-shadow: 0 0 0 1px #edf3ef;
}

@media print {
    .circle-only-radar-wrap {
        overflow: visible;
        padding: 8px;
    }

    .circle-only-radar-wrap canvas {
        min-width: 0;
        max-width: 100%;
    }
}

/* REPORT PRINT PDF PTDCK */
.report-shell{max-width:1120px;margin:0 auto;background:#fff}
.report-toolbar{max-width:1120px;margin:22px auto;display:flex;justify-content:space-between;gap:12px;align-items:center}
.report-page{background:#fff;border:1px solid #dbe7df;margin-bottom:20px;padding:34px;min-height:1040px;position:relative;page-break-after:always}
.report-cover{min-height:1040px;display:flex;flex-direction:column;justify-content:center;text-align:center;color:#fff;background:linear-gradient(135deg,#064e2a,#087a35)}
.report-cover img{width:128px;height:128px;object-fit:contain;background:#fff;border-radius:28px;padding:12px;margin:0 auto 26px}
.report-cover h1{color:#fff;font-size:42px;margin:0 0 10px}.report-cover h2{color:#dcfce7;margin:0 0 30px}
.report-cover-box{width:560px;max-width:100%;margin:0 auto;background:rgba(255,255,255,.14);border-radius:22px;padding:20px;text-align:left}
.report-cover-box div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.report-cover-box div:last-child{border-bottom:0}
.report-head{display:flex;gap:16px;align-items:center;border-bottom:3px solid #087a35;padding-bottom:14px;margin-bottom:22px}
.report-head img{width:70px;height:70px;object-fit:contain}.report-head h2{margin:0;color:#064e2a}.report-head p{margin:2px 0 0;color:#64748b;font-weight:700}
.r-title{border-left:6px solid #087a35;padding-left:12px;color:#064e2a;margin:24px 0 14px}
.r-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.r-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.r-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.r-box{border:1px solid #dbe7df;border-radius:18px;background:#fbfffc;padding:15px;page-break-inside:avoid}.r-box h3{margin-top:0;color:#064e2a}
.r-table{width:100%;min-width:0;border-collapse:collapse}.r-table th,.r-table td{border:1px solid #dbe7df;padding:8px 9px;font-size:13px}.r-table th{background:#f0fdf4;color:#064e2a}
.r-big{background:linear-gradient(135deg,#064e2a,#087a35);color:#fff;border-radius:20px;padding:24px;text-align:center;font-size:44px;font-weight:950}
.r-bar{height:13px;background:#e2e8f0;border-radius:999px;overflow:hidden}.r-bar div{height:100%;background:linear-gradient(90deg,#087a35,#16a34a)}
.r-footer{position:absolute;left:34px;right:34px;bottom:18px;border-top:1px solid #e2e8f0;padding-top:8px;color:#64748b;font-size:11px;display:flex;justify-content:space-between}
.r-sign{margin-top:45px;display:grid;grid-template-columns:1fr 1fr;gap:36px}.r-sign div{text-align:center;padding-top:45px}.r-line{border-top:1px solid #111;padding-top:8px;margin-top:40px;font-weight:800}
@media print{
 @page{size:A4 portrait;margin:10mm}
 body{background:#fff!important}.sidebar,.app-topbar,.report-toolbar,.no-print{display:none!important}
 .content{margin:0!important;width:100%!important;padding:0!important}.report-shell{max-width:none;margin:0}.report-page{border:0;margin:0;min-height:auto;padding:0}.report-cover{min-height:270mm;padding:20mm}
 .r-footer{position:fixed;bottom:0;left:0;right:0}
 .r-grid2,.r-grid3,.r-grid4,.r-box{page-break-inside:avoid}
}


/* =========================================================
   PRINT CLEAN REPORT - PT DAYACIPTA KEMASINDO
   Versi window.print tanpa Dompdf
   ========================================================= */

@media print {

    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .sidebar,
    .app-topbar,
    .navbar,
    .topbar,
    .header-menu,
    .footer,
    .btn,
    button,
    .no-print,
    .action-buttons,
    .breadcrumb,
    .print-toolbar {
        display: none !important;
    }

    .content,
    .container,
    .main-content,
    .report-container,
    .print-report {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .card,
    .report-card,
    .print-page,
    .print-box,
    .r-box {
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .print-page,
    .report-page {
        page-break-after: always;
        break-after: page;
    }

    .print-page:last-child,
    .report-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    canvas,
    img,
    svg {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: auto;
    }

    thead {
        display: table-header-group;
    }

    tr {
        page-break-inside: avoid;
    }

    th,
    td {
        border-color: #cccccc !important;
    }

    .report-header,
    .print-report-header,
    .report-head {
        border-bottom: 3px solid #0c7a3e !important;
        margin-bottom: 20px !important;
        padding-bottom: 10px !important;
        page-break-inside: avoid;
    }

    .report-footer,
    .print-footer,
    .r-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        font-size: 10px !important;
        color: #666666 !important;
        background: #ffffff !important;
        border-top: 1px solid #dddddd !important;
        padding-top: 4px !important;
    }
}

/* Tombol dan box panduan cetak */
.print-help-box {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #14532d;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.6;
}

.print-help-box b {
    color: #064e2a;
}


/* =========================================================
   ENTERPRISE COMPACT SIDEBAR MENU
   ========================================================= */

.enterprise-sidebar {
    width: 282px;
    padding: 18px 16px;
    background:
        linear-gradient(180deg, #04391f 0%, #064e2a 48%, #087a35 100%);
    color: #ffffff;
}

.content {
    margin-left: 282px;
    width: calc(100% - 282px);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.sidebar-brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 17px;
    padding: 7px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.sidebar-brand strong {
    display: block;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -.2px;
}

.sidebar-brand span {
    display: block;
    margin-top: 4px;
    color: #d1fae5;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 16px 4px;
    padding: 12px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #064e2a;
    font-weight: 950;
}

.sidebar-user-card b {
    display: block;
    line-height: 1.1;
    font-size: 13px;
}

.sidebar-user-card span {
    display: block;
    margin-top: 3px;
    color: #bbf7d0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.enterprise-menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 2px 0 30px;
}

.menu-link,
.menu-group-toggle {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 15px;
    color: #f8fff9;
    font-size: 13.5px;
    font-weight: 850;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    text-align: left;
    transition: .18s ease;
}

.menu-link {
    justify-content: flex-start;
    text-decoration: none;
}

.menu-group-toggle > span {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-icon {
    width: 22px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
}

.menu-group-toggle small {
    font-size: 14px;
    color: #bbf7d0;
    transition: .18s ease;
}

.menu-link:hover,
.menu-group-toggle:hover,
.menu-link.active {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.14);
    transform: translateX(2px);
}

.menu-group.open > .menu-group-toggle {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.16);
}

.menu-group.open > .menu-group-toggle small {
    transform: rotate(180deg);
}

.menu-sub {
    display: none;
    margin: 6px 0 4px 31px;
    padding-left: 10px;
    border-left: 1px solid rgba(209,250,229,.30);
}

.menu-group.open .menu-sub {
    display: block;
}

.menu-sub a {
    display: block;
    padding: 8px 10px;
    margin: 3px 0;
    border-radius: 12px;
    color: #dffbea;
    font-size: 12.5px;
    font-weight: 760;
    text-decoration: none;
    transition: .16s ease;
}

.menu-sub a:hover,
.menu-sub a.active {
    background: rgba(255,255,255,.13);
    color: #ffffff;
}

.logout-link {
    margin-top: 8px;
    background: rgba(153, 27, 27, .18);
}

.logout-link:hover {
    background: rgba(220, 38, 38, .25);
}

/* Hide old sidebar elements if any remain */
.sidebar .brand,
.sidebar .profile,
.sidebar nav:not(.enterprise-menu) {
    display: none !important;
}

@media (max-width: 900px) {
    .enterprise-sidebar {
        position: static;
        width: 100%;
        height: auto;
        border-radius: 0 0 24px 24px;
    }

    .content {
        margin: 0;
        width: 100%;
    }

    .enterprise-menu {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   FIX LOGIN PAGE LAYOUT
   ========================================================= */

.login-only-body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(3,46,27,.92), rgba(8,122,53,.78)),
        radial-gradient(circle at top left, rgba(255,255,255,.25), transparent 36%);
}

.login-only-body .login-page {
    min-height: 100vh;
    width: 100%;
}

.login-only-body .content,
.login-only-body .layout,
.login-only-body .sidebar,
.login-only-body .app-topbar {
    display: none !important;
}

.login-only-body .login-box {
    margin: 0 auto;
}

/* Ensure old sidebar/menu does not leak into login */
body.login-only-body .enterprise-sidebar,
body.login-only-body .sidebar {
    display: none !important;
}

/* Fix enterprise sidebar width consistency */
.enterprise-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 900px) {
    .enterprise-sidebar {
        position: static;
        height: auto;
    }
}


/* =========================================================
   FILTER BAR FIX - PRESISI DAN TIDAK TERPOTONG
   ========================================================= */

.filter,
.filter-bar,
form.filter {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1.4fr) minmax(190px, 1fr) 140px 150px !important;
    gap: 14px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

.filter input,
.filter select,
.filter button,
.filter .btn,
.filter-bar input,
.filter-bar select,
.filter-bar button,
.filter-bar .btn,
form.filter input,
form.filter select,
form.filter button,
form.filter .btn {
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.filter button,
.filter .btn,
.filter-bar button,
.filter-bar .btn,
form.filter button,
form.filter .btn {
    min-width: 140px !important;
    background: linear-gradient(135deg, #087a35, #06642d) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(8,122,53,.20) !important;
}

.filter button:hover,
.filter .btn:hover,
.filter-bar button:hover,
.filter-bar .btn:hover,
form.filter button:hover,
form.filter .btn:hover {
    transform: none !important;
    background: linear-gradient(135deg, #06642d, #064e2a) !important;
}

/* Jika filter hanya berisi 3 elemen: search/select/button */
.filter > :nth-last-child(3):first-child,
.filter > :nth-last-child(3):first-child ~ *,
form.filter > :nth-last-child(3):first-child,
form.filter > :nth-last-child(3):first-child ~ * {
    min-width: 0;
}

/* Card tidak boleh memotong tombol kanan */
.card {
    overflow: visible !important;
}

.table-wrap {
    overflow-x: auto !important;
}

/* Responsive */
@media (max-width: 1200px) {
    .filter,
    .filter-bar,
    form.filter {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 700px) {
    .filter,
    .filter-bar,
    form.filter {
        grid-template-columns: 1fr !important;
    }

    .filter button,
    .filter .btn,
    .filter-bar button,
    .filter-bar .btn,
    form.filter button,
    form.filter .btn {
        width: 100% !important;
    }
}

.filter-fixed {
    overflow: visible !important;
}

/* FIX PAPI CHART VISIBILITY */
.papi-radar-wrap canvas,.circle-only-radar-wrap canvas,.papi-modern-sheet canvas{display:block!important;visibility:visible!important;opacity:1!important;background:#fff!important}
.papi-radar-wrap,.circle-only-radar-wrap,.papi-modern-sheet{min-height:420px}


/* =========================================================
   MONITORING PROGRESS TEST
   ========================================================= */

.monitor-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.monitor-stat {
    background: #f8fffa;
    border: 1px solid #dbe7df;
    border-radius: 20px;
    padding: 18px;
}

.monitor-stat b {
    display: block;
    font-size: 34px;
    color: #087a35;
    line-height: 1;
}

.monitor-stat span {
    display: block;
    margin-top: 7px;
    color: #64748b;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
}

.progress-line {
    height: 12px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin: 7px 0;
}

.progress-line div {
    height: 100%;
    background: linear-gradient(90deg, #087a35, #16a34a);
}

.progress-table small {
    color: #64748b;
    font-weight: 650;
}

@media (max-width: 900px) {
    .monitor-summary {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   NEW DCK LOGO BRANDING
   ========================================================= */

.sidebar-brand img,
.brand-with-logo img,
.topbar-user img,
.login-logo,
.report-header img,
.print-report-header img,
.report-head img {
    object-fit: contain !important;
}

.sidebar-brand img,
.brand-with-logo img {
    background: #ffffff !important;
    padding: 6px !important;
    border-radius: 16px !important;
}

.sidebar-brand img {
    width: 64px !important;
    height: 54px !important;
}

.brand-with-logo img {
    width: 68px !important;
    height: 58px !important;
}

.topbar-user img {
    width: 52px !important;
    height: 42px !important;
    background: #ffffff !important;
    padding: 5px !important;
    border-radius: 12px !important;
}

.login-logo {
    width: 120px !important;
    height: 82px !important;
    background: #ffffff !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

.report-header img,
.print-report-header img,
.report-head img {
    width: 92px !important;
    height: 62px !important;
    background: #ffffff !important;
    padding: 6px !important;
    border-radius: 12px !important;
}


/* LOGO TRANSPARAN DCK */
.sidebar-brand img,
.brand-with-logo img,
.topbar-user img,
.login-logo,
.report-header img,
.print-report-header img,
.report-head img {
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-brand img,
.brand-with-logo img {
    width: 72px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.topbar-user img {
    width: 58px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.login-logo {
    width: 150px !important;
    height: 95px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.report-header img,
.print-report-header img,
.report-head img {
    width: 110px !important;
    height: 70px !important;
    padding: 0 !important;
    border-radius: 0 !important;
}


/* PARTICIPANT RESULT CARD - NO FILTER FOR USER */
.participant-result-card{background:#fff;border:1px solid #dbe7df;border-radius:30px;padding:28px;box-shadow:0 22px 50px rgba(6,78,42,.10)}
.participant-result-hero{display:grid;grid-template-columns:1fr 180px;gap:22px;align-items:center;padding:26px;border-radius:26px;background:linear-gradient(135deg,rgba(6,78,42,.96),rgba(8,122,53,.86));color:#fff}
.participant-result-hero h2{margin:8px 0;font-size:42px;color:#fff}.participant-result-hero p{color:#dcfce7;margin:0}.result-kicker{display:inline-block;color:#bbf7d0;font-size:12px;font-weight:950;letter-spacing:1.2px;text-transform:uppercase}
.result-type-badge{width:156px;height:156px;border-radius:34px;display:flex;align-items:center;justify-content:center;background:#fff;color:#064e2a;font-size:38px;font-weight:950;box-shadow:0 18px 36px rgba(0,0,0,.18);text-align:center}
.result-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.result-meta-grid div{background:#f8fffa;border:1px solid #dbe7df;border-radius:18px;padding:15px}.result-meta-grid b{display:block;color:#64748b;font-size:12px;text-transform:uppercase;margin-bottom:5px}.result-meta-grid span{color:#102016;font-weight:850}
.result-section{margin-top:24px}.result-section h3{color:#064e2a;margin-bottom:14px}.result-dimension-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:16px}.result-mini-card{background:#fff;border:1px solid #dbe7df;border-radius:22px;padding:18px}.result-mini-card h4{margin:0 0 12px;color:#064e2a}.result-mini-card p{color:#64748b;margin-top:0}
.result-bar-row{margin-bottom:12px}.result-bar-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:13px}.result-bar-track{height:12px;border-radius:999px;overflow:hidden;background:#e2e8f0}.result-bar-track div{height:100%;background:linear-gradient(90deg,#087a35,#16a34a)}
.participant-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.empty-result-card{text-align:center;padding:48px}.empty-result-card h2{color:#064e2a}
@media(max-width:900px){.participant-result-hero,.result-meta-grid,.result-dimension-grid{grid-template-columns:1fr}.result-type-badge{width:100%;height:auto;min-height:110px}}


/* =========================================================
   SIDEBAR MENU PROPORTIONAL FIX
   Membuat posisi tombol/menu lebih rapi dan proporsional
   ========================================================= */

:root {
    --sidebar-width-final: 292px;
}

/* Sidebar lebih compact */
.sidebar.enterprise-sidebar,
.enterprise-sidebar {
    width: var(--sidebar-width-final) !important;
    min-width: var(--sidebar-width-final) !important;
    max-width: var(--sidebar-width-final) !important;
    padding: 18px 18px 22px !important;
}

/* Content mengikuti lebar sidebar baru */
.content {
    margin-left: var(--sidebar-width-final) !important;
    width: calc(100vw - var(--sidebar-width-final)) !important;
    max-width: calc(100vw - var(--sidebar-width-final)) !important;
}

/* Brand/logo dibuat sejajar dan tidak terlalu besar */
.sidebar-brand {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 8px 18px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
}

.sidebar-brand img {
    width: 70px !important;
    height: 54px !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.sidebar-brand strong {
    font-size: 19px !important;
    line-height: 1.05 !important;
}

.sidebar-brand span {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* User card lebih presisi */
.sidebar-user-card {
    display: grid !important;
    grid-template-columns: 48px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 4px 18px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
}

.user-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    font-size: 18px !important;
}

.sidebar-user-card b {
    font-size: 13.5px !important;
    line-height: 1.1 !important;
}

.sidebar-user-card span {
    font-size: 11px !important;
    margin-top: 4px !important;
}

/* Menu spacing */
.enterprise-menu {
    gap: 6px !important;
    padding-bottom: 24px !important;
}

/* Semua tombol menu dibuat sama tinggi dan alignment rapi */
.menu-link,
.menu-group-toggle {
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    display: grid !important;
    grid-template-columns: 28px 1fr 18px !important;
    align-items: center !important;
    column-gap: 10px !important;
}

.menu-link {
    grid-template-columns: 28px 1fr !important;
}

.menu-group-toggle > span {
    display: contents !important;
}

.menu-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    background: rgba(255,255,255,.09) !important;
}

.menu-group-toggle small {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    margin-left: auto !important;
}

/* Hover tidak menggeser menu terlalu jauh */
.menu-link:hover,
.menu-group-toggle:hover,
.menu-link.active,
.menu-group.open > .menu-group-toggle {
    transform: none !important;
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.16) !important;
}

/* Submenu dibuat lebih ramping dan sejajar dengan teks utama */
.menu-sub {
    margin: 6px 0 7px 40px !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(209,250,229,.24) !important;
}

.menu-sub a {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    margin: 4px 0 !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    line-height: 1.2 !important;
}

/* Bullet kecil submenu lebih rapi */
.menu-sub a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #bbf7d0;
    margin-right: 11px;
    flex-shrink: 0;
}

/* Logout dibuat konsisten dan tidak terlalu tinggi */
.logout-link {
    margin-top: 12px !important;
    background: rgba(153,27,27,.18) !important;
}

/* Hilangkan bullet bawaan lama bila masih ada */
.enterprise-menu li,
.sidebar li {
    list-style: none !important;
}

/* Topbar lebih presisi */
.app-topbar {
    min-height: 92px !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.topbar-user {
    min-width: 220px !important;
    justify-content: flex-end !important;
}

/* Mobile */
@media (max-width: 900px) {
    .sidebar.enterprise-sidebar,
    .enterprise-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .sidebar-brand {
        grid-template-columns: 60px 1fr !important;
    }

    .sidebar-brand img {
        width: 58px !important;
        height: 46px !important;
    }
}



/* =========================================================
   FINAL STABLE LAYOUT LOCK
   Mengunci layout agar sidebar, topbar, card, tombol, dan tabel
   tidak overlap / tidak bergeser.
   ========================================================= */

:root {
    --sidebar-lock-width: 340px;
    --content-lock-padding-x: 44px;
    --content-lock-padding-y: 34px;
}

/* Hilangkan scroll horizontal halaman utama */
html,
body {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

* {
    box-sizing: border-box !important;
}

/* Layout utama tidak boleh flex yang melebar */
.layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* Sidebar fixed dengan lebar pasti */
.sidebar,
.sidebar.enterprise-sidebar,
.enterprise-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--sidebar-lock-width) !important;
    min-width: var(--sidebar-lock-width) !important;
    max-width: var(--sidebar-lock-width) !important;
    height: 100vh !important;
    padding: 20px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100 !important;
}

/* Content dimulai setelah sidebar, tidak boleh masuk ke area sidebar */
.content {
    position: relative !important;
    margin-left: var(--sidebar-lock-width) !important;
    width: calc(100% - var(--sidebar-lock-width)) !important;
    max-width: calc(100% - var(--sidebar-lock-width)) !important;
    min-height: 100vh !important;
    padding: var(--content-lock-padding-y) var(--content-lock-padding-x) 60px !important;
    overflow-x: hidden !important;
}

/* Topbar selalu penuh dalam content, tidak overlap sidebar */
.app-topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 96px !important;
    margin: 0 0 40px 0 !important;
    padding: 20px 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
}

/* Area konten tidak boleh lebih lebar dari container */
.content > *,
.content .card,
.content .grid2,
.content .dashboard-grid,
.content .participant-result-card {
    max-width: 100% !important;
}

/* Header halaman */
.content h1 {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
}

/* Card lebih stabil */
.card {
    overflow: hidden !important;
    max-width: 100% !important;
}

/* Layout master user: 2 kolom aman, lalu turun 1 kolom di layar menengah */
.grid2,
.master-user-layout {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 1.05fr) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
}

.grid2 > *,
.master-user-layout > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Filter dibuat 2 kolom supaya tombol tidak keluar card */
.filter,
.filter-bar,
form.filter,
.filter-fixed {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 18px !important;
}

/* Semua field dan tombol sama tinggi */
.filter input,
.filter select,
.filter button,
.filter .btn,
.filter-fixed input,
.filter-fixed select,
.filter-fixed button,
.filter-fixed .btn,
form.filter input,
form.filter select,
form.filter button,
form.filter .btn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 18px !important;
}

/* Tombol filter tidak boleh keluar kanan */
.filter button,
.filter .btn,
.filter-fixed button,
.filter-fixed .btn,
form.filter button,
form.filter .btn {
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Tombol export berada di bawah filter, ukuran natural */
.card > a.btn,
.card > .btn,
.card > button.btn {
    width: auto !important;
    min-width: 140px !important;
    max-width: 100% !important;
    display: inline-flex !important;
}

/* Tabel scroll hanya di dalam card, bukan scroll halaman */
.table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: 20px !important;
}

.table-wrap table {
    width: max-content !important;
    min-width: 100% !important;
}

/* Topbar user */
.topbar-user {
    flex-shrink: 0 !important;
    min-width: 220px !important;
}

.topbar-user img {
    flex-shrink: 0 !important;
}

/* Sidebar menu stabil */
.enterprise-menu {
    width: 100% !important;
}

.menu-link,
.menu-group-toggle {
    width: 100% !important;
    max-width: 100% !important;
}

.menu-sub {
    max-width: calc(100% - 42px) !important;
}

.menu-sub a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Login tidak memakai sidebar */
body.login-only-body .content,
body.login-only-body .sidebar,
body.login-only-body .enterprise-sidebar,
body.login-only-body .app-topbar {
    display: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Responsive */
@media (max-width: 1500px) {
    :root {
        --sidebar-lock-width: 320px;
        --content-lock-padding-x: 34px;
    }

    .grid2,
    .master-user-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1100px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .sidebar,
    .sidebar.enterprise-sidebar,
    .enterprise-sidebar {
        position: relative !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px 48px !important;
    }

    .app-topbar {
        min-height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .topbar-user {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}



/* =========================================================
   SIDEBAR CLEAN FINAL
   Menghilangkan bullet, merapikan icon, teks, arrow, submenu, logout
   ========================================================= */

.sidebar.enterprise-sidebar,
.enterprise-sidebar {
    padding: 18px 18px 24px !important;
}

/* Hilangkan bullet/dot bawaan yang membuat menu berantakan */
.sidebar ul,
.sidebar ol,
.enterprise-menu,
.enterprise-menu ul,
.enterprise-menu ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar li,
.enterprise-menu li {
    list-style: none !important;
}

.sidebar li::marker,
.enterprise-menu li::marker {
    content: "" !important;
}

.sidebar a::marker,
.sidebar button::marker,
.enterprise-menu a::marker,
.enterprise-menu button::marker {
    content: "" !important;
}

/* Container menu */
.enterprise-menu {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 0 24px 0 !important;
}

/* Item utama */
.menu-link,
.menu-group-toggle {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    display: grid !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Link biasa: icon + text */
.menu-link {
    grid-template-columns: 34px 1fr !important;
    justify-content: start !important;
}

/* Group toggle: icon + text + arrow */
.menu-group-toggle {
    grid-template-columns: 34px 1fr 18px !important;
    justify-content: stretch !important;
    cursor: pointer !important;
}

/* Struktur span pada button dibuat contents agar tidak membuat turun baris */
.menu-group-toggle > span {
    display: contents !important;
}

/* Icon */
.menu-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .11) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Text menu */
.menu-link span:not(.menu-icon),
.menu-group-toggle span:not(.menu-icon) {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Arrow */
.menu-group-toggle small {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: #d1fae5 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform-origin: center !important;
}

/* Hover & active */
.menu-link:hover,
.menu-group-toggle:hover,
.menu-link.active,
.menu-group.open > .menu-group-toggle {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .16) !important;
    transform: none !important;
}

.menu-group.open > .menu-group-toggle small {
    transform: rotate(180deg) !important;
}

/* Submenu */
.menu-sub {
    display: none !important;
    margin: 7px 0 7px 52px !important;
    padding: 0 0 0 13px !important;
    border-left: 1px solid rgba(209,250,229,.26) !important;
    max-width: calc(100% - 52px) !important;
}

.menu-group.open .menu-sub {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.menu-sub a {
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 13px !important;
    display: grid !important;
    grid-template-columns: 10px 1fr !important;
    align-items: center !important;
    gap: 10px !important;
    color: #eafff2 !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.menu-sub a::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #bbf7d0 !important;
    display: block !important;
}

.menu-sub a:hover,
.menu-sub a.active {
    background: rgba(255, 255, 255, .14) !important;
    color: #ffffff !important;
}

/* Logout dibuat seperti menu biasa, tidak melebar aneh */
.logout-link {
    margin-top: 12px !important;
    background: rgba(153, 27, 27, .18) !important;
    grid-template-columns: 34px 1fr !important;
}

.logout-link:hover {
    background: rgba(220, 38, 38, .28) !important;
}

/* Brand dan user card tetap rapi */
.sidebar-brand {
    margin-bottom: 18px !important;
}

.sidebar-user-card {
    margin: 0 0 20px 0 !important;
}

/* Paksa semua menu button tidak inherit style button global */
.enterprise-menu button {
    box-shadow: none !important;
    outline: none !important;
}

/* Mobile */
@media (max-width: 900px) {
    .menu-sub {
        margin-left: 48px !important;
        max-width: calc(100% - 48px) !important;
    }
}



/* =========================================================
   PROFESSIONAL BUTTON UI SYSTEM
   Tampilan tombol dibuat lebih rapi, konsisten, dan enterprise
   ========================================================= */

:root {
    --btn-green: #087a35;
    --btn-green-dark: #064e2a;
    --btn-green-soft: #e8f8ef;
    --btn-text: #ffffff;
    --btn-border: #cfe6d8;
    --btn-shadow: 0 12px 24px rgba(8, 122, 53, .18);
    --btn-shadow-hover: 0 16px 30px rgba(8, 122, 53, .25);
}

/* Base button */
.btn,
button,
input[type="submit"],
input[type="button"],
.action-btn {
    min-height: 46px;
    padding: 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 13.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}

/* Primary/default */
.btn,
button,
input[type="submit"],
.action-btn {
    background: linear-gradient(135deg, var(--btn-green), var(--btn-green-dark)) !important;
    color: var(--btn-text) !important;
    box-shadow: var(--btn-shadow) !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.action-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}

/* Button variants */
.btn-success,
.btn-primary {
    background: linear-gradient(135deg, #087a35, #065f2f) !important;
    color: #ffffff !important;
}

.btn-secondary {
    background: #ffffff !important;
    color: #064e2a !important;
    border-color: var(--btn-border) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}

.btn-secondary:hover {
    background: #f4fbf7 !important;
    border-color: #99d8b5 !important;
    box-shadow: 0 12px 22px rgba(15, 23, 42, .10) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(245, 158, 11, .18) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(220, 38, 38, .18) !important;
}

.btn-info {
    background: linear-gradient(135deg, #0284c7, #075985) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(2, 132, 199, .18) !important;
}

/* Small buttons for table actions */
td .btn,
.table-wrap .btn,
.progress-table .btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

/* Button inside form/filter */
.filter button,
.filter .btn,
.filter-fixed button,
.filter-fixed .btn,
form.filter button,
form.filter .btn {
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 26px rgba(8, 122, 53, .20) !important;
}

/* Action bar: untuk tombol Simpan/Kembali/Export */
.action-bar,
.form-actions,
.participant-actions,
.page-actions,
.toolbar-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.action-bar .btn,
.form-actions .btn,
.participant-actions .btn,
.page-actions .btn,
.toolbar-actions .btn {
    min-width: 132px !important;
}

/* Card button spacing */
.card > .btn,
.card > a.btn,
.card > button.btn {
    margin: 4px 6px 10px 0 !important;
}

/* Pagination button */
.pagination,
.pager {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 20px !important;
}

.pagination a,
.pagination span,
.pager a,
.pager span {
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #cfe6d8 !important;
    background: #ffffff !important;
    color: #064e2a !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.05) !important;
}

.pagination .active,
.pagination span.current,
.pager .active,
.pager span.current,
.pagination a.active,
.pager a.active {
    background: #087a35 !important;
    color: #ffffff !important;
    border-color: #087a35 !important;
}

/* Jika pagination lama memakai class btn */
.pagination .btn,
.pager .btn {
    min-width: 44px !important;
    width: auto !important;
}

/* Button icon style jika ada emoji/icon */
.btn .icon,
button .icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Disabled */
.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
.btn.disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Export button lebih rapi */
a[href*="excel"],
a[href*="export"],
.btn-export {
    background: linear-gradient(135deg, #087a35, #065f2f) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
}

/* Print/PDF button */
a[href*="print"],
button[onclick*="print"],
.btn-print {
    background: linear-gradient(135deg, #0f766e, #115e59) !important;
    color: #ffffff !important;
}

/* Delete button confirmation style tetap jelas */
a[href*="delete"],
.btn-delete {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
}

/* Button group in table cell */
td:last-child {
    white-space: nowrap;
}

td:last-child .btn {
    margin: 2px 3px !important;
}

/* Mobile */
@media (max-width: 700px) {
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .action-bar,
    .form-actions,
    .participant-actions,
    .page-actions,
    .toolbar-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .pagination,
    .pager {
        justify-content: center !important;
    }
}



/* =========================================================
   COMPACT PROFESSIONAL LOGIN PAGE
   ========================================================= */

.login-only-body {
    min-height: 100vh !important;
    margin: 0 !important;
    background:
        radial-gradient(circle at top left, rgba(187,247,208,.55), transparent 34%),
        radial-gradient(circle at bottom right, rgba(8,122,53,.22), transparent 34%),
        linear-gradient(135deg, #eefbf3 0%, #f8fffb 45%, #e8f7ee 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    overflow-x: hidden !important;
}

.login-page-compact {
    width: 100% !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.login-card-compact {
    width: 100% !important;
    max-width: 520px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid #dbe7df !important;
    border-radius: 30px !important;
    padding: 34px !important;
    box-shadow: 0 28px 70px rgba(6, 78, 42, .16) !important;
    backdrop-filter: blur(14px) !important;
}

.login-brand-compact {
    text-align: center !important;
    margin-bottom: 26px !important;
}

.login-brand-compact img {
    width: 128px !important;
    height: 84px !important;
    object-fit: contain !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto 12px !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login-brand-compact span {
    display: block !important;
    color: #087a35 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 10px !important;
}

.login-brand-compact h1 {
    color: #102016 !important;
    font-size: 25px !important;
    line-height: 1.18 !important;
    margin: 0 0 10px !important;
    letter-spacing: -.4px !important;
}

.login-brand-compact p {
    color: #587066 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 auto !important;
    max-width: 380px !important;
}

.login-form-compact {
    display: grid !important;
    gap: 16px !important;
}

.login-form-compact label {
    display: grid !important;
    gap: 8px !important;
    color: #102016 !important;
    font-weight: 850 !important;
    font-size: 13px !important;
}

.login-form-compact input {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    border: 1px solid #cfe6d8 !important;
    border-radius: 16px !important;
    padding: 0 17px !important;
    background: #fbfffc !important;
    color: #102016 !important;
    font-size: 14.5px !important;
    outline: none !important;
    box-shadow: none !important;
}

.login-form-compact input:focus {
    border-color: #087a35 !important;
    box-shadow: 0 0 0 4px rgba(8,122,53,.10) !important;
}

.login-button-compact {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    margin-top: 4px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #087a35, #064e2a) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    border: 0 !important;
    box-shadow: 0 16px 30px rgba(8,122,53,.22) !important;
}

.demo-account-compact {
    margin-top: 22px !important;
    border: 1px solid #bbf7d0 !important;
    background: #f0fdf4 !important;
    border-radius: 18px !important;
    padding: 13px 15px !important;
    color: #14532d !important;
}

.demo-account-compact summary {
    cursor: pointer !important;
    font-weight: 950 !important;
    color: #064e2a !important;
    font-size: 13.5px !important;
}

.demo-row {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    gap: 10px !important;
    padding: 9px 0 !important;
    border-bottom: 1px dashed #bbf7d0 !important;
    font-size: 13px !important;
}

.demo-row:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.demo-row b {
    color: #064e2a !important;
}

.demo-row span {
    color: #166534 !important;
}

/* Hide old oversized login styles if still present */
.login-only-body .login-box,
.login-only-body .login-card:not(.login-card-compact) {
    max-width: 520px !important;
}

@media (max-width: 640px) {
    .login-only-body {
        padding: 18px !important;
    }

    .login-card-compact {
        padding: 26px 22px !important;
        border-radius: 24px !important;
    }

    .login-brand-compact h1 {
        font-size: 22px !important;
    }

    .login-brand-compact img {
        width: 110px !important;
        height: 76px !important;
    }

    .demo-row {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
}



/* =========================================================
   SIDEBAR TEXT CUT FIX
   Memperbaiki tulisan Dashboard dan Logout yang terpotong
   ========================================================= */

.menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.menu-link .menu-icon {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
}

.menu-link span:not(.menu-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Khusus logout agar tidak terlihat kosong/terpotong */
.logout-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

.logout-link .menu-icon {
    width: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
}

.logout-link span:not(.menu-icon) {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Button group tetap grid, hanya link biasa yang flex */
.menu-group-toggle {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 18px !important;
}

.menu-group-toggle .menu-icon {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
}

.menu-group-toggle span:not(.menu-icon) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Tambah sedikit ruang sidebar agar label tidak kepotong */
.sidebar.enterprise-sidebar,
.enterprise-sidebar {
    padding-left: 18px !important;
    padding-right: 18px !important;
}


/* EDIT QUESTION UI */
.edit-question-card {
    max-width: 860px !important;
}

.edit-question-form {
    display: grid;
    gap: 16px;
}

.edit-question-form textarea {
    min-height: 110px;
    resize: vertical;
}

.edit-question-form label {
    font-weight: 850;
    color: #102016;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}


/* QUESTION ACTION BUTTONS INLINE */
.question-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 22px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.question-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    font-weight: 900 !important;
    font-size: 13.5px !important;
    margin: 0 !important;
    box-shadow: 0 10px 20px rgba(15, 23, 42, .08) !important;
}

.question-actions .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

.question-actions .btn-secondary {
    background: #ffffff !important;
    color: #064e2a !important;
    border: 1px solid #cfe6d8 !important;
}

.question-actions .btn-danger {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #ffffff !important;
}

@media (max-width: 760px) {
    .question-actions {
        grid-template-columns: 1fr !important;
    }
}



/* =========================================================
   FILTER TOOLBAR ONE LINE
   Semua kolom pencarian/filter dibuat satu baris di desktop
   ========================================================= */

.filter,
.filter-bar,
form.filter,
.filter-fixed {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
}

/* field umum */
.filter input,
.filter select,
.filter button,
.filter .btn,
.filter-fixed input,
.filter-fixed select,
.filter-fixed button,
.filter-fixed .btn,
form.filter input,
form.filter select,
form.filter button,
form.filter .btn {
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Search dibuat paling lebar */
.filter input[type="text"],
.filter input:not([type]),
.filter-fixed input[type="text"],
.filter-fixed input:not([type]),
form.filter input[type="text"],
form.filter input:not([type]) {
    flex: 1 1 360px !important;
    min-width: 240px !important;
    width: auto !important;
}

/* Select kategori/departemen/dimensi */
.filter select,
.filter-fixed select,
form.filter select {
    flex: 0 0 240px !important;
    min-width: 160px !important;
    width: 240px !important;
}

/* Select limit biasanya select terakhir dibuat lebih kecil */
.filter select:last-of-type,
.filter-fixed select:last-of-type,
form.filter select:last-of-type {
    flex: 0 0 110px !important;
    width: 110px !important;
    min-width: 90px !important;
}

/* Button filter */
.filter button,
.filter .btn,
.filter-fixed button,
.filter-fixed .btn,
form.filter button,
form.filter .btn {
    flex: 0 0 140px !important;
    width: 140px !important;
    min-width: 130px !important;
    padding: 0 20px !important;
    font-weight: 950 !important;
}

/* Jika ada link export/aksi di card, jangan masuk layout filter */
.card > a.btn,
.card > button.btn {
    width: auto !important;
    min-width: 140px !important;
}

/* Halaman Bank Soal: toolbar terlihat lebih compact */
.card h2 + .filter,
.card h2 + form.filter,
.card h2 + .filter-fixed {
    margin-top: 14px !important;
}

/* Tablet: 2 baris rapi */
@media (max-width: 1200px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) 110px 140px !important;
        gap: 12px !important;
    }

    .filter input,
    .filter select,
    .filter button,
    .filter .btn,
    .filter-fixed input,
    .filter-fixed select,
    .filter-fixed button,
    .filter-fixed .btn,
    form.filter input,
    form.filter select,
    form.filter button,
    form.filter .btn {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }
}

/* Mobile: satu kolom */
@media (max-width: 760px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        grid-template-columns: 1fr !important;
    }
}



/* =========================================================
   FILTER TOOLBAR FLEX COMPACT FINAL
   Satu baris tetapi fleksibel, tidak ada elemen yang hilang
   ========================================================= */

.filter,
.filter-bar,
form.filter,
.filter-fixed {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    margin-bottom: 18px !important;
}

/* Semua elemen dibuat compact */
.filter input,
.filter select,
.filter button,
.filter .btn,
.filter-fixed input,
.filter-fixed select,
.filter-fixed button,
.filter-fixed .btn,
form.filter input,
form.filter select,
form.filter button,
form.filter .btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Search paling besar tapi tetap bisa mengecil */
.filter input[type="text"],
.filter input:not([type]),
.filter-fixed input[type="text"],
.filter-fixed input:not([type]),
form.filter input[type="text"],
form.filter input:not([type]) {
    flex: 4 1 180px !important;
    width: auto !important;
}

/* Select pertama/kategori/dimensi/departemen */
.filter select,
.filter-fixed select,
form.filter select {
    flex: 2 1 130px !important;
    width: auto !important;
}

/* Select limit biasanya terakhir, dibuat kecil */
.filter select:last-of-type,
.filter-fixed select:last-of-type,
form.filter select:last-of-type {
    flex: 0 1 82px !important;
    width: 82px !important;
    max-width: 92px !important;
}

/* Tombol filter compact */
.filter button,
.filter .btn,
.filter-fixed button,
.filter-fixed .btn,
form.filter button,
form.filter .btn {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 96px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* Card filter tidak boleh memotong isi */
.card {
    overflow: visible !important;
}

/* Tabel tetap scroll di dalam table-wrap saja */
.table-wrap {
    overflow-x: auto !important;
}

/* Jika card sempit, toolbar turun rapi menjadi dua baris, bukan hilang */
@media (max-width: 1280px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(150px, .7fr) 86px 108px !important;
        gap: 10px !important;
    }

    .filter input,
    .filter select,
    .filter button,
    .filter .btn,
    .filter-fixed input,
    .filter-fixed select,
    .filter-fixed button,
    .filter-fixed .btn,
    form.filter input,
    form.filter select,
    form.filter button,
    form.filter .btn {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
}

/* Tablet kecil */
@media (max-width: 900px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .filter,
    .filter-bar,
    form.filter,
    .filter-fixed {
        grid-template-columns: 1fr !important;
    }

    .filter input,
    .filter select,
    .filter button,
    .filter .btn,
    .filter-fixed input,
    .filter-fixed select,
    .filter-fixed button,
    .filter-fixed .btn,
    form.filter input,
    form.filter select,
    form.filter button,
    form.filter .btn {
        width: 100% !important;
    }
}


/* PAPI FACTOR SELECT */
select[name="factor_a"],
select[name="factor_b"] {
    font-weight: 750;
    color: #102016;
}

/* PAULI KRAEPLIN TEST UI */
.pauli-test-card {
    overflow: visible !important;
}

.pauli-test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 16px;
    border-radius: 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.pauli-test-header p {
    margin: 4px 0 0;
    color: #64748b;
}

.timer-box {
    min-width: 160px;
    padding: 14px 18px;
    border-radius: 18px;
    background: #064e2a;
    color: #ffffff;
    text-align: center;
}

.timer-box span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: #bbf7d0;
    font-weight: 900;
}

.timer-box b {
    display: block;
    font-size: 30px;
    margin-top: 4px;
}

.pauli-grid-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dbe7df;
    border-radius: 22px;
    padding: 14px;
    background: #ffffff;
}

.pauli-grid {
    display: grid;
    gap: 12px;
    min-width: 1100px;
}

.pauli-column {
    border: 1px solid #dbe7df;
    border-radius: 16px;
    padding: 8px;
    background: #fbfffc;
}

.pauli-column-title {
    text-align: center;
    font-weight: 900;
    color: #064e2a;
    margin-bottom: 8px;
    font-size: 12px;
}

.pauli-row {
    display: grid;
    grid-template-columns: 18px 12px 18px 38px;
    gap: 4px;
    align-items: center;
    margin-bottom: 5px;
    font-weight: 800;
}

.pauli-row .plus {
    color: #64748b;
}

.pauli-row input {
    width: 38px !important;
    height: 30px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    text-align: center;
    font-weight: 900;
}

@media (max-width: 760px) {
    .pauli-test-header {
        flex-direction: column;
        align-items: stretch;
    }

    .timer-box {
        width: 100%;
    }
}

/* FINAL FULL STABLE PATCH */
.alert { padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 800; }
.alert-success { background:#dcfce7; color:#14532d; border:1px solid #86efac; }
.alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* SETTINGS TEST CARD GRID FINAL */
.settings-page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.settings-page-title h1{margin-bottom:8px!important}
.settings-page-title p{color:#52685d;margin:0;font-size:15px}
.settings-test-grid{display:grid;grid-template-columns:repeat(2,minmax(320px,1fr));gap:24px;align-items:stretch}
.settings-test-card{min-height:330px;padding:26px!important;overflow:visible!important}
.settings-card-head{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center;margin-bottom:22px}
.settings-icon{width:64px;height:64px;border-radius:16px;background:#dcfce7;color:#087a35;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:950}
.settings-card-head h2{margin:0 0 6px!important;color:#064e2a;font-size:20px}
.settings-card-head p{margin:0;color:#64748b;font-size:13px}
.settings-test-card form{display:grid;gap:14px}
.settings-test-card label{font-weight:850;color:#102016;font-size:13px}
.settings-test-card input{margin-top:8px}
.settings-compact-form{display:grid;gap:13px}
.settings-info{padding:14px 16px;border-radius:15px;background:#ecfdf5;border:1px solid #bbf7d0;color:#166534;font-size:13px}
.settings-test-card .btn{width:fit-content!important;min-width:190px!important}
@media(max-width:1200px){.settings-test-grid{grid-template-columns:1fr}}
@media(max-width:640px){.settings-card-head{grid-template-columns:1fr}.settings-icon{width:56px;height:56px}.settings-test-card .btn{width:100%!important}}

/* PAULI ROUND SYSTEM UI */
.pauli-round-dashboard{
    display:grid;
    grid-template-columns:160px 160px 160px 1fr;
    gap:14px;
    align-items:stretch;
    margin-bottom:16px;
}
.pauli-time-box,.pauli-progress-shell{
    background:#064e2a;
    color:#fff;
    border-radius:18px;
    padding:14px 16px;
    box-shadow:0 12px 24px rgba(6,78,42,.18);
}
.pauli-time-box span,.pauli-progress-shell span{
    display:block;
    color:#bbf7d0;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:6px;
}
.pauli-time-box b{font-size:28px;line-height:1}
.pauli-progress-track{
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,.22);
    margin-top:12px;
}
.pauli-progress-track div{
    height:100%;
    width:0;
    background:#22c55e;
    transition:width .25s ease;
}
.pauli-round-stage{
    border:1px solid #dbe7df;
    border-radius:24px;
    background:#fff;
    padding:18px;
    overflow:hidden;
}
.pauli-round-panel{display:none}
.pauli-round-panel.active{display:block}
.pauli-round-panel.finished{display:none}
.pauli-round-marker{
    border:2px dashed #087a35;
    background:#ecfdf5;
    color:#064e2a;
    border-radius:18px;
    padding:12px 16px;
    margin-bottom:16px;
    display:flex;
    justify-content:space-between;
    gap:12px;
}
.pauli-round-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(98px,1fr));
    gap:8px;
}
.pauli-row{
    display:grid;
    grid-template-columns:18px 12px 18px 38px;
    gap:5px;
    align-items:center;
    font-weight:850;
}
.pauli-row input.locked{
    background:#f1f5f9!important;
    color:#64748b!important;
}
@media(max-width:1000px){.pauli-round-dashboard{grid-template-columns:1fr 1fr}.pauli-progress-shell{grid-column:1/-1}}
@media(max-width:640px){.pauli-round-dashboard{grid-template-columns:1fr}.pauli-round-marker{flex-direction:column}.pauli-round-list{grid-template-columns:1fr 1fr}}

/* PAULI MANUAL SHEET LAYOUT */
.pauli-manual-sheet {
    width: 100%;
    max-width: 260px;
    border: 1px solid #dbe7df;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.pauli-sheet-title {
    display: grid;
    grid-template-columns: 1fr 92px;
    gap: 0;
    padding: 10px 12px;
    background: #ecfdf5;
    color: #064e2a;
    font-weight: 950;
    font-size: 12px;
    text-transform: uppercase;
}

.pauli-manual-row {
    display: grid;
    grid-template-columns: 1fr 92px;
    align-items: center;
    border-top: 1px solid #eef6f0;
    min-height: 42px;
}

.pauli-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 950;
    color: #102016;
    line-height: 1;
}

.pauli-manual-row input {
    width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.pauli-manual-row input.locked {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.pauli-last-row-note {
    text-align: center;
    color: #94a3b8;
    font-weight: 900;
}

.pauli-round-stage {
    display: flex;
    justify-content: flex-start;
}

.pauli-round-panel.active {
    width: 100%;
}

@media (max-width: 640px) {
    .pauli-manual-sheet {
        max-width: 100%;
    }
}

/* PAULI BETWEEN NUMBERS PROFESSIONAL UI */
.pauli-pro-card{overflow:visible!important}
.pauli-pro-dashboard{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr)) minmax(240px,1.25fr);gap:14px;margin-bottom:18px}
.pauli-pro-stat,.pauli-pro-progress{background:linear-gradient(135deg,#065f2f,#064e2a);color:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 14px 26px rgba(6,78,42,.18)}
.pauli-pro-stat span,.pauli-pro-progress span{display:block;color:#bbf7d0;font-size:11px;font-weight:950;text-transform:uppercase;margin-bottom:8px}
.pauli-pro-stat b{font-size:30px;line-height:1;letter-spacing:.5px}
.pauli-pro-stat b.green{color:#86efac}
.pauli-progress-track{height:14px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.22);margin-top:14px}
.pauli-progress-track div{height:100%;width:0;background:#22c55e;transition:width .25s ease}
.pauli-pro-stage{display:grid;grid-template-columns:minmax(360px,1fr) 300px;gap:28px;align-items:start;background:#fff;border:1px solid #dbe7df;border-radius:26px;padding:24px}
.pauli-pro-left{display:flex;justify-content:center}
.pauli-pro-round{display:none;width:100%}
.pauli-pro-round.active{display:block}
.pauli-pro-round-badge{width:100%;max-width:520px;margin:0 auto 18px;border:2px dashed #087a35;border-radius:18px;background:#ecfdf5;color:#064e2a;padding:12px 16px;display:flex;justify-content:space-between;gap:12px}
.pauli-pro-round-badge span{color:#166534;font-size:12px;font-weight:800}
.pauli-stack{position:relative;width:360px;margin:0 auto;display:grid;grid-auto-rows:34px;padding:22px 0;border:1px solid #e5dece;border-radius:22px;background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(250,246,232,.75)),#fbf7ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.pauli-center-line{position:absolute;top:18px;bottom:18px;left:50%;width:1px;background:rgba(15,23,42,.09);transform:translateX(-50%);pointer-events:none}
.pauli-stack-number{grid-column:1;align-self:center;justify-self:center;transform:translateX(-42px);font-size:30px;font-weight:950;color:#111827;line-height:1;opacity:.62}
.pauli-answer-slot{grid-column:1;align-self:center;justify-self:center;transform:translateX(70px);width:120px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.pauli-answer-slot.current{background:#fef3c7}
.pauli-answer-slot input{width:82px!important;height:38px!important;min-height:38px!important;padding:0!important;margin:0!important;text-align:center!important;font-size:22px!important;font-weight:950!important;border-radius:10px!important;background:rgba(255,255,255,.88)!important}
.pauli-answer-slot input.filled{color:#059669!important;border-color:#10b981!important;background:rgba(236,253,245,.92)!important}
.pauli-answer-slot input.locked{color:#64748b!important;background:#f1f5f9!important}
.pauli-pro-example{border:1px solid #bbf7d0;background:#f0fdf4;border-radius:20px;padding:20px;color:#064e2a}
.pauli-pro-example h3{margin:0 0 14px!important;color:#064e2a}
.pauli-example-block{text-align:center;margin:16px auto 22px;max-width:90px;font-weight:950;font-size:20px}
.pauli-example-block span{display:inline-block;margin-right:6px}
.pauli-example-block hr{border:0;border-top:2px solid #064e2a;margin:6px 0}
.pauli-example-block strong{color:#059669}
.pauli-pro-example p{font-size:13px;line-height:1.55;margin:0}
@media(max-width:1400px){.pauli-pro-dashboard{grid-template-columns:repeat(3,1fr)}.pauli-pro-progress{grid-column:span 3}}
@media(max-width:1000px){.pauli-pro-stage{grid-template-columns:1fr}.pauli-pro-example{max-width:420px;margin:0 auto}}
@media(max-width:720px){.pauli-pro-dashboard{grid-template-columns:1fr}.pauli-pro-progress{grid-column:auto}.pauli-stack{width:100%;max-width:360px}.pauli-pro-stage{padding:16px}}


/* PAULI CENTER + AUTOSCROLL FINAL */
.pauli-pro-stage-centered {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;
    min-height: 620px;
}

.pauli-pro-stage-centered .pauli-pro-left {
    width: 100% !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.pauli-pro-stage-centered .pauli-pro-round {
    width: 100% !important;
}

.pauli-pro-stage-centered .pauli-pro-round-badge {
    max-width: 520px !important;
}

.pauli-pro-stage-centered .pauli-stack {
    margin-left: auto !important;
    margin-right: auto !important;
}

.pauli-pro-example {
    display: none !important;
}

/* Tambah ruang bawah agar angka paling bawah masih terlihat saat scroll */
.pauli-pro-card {
    padding-bottom: 90px !important;
}

.pauli-pro-stage {
    scroll-margin-bottom: 160px;
}

.pauli-answer-slot {
    scroll-margin-top: 180px;
    scroll-margin-bottom: 220px;
}

/* Highlight pasangan angka yang sedang dijumlahkan */
.pauli-answer-slot.current {
    background: #fef3c7 !important;
    box-shadow: 0 0 0 9999px rgba(254, 243, 199, .02);
}

/* Input hijau untuk jawaban yang sudah terisi */
.pauli-answer-slot input.filled {
    color: #059669 !important;
    border-color: #10b981 !important;
    background: rgba(236,253,245,.96) !important;
}

/* Card pengerjaan dibuat lebih fokus */
.pauli-stack {
    max-height: none !important;
}

/* Saat layar besar, soal tetap di tengah halaman */
@media (min-width: 1001px) {
    .pauli-pro-stage-centered {
        display: flex !important;
        justify-content: center !important;
    }

    .pauli-pro-stage-centered .pauli-pro-left {
        max-width: 680px !important;
    }
}


/* LOGIN FULL GREEN BACKGROUND FINAL */
html:has(.login-page-compact),
body:has(.login-page-compact) {
    min-height: 100vh !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(187, 247, 208, .20), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(34, 197, 94, .22), transparent 34%),
        linear-gradient(135deg, #063b23 0%, #0b5a34 45%, #148044 100%) !important;
}

.login-only-body {
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(187, 247, 208, .20), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(34, 197, 94, .22), transparent 34%),
        linear-gradient(135deg, #063b23 0%, #0b5a34 45%, #148044 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
}

.login-page-compact {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: transparent !important;
}

.login-page-compact::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,.06), transparent 18%, transparent 82%, rgba(255,255,255,.05)),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), transparent 42%) !important;
}

.login-card-compact {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 520px !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    border-radius: 30px !important;
    padding: 34px !important;
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(255,255,255,.20) inset !important;
    backdrop-filter: blur(14px) !important;
}

.login-brand-compact img {
    width: 128px !important;
    height: 84px !important;
    object-fit: contain !important;
    margin: 0 auto 12px !important;
    display: block !important;
}

.login-button-compact {
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #087a35, #064e2a) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    border: 0 !important;
    box-shadow: 0 16px 30px rgba(8,122,53,.25) !important;
}

.login-button-compact:hover {
    background: linear-gradient(135deg, #0a8c3f, #065f2f) !important;
}

@media (max-width: 640px) {
    .login-page-compact {
        padding: 18px !important;
    }

    .login-card-compact {
        padding: 26px 22px !important;
        border-radius: 24px !important;
    }
}


/* MONITORING CENTER */
.monitoring-center-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.monitoring-kpi {
    background: linear-gradient(135deg, #065f2f, #064e2a);
    color: #ffffff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 14px 28px rgba(6,78,42,.16);
}

.monitoring-kpi span {
    display: block;
    color: #bbf7d0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 950;
    margin-bottom: 8px;
}

.monitoring-kpi b {
    font-size: 34px;
    line-height: 1;
}

.monitoring-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.monitoring-head h2 {
    margin: 0 0 6px !important;
}

.monitoring-head p {
    margin: 0;
    color: #64748b;
}

.progress-mini {
    width: 160px;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 5px;
}

.progress-mini div {
    height: 100%;
    background: linear-gradient(90deg, #087a35, #22c55e);
    border-radius: 999px;
}

.badge-muted {
    background: #e2e8f0;
    color: #334155;
}

@media (max-width: 1300px) {
    .monitoring-center-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .monitoring-center-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-head {
        flex-direction: column;
        align-items: stretch;
    }

    .progress-mini {
        width: 100%;
    }
}

/* FIX PAULI MONITORING LIVE */
.monitoring-center-grid{display:grid;grid-template-columns:repeat(6,minmax(140px,1fr));gap:16px;margin-bottom:22px}
.monitoring-kpi{background:linear-gradient(135deg,#065f2f,#064e2a);color:#fff;border-radius:20px;padding:18px;box-shadow:0 14px 28px rgba(6,78,42,.16)}
.monitoring-kpi span{display:block;color:#bbf7d0;font-size:11px;text-transform:uppercase;font-weight:950;margin-bottom:8px}
.monitoring-kpi b{font-size:34px;line-height:1}
.monitoring-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.progress-mini{width:160px;height:12px;border-radius:999px;overflow:hidden;background:#e2e8f0;margin-bottom:5px}
.progress-mini div{height:100%;background:linear-gradient(90deg,#087a35,#22c55e);border-radius:999px}
.badge-muted{background:#e2e8f0;color:#334155}
@media(max-width:1300px){.monitoring-center-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.monitoring-center-grid{grid-template-columns:1fr}.monitoring-head{flex-direction:column;align-items:stretch}.progress-mini{width:100%}}


/* MASTER FIX MONITORING CENTER */
.monitoring-center-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.monitoring-kpi {
    background: linear-gradient(135deg, #065f2f, #064e2a);
    color: #ffffff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 14px 28px rgba(6,78,42,.16);
}
.monitoring-kpi span {
    display: block;
    color: #bbf7d0;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 950;
    margin-bottom: 8px;
}
.monitoring-kpi b {
    font-size: 34px;
    line-height: 1;
}
.monitoring-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.progress-mini {
    width: 160px;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
    margin-bottom: 5px;
}
.progress-mini div {
    height: 100%;
    background: linear-gradient(90deg, #087a35, #22c55e);
    border-radius: 999px;
}
.badge-muted {
    background: #e2e8f0;
    color: #334155;
}
@media (max-width: 1300px) {
    .monitoring-center-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    .monitoring-center-grid { grid-template-columns: 1fr; }
    .monitoring-head { flex-direction: column; align-items: stretch; }
    .progress-mini { width: 100%; }
}

/* PAULI PROFESSIONAL REPORT */
.pauli-summary-box .r-big{margin-bottom:14px}
.r-table-compact th,.r-table-compact td{padding:7px 8px}
.pauli-kpi{min-height:155px;display:flex;flex-direction:column;gap:7px}
.pauli-kpi span{font-size:12px;font-weight:900;color:#64746a;text-transform:uppercase;letter-spacing:.45px}
.pauli-kpi b{font-size:29px;line-height:1;color:#064e2a}
.pauli-kpi small{font-weight:800;color:#087a35}
.pauli-graph-box{padding:18px 18px 12px;overflow:hidden}
.pauli-bars{min-height:178px;display:flex;align-items:flex-end;gap:8px;border-left:2px solid #dbe7df;border-bottom:2px solid #dbe7df;padding:18px 10px 8px;overflow-x:auto;background:linear-gradient(180deg,#fbfffc,#f4fbf7);border-radius:14px}
.pauli-bar-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:28px;gap:5px;color:#064e2a;font-weight:800}
.pauli-bar-item i{display:block;width:18px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#16a34a,#087a35);box-shadow:0 8px 16px rgba(8,122,53,.18)}
.pauli-bar-item em{font-style:normal;font-size:10px;color:#64746a}
.pauli-bar-value{font-size:10px;color:#064e2a;line-height:1}
.r-note{font-size:12px;color:#64746a;margin:10px 0 0}
.pauli-final-note{background:linear-gradient(135deg,#f0fdf4,#fff)}
.pauli-data-table th,.pauli-data-table td{text-align:center;font-size:12px;padding:6px}
@media print{.pauli-bars{overflow:visible;gap:5px}.pauli-bar-item{min-width:20px}.pauli-bar-item i{width:14px}.pauli-kpi b{font-size:22px}}

/* =========================================================
   FINAL PRINT OVERRIDE - hide application chrome in printed reports
   ========================================================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .layout {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .enterprise-sidebar,
    .sidebar,
    .app-topbar,
    .topbar,
    .navbar,
    .header,
    .header-menu,
    .sidebar-brand,
    .sidebar-user-card,
    .enterprise-menu,
    .breadcrumb,
    .footer,
    .no-print,
    .report-toolbar,
    .action-buttons,
    .print-toolbar,
    .btn,
    button {
        display: none !important;
        visibility: hidden !important;
    }

    .content,
    main.content,
    .main-content,
    .container,
    .report-container,
    .report-shell,
    .print-report {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .card,
    .report-card,
    .report-page,
    .print-page,
    .print-box,
    .r-box {
        box-shadow: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .report-page,
    .print-page {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
}


/* =========================================================
   GLOBAL TOPBAR REMOVED
   Header aplikasi dihapus dari semua halaman modul agar area kerja
   langsung dimulai dari judul halaman. Sidebar tetap menjadi identitas
   utama aplikasi dan user login.
   ========================================================= */
.app-topbar,
.topbar-title,
.topbar-subtitle,
.topbar-user {
    display: none !important;
}

.content {
    padding-top: 28px !important;
}

.content > h1:first-child,
.content > .page-title:first-child {
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .content {
        padding-top: 20px !important;
    }
}


/* User / Peserta action buttons */
.user-action-col {
    min-width: 360px;
    white-space: nowrap;
    vertical-align: top;
}

.user-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}

.user-action-group .user-action-btn {
    min-width: 78px;
    height: 34px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
}

.user-test-access-actions {
    white-space: normal;
    margin-top: 6px;
}

@media (max-width: 768px) {
    .user-action-col {
        min-width: 280px;
    }

    .user-action-group {
        flex-wrap: wrap;
    }
}

/* Data Peserta master-detail layout */
.page-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.section-head h2 {
    margin: 0;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.access-summary-col {
    min-width: 150px;
    line-height: 2.1;
}

.user-action-col {
    min-width: 520px;
}

.user-test-access-actions {
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
    text-align: left;
}

.access-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.access-action-row:last-child {
    border-bottom: 0;
}

.access-action-buttons {
    display: inline-flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.btn-xs {
    min-width: auto !important;
    height: 28px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

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

    .user-action-col {
        min-width: 420px;
    }

    .access-action-row,
    .access-action-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Compact participant actions + approval offcanvas */
.action-compact-col {
    min-width: 360px !important;
    vertical-align: middle !important;
}

.action-compact {
    margin-bottom: 0 !important;
    flex-wrap: wrap;
    justify-content: center;
}

.action-compact .user-action-btn {
    min-width: auto !important;
    height: 34px;
    padding: 7px 12px;
}

.approval-offcanvas-wrap {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    pointer-events: none;
}

.approval-offcanvas-wrap:target {
    display: block;
    pointer-events: auto;
}

.approval-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .28);
    display: block;
    text-decoration: none;
}

.approval-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: min(430px, 92vw);
    height: 100vh;
    background: #fff;
    box-shadow: -16px 0 45px rgba(15, 23, 42, .18);
    border-left: 1px solid #dbe7df;
    transform: translateX(100%);
    transition: transform .22s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.approval-offcanvas-wrap:target .approval-offcanvas {
    transform: translateX(0);
}

.approval-offcanvas-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 22px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f6fbf8;
}

.approval-offcanvas-head h3 {
    margin: 0 0 4px;
    color: #0f5132;
}

.approval-offcanvas-head small {
    color: #334155;
    font-weight: 700;
}

.approval-offcanvas-close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-size: 26px;
    line-height: 1;
    color: #0f5132;
    background: #dcfce7;
}

.approval-offcanvas-body {
    padding: 18px 22px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.approval-grid,
.approval-grid-offcanvas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.approval-grid label,
.approval-grid-offcanvas label {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    padding: 12px 0;
    border-bottom: 1px dashed #dbe7df;
}

.approval-grid select,
.approval-grid-offcanvas select {
    width: 100%;
}

.approval-offcanvas-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
}

@media (max-width: 700px) {
    .action-compact-col {
        min-width: 280px !important;
    }

    .approval-offcanvas {
        width: 94vw;
    }

    .approval-grid label,
    .approval-grid-offcanvas label {
        grid-template-columns: 1fr;
    }
}


/* Standardized Bank Soal layout: MBTI, IST, PAPI. Pauli is intentionally untouched. */
.bank-soal-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.bank-soal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bank-soal-head h1 {
    margin-bottom: 4px;
}
.bank-soal-head .text-muted,
.bank-soal-item-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}
.bank-soal-card {
    width: 100%;
}
.bank-soal-section-head,
.bank-soal-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.bank-soal-filter {
    margin-bottom: 16px;
}
.bank-soal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bank-soal-item {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    margin: 0 !important;
}
.bank-soal-option-grid {
    gap: 14px;
    margin-top: 12px;
}
.bank-soal-options {
    margin-top: 8px;
    padding-left: 20px;
}
.bank-soal-actions {
    margin-top: 12px;
    justify-content: flex-end;
}
.question-offcanvas-wrap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
}
.question-offcanvas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
}
.question-offcanvas {
    position: relative;
    width: min(520px, 94vw);
    height: 100vh;
    background: #fff;
    box-shadow: -16px 0 40px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    animation: questionOffcanvasIn .18s ease-out;
}
@keyframes questionOffcanvasIn {
    from { transform: translateX(32px); opacity: .85; }
    to { transform: translateX(0); opacity: 1; }
}
.question-offcanvas-head {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.question-offcanvas-head h3 {
    margin: 0;
}
.question-offcanvas-head small {
    color: #64748b;
}
.question-offcanvas-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #334155;
    background: #f1f5f9;
    font-size: 24px;
    line-height: 1;
}
.question-offcanvas-body {
    padding: 18px 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.question-offcanvas-body label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}
.question-offcanvas-body input,
.question-offcanvas-body select,
.question-offcanvas-body textarea {
    width: 100%;
}
.question-offcanvas-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}
@media (max-width: 768px) {
    .bank-soal-actions,
    .question-offcanvas-actions {
        justify-content: stretch;
    }
    .bank-soal-actions .btn,
    .question-offcanvas-actions .btn,
    .question-offcanvas-actions button {
        flex: 1;
        text-align: center;
    }
}


/* BANK SOAL COMPACT ACTION ICONS */
.bank-soal-action-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
}
.bank-soal-action-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}
.bank-soal-actions-compact {
    display: inline-flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    max-width: none !important;
    gap: 6px !important;
    margin-top: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
.bank-soal-actions-compact .bank-soal-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08) !important;
}
@media (max-width: 760px) {
    .bank-soal-action-row {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .bank-soal-actions-compact {
        flex: 0 0 auto !important;
    }
    .bank-soal-actions-compact .bank-soal-icon-btn {
        flex: 0 0 34px !important;
        text-align: center !important;
    }
}

/* Pauli round transition delay and virtual marker */
.pauli-transition-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,6,23,.62);
    backdrop-filter:blur(4px);
}
.pauli-transition-overlay.show{display:flex}
.pauli-transition-box{
    width:min(420px,calc(100% - 36px));
    text-align:center;
    background:#fff;
    border:1px solid #bbf7d0;
    border-radius:28px;
    padding:30px 24px;
    box-shadow:0 28px 70px rgba(0,0,0,.28);
    color:#064e2a;
}
.pauli-transition-icon{
    width:58px;
    height:58px;
    margin:0 auto 14px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:#dcfce7;
    border:2px solid #22c55e;
    font-size:32px;
    font-weight:950;
    color:#15803d;
}
.pauli-transition-box h2{
    margin:0 0 8px!important;
    color:#064e2a!important;
    font-size:24px;
    letter-spacing:.4px;
}
.pauli-transition-box p{
    margin:0 0 10px;
    font-weight:900;
    color:#166534;
}
.pauli-transition-box small{
    display:block;
    color:#475569;
    font-weight:800;
    margin-bottom:8px;
}
.pauli-transition-box strong{
    display:inline-grid;
    place-items:center;
    width:76px;
    height:76px;
    border-radius:24px;
    background:#064e2a;
    color:#fff;
    font-size:44px;
    line-height:1;
}
.pauli-virtual-marker{
    max-width:520px;
    margin:22px auto 8px;
    padding:10px 14px;
    border-radius:14px;
    border:2px dashed #15803d;
    background:#f0fdf4;
    color:#065f46;
    text-align:center;
    font-weight:950;
    letter-spacing:.5px;
}
.pauli-answer-slot input.locked{
    background:#f1f5f9!important;
    color:#64748b!important;
    cursor:not-allowed;
}

/* =========================================================
   UPDATE TIMER KONTRAS - Berlaku untuk semua modul tes
   MBTI, IST, PAPI Kostick, Pauli, dan Personality Plus
   Tujuan: timer tidak menyatu dengan background aplikasi.
   ========================================================= */
.test-monitor .timer-box,
.timer-box {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid var(--primary, #087a35) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(8, 122, 53, .16) !important;
    position: relative;
    overflow: hidden;
}

.test-monitor .timer-box::before,
.timer-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    background: var(--primary, #087a35);
}

.timer-box h2,
.timer-box h3 {
    color: #0f172a !important;
    margin-bottom: 8px;
}

.timer-number,
#timerDisplay,
#totalTimer,
#roundTimer,
.timer-box b {
    color: var(--primary, #087a35) !important;
    font-weight: 950 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.timer-number,
#timerDisplay {
    background: var(--primary-soft, #dff4e7);
    border: 1px solid var(--primary-border, #9bd5b2);
    border-radius: 14px;
    padding: 10px 14px;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}

.timer-box p,
.timer-box .timer-info,
.timer-box span {
    color: #334155 !important;
}

.timer-warning,
.timer-number.timer-warning,
#timerDisplay.timer-warning {
    color: #b45309 !important;
    background: #fffbeb !important;
    border-color: #f59e0b !important;
}

.timer-danger,
.timer-number.timer-danger,
#timerDisplay.timer-danger {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    animation: timerPulse 1s infinite;
    text-shadow: none;
}

@keyframes timerPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,.35); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(220,38,38,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

/* Khusus header timer Pauli agar tetap kontras dan tetap mengikuti warna utama program. */
.pauli-test-header .timer-box {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: var(--primary, #087a35) !important;
}

.pauli-test-header .timer-box span {
    color: #475569 !important;
}

.pauli-test-header .timer-box b {
    color: var(--primary, #087a35) !important;
}

@media(max-width: 768px){
    .timer-number,
    #timerDisplay {
        min-width: 128px;
        font-size: 32px !important;
    }

    .timer-box {
        padding: 14px 16px !important;
    }
}

/* =========================================================
   PATCH: Samakan background timer Pauli dengan tes lain
   - Menghapus kesan background hijau penuh pada dashboard timer Pauli
   - Desain tetap sama, hanya warna background/stat diseragamkan
   ========================================================= */
.pauli-pro-dashboard .pauli-pro-stat,
.pauli-pro-dashboard .pauli-pro-progress {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(8,122,53,.16) !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.08) !important;
}

.pauli-pro-dashboard .pauli-pro-stat span,
.pauli-pro-dashboard .pauli-pro-progress span {
    color: #475569 !important;
}

.pauli-pro-dashboard .pauli-pro-stat b,
.pauli-pro-dashboard #totalTimer,
.pauli-pro-dashboard #roundTimer,
.pauli-pro-dashboard #roundNow,
.pauli-pro-dashboard #answeredCount {
    color: var(--primary, #087a35) !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.pauli-pro-dashboard .pauli-pro-stat b.green {
    color: var(--primary, #087a35) !important;
}

.pauli-pro-dashboard .pauli-pro-progress .pauli-progress-track {
    background: #e5e7eb !important;
}

/* PAULI ROUND SIZE BALANCE FIX */
/* Menyamakan proporsi informasi ronde dengan area angka agar tidak terlihat melebar/tidak seimbang. */
.pauli-pro-dashboard{
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
    align-items: stretch !important;
}
.pauli-pro-stat,
.pauli-pro-progress{
    min-height: 92px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
.pauli-pro-progress{
    grid-column: auto !important;
}
.pauli-pro-stage-centered .pauli-pro-round-badge,
.pauli-pro-round-badge{
    width: 360px !important;
    max-width: 100% !important;
    min-height: 58px !important;
    box-sizing: border-box !important;
    align-items: center !important;
}
.pauli-pro-round-badge b,
.pauli-pro-round-badge span{
    white-space: nowrap !important;
}
.pauli-stack{
    box-sizing: border-box !important;
}

@media(max-width:1200px){
    .pauli-pro-dashboard{
        grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
    }
    .pauli-pro-progress{
        grid-column: span 3 !important;
    }
}
@media(max-width:720px){
    .pauli-pro-dashboard{
        grid-template-columns: 1fr !important;
    }
    .pauli-pro-progress{
        grid-column: auto !important;
    }
    .pauli-pro-round-badge{
        width: 100% !important;
    }
    .pauli-pro-round-badge b,
    .pauli-pro-round-badge span{
        white-space: normal !important;
    }
}


/* PAULI ROUND FONT PROPORTION FIX
   Fokus perbaikan: ukuran angka Ronde dibuat proporsional.
   Angka ronde aktif besar, total ronde lebih kecil, baseline sejajar. */
.pauli-pro-dashboard .pauli-round-stat .pauli-round-value{
    display: flex !important;
    align-items: flex-end !important;
    gap: 7px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.pauli-pro-dashboard .pauli-round-stat #roundNow,
.pauli-pro-dashboard .pauli-round-stat .pauli-round-current{
    font-size: 46px !important;
    font-weight: 900 !important;
    line-height: .9 !important;
    color: var(--primary, #087a35) !important;
}
.pauli-pro-dashboard .pauli-round-stat .pauli-round-total{
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: var(--primary, #087a35) !important;
    opacity: .95 !important;
    margin-bottom: 4px !important;
}
.pauli-pro-dashboard #answeredCount{
    font-size: 46px !important;
    font-weight: 900 !important;
    line-height: .9 !important;
}
@media (max-width: 640px){
    .pauli-pro-dashboard .pauli-round-stat #roundNow,
    .pauli-pro-dashboard .pauli-round-stat .pauli-round-current,
    .pauli-pro-dashboard #answeredCount{
        font-size: 38px !important;
    }
    .pauli-pro-dashboard .pauli-round-stat .pauli-round-total{
        font-size: 21px !important;
    }
}

/* IST GE text answer */
.ist-text-answer {
    display: block;
}
.ist-text-answer span {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
}
.ist-text-answer input[type="text"] {
    width: 100%;
    max-width: 520px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 15px;
}

/* IST answer types */
.ist-text-answer input,
.ist-number-answer input {
    width: 100%;
    max-width: 520px;
    margin-top: 8px;
    font-size: 16px;
    padding: 12px 14px;
}
.ist-image-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.ist-image-choice {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}
.ist-image-choice-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.ist-image-choice img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    padding: 8px;
}

.ist-question-image-box {
    margin: 14px 0 16px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}
.ist-question-image-box img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
}
.ist-admin-question-image img {
    max-height: 180px;
}

/* Data Peserta action column aligned with Bank Soal compact icon buttons */
.user-actions-compact {
    display: inline-flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    max-width: none !important;
    gap: 6px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.user-actions-compact .user-action-btn.bank-soal-icon-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin: 0 !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08) !important;
}

.user-action-col.action-compact-col {
    min-width: 210px !important;
    width: 210px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

@media (max-width: 760px) {
    .user-actions-compact {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
    .user-action-col.action-compact-col {
        min-width: 180px !important;
        width: auto !important;
    }
    .user-actions-compact .user-action-btn.bank-soal-icon-btn {
        flex: 0 0 34px !important;
        text-align: center !important;
    }
}

/* Data Peserta: disamakan ukuran dan ritme tampilannya dengan Bank Soal */
.peserta-page {
    gap: 16px !important;
}
.peserta-page .bank-soal-head h1 {
    margin: 0 0 4px !important;
}
.peserta-add-form,
.peserta-card {
    width: 100% !important;
}
.peserta-filter {
    grid-template-columns: minmax(260px, 1.4fr) minmax(180px, .8fr) 120px !important;
    margin-bottom: 16px !important;
}
.peserta-table-wrap {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background: #fff !important;
}
.peserta-table {
    width: 100% !important;
    min-width: 980px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
}
.peserta-table th,
.peserta-table td {
    padding: 10px 12px !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    font-size: 13px !important;
}
.peserta-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    white-space: nowrap !important;
}
.peserta-table tr:not(:first-child):hover td {
    background: #f8fafc !important;
}
.peserta-table .col-id { width: 64px !important; }
.peserta-table .col-nik { width: 125px !important; }
.peserta-table .col-nama { width: 260px !important; }
.peserta-table .col-dept { width: 150px !important; }
.peserta-table .col-jabatan { width: 165px !important; }
.peserta-table .col-status { width: 105px !important; }
.peserta-table .col-akses { width: 245px !important; }
.peserta-table .col-aksi { width: 210px !important; }
.peserta-id {
    color: #64748b !important;
    font-weight: 800 !important;
}
.peserta-nik {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
    padding: 4px 9px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    color: #334155 !important;
}
.peserta-name {
    font-weight: 900 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.peserta-email {
    margin-top: 2px !important;
    color: #64748b !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.peserta-access-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    align-items: center !important;
}
.peserta-access-grid .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}
.peserta-table .badge {
    border-radius: 999px !important;
}
.user-action-col.action-compact-col {
    min-width: 0 !important;
    width: 210px !important;
    text-align: right !important;
}
.user-actions-compact {
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
}
.pagination-info {
    margin-top: 12px !important;
    color: #64748b !important;
    font-size: 13px !important;
}
@media (max-width: 900px) {
    .peserta-filter {
        grid-template-columns: 1fr !important;
    }
    .peserta-table {
        min-width: 900px !important;
    }
    .peserta-table th,
    .peserta-table td {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }
}

/* Data Peserta: compact desktop table without horizontal scroll */
@media (min-width: 901px) {
    .peserta-page .card,
    .peserta-card {
        padding-left: 22px !important;
        padding-right: 22px !important;
        overflow: visible !important;
    }
    .peserta-table-wrap {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    .peserta-table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }
    .peserta-table th,
    .peserta-table td {
        padding: 9px 10px !important;
        font-size: 12px !important;
    }
    .peserta-table .col-id { width: 46px !important; }
    .peserta-table .col-nik { width: 128px !important; }
    .peserta-table .col-nama { width: 190px !important; }
    .peserta-table .col-dept { width: 105px !important; }
    .peserta-table .col-jabatan { width: 125px !important; }
    .peserta-table .col-status { width: 74px !important; }
    .peserta-table .col-akses { width: 220px !important; }
    .peserta-table .col-aksi { width: 178px !important; }
    .peserta-table td:nth-child(4),
    .peserta-table td:nth-child(5) {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .peserta-nik {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    .peserta-name,
    .peserta-email {
        max-width: 100% !important;
    }
    .peserta-access-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
    }
    .peserta-access-grid .peserta-test-mini {
        width: auto !important;
        min-width: 35px !important;
        max-width: 40px !important;
        min-height: 25px !important;
        padding: 4px 5px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        gap: 3px !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .peserta-test-mini b,
    .peserta-test-mini i {
        font-style: normal !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }
    .user-action-col.action-compact-col {
        width: 178px !important;
        min-width: 0 !important;
    }
    .user-actions-compact,
    .bank-soal-actions-compact {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }
    .user-actions-compact .bank-soal-icon-btn,
    .bank-soal-actions-compact .bank-soal-icon-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 1200px) and (min-width: 901px) {
    .peserta-table th,
    .peserta-table td { padding: 8px 7px !important; font-size: 11.5px !important; }
    .peserta-table .col-nama { width: 170px !important; }
    .peserta-table .col-akses { width: 204px !important; }
    .peserta-table .col-aksi { width: 165px !important; }
    .peserta-access-grid .peserta-test-mini { min-width: 32px !important; max-width: 36px !important; padding: 4px !important; }
    .user-actions-compact .bank-soal-icon-btn,
    .bank-soal-actions-compact .bank-soal-icon-btn { width: 26px !important; height: 26px !important; min-width: 26px !important; }
}

/* Data Peserta: akses tes ditumpuk 2 kolom agar tabel lebih ringkas */
@media (min-width: 901px) {
    .peserta-table .col-akses { width: 142px !important; }
    .peserta-table .col-aksi { width: 165px !important; }
    .peserta-table .col-nama { width: 225px !important; }
    .peserta-table .col-dept { width: 110px !important; }
    .peserta-table .col-jabatan { width: 125px !important; }

    .peserta-access-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 132px !important;
    }

    .peserta-access-grid .peserta-test-mini,
    .peserta-access-grid .badge {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 22px !important;
        height: 22px !important;
        padding: 3px 5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .peserta-access-grid .peserta-test-mini b,
    .peserta-access-grid .peserta-test-mini i {
        font-style: normal !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .user-action-col.action-compact-col { width: 165px !important; }
    .user-actions-compact,
    .bank-soal-actions-compact { gap: 5px !important; }
}

@media (max-width: 1200px) and (min-width: 901px) {
    .peserta-table .col-akses { width: 132px !important; }
    .peserta-table .col-aksi { width: 156px !important; }
    .peserta-table .col-nama { width: 205px !important; }
    .peserta-access-grid { max-width: 122px !important; gap: 3px !important; }
    .peserta-access-grid .peserta-test-mini,
    .peserta-access-grid .badge {
        height: 21px !important;
        min-height: 21px !important;
        padding: 3px 4px !important;
        font-size: 9.5px !important;
    }
    .peserta-access-grid .peserta-test-mini b,
    .peserta-access-grid .peserta-test-mini i { font-size: 9.5px !important; }
}


/* FINAL FIX Data Peserta: Akses Tes harus menumpuk 2 kolom, bukan satu baris. */
.peserta-table td.peserta-access-badges,
.peserta-table td.access-summary-col {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    vertical-align: middle !important;
}
.peserta-access-stack {
    display: grid !important;
    grid-template-columns: repeat(2, 56px) !important;
    grid-auto-rows: 22px !important;
    gap: 5px !important;
    align-items: center !important;
    justify-content: start !important;
    width: 117px !important;
    min-width: 117px !important;
    max-width: 117px !important;
    white-space: normal !important;
}
.peserta-access-stack .peserta-test-mini,
.peserta-access-stack .badge {
    box-sizing: border-box !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
}
.peserta-access-stack .peserta-test-mini b,
.peserta-access-stack .peserta-test-mini i {
    display: inline !important;
    font-style: normal !important;
    font-size: 10px !important;
    line-height: 1 !important;
}
@media (min-width: 901px) {
    .peserta-table .col-akses { width: 145px !important; }
    .peserta-table .col-aksi { width: 160px !important; }
    .peserta-table .col-nama { width: 230px !important; }
}
@media (max-width: 900px) {
    .peserta-access-stack {
        grid-template-columns: repeat(2, 56px) !important;
        width: 117px !important;
    }
}

/* FINAL FIX Data Peserta: tombol aksi dibuat lebih kecil dan rapi */
.peserta-table .user-action-col.action-compact-col {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-left: 4px !important;
    padding-right: 6px !important;
    text-align: right !important;
}
.peserta-table .user-actions-compact,
.peserta-table .bank-soal-actions-compact {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
}
.peserta-table .user-actions-compact .user-action-btn,
.peserta-table .bank-soal-actions-compact .bank-soal-icon-btn,
.peserta-table a.user-action-btn.bank-soal-icon-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    line-height: 1 !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10) !important;
}
.peserta-table .col-aksi { width: 132px !important; }
@media (min-width: 901px) {
    .peserta-table .col-aksi { width: 132px !important; }
    .peserta-table .col-akses { width: 145px !important; }
    .peserta-table .col-nama { width: 245px !important; }
}
@media (max-width: 1200px) and (min-width: 901px) {
    .peserta-table .user-action-col.action-compact-col,
    .peserta-table .col-aksi {
        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;
    }
    .peserta-table .user-actions-compact,
    .peserta-table .bank-soal-actions-compact { gap: 3px !important; }
    .peserta-table .user-actions-compact .user-action-btn,
    .peserta-table .bank-soal-actions-compact .bank-soal-icon-btn,
    .peserta-table a.user-action-btn.bank-soal-icon-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        border-radius: 6px !important;
        font-size: 9px !important;
    }
}

/* FORCE FIX Data Peserta: scrollbar horizontal selalu tersedia dan terlihat */
.peserta-page .peserta-card {
    overflow: visible !important;
}

.peserta-page .peserta-table-wrap,
.peserta-card .peserta-table-wrap,
.table-wrap.peserta-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable both-edges !important;
    padding-bottom: 14px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(15, 23, 42, .10) !important;
}

.peserta-page .peserta-table,
.peserta-card .peserta-table,
table.peserta-table {
    width: max-content !important;
    min-width: 1180px !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.peserta-page .peserta-table th,
.peserta-page .peserta-table td {
    white-space: nowrap !important;
}

.peserta-page .peserta-table .col-id { min-width: 54px !important; }
.peserta-page .peserta-table .col-nik { min-width: 140px !important; }
.peserta-page .peserta-table .col-nama { min-width: 260px !important; }
.peserta-page .peserta-table .col-dept { min-width: 145px !important; }
.peserta-page .peserta-table .col-jabatan { min-width: 160px !important; }
.peserta-page .peserta-table .col-status { min-width: 95px !important; }
.peserta-page .peserta-table .col-akses { min-width: 165px !important; }
.peserta-page .peserta-table .col-aksi { min-width: 155px !important; }

/* Custom scrollbar agar tidak tampak hilang pada browser yang scrollbar-nya tipis */
.peserta-page .peserta-table-wrap::-webkit-scrollbar,
.peserta-card .peserta-table-wrap::-webkit-scrollbar,
.table-wrap.peserta-table-wrap::-webkit-scrollbar {
    height: 14px !important;
}
.peserta-page .peserta-table-wrap::-webkit-scrollbar-track,
.peserta-card .peserta-table-wrap::-webkit-scrollbar-track,
.table-wrap.peserta-table-wrap::-webkit-scrollbar-track {
    background: #eef2f7 !important;
    border-radius: 999px !important;
}
.peserta-page .peserta-table-wrap::-webkit-scrollbar-thumb,
.peserta-card .peserta-table-wrap::-webkit-scrollbar-thumb,
.table-wrap.peserta-table-wrap::-webkit-scrollbar-thumb {
    background: #64748b !important;
    border-radius: 999px !important;
    border: 3px solid #eef2f7 !important;
}
.peserta-page .peserta-table-wrap::-webkit-scrollbar-thumb:hover,
.peserta-card .peserta-table-wrap::-webkit-scrollbar-thumb:hover,
.table-wrap.peserta-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #475569 !important;
}
.peserta-page .peserta-table-wrap,
.peserta-card .peserta-table-wrap,
.table-wrap.peserta-table-wrap {
    scrollbar-width: auto !important;
    scrollbar-color: #64748b #eef2f7 !important;
}

/* Scrollbar bantuan tetap terlihat di bawah tabel, untuk browser/Windows yang menyembunyikan scrollbar asli */
.peserta-scrollbar-helper {
    display: none;
    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 18px;
    margin-top: -6px;
    margin-bottom: 12px;
    scrollbar-width: auto;
    scrollbar-color: #64748b #eef2f7;
}
.peserta-scrollbar-helper.is-active {
    display: block;
}
.peserta-scrollbar-helper-inner {
    height: 1px;
}
.peserta-scrollbar-helper::-webkit-scrollbar {
    height: 14px;
}
.peserta-scrollbar-helper::-webkit-scrollbar-track {
    background: #eef2f7;
    border-radius: 999px;
}
.peserta-scrollbar-helper::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 999px;
    border: 3px solid #eef2f7;
}


/* FIX Data Peserta: cegah scrollbar dobel, gunakan scrollbar asli tabel saja */
.peserta-scrollbar-helper { display: none !important; height: 0 !important; margin: 0 !important; overflow: hidden !important; }
.peserta-page .peserta-table-wrap, .peserta-card .peserta-table-wrap, .table-wrap.peserta-table-wrap { overflow-x: scroll !important; padding-bottom: 12px !important; margin-bottom: 10px !important; }

/* FINAL OVERRIDE Data Peserta 20260706: single native horizontal scrollbar and full right edge reach */
.peserta-page .peserta-card,
.peserta-card {
    overflow: visible !important;
}

.peserta-page .peserta-table-wrap,
.peserta-card .peserta-table-wrap,
.table-wrap.peserta-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.peserta-page .peserta-table,
.peserta-card .peserta-table,
table.peserta-table {
    width: 1460px !important;
    min-width: 1460px !important;
    max-width: none !important;
    table-layout: fixed !important;
    margin: 0 !important;
}

.peserta-page .peserta-table th,
.peserta-page .peserta-table td,
.peserta-card .peserta-table th,
.peserta-card .peserta-table td {
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.peserta-page .peserta-table .col-id,
.peserta-card .peserta-table .col-id { width: 70px !important; min-width: 70px !important; }
.peserta-page .peserta-table .col-nik,
.peserta-card .peserta-table .col-nik { width: 180px !important; min-width: 180px !important; }
.peserta-page .peserta-table .col-nama,
.peserta-card .peserta-table .col-nama { width: 350px !important; min-width: 350px !important; }
.peserta-page .peserta-table .col-dept,
.peserta-card .peserta-table .col-dept { width: 170px !important; min-width: 170px !important; }
.peserta-page .peserta-table .col-jabatan,
.peserta-card .peserta-table .col-jabatan { width: 190px !important; min-width: 190px !important; }
.peserta-page .peserta-table .col-status,
.peserta-card .peserta-table .col-status { width: 120px !important; min-width: 120px !important; }
.peserta-page .peserta-table .col-akses,
.peserta-card .peserta-table .col-akses { width: 180px !important; min-width: 180px !important; }
.peserta-page .peserta-table .col-aksi,
.peserta-card .peserta-table .col-aksi,
.peserta-page .peserta-table .user-action-col.action-compact-col,
.peserta-card .peserta-table .user-action-col.action-compact-col {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.peserta-page .peserta-table-wrap::-webkit-scrollbar,
.peserta-card .peserta-table-wrap::-webkit-scrollbar,
.table-wrap.peserta-table-wrap::-webkit-scrollbar {
    height: 14px !important;
}

.peserta-scrollbar-helper {
    display: none !important;
}

/* FINAL OVERRIDE Data Peserta 20260706: single native horizontal scrollbar and full right edge reach */
.peserta-page .peserta-card,
.peserta-card {
    overflow: visible !important;
}

.peserta-page .peserta-table-wrap,
.peserta-card .peserta-table-wrap,
.table-wrap.peserta-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 14px 0 !important;
    margin: 0 0 12px 0 !important;
    box-sizing: border-box !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.peserta-page .peserta-table,
.peserta-card .peserta-table,
table.peserta-table {
    width: 1460px !important;
    min-width: 1460px !important;
    max-width: none !important;
    table-layout: fixed !important;
    margin: 0 !important;
}

.peserta-page .peserta-table th,
.peserta-page .peserta-table td,
.peserta-card .peserta-table th,
.peserta-card .peserta-table td {
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.peserta-page .peserta-table .col-id,
.peserta-card .peserta-table .col-id { width: 70px !important; min-width: 70px !important; }
.peserta-page .peserta-table .col-nik,
.peserta-card .peserta-table .col-nik { width: 180px !important; min-width: 180px !important; }
.peserta-page .peserta-table .col-nama,
.peserta-card .peserta-table .col-nama { width: 350px !important; min-width: 350px !important; }
.peserta-page .peserta-table .col-dept,
.peserta-card .peserta-table .col-dept { width: 170px !important; min-width: 170px !important; }
.peserta-page .peserta-table .col-jabatan,
.peserta-card .peserta-table .col-jabatan { width: 190px !important; min-width: 190px !important; }
.peserta-page .peserta-table .col-status,
.peserta-card .peserta-table .col-status { width: 120px !important; min-width: 120px !important; }
.peserta-page .peserta-table .col-akses,
.peserta-card .peserta-table .col-akses { width: 180px !important; min-width: 180px !important; }
.peserta-page .peserta-table .col-aksi,
.peserta-card .peserta-table .col-aksi,
.peserta-page .peserta-table .user-action-col.action-compact-col,
.peserta-card .peserta-table .user-action-col.action-compact-col {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}

.peserta-page .peserta-table-wrap::-webkit-scrollbar,
.peserta-card .peserta-table-wrap::-webkit-scrollbar,
.table-wrap.peserta-table-wrap::-webkit-scrollbar {
    height: 14px !important;
}

.peserta-scrollbar-helper {
    display: none !important;
}

/* FINAL COMPACT Data Peserta 20260706: NIK lengkap, nama ringkas, departemen dan jabatan tidak ditampilkan */
.peserta-page .peserta-table,
.peserta-card .peserta-table,
table.peserta-table {
    width: 1010px !important;
    min-width: 1010px !important;
    max-width: none !important;
    table-layout: fixed !important;
}

.peserta-page .peserta-table .col-id,
.peserta-card .peserta-table .col-id { width: 70px !important; min-width: 70px !important; }

.peserta-page .peserta-table .col-nik,
.peserta-card .peserta-table .col-nik { width: 190px !important; min-width: 190px !important; }

.peserta-page .peserta-table .col-nama,
.peserta-card .peserta-table .col-nama,
.peserta-page .peserta-table .peserta-name-col,
.peserta-card .peserta-table .peserta-name-col {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

.peserta-page .peserta-table .col-dept,
.peserta-card .peserta-table .col-dept,
.peserta-page .peserta-table .col-jabatan,
.peserta-card .peserta-table .col-jabatan {
    display: none !important;
}

.peserta-page .peserta-table .col-status,
.peserta-card .peserta-table .col-status { width: 100px !important; min-width: 100px !important; }

.peserta-page .peserta-table .col-akses,
.peserta-card .peserta-table .col-akses,
.peserta-page .peserta-table .access-summary-col,
.peserta-card .peserta-table .access-summary-col { width: 190px !important; min-width: 190px !important; }

.peserta-page .peserta-table .col-aksi,
.peserta-card .peserta-table .col-aksi,
.peserta-page .peserta-table .user-action-col.action-compact-col,
.peserta-card .peserta-table .user-action-col.action-compact-col {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
}

.peserta-page .peserta-name,
.peserta-card .peserta-name,
.peserta-page .peserta-email,
.peserta-card .peserta-email {
    display: block !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.peserta-page .peserta-nik,
.peserta-card .peserta-nik {
    white-space: nowrap !important;
}


/* =========================================================
   PATCH: Waktu ronde Pauli/Kraepelin selalu terlihat saat pengerjaan
   - Dashboard timer dibuat sticky.
   - Ditambah floating timer kecil agar sisa ronde tetap terlihat ketika peserta scroll jauh ke bawah.
   ========================================================= */
.pauli-sticky-dashboard{
    position: sticky !important;
    top: 12px !important;
    z-index: 120 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 22px !important;
    padding: 10px !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
}
.pauli-floating-round-timer{
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 180 !important;
    min-width: 148px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(8,122,53,.22) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.18) !important;
    color: #0f172a !important;
    text-align: center !important;
}
.pauli-floating-round-timer span,
.pauli-floating-round-timer small{
    display: block !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: #475569 !important;
}
.pauli-floating-round-timer strong{
    display: block !important;
    margin: 3px 0 2px !important;
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    color: var(--primary, #087a35) !important;
}
.pauli-floating-round-timer b{
    color: var(--primary, #087a35) !important;
}
@media(max-width:720px){
    .pauli-sticky-dashboard{
        top: 8px !important;
        padding: 8px !important;
    }
    .pauli-sticky-dashboard .pauli-pro-stat,
    .pauli-sticky-dashboard .pauli-pro-progress{
        min-height: 72px !important;
        padding: 10px 12px !important;
    }
    .pauli-floating-round-timer{
        right: 12px !important;
        bottom: 12px !important;
        min-width: 128px !important;
        padding: 10px 12px !important;
    }
    .pauli-floating-round-timer strong{
        font-size: 28px !important;
    }
    .pauli-answer-slot{
        scroll-margin-top: 260px !important;
    }
}
@media print{
    .pauli-sticky-dashboard,
    .pauli-floating-round-timer{
        display: none !important;
    }
}


/* =========================================================
   PATCH: Timer universal MBTI / IST / PAPI / Personality Plus
   Tampilan sisa waktu disamakan dengan dashboard Pauli.
   ========================================================= */
.universal-test-timer-card{margin-bottom:16px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.universal-test-dashboard.pauli-pro-dashboard{grid-template-columns:repeat(3,minmax(130px,1fr)) minmax(240px,1.25fr);margin-bottom:0!important}
.universal-test-dashboard .pauli-pro-stat,.universal-test-dashboard .pauli-pro-progress{min-height:82px}
.universal-test-dashboard .universal-test-name{font-size:24px!important;line-height:1.05!important}
.universal-test-dashboard .timer-number{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;color:#fff!important;font-size:30px!important;line-height:1!important;min-height:0!important}
.universal-test-dashboard .timer-number.timer-warning{color:#fde68a!important;animation:none!important}
.universal-test-dashboard .timer-number.timer-danger{color:#fecaca!important;animation:timerBlink 1s infinite!important}
.universal-test-dashboard .pauli-progress-track{height:13px!important;background:rgba(255,255,255,.22)!important;border-radius:999px!important;overflow:hidden!important}
.universal-test-dashboard .pauli-progress-track>div{height:100%!important;width:0;background:#86efac!important;border-radius:999px!important;transition:width .25s linear!important}
.universal-test-dashboard .universal-test-meta{margin-top:8px;color:#dcfce7;font-size:12px;font-weight:800;line-height:1.35}
.universal-test-floating{position:fixed!important;right:22px!important;bottom:22px!important;z-index:180!important;min-width:148px!important;padding:12px 14px!important;border-radius:18px!important;background:#fff!important;border:1px solid rgba(8,122,53,.22)!important;box-shadow:0 18px 42px rgba(15,23,42,.18)!important;color:#0f172a!important;text-align:center!important}
.universal-test-floating span,.universal-test-floating small{display:block!important;font-size:11px!important;font-weight:900!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#475569!important}
.universal-test-floating strong{display:block!important;margin:3px 0 2px!important;font-size:34px!important;line-height:1!important;font-weight:950!important;color:var(--primary,#087a35)!important;font-variant-numeric:tabular-nums!important}
@keyframes timerBlink{0%,100%{opacity:1}50%{opacity:.48}}
@media(max-width:980px){.universal-test-dashboard.pauli-pro-dashboard{grid-template-columns:repeat(2,1fr)}.universal-test-dashboard .pauli-pro-progress{grid-column:span 2}}
@media(max-width:720px){.universal-test-dashboard.pauli-pro-dashboard{grid-template-columns:1fr}.universal-test-dashboard .pauli-pro-progress{grid-column:auto}.universal-test-floating{right:12px!important;bottom:12px!important;min-width:128px!important}.universal-test-floating strong{font-size:28px!important}}
@media print{.universal-test-timer-card,.universal-test-floating{display:none!important}}


/* Notifikasi sesi dihentikan admin */
.session-ended-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 14px 0 18px;
    padding: 14px 15px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #7c2d12;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(124,45,18,.08);
}
.session-ended-notice strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.session-ended-notice p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}
.session-ended-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fb923c;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
}
.login-only-body > .alert {
    max-width: 440px;
    margin: 18px auto 0;
}

/* PATCH: Progress text readability and proportional numeric ratio */
.progress-ratio{
    display:inline-flex!important;
    align-items:baseline!important;
    justify-content:center!important;
    gap:6px!important;
    font-variant-numeric:tabular-nums!important;
    letter-spacing:0!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.progress-ratio span,
.progress-ratio #universalAnsweredCount,
.progress-ratio #answeredCount,
.progress-ratio .progress-total,
.progress-ratio .progress-slash{
    display:inline-block!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:900!important;
    color:inherit!important;
    transform:none!important;
    vertical-align:baseline!important;
}
.pauli-pro-dashboard .progress-ratio #answeredCount,
.pauli-pro-dashboard .progress-ratio #universalAnsweredCount{
    font-size:30px!important;
    line-height:1!important;
}
.progress-ratio.progress-single #answeredCount{
    font-size:34px!important;
}
.mini-progress-ratio{
    font-size:15px!important;
    font-weight:900!important;
    color:var(--primary,#087a35)!important;
}
.pauli-pro-progress span,
.universal-test-meta{
    font-weight:900!important;
    letter-spacing:.01em!important;
}
.recovery-table td{
    vertical-align:middle!important;
}
.recovery-table small{
    line-height:1.35!important;
}
@media(max-width:640px){
    .progress-ratio span,
    .progress-ratio #universalAnsweredCount,
    .progress-ratio #answeredCount,
    .progress-ratio .progress-total,
    .progress-ratio .progress-slash{
        font-size:26px!important;
    }
}

/* PATCH: Recovery Center layout cleanup */
.recovery-filter-card{
    margin-bottom:16px!important;
    padding:16px!important;
}
.recovery-filter-form{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) auto auto!important;
    gap:10px!important;
    align-items:end!important;
}
.recovery-search-field{
    min-width:0!important;
    margin:0!important;
    font-weight:800!important;
    color:#334155!important;
}
.recovery-search-field input{
    margin-top:6px!important;
}
.recovery-card{
    overflow:hidden!important;
    padding:0!important;
}
.recovery-table-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
}
.recovery-table{
    width:100%!important;
    min-width:1060px!important;
    table-layout:fixed!important;
    margin-bottom:0!important;
}
.recovery-table th,
.recovery-table td{
    vertical-align:middle!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    padding:12px 10px!important;
}
.recovery-table thead th{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    background:#f8fafc!important;
    color:#334155!important;
    font-size:12px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
    border-bottom:1px solid #e2e8f0!important;
}
.recovery-table .col-participant{width:23%!important;}
.recovery-table .col-account{width:19%!important;}
.recovery-table .col-test{width:14%!important;}
.recovery-table .col-progress{width:12%!important;text-align:center!important;}
.recovery-table .col-last-active{width:18%!important;}
.recovery-table .col-action{width:14%!important;min-width:160px!important;}
.recovery-person,
.recovery-meta{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    min-width:0!important;
}
.recovery-person strong,
.recovery-meta strong{
    color:#0f172a!important;
    font-size:14px!important;
    line-height:1.25!important;
}
.recovery-person small,
.recovery-meta small{
    color:#64748b!important;
    font-size:12px!important;
    line-height:1.35!important;
}
.recovery-progress-pill{
    display:inline-flex!important;
    min-width:74px!important;
    height:34px!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#ecfdf5!important;
    border:1px solid rgba(8,122,53,.18)!important;
    color:var(--primary,#087a35)!important;
    font-size:15px!important;
    font-weight:950!important;
    font-variant-numeric:tabular-nums!important;
}
.recovery-action-box{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
    min-width:0!important;
}
.recovery-action-box label{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    border:1px solid #e2e8f0!important;
    color:#334155!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1.2!important;
    white-space:nowrap!important;
}
.recovery-action-box input[type="checkbox"]{
    margin:0!important;
    flex:0 0 auto!important;
}
.recovery-action-box span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.recovery-btn{
    width:100%!important;
    border-radius:10px!important;
    font-weight:900!important;
    padding:8px 10px!important;
}
@media(max-width:1100px){
    .recovery-table{min-width:980px!important;}
    .recovery-table th,.recovery-table td{padding:10px 8px!important;}
}
@media(max-width:760px){
    .recovery-filter-form{
        grid-template-columns:1fr!important;
    }
    .recovery-filter-form .btn{
        width:100%!important;
    }
    .recovery-table-wrap{
        overflow-x:visible!important;
    }
    .recovery-table,
    .recovery-table thead,
    .recovery-table tbody,
    .recovery-table th,
    .recovery-table td,
    .recovery-table tr{
        display:block!important;
        min-width:0!important;
        width:100%!important;
    }
    .recovery-table thead{
        display:none!important;
    }
    .recovery-table tbody tr{
        margin:12px!important;
        padding:12px!important;
        border:1px solid #e2e8f0!important;
        border-radius:16px!important;
        background:#fff!important;
        box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
    }
    .recovery-table tbody td{
        display:grid!important;
        grid-template-columns:118px 1fr!important;
        gap:10px!important;
        align-items:start!important;
        padding:8px 0!important;
        border:0!important;
    }
    .recovery-table tbody td:before{
        content:attr(data-label)!important;
        color:#64748b!important;
        font-size:11px!important;
        font-weight:900!important;
        text-transform:uppercase!important;
        letter-spacing:.03em!important;
    }
    .recovery-action-box label{white-space:normal!important;}
}
@media(max-width:460px){
    .recovery-table tbody td{
        grid-template-columns:1fr!important;
        gap:4px!important;
    }
    .recovery-table tbody td:before{
        margin-bottom:2px!important;
    }
}

/* PATCH: Recovery Center checklist explanation */
.recovery-note-box{
    line-height:1.55!important;
}
.recovery-note-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-top:10px!important;
}
.recovery-note-list span{
    display:block!important;
    padding:9px 11px!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.65)!important;
    border:1px solid rgba(14,165,233,.18)!important;
    color:#334155!important;
    font-size:12px!important;
}
.recovery-action-title{
    font-size:11px!important;
    font-weight:950!important;
    color:#475569!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
    margin-bottom:1px!important;
}
.recovery-action-box .recovery-check-option{
    align-items:flex-start!important;
    gap:9px!important;
    padding:9px 10px!important;
    white-space:normal!important;
}
.recovery-action-box .recovery-check-option input[type="checkbox"]{
    margin-top:3px!important;
}
.recovery-check-text{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
    min-width:0!important;
    overflow:visible!important;
    text-overflow:clip!important;
}
.recovery-check-text strong{
    display:block!important;
    color:#0f172a!important;
    font-size:12px!important;
    line-height:1.2!important;
}
.recovery-check-text small{
    display:block!important;
    color:#64748b!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:700!important;
}
.recovery-check-option.is-muted{
    opacity:.78!important;
}
.recovery-check-option.is-muted .recovery-check-text small{
    color:#94a3b8!important;
}
@media(max-width:760px){
    .recovery-note-list{grid-template-columns:1fr!important;}
}

/* PATCH: compact Recovery Center design */
.recovery-note-compact{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:12px 14px!important;
    border-radius:14px!important;
}
.recovery-note-main{
    min-width:240px!important;
    font-size:13px!important;
    line-height:1.45!important;
}
.recovery-legend{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    justify-content:flex-end!important;
}
.recovery-legend span{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(14,165,233,.20)!important;
    color:#334155!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.recovery-legend b{
    color:var(--primary,#087a35)!important;
}
.recovery-table .col-participant{width:22%!important;}
.recovery-table .col-account{width:20%!important;}
.recovery-table .col-test{width:14%!important;}
.recovery-table .col-progress{width:11%!important;text-align:center!important;}
.recovery-table .col-last-active{width:17%!important;}
.recovery-table .col-action{width:16%!important;min-width:178px!important;}
.recovery-action-box{
    gap:6px!important;
}
.recovery-tool-row{
    display:flex!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
}
.recovery-tool-chip{
    flex:1 1 0!important;
    min-width:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    margin:0!important;
    padding:7px 8px!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    border:1px solid #e2e8f0!important;
    color:#334155!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.recovery-tool-chip input[type="checkbox"]{
    width:14px!important;
    height:14px!important;
    margin:0!important;
    flex:0 0 auto!important;
}
.recovery-tool-chip span{
    overflow:visible!important;
    text-overflow:clip!important;
}
.recovery-tool-chip.is-muted{
    opacity:.62!important;
}
.recovery-btn{
    height:32px!important;
    padding:6px 10px!important;
    font-size:12px!important;
    border-radius:10px!important;
}
.recovery-check-option,
.recovery-check-text,
.recovery-action-title{
    display:none!important;
}
@media(max-width:760px){
    .recovery-note-compact{
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .recovery-legend{
        justify-content:flex-start!important;
    }
    .recovery-tool-row{
        max-width:260px!important;
    }
}

/* =========================================================
   PATCH: Floating timer selalu terlihat di semua tes
   - Dipaksa keluar dari clipping/stacking context layout.
   - Tidak bergantung hover/scroll.
   - Berlaku untuk MBTI, IST, PAPI, Personality Plus, Pauli.
   ========================================================= */
body.has-test-floating-timer .universal-test-floating,
body.has-test-floating-timer .pauli-floating-round-timer,
.universal-test-floating,
.pauli-floating-round-timer{
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    pointer-events: none !important;
    will-change: transform !important;
    contain: layout paint !important;
}
body.has-test-floating-timer .universal-test-floating *,
body.has-test-floating-timer .pauli-floating-round-timer *{
    pointer-events: none !important;
}
@media(max-width:720px){
    body.has-test-floating-timer .universal-test-floating,
    body.has-test-floating-timer .pauli-floating-round-timer{
        right: 12px !important;
        bottom: 12px !important;
        min-width: 124px !important;
        padding: 10px 12px !important;
    }
}
@media print{
    body.has-test-floating-timer .universal-test-floating,
    body.has-test-floating-timer .pauli-floating-round-timer{
        display:none!important;
    }
}

/* Pauli settings ON/OFF switches - visual only, keeps original checkbox names and logic */
.pauli-switch-list{display:grid;gap:10px}
.pauli-switch-row{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:16px;width:100%;padding:13px 14px;border:1px solid #d7eadf;border-radius:16px;background:#fbfffd;margin:0!important;cursor:pointer;transition:.18s ease;box-shadow:0 8px 20px rgba(6,78,42,.035)}
.pauli-switch-row:hover{border-color:#9fd9b7;background:#f2fff7}
.pauli-switch-text{display:grid;gap:4px;min-width:0}
.pauli-switch-text b{font-size:13px;color:#102016;line-height:1.25}
.pauli-switch-text small{font-size:11.5px;color:#64796d;font-weight:600;line-height:1.35}
.pauli-switch-control{position:relative;display:inline-block;width:78px;height:34px;flex:0 0 auto}
.pauli-switch-control input{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;pointer-events:none}
.pauli-switch-slider{position:absolute;inset:0;border-radius:999px;background:#e5e7eb;border:1px solid #cbd5e1;transition:.2s ease;box-shadow:inset 0 2px 6px rgba(15,23,42,.10)}
.pauli-switch-slider:before{content:"";position:absolute;width:26px;height:26px;left:4px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.22);transition:.2s ease;z-index:2}
.pauli-switch-slider:after{content:attr(data-off);position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:950;color:#64748b;letter-spacing:.04em;transition:.2s ease}
.pauli-switch-control input:checked + .pauli-switch-slider{background:#087a35;border-color:#087a35}
.pauli-switch-control input:checked + .pauli-switch-slider:before{transform:translateX(43px)}
.pauli-switch-control input:checked + .pauli-switch-slider:after{content:attr(data-on);left:11px;right:auto;color:#fff}
.pauli-switch-control input:focus + .pauli-switch-slider{outline:3px solid rgba(8,122,53,.16);outline-offset:2px}
@media(max-width:640px){.pauli-switch-row{grid-template-columns:1fr;gap:10px}.pauli-switch-control{justify-self:start}}

/* =========================================================
   MOBILE RESPONSIVE PATCH - 2026-07-10
   Menjaga tema desktop, mengoptimalkan browser HP/tablet.
   ========================================================= */
.mobile-topbar,
.mobile-sidebar-backdrop{display:none;}

html{-webkit-text-size-adjust:100%;}
img,video,canvas,svg{max-width:100%;}
button,input,select,textarea{font-size:16px;}

@media (max-width:900px){
    body{overflow-x:hidden;}
    body.mobile-menu-open{overflow:hidden;}
    .mobile-topbar{
        display:flex;
        position:sticky;
        top:0;
        z-index:2147482000;
        height:64px;
        padding:8px 14px;
        align-items:center;
        gap:12px;
        background:#0f172a;
        color:#fff;
        box-shadow:0 5px 18px rgba(15,23,42,.22);
    }
    .mobile-menu-button{
        width:44px;
        height:44px;
        min-width:44px;
        padding:10px;
        border-radius:12px;
        background:#1e293b;
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
    }
    .mobile-menu-button span{
        display:block;
        height:2px;
        width:100%;
        border-radius:99px;
        background:#fff;
        transition:.2s ease;
    }
    .mobile-menu-open .mobile-menu-button span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .mobile-menu-open .mobile-menu-button span:nth-child(2){opacity:0;}
    .mobile-menu-open .mobile-menu-button span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .mobile-topbar-brand{display:flex;align-items:center;gap:9px;min-width:0;}
    .mobile-topbar-brand img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:9px;padding:3px;}
    .mobile-topbar-brand div{display:flex;flex-direction:column;min-width:0;}
    .mobile-topbar-brand strong{font-size:15px;line-height:1.15;}
    .mobile-topbar-brand small{font-size:10px;color:#cbd5e1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mobile-sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:2147481990;
        background:rgba(2,6,23,.58);
        opacity:0;
        visibility:hidden;
        transition:.2s ease;
        backdrop-filter:blur(2px);
    }
    .mobile-menu-open .mobile-sidebar-backdrop{opacity:1;visibility:visible;}
    .layout{display:block;min-height:calc(100vh - 64px);}
    .sidebar.enterprise-sidebar,
    .enterprise-sidebar,
    .sidebar{
        display:block!important;
        position:fixed!important;
        top:0!important;
        left:0!important;
        bottom:0!important;
        width:min(86vw,320px)!important;
        height:100dvh!important;
        margin:0!important;
        padding:18px 16px 28px!important;
        z-index:2147481999!important;
        overflow-y:auto!important;
        overscroll-behavior:contain;
        transform:translateX(-105%)!important;
        transition:transform .24s ease!important;
        box-shadow:12px 0 35px rgba(2,6,23,.3)!important;
    }
    .mobile-menu-open .sidebar.enterprise-sidebar,
    .mobile-menu-open .enterprise-sidebar,
    .mobile-menu-open .sidebar{transform:translateX(0)!important;}
    .sidebar-brand{margin-bottom:14px!important;}
    .sidebar-user-card{margin-bottom:14px!important;}
    .enterprise-menu .menu-link,
    .enterprise-menu .menu-group-toggle{min-height:46px!important;padding:11px 12px!important;}
    .enterprise-menu .menu-sub a{min-height:42px;display:flex!important;align-items:center;}
    .content{
        width:100%!important;
        max-width:100%!important;
        margin-left:0!important;
        padding:16px 12px 88px!important;
        overflow:visible!important;
    }
    .card{border-radius:16px!important;padding:16px!important;margin-bottom:14px!important;}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important;gap:12px!important;}
    .filter{grid-template-columns:1fr!important;gap:8px!important;}
    h1{font-size:24px!important;line-height:1.2!important;overflow-wrap:anywhere;}
    h2{font-size:20px!important;line-height:1.25!important;overflow-wrap:anywhere;}
    h3{font-size:17px!important;line-height:1.3!important;}
    p{overflow-wrap:anywhere;}
    .btn,button{min-height:42px;touch-action:manipulation;}
    .btn-group,.action-buttons,.toolbar,.page-actions,.form-actions{
        display:flex!important;
        flex-wrap:wrap!important;
        gap:8px!important;
    }
    .table-wrap{
        width:100%;
        max-width:100%;
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:auto;
    }
    .table-wrap:after{
        content:'Geser tabel ke kanan/kiri';
        display:block;
        position:sticky;
        left:0;
        width:max-content;
        padding:5px 8px;
        color:#64748b;
        font-size:10px;
        font-weight:700;
    }
    table{min-width:720px;}
    th,td{padding:9px!important;font-size:12px;}
    .pagination{justify-content:center;}
    .pagination a{min-width:40px;min-height:40px;display:grid;place-items:center;padding:6px 9px;}
    input,select,textarea{min-height:44px;padding:10px 11px;}
    input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px;}
    .login-page{padding:14px;align-items:center;}
    .login-box{max-width:100%;}
    .alert,.note{font-size:13px;line-height:1.5;}
    .universal-test-floating,.pauli-floating-round-timer{
        right:max(8px,env(safe-area-inset-right))!important;
        bottom:max(8px,env(safe-area-inset-bottom))!important;
        min-width:112px!important;
        max-width:calc(100vw - 16px)!important;
        padding:8px 10px!important;
        border-radius:13px!important;
    }
    .universal-test-floating strong,.pauli-floating-round-timer strong{font-size:24px!important;}
    video[id*=camera],video[class*=camera],.camera-preview video{
        width:100%!important;
        max-width:420px!important;
        height:auto!important;
        border-radius:14px!important;
    }
}

@media (max-width:520px){
    .mobile-topbar{height:58px;padding:7px 10px;}
    .mobile-menu-button{width:42px;height:42px;min-width:42px;}
    .mobile-topbar-brand img{width:34px;height:34px;}
    .content{padding:12px 9px 82px!important;}
    .card{padding:13px!important;border-radius:14px!important;}
    .stat b{font-size:27px;}
    .btn,button{width:100%;text-align:center;justify-content:center;}
    .mobile-menu-button,.menu-group-toggle{width:auto!important;}
    .enterprise-menu .menu-link{width:100%!important;}
    .pauli-switch-control{width:78px!important;}
    .answer{padding:12px!important;border-radius:13px!important;}
    label{font-size:13px;margin-bottom:10px;}
    table{min-width:650px;}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
    .mobile-topbar{position:relative;height:54px;}
    .content{padding-top:10px!important;}
    .sidebar.enterprise-sidebar{width:min(72vw,310px)!important;}
}

/* =========================================================
   ADAPTIVE ALL-SCREEN LAYOUT - 2026-07-10
   Nyaman untuk laptop 1024px, 1366px, desktop, ultrawide, dan 4K.
   ========================================================= */
:root{
    --adaptive-sidebar: clamp(244px, 18vw, 292px);
    --adaptive-gutter: clamp(14px, 2vw, 34px);
    --adaptive-content-max: 1900px;
    --adaptive-card-gap: clamp(12px, 1.35vw, 22px);
}

@media (min-width:901px){
    body{overflow-x:hidden;}
    .layout{width:100%;min-height:100vh;display:block;}
    .sidebar.enterprise-sidebar,
    .enterprise-sidebar{
        width:var(--adaptive-sidebar)!important;
        min-width:var(--adaptive-sidebar)!important;
        max-width:var(--adaptive-sidebar)!important;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .content{
        margin-left:var(--adaptive-sidebar)!important;
        width:calc(100% - var(--adaptive-sidebar))!important;
        max-width:none!important;
        padding:clamp(18px,2vw,34px) var(--adaptive-gutter) 44px!important;
        overflow-x:clip;
    }
    .content > *{
        width:100%;
        max-width:var(--adaptive-content-max);
        margin-left:auto;
        margin-right:auto;
    }
    .content > .table-wrap,
    .content > .card .table-wrap{max-width:100%;}
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--adaptive-card-gap);}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--adaptive-card-gap);}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--adaptive-card-gap);}
    .dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--adaptive-card-gap);}
    .card{min-width:0;}
    .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    table{width:100%;}
    input,select,textarea{max-width:100%;}
    .filter{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
}

/* Laptop kecil dan layar 100%-125% zoom */
@media (min-width:901px) and (max-width:1199px){
    :root{--adaptive-sidebar:232px;--adaptive-gutter:16px;}
    .sidebar.enterprise-sidebar,
    .enterprise-sidebar{padding-left:12px!important;padding-right:12px!important;}
    .sidebar-brand{gap:9px!important;}
    .sidebar-brand img{width:42px!important;height:42px!important;}
    .sidebar-brand strong{font-size:14px!important;}
    .sidebar-brand span{font-size:9px!important;}
    .sidebar-user-card{padding:10px!important;gap:9px!important;}
    .enterprise-menu .menu-link,
    .enterprise-menu .menu-group-toggle{padding:10px!important;font-size:12.5px!important;}
    .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
    .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
    .card{padding:16px!important;}
    h1{font-size:clamp(22px,2.2vw,28px)!important;}
}

/* Laptop standar 1366-1600 */
@media (min-width:1200px) and (max-width:1599px){
    :root{--adaptive-sidebar:258px;--adaptive-gutter:22px;}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* Desktop besar dan ultrawide */
@media (min-width:1600px){
    :root{--adaptive-sidebar:286px;--adaptive-gutter:clamp(28px,2.2vw,48px);}
    body{font-size:15px;}
    .content{padding-top:32px!important;}
    .card{padding:clamp(20px,1.4vw,28px)!important;}
    .dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    .grid-4{grid-template-columns:repeat(4,minmax(240px,1fr));}
}

/* 2K/4K: konten tidak melebar berlebihan sehingga tetap nyaman dibaca */
@media (min-width:2200px){
    :root{--adaptive-content-max:2040px;--adaptive-sidebar:300px;}
    .content{padding-left:48px!important;padding-right:48px!important;}
}

/* Form tetap nyaman dibaca pada layar sangat lebar */
.form-card,
.content form.card,
.content .card form{max-width:1180px;}
.content .card .table-wrap,
.content .card .dashboard-grid,
.content .card .grid-2,
.content .card .grid-3,
.content .card .grid-4{max-width:none;}

/* Media dan halaman tes selalu proporsional */
.test-shell,.test-container,.question-container,.assessment-container{width:100%;max-width:1240px;margin-left:auto;margin-right:auto;}
.warteg-canvas,canvas{height:auto;}
video,.camera-preview img,.monitoring-camera-preview{object-fit:cover;}

/* Hindari elemen aksi pecah atau keluar layar */
.toolbar,.page-actions,.action-buttons,.form-actions,.btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.toolbar > *, .page-actions > *, .action-buttons > *, .form-actions > *{min-width:0;}

/* Print tetap bersih */
@media print{
    .content{margin-left:0!important;width:100%!important;max-width:none!important;padding:0!important;}
    .content > *{max-width:none!important;}
}


/* TIMER TWO-COLOR STATUS PATCH 2026-07-16
   Hijau = waktu masih aman, merah = waktu kritis. */
.timer-safe,
.timer-warning,
#totalTimer.timer-safe,
#roundTimer.timer-safe,
#totalTimerDisplay.timer-safe,
#totalTimer.timer-warning,
#roundTimer.timer-warning,
#totalTimerDisplay.timer-warning,
.universal-test-dashboard .timer-number.timer-safe,
.universal-test-dashboard .timer-number.timer-warning,
.universal-test-floating strong.timer-safe,
.universal-test-floating strong.timer-warning,
.pauli-floating-round-timer strong.timer-safe,
.pauli-floating-round-timer strong.timer-warning {
    color: var(--primary, #087a35) !important;
    animation: none !important;
}

.timer-number.timer-safe,
#timerDisplay.timer-safe,
.timer-number.timer-warning,
#timerDisplay.timer-warning {
    color: var(--primary, #087a35) !important;
    background: var(--primary-soft, #dff4e7) !important;
    border-color: var(--primary-border, #9bd5b2) !important;
    animation: none !important;
}

#totalTimer.timer-danger,
#roundTimer.timer-danger,
#totalTimerDisplay.timer-danger,
.universal-test-dashboard .timer-number.timer-danger,
.universal-test-floating strong.timer-danger,
.pauli-floating-round-timer strong.timer-danger {
    color: #dc2626 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    animation: timerBlink 1s infinite !important;
    text-shadow: none !important;
}

.timer-number.timer-danger,
#timerDisplay.timer-danger {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #b91c1c !important;
    animation: timerPulse 1s infinite !important;
    text-shadow: none !important;
}

.pauli-transition-box #pauliTransitionCountdown.timer-safe,
.pauli-transition-box #pauliTransitionCountdown.timer-warning {
    color: #ffffff !important;
    background: var(--primary, #087a35) !important;
    animation: none !important;
}

.pauli-transition-box #pauliTransitionCountdown.timer-danger {
    color: #ffffff !important;
    background: #dc2626 !important;
    animation: timerPulse 1s infinite !important;
}

/* TEST PROGRESS AND TIMER THEME ALIGNMENT 2026-07-16
   Semua progres memakai palet hijau aplikasi dan semua teks memiliki kontras jelas. */
:root {
    --test-theme-green: var(--primary, #087a35);
    --test-theme-green-dark: var(--primary-800, var(--primary-dark, #064e2a));
    --test-theme-green-soft: var(--primary-soft, #e6f6ec);
    --test-theme-green-border: var(--primary-border, #9bd5b2);
    --test-theme-progress-track: #dcebe1;
    --test-theme-text: var(--text, #102016);
    --test-theme-muted: #475569;
}

/* Kartu progres seluruh tes: MBTI, IST, PAPI, Personality Plus, Wartegg, dan Pauli. */
.pauli-pro-dashboard .pauli-pro-progress,
.universal-test-dashboard .pauli-pro-progress {
    background: #ffffff !important;
    color: var(--test-theme-text) !important;
    border: 1px solid rgba(8, 122, 53, .18) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .08) !important;
}

.pauli-pro-dashboard .pauli-pro-progress > span:first-child,
.universal-test-dashboard .pauli-pro-progress > span:first-child {
    color: var(--test-theme-green-dark) !important;
    opacity: 1 !important;
    font-weight: 950 !important;
}

.universal-test-dashboard .universal-test-meta,
.pauli-pro-dashboard .pauli-progress-meta {
    display: block !important;
    margin-top: 8px !important;
    color: var(--test-theme-muted) !important;
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.pauli-pro-dashboard .pauli-progress-track,
.universal-test-dashboard .pauli-progress-track,
.progress-line,
.progress-mini {
    background: var(--test-theme-progress-track) !important;
    border: 1px solid rgba(8, 122, 53, .14) !important;
    box-shadow: inset 0 1px 2px rgba(6, 78, 42, .08) !important;
}

.pauli-pro-dashboard .pauli-progress-track > div,
.universal-test-dashboard .pauli-progress-track > div,
.progress-line > div,
.progress-mini > div {
    background: linear-gradient(90deg, var(--test-theme-green), var(--test-theme-green-dark)) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset !important;
}

/* Angka progres jawaban harus terbaca sebagai satu rasio dengan warna merek yang konsisten. */
.pauli-pro-dashboard .pauli-pro-stat .progress-ratio,
.pauli-pro-dashboard .pauli-pro-stat .progress-ratio > span,
.universal-test-dashboard .pauli-pro-stat .progress-ratio,
.universal-test-dashboard .pauli-pro-stat .progress-ratio > span,
.mini-progress-ratio,
.recovery-progress-pill {
    color: var(--test-theme-green-dark) !important;
    opacity: 1 !important;
}

/* Progres langkah IST. Semua fase tetap dibedakan tanpa keluar dari palet aplikasi. */
#istProgressCard {
    border-color: rgba(8, 122, 53, .16) !important;
}

.ist-progress-title {
    margin-bottom: 10px;
    color: var(--test-theme-green-dark);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ist-progress-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ist-step-pill {
    display: inline-flex;
    min-width: 46px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ist-step-pill.is-complete {
    background: var(--test-theme-green-soft) !important;
    color: var(--test-theme-green-dark) !important;
    border-color: var(--test-theme-green-border) !important;
}

.ist-step-pill.is-active {
    background: linear-gradient(135deg, var(--test-theme-green), var(--test-theme-green-dark)) !important;
    color: #ffffff !important;
    border-color: var(--test-theme-green-dark) !important;
    box-shadow: 0 7px 16px rgba(8, 122, 53, .22) !important;
}

.ist-step-pill.is-pending {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

/* Warna aman timer diselaraskan dengan hijau gelap/utama program. */
.timer-safe,
.timer-warning,
#totalTimerDisplay.timer-safe,
#totalTimerDisplay.timer-warning,
#totalTimer.timer-safe,
#totalTimer.timer-warning,
#roundTimer.timer-safe,
#roundTimer.timer-warning,
.universal-test-floating strong.timer-safe,
.universal-test-floating strong.timer-warning,
.pauli-floating-round-timer strong.timer-safe,
.pauli-floating-round-timer strong.timer-warning {
    color: var(--test-theme-green-dark) !important;
    animation: none !important;
    text-shadow: none !important;
}

.timer-box .timer-number.timer-safe,
.timer-box .timer-number.timer-warning,
#timerDisplay.timer-safe,
#timerDisplay.timer-warning,
.ist-instruction-start-box .timer-number.timer-safe,
.ist-instruction-start-box .timer-number.timer-warning {
    color: var(--test-theme-green-dark) !important;
    background: var(--test-theme-green-soft) !important;
    border-color: var(--test-theme-green-border) !important;
    box-shadow: 0 6px 16px rgba(8, 122, 53, .10) !important;
    animation: none !important;
    text-shadow: none !important;
}

/* Timer dashboard memakai teks hijau pada kartu putih, bukan blok hijau yang tidak proporsional. */
.universal-test-dashboard .timer-number.timer-safe,
.universal-test-dashboard .timer-number.timer-warning,
.pauli-pro-dashboard #totalTimer.timer-safe,
.pauli-pro-dashboard #totalTimer.timer-warning,
.pauli-pro-dashboard #roundTimer.timer-safe,
.pauli-pro-dashboard #roundTimer.timer-warning {
    color: var(--test-theme-green-dark) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    animation: none !important;
    text-shadow: none !important;
}

.pauli-transition-box #pauliTransitionCountdown.timer-safe,
.pauli-transition-box #pauliTransitionCountdown.timer-warning {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--test-theme-green), var(--test-theme-green-dark)) !important;
    border-color: var(--test-theme-green-dark) !important;
    animation: none !important;
}

/* Kondisi kritis tetap merah dan selalu mengalahkan aturan hijau. */
.timer-danger,
#totalTimerDisplay.timer-danger,
#totalTimer.timer-danger,
#roundTimer.timer-danger,
.universal-test-dashboard .timer-number.timer-danger,
.universal-test-floating strong.timer-danger,
.pauli-floating-round-timer strong.timer-danger {
    color: #dc2626 !important;
}

.timer-box .timer-number.timer-danger,
#timerDisplay.timer-danger,
.ist-instruction-start-box .timer-number.timer-danger,
.pauli-transition-box #pauliTransitionCountdown.timer-danger {
    color: #ffffff !important;
    background: #dc2626 !important;
    border-color: #b91c1c !important;
}

@media (max-width: 640px) {
    .universal-test-dashboard .universal-test-meta,
    .pauli-pro-dashboard .pauli-progress-meta {
        font-size: 11px !important;
    }

    .ist-step-pill {
        min-width: 42px;
        min-height: 32px;
        padding: 6px 9px;
    }
}



/* COMPACT STABLE MONITORING 2026-07-17
   Diletakkan paling akhir untuk mengalahkan aturan monitoring lama yang berulang. */
.monitoring-center-grid {
    grid-template-columns: repeat(7, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.monitoring-kpi {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    min-height: 68px !important;
    box-shadow: 0 6px 16px rgba(6,78,42,.12) !important;
}
.monitoring-kpi span { font-size: 9px !important; margin-bottom: 4px !important; }
.monitoring-kpi b { font-size: 24px !important; }
.monitoring-head { margin-bottom: 10px !important; }
.monitoring-head h2 { font-size: 18px !important; }
.monitoring-head p { font-size: 12px !important; line-height: 1.4 !important; }
.monitoring-progress-table-compact {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.monitoring-progress-table-compact th,
.monitoring-progress-table-compact td {
    padding: 7px 8px !important;
    vertical-align: middle !important;
    line-height: 1.25 !important;
}
.monitoring-progress-table-compact th { font-size: 10px !important; white-space: nowrap; }
.monitoring-progress-table-compact td { font-size: 12px !important; }
.monitoring-progress-table-compact th:nth-child(1) { width: 18%; }
.monitoring-progress-table-compact th:nth-child(2) { width: 14%; }
.monitoring-progress-table-compact th:nth-child(3) { width: 29%; }
.monitoring-progress-table-compact th:nth-child(4) { width: 24%; }
.monitoring-progress-table-compact th:nth-child(5) { width: 15%; }
.monitoring-person-cell b,
.monitoring-position-cell b,
.monitoring-test-cell b { display: block; }
.monitoring-person-cell small,
.monitoring-position-cell small,
.monitoring-activity-cell small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}
.monitoring-test-cell .badge {
    display: inline-flex;
    margin-top: 4px;
    padding: 3px 7px !important;
    font-size: 9px !important;
}
.monitoring-position-cell {
    color: #064e2a;
    overflow-wrap: anywhere;
}
.monitoring-progress-cell .progress-mini {
    width: 100% !important;
    height: 7px !important;
    margin: 4px 0 !important;
}
.monitoring-progress-line { display: flex; justify-content: space-between; gap: 8px; }
.monitoring-progress-line b { color: #064e2a; }
.monitoring-inline-separator { color: #94a3b8; margin: 0 3px; }
.monitoring-activity-cell { white-space: normal; }
.monitoring-camera-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #94a3b8;
}
.monitoring-camera-dot.is-active { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }

.monitoring-live-result { min-width: 0; }
.monitoring-live-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #dce8df;
    border-radius: 8px;
    background: #f8fbf9;
}
.monitoring-live-toolbar b { display: block; color: #102016; font-size: 13px; }
.monitoring-live-toolbar small { display: block; margin-top: 2px; color: #64748b; font-size: 11px; }
.monitoring-live-toolbar > span { flex: 0 0 auto; color: #166534; font-size: 11px; font-weight: 800; }
.monitoring-live-grid {
    display: grid !important;
    grid-template-columns: repeat(var(--monitoring-live-columns, 4), minmax(0, 1fr)) !important;
    grid-auto-flow: row;
    align-items: start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.monitoring-live-card {
    width: 100%;
    align-self: start;
    min-width: 0;
    padding: 5px;
    border: 1px solid #dce8df;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(15,23,42,.045);
    overflow: hidden;
}
.monitoring-live-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 3px;
}
.monitoring-live-card-body { min-width: 0; }
.monitoring-live-card.has-snapshot .monitoring-live-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.monitoring-live-card-content {
    flex: 1 1 150px;
    min-width: 0;
}
.monitoring-live-card-main { min-width: 0; }
.monitoring-live-person { min-width: 0; }
.monitoring-live-person h3 {
    margin: 0 !important;
    color: #102016;
    font-size: 10px !important;
    line-height: 1.12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-live-person small {
    display: block;
    margin-top: 1px;
    color: #64748b;
    font-size: 6.5px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-live-test { flex: 0 0 auto; text-align: right; min-width: 0; }
.monitoring-live-test b {
    display: block;
    max-width: 52px;
    color: #064e2a;
    font-size: 7px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-live-status {
    display: inline-block;
    margin-top: 1px;
    padding: 1px 3px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 5.5px;
    line-height: 1.15;
    font-weight: 900;
}
.monitoring-live-position {
    min-height: 25px;
    padding: 3px 4px;
    border-radius: 5px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
}
.monitoring-live-position b {
    display: -webkit-box;
    color: #064e2a;
    font-size: 7.2px;
    line-height: 1.15;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.monitoring-live-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin-top: 3px;
}
.monitoring-live-metrics > div {
    min-width: 0;
    padding: 2px;
    border-radius: 4px;
    background: #f8fafc;
}
.monitoring-live-metrics span {
    display: block;
    color: #64748b;
    font-size: 5px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-live-metrics b {
    display: block;
    margin-top: 1px;
    color: #102016;
    font-size: 7px;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-live-progress {
    width: 100% !important;
    height: 3px !important;
    margin: 3px 0 2px !important;
}
.monitoring-live-card-foot {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 10px;
    color: #64748b;
}
.monitoring-live-card-foot > small {
    margin-left: auto;
    font-size: 5.5px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monitoring-camera-state {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 5.5px;
    line-height: 1;
    white-space: nowrap;
}
.monitoring-camera-state i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #94a3b8;
}
.monitoring-camera-state.is-active i {
    background: #16a34a;
    box-shadow: 0 0 0 1px rgba(22,163,74,.14);
}
.monitoring-camera-panel {
    flex: 0 0 min(100%, var(--monitoring-snapshot-size, 120px));
    width: min(100%, var(--monitoring-snapshot-size, 120px));
    max-width: 100%;
    min-width: 0;
    align-self: start;
}
.monitoring-camera-preview {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #d7e2da;
    background: #e2e8f0;
    box-shadow: 0 2px 6px rgba(15,23,42,.09);
}
.monitoring-camera-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.monitoring-camera-preview:hover { border-color: #86b596; }


.monitoring-live-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.monitoring-live-pagination button {
    min-width: 34px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid #cbdad0;
    border-radius: 6px;
    background: #fff;
    color: #166534;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}
.monitoring-live-pagination button:hover:not(:disabled),
.monitoring-live-pagination button.is-active {
    border-color: #2f855a;
    background: #166534;
    color: #fff;
}
.monitoring-live-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.monitoring-live-pagination span { color: #64748b; font-size: 11px; }

/* Kolom desktop mengikuti pengaturan; layar sempit dibatasi otomatis. */
@media (max-width: 1020px) {
    .monitoring-live-grid:not(.monitoring-live-cols-1) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .monitoring-center-grid { grid-template-columns: repeat(2, minmax(100px, 1fr)) !important; }
    .monitoring-progress-table-compact { min-width: 880px; }
}
@media (max-width: 680px) {
    .monitoring-live-grid { grid-template-columns: 1fr !important; }
    .monitoring-live-toolbar { align-items: flex-start; flex-direction: column; }
    .monitoring-camera-panel { flex-basis: min(100%, var(--monitoring-snapshot-size, 120px)); }
}
@media (max-width: 420px) {
    .monitoring-camera-panel { width: min(100%, var(--monitoring-snapshot-size, 120px)); }
}