:root {
    --bg1: #eef4ff;
    --bg2: #dfeafb;
    --bg3: #f8fbff;
    --panel: rgba(255, 255, 255, 0.88);
    --panel-strong: rgba(255, 255, 255, 0.96);
    --panel-soft: rgba(244, 248, 255, 0.92);
    --text: #16325c;
    --text-dark: #0f2546;
    --muted: #5f7597;
    --line: rgba(22, 50, 92, 0.10);
    --accent: #f5b32f;
    --accent-dark: #df9d1b;
    --accent-soft: #fff2cc;
    --success: #dff4e8;
    --shadow: 0 16px 34px rgba(34, 69, 122, 0.12);
    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 12px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

.brand-logo-footer {
    width: 40px;   /* sesuaikan */
    height: auto;   /* biar proporsional */
}

.admin-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}
.admin-search-results {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.admin-search-item {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: 0.2s ease;
}

.admin-search-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(34, 69, 122, 0.12);
}

.admin-search-item span,
.admin-search-empty {
    font-size: 13px;
    color: var(--muted);
}

.selected-admin-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(22, 50, 92, 0.22);
    background: var(--panel-soft);
    font-size: 14px;
    color: var(--text-dark);
}
body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top right, rgba(245,179,47,0.18), transparent 18%),
        radial-gradient(circle at left top, rgba(111,153,255,0.16), transparent 24%),
        linear-gradient(180deg, var(--bg3) 0%, var(--bg1) 48%, var(--bg2) 100%);
}

.late-participant-card {
    margin: 16px 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-soft);
}

.late-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    margin-bottom: 12px;
}

.late-result-list {
    display: grid;
    gap: 10px;
}

.late-result-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--line);
}

.late-result-info {
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .late-search-form,
    .late-result-item {
        grid-template-columns: 1fr;
    }
}

.attendance-single-wrap {
    display: grid;
    gap: 14px;
}

.attendance-counter {
    text-align: center;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
}

.attendance-single-card {
    padding: 24px;
}

.attendance-single-card .attendance-quick-line {
    text-align: center;
    font-size: 34px;
    margin-bottom: 22px;
}

@media (max-width: 640px) {
    .attendance-single-card .attendance-quick-line {
        font-size: 24px;
    }
}

.admin-info {
    font-size: 13px;
    font-weight: 600;
    color: #16325c;
    margin-left: 10px;
}

.attendance-quick-line {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 14px;
}

/* =========================
   ABSENSI CEPAT (ADMIN)
========================= */

.attendance-quick-list {
    display: grid;
    gap: 14px;
}

.attendance-quick-item {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.attendance-quick-name {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.attendance-quick-dept {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 14px;
}

.attendance-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* tombol hadir */
.btn-hadir {
    background: #e8f8ef;
    color: #14653a;
    border: 1px solid #ccebd9;
    box-shadow: none;
}

.btn-hadir:hover {
    background: #d9f2e4;
}

/* tombol tidak hadir */
.btn-tidak-hadir {
    background: #fff2f2;
    color: #a64d4d;
    border: 1px solid #ffd6d6;
    box-shadow: none;
}

.btn-tidak-hadir:hover {
    background: #ffe7e7;
}

/* status text */
.attendance-current-status {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
}

.status-hadir {
    color: #14653a;
}

.status-tidak-hadir {
    color: #a64d4d;
}

.status-belum {
    color: var(--muted);
}

/* responsive */
@media (max-width: 640px) {
    .admin-action-buttons {
        grid-template-columns: 1fr;
    }
    .attendance-quick-name {
        font-size: 22px;
    }

    .attendance-quick-dept {
        font-size: 18px;
    }

    .attendance-quick-actions {
        grid-template-columns: 1fr 1fr;
    }
}

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

.module-link {
    text-decoration: none;
    color: inherit;
}

.module-card {
    padding: 18px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--panel-strong), rgba(239,245,255,0.96));
    text-align: center;
    transition: 0.2s ease;
    cursor: pointer;
}

.module-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(34, 69, 122, 0.16);
}

.module-emoji {
    font-size: 38px;
    line-height: 1;
}

.module-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    color: var(--text-dark);
}

.index-card {
    margin-top: 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    text-align: center;
    padding: 14px;
    font-weight: 600;
    transition: 0.2s;
}

.logout-wrapper {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.logout-wrapper .btn {
    width: 100%;
}

.pin-helper-card {
    margin-top: 14px;
}

.pin-helper-row {
    margin-top: 10px;
}

.nik-simulator-input {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(22, 50, 92, 0.12);
    background: rgba(255,255,255,0.95);
    color: var(--text-dark);
    padding: 10px 12px;
    outline: none;
}

.pin-preview-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px dashed rgba(22, 50, 92, 0.18);
    text-align: center;
}

.pin-preview-value {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--text-dark);
}

.pin-helper-examples {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
}

.index-card a {
    text-decoration: none;
    color: var(--text-dark);
    display: block;
}

.index-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    background: transparent;
    display: flex;
    z-index: 100;
}

.bottom-actions .btn {
    flex: 1;
}

.btn-danger {
    background: #ffe5e5;
    color: #b30000;
    border: 1px solid #ffcccc;
}

.pin-wrapper {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.pin-box {
    width: 100%;
    max-width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: white;
}

.change-pin-form {
    display: grid;
    gap: 14px;
}

.change-pin-group {
    text-align: center;
}

.change-pin-group label {
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

.change-pin-group .pin-wrapper {
    justify-content: center;
}

.pin-box,
.pin-box-new,
.pin-box-confirm {
    width: 100%;
    max-width: 52px;
    height: 54px;
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    border-radius: 14px;
    border: 1px solid rgba(22, 50, 92, 0.12);
    background: rgba(255,255,255,0.98);
    color: var(--text-dark);
    outline: none;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    caret-color: transparent;
}

.pin-box:focus,
.pin-box-new:focus,
.pin-box-confirm:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,179,47,0.18);
    transform: translateY(-1px);
}

.pin-box:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(245,179,47,0.3);
}

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

img {
    max-width: 100%;
    display: block;
}

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 16px 14px 28px;
    padding-bottom: 90px;
}

.hero,
.grid-card,
.module-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
}

.hero {
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(236,244,255,0.92));
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-logo {
    width: clamp(110px, 24vw, 220px);
    height: auto;
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
    color: var(--text-dark);
}

.hero-copy .eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #bf8400;
}

.hero-copy p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 720px;
}

.section-title {
    margin: 18px 4px 12px;
    font-size: 26px;
    color: var(--text-dark);
}

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

.module-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    background: linear-gradient(180deg, var(--panel-strong), rgba(239,245,255,0.96));
}

.module-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.module-card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    color: var(--text-dark);
}

.module-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.module-footer {
    margin-top: auto;
    padding-top: 16px;
}

.btn {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0 16px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--accent);
    color: #2d2200;
    box-shadow: 0 8px 18px rgba(245,179,47,0.28);
}

.btn-primary:hover {
    background: var(--accent-dark);
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(191,132,0,0.18);
    background: var(--accent-soft);
    color: #9a6a00;
    white-space: nowrap;
}

.footer-note {
    margin-top: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.grid-card {
    padding: 16px;
}

.card-title {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--text-dark);
}

.muted {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.notice {
    margin-bottom: 12px;
    padding: 12px 13px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.notice.error {
    background: #fff1f1;
    border: 1px solid #ffd0d0;
    color: #b74040;
    text-align: center;
}

.notice.success {
    background: #eefcf3;
    border: 1px solid #cdeed8;
    color: #1d7c46;
    text-align: center;
}

form {
    display: grid;
    gap: 12px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-dark);
}

input[type="password"],
input[type="datetime-local"],
input[type="text"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 44px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(22, 50, 92, 0.12);
    background: rgba(255,255,255,0.95);
    color: var(--text-dark);
    padding: 10px 12px;
    outline: none;
}

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

input::placeholder,
textarea::placeholder {
    color: #8da0bc;
}

.btn-outline {
    background: white;
    color: var(--text-dark);
    border: 1px solid rgba(22, 50, 92, 0.15);
    box-shadow: 0 6px 14px rgba(34, 69, 122, 0.12);
}

.btn-outline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34, 69, 122, 0.18);
}

.row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.mini-card {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
}

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

.info-label {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
    color: var(--text-dark);
}

.switch-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--panel-soft);
    border: 1px solid var(--line);
}

.checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

.status-pill {
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--line);
}

.status-pill.open {
    color: #14653a;
    background: #e8f8ef;
    border-color: #ccebd9;
}

.status-pill.closed {
    color: #a64d4d;
    background: #fff2f2;
    border-color: #ffd6d6;
}

.registered-box {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: #eefcf3;
    border: 1px solid #cdeed8;
    color: #1d7c46;
}

.top-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.status-pill,
.badge {
    text-align: center;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.toast-notice {
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 99999 !important;
    max-width: 340px;
    width: calc(100% - 32px); /* biar responsif di HP */
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 12px 30px rgba(22, 50, 92, 0.18);
    animation: toastSlideDown 0.3s ease;
}

.toast-success {
    background: #e8f8ef !important;
    color: #14653a !important;
    border: 1px solid #ccebd9;
}

.toast-error {
    background: #fff2f2 !important;
    color: #a64d4d !important;
    border: 1px solid #ffd6d6;
}

@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

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

.table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-top: 12px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 760px;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    background: #f8fafc;
    font-weight: 700;
    color: #334155;
}

.data-table tr:hover {
    background: #f9fafb;
}

.btn-small {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .top-actions {
    align-items: center;
    }
    
    .top-actions > .status-pill,
    .top-actions > .badge {
        width: 100%;
        max-width: 100%;
        text-align: center;
        justify-content: center;
    }
    .page {
        padding: 12px 10px 24px;
    }

    .hero,
    .grid-card,
    .module-card {
        border-radius: 22px;
    }

    .hero {
        padding: 14px;
        align-items: flex-start;
    }

    .brand {
        gap: 10px;
        align-items: flex-start;
    }

    .brand-logo {
        width: 118px;
    }

    .hero-copy h1 {
        font-size: 28px;
    }

    .hero-copy p {
        font-size: 13px;
    }

    .section-title {
        font-size: 22px;
        margin-top: 16px;
    }

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

    .module-card {
        min-height: 190px;
        padding: 14px;
    }

    .module-card h3 {
        font-size: 17px;
    }

    .module-card p {
        font-size: 13px;
    }

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

    .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .table-responsive {
        overflow-x: visible;
        width: 100%;
    }

    .data-table {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
    }

    .data-table tr {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        padding: 10px;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
        min-height: auto;
    }

    .data-table td {
        display: block;
        width: 100%;
        border-bottom: none;
        padding: 2px 0;
        text-align: left;
        font-size: 12px;
        line-height: 1.3;
        color: #0f172a;
    }

    .data-table td::before {
        display: none;
    }

    .data-table td[data-label="No"] {
        display: none;
    }
    
    .data-table tr td:first-child {
        display: none !important;
    }

    .data-table td[data-label="NIK"],
    .data-table td[data-label="Status"],
    .data-table td[data-label="Waktu Daftar"] {
        display: none;
    }

    .data-table td[data-label="Nama"] {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .data-table td[data-label="Departemen"] {
        font-size: 11px;
        color: #64748b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 8px;
    }

    .data-table td[data-label="Aksi"] {
        margin-top: auto;
        padding-top: 6px;
    }

    .data-table td[data-label="Aksi"] form {
        width: 100%;
    }

    .data-table .btn-small {
        width: 100%;
        padding: 7px 8px;
        font-size: 11px;
        border-radius: 10px;
    }
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:nowrap;
    align-items:center;
}

.hero-actions .btn{
    min-width:140px;
    text-align:center;
}

@media (max-width: 768px){
    .hero-actions{
        width:100%;
        justify-content:flex-start;
        margin-top:14px;
    }

    .hero-actions .btn{
        flex:1;
        min-width:0;
    }
}

.hero-actions .btn {
    width: auto;
}

@media (max-width: 640px) {
    .hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100% !important;
        min-width: 0;
    }
}

.hero-actions-stack{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:320px;
}

.btn-download-materi{
    width:90%;
}

@media (max-width:640px){

    .hero-actions-stack{
        max-width:100%;
    }

    .hero-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        width:100%;
    }

    .hero-actions .btn{
        width:100% !important;
    }
}

.start-test-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:12px;
    width:100%;
}

.start-test-actions form{
    display:block;
    width:100%;
}

.start-test-actions .btn{
    width:100%;
}

.mobile-result-detail{
    display:none;
}

@media (max-width:640px){

    .training-results-card .table-responsive{
        overflow-x:visible !important;
    }

    .training-results-table{
        min-width:0 !important;
        width:100% !important;
        border-collapse:collapse !important;
    }

    .training-results-table thead{
        display:none !important;
    }

    .training-results-table tbody{
        display:block !important;
        width:100% !important;
    }

    .training-results-table tr{
        display:block !important;
        padding:9px 0 !important;
        border-bottom:1px solid #e5e7eb !important;
        background:transparent !important;
        box-shadow:none !important;
        border-radius:0 !important;
    }

    .training-results-table td{
        display:none !important;
        border-bottom:none !important;
        padding:0 !important;
    }

    .training-results-table td[data-label="Nama"]{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        white-space:normal !important;
        color:var(--text-dark);
    }

    .training-results-table td[data-label="Nama"] strong{
        display:block;
        font-size:13px;
        font-weight:800;
        line-height:1.35;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .mobile-result-detail{
        display:block;
        margin-top:3px;
        font-size:12px;
        color:var(--muted);
        line-height:1.4;
    }
}

.mobile-name,
.mobile-result-detail{
    display:none;
}

@media (max-width:640px){
    .desktop-name{
        display:none !important;
    }

    .mobile-name{
        display:block !important;
        font-size:13px;
        font-weight:800;
        line-height:1.35;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .mobile-result-detail{
        display:block !important;
        margin-top:3px;
        font-size:12px;
        color:var(--muted);
        line-height:1.4;
    }
}

.admin-bottom-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:12px;
    align-items:stretch;
}

.admin-bottom-actions form{
    display:block;
    margin:0;
}

.admin-bottom-actions .btn{
    width:100%;
    height:100%;
}

@media (max-width:640px){

    .admin-bottom-actions{
        grid-template-columns:1fr;
    }
}

.grid{
    align-items:start;
}

.admin-bottom-actions .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
}

.admin-dashboard-grid-fixed{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "start timer"
        "add delete";
    gap:12px;
    margin-top:14px;
    align-items:start;
}

.card-start-test{
    grid-area:start;
}

.card-timer{
    grid-area:timer;
}

.card-add-admin{
    grid-area:add;
}

.card-delete-participant{
    grid-area:delete;
}

@media (max-width:860px){
    .admin-dashboard-grid-fixed{
        grid-template-columns:1fr;
        grid-template-areas:
            "start"
            "timer"
            "add"
            "delete";
    }
}

.manual-nik-wrap{
    display:flex;
    align-items:center;
    gap:8px;
}

.manual-prefix{
    min-height:44px;
    min-width:48px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(22, 50, 92, 0.12);
    background:#eef4ff;
    color:var(--text-dark);
    font-weight:800;
    align-items:center;
    justify-content:center;
}

.grid-left-stack,
.grid-right-stack {
    display: grid;
    gap: 12px;
    align-content: start;
}/* Tambahkan ke assets/css/style.css jika class belum ada */
.survey-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.survey-form label{font-weight:600;display:block;margin-bottom:6px;}
.survey-form input,.survey-form textarea{width:100%;box-sizing:border-box;}
.survey-section-title{margin:22px 0 10px;font-size:18px;}
.survey-question{padding:14px;border:1px solid rgba(15,23,42,.12);border-radius:14px;margin-bottom:12px;background:#fff;}
.rating-scale-info{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px 0;}
.rating-scale-info span{border:1px solid rgba(15,23,42,.12);border-radius:12px;padding:8px;text-align:center;font-size:12px;background:#f8fafc;}
.rating-row{display:grid;gap:8px;margin-top:8px;}
.rating-row-vertical{grid-template-columns:repeat(5,minmax(0,1fr));}
.rating-option{display:flex!important;gap:6px;align-items:center;border:1px solid rgba(15,23,42,.12);border-radius:12px;padding:9px;background:#f8fafc;font-size:13px;cursor:pointer;}
.rating-option input{width:auto!important;}
.survey-filter-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;}
.survey-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.survey-answer-detail{border-bottom:1px solid rgba(15,23,42,.10);padding:10px 0;}
@media(max-width:768px){
    .survey-two-col,.rating-row-vertical,.rating-scale-info,.survey-filter-form,.survey-kpi-grid{grid-template-columns:1fr;}
    .rating-option{align-items:flex-start;}
}

/* Customer Survey Google Form alignment */
.survey-section-title{
    background:#b9b7c8;
    color:#111827;
    padding:12px 14px;
    border-radius:10px 10px 0 0;
    margin:22px 0 0;
    font-size:16px;
    font-weight:700;
}
.survey-section-title + .survey-question{
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.required-star{
    color:#dc2626;
}
.question-translation{
    margin-top:4px;
    margin-bottom:12px;
    font-size:13px;
    color:#374151;
    font-style:italic;
}

/* Customer Satisfaction Dashboard - Excel style */
.page-wide{
    max-width:1600px;
}
.dashboard-filter{
    display:grid;
    grid-template-columns:repeat(4,minmax(130px,1fr)) repeat(3,auto);
    gap:10px;
    align-items:end;
    margin-top:14px;
    padding:14px;
    border-radius:16px;
    background:#ffffff;
    box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.dashboard-filter label{
    display:block;
    font-weight:700;
    font-size:12px;
    margin-bottom:4px;
}
.excel-dashboard{
    margin-top:14px;
    background:#ffffff;
    border:2px solid #164a7a;
    overflow:hidden;
}
.dashboard-title{
    margin:0;
    padding:8px 12px 4px;
    text-align:center;
    color:#1f4e79;
    font-size:32px;
    line-height:1.05;
    font-weight:900;
}
.dashboard-main-grid{
    display:grid;
    grid-template-columns:43.5% 56.5%;
    align-items:stretch;
}
.dashboard-left-panel{
    border-right:2px solid #164a7a;
}
.excel-metric-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:13px;
    background:#fff;
}
.excel-metric-table th,
.excel-metric-table td{
    border:1px solid #d9d9d9;
    padding:4px 6px;
    height:22px;
    vertical-align:middle;
}
.excel-metric-table td:first-child{
    font-weight:700;
    width:72%;
}
.excel-metric-table td:last-child{
    text-align:right;
    width:28%;
}
.excel-metric-table .section-row th{
    background:#1f4e79;
    color:#fff;
    text-align:left;
    font-size:13px;
    font-weight:800;
    border-color:#1f4e79;
}
.question-table .subheader th{
    background:#d9e2f3;
    color:#17365d;
    text-align:center;
    font-weight:800;
}
.question-table td:nth-child(1){width:52%;}
.question-table td:nth-child(2),
.question-table td:nth-child(3),
.question-table td:nth-child(4){text-align:center;}
.dashboard-chart-panel{
    min-height:650px;
    background:#d9d9d9;
    padding:34px 36px 28px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.bar-chart-wrap{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:12px;
    height:520px;
}
.chart-y-axis{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
    padding-bottom:40px;
    font-size:12px;
    color:#111;
}
.bar-chart{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:28px;
    align-items:end;
    border-bottom:1px solid #111;
    background:
        linear-gradient(to top, transparent 0, transparent calc(25% - 1px), rgba(0,0,0,.18) calc(25% - 1px), rgba(0,0,0,.18) 25%, transparent 25%, transparent calc(50% - 1px), rgba(0,0,0,.18) calc(50% - 1px), rgba(0,0,0,.18) 50%, transparent 50%, transparent calc(75% - 1px), rgba(0,0,0,.18) calc(75% - 1px), rgba(0,0,0,.18) 75%, transparent 75%, transparent calc(100% - 1px), rgba(0,0,0,.18) calc(100% - 1px), rgba(0,0,0,.18) 100%);
    padding:0 20px 0;
}
.bar-item{
    height:100%;
    display:grid;
    grid-template-rows:1fr 48px;
    align-items:end;
    min-width:0;
}
.bar-plot{
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}
.bar-fill{
    width:90%;
    min-height:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:13px;
    font-weight:900;
}
.bar-fill span{
    text-align:center;
    padding:2px;
}
.bar-color-1{background:#ff00ff;}
.bar-color-2{background:#00e600;color:#000;}
.bar-color-3{background:#ff0000;}
.bar-color-4{background:#0000ff;}
.bar-color-5{background:#ff9900;color:#000;}
.bar-label{
    margin-top:6px;
    text-align:center;
    font-size:12px;
    line-height:1.1;
    font-weight:700;
    color:#111;
}
.chart-title{
    margin-top:20px;
    text-align:center;
    font-size:22px;
    font-weight:900;
    color:#111;
}
@media(max-width:1100px){
    .dashboard-main-grid{grid-template-columns:1fr;}
    .dashboard-left-panel{border-right:0;border-bottom:2px solid #164a7a;}
    .dashboard-filter{grid-template-columns:repeat(2,minmax(0,1fr));}
    .dashboard-chart-panel{min-height:auto;}
}
@media(max-width:700px){
    .dashboard-title{font-size:24px;}
    .excel-metric-table{font-size:12px;}
    .dashboard-chart-panel{padding:20px 10px;}
    .bar-chart-wrap{grid-template-columns:54px 1fr;height:420px;}
    .bar-chart{gap:8px;padding:0 6px;}
    .bar-fill{width:100%;font-size:10px;}
    .bar-label{font-size:10px;}
    .dashboard-filter{grid-template-columns:1fr;}
}
@media print{
    body{background:#fff!important;}
    .no-print{display:none!important;}
    .page-wide{max-width:none;padding:0!important;}
    .excel-dashboard{margin:0;border:1px solid #164a7a;}
    .dashboard-main-grid{grid-template-columns:43.5% 56.5%;}
    .dashboard-left-panel{border-right:1px solid #164a7a;border-bottom:0;}
    .dashboard-chart-panel{min-height:650px;}
}

/* Customer Access Management table */
.customer-access-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.customer-access-table th,
.customer-access-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.customer-access-table th {
    background: #f1f5f9;
    color: #0f2a4d;
    font-weight: 700;
}

.customer-access-table td code {
    background: #eef2ff;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.customer-access-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

@media (max-width: 768px) {
    .customer-access-table {
        overflow-x: auto;
    }

    .customer-access-table table {
        min-width: 820px;
    }
}

/* Response Customer Survey table */
.response-table {
    overflow-x: auto;
}

.response-table table {
    width: 100%;
    min-width: 1100px;
    border-collapse: collapse;
}

.response-table th,
.response-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.response-table th {
    background: #f1f5f9;
    color: #0f2a4d;
    font-weight: 700;
}

.response-table td:nth-child(1),
.response-table td:nth-child(7),
.response-table td:nth-child(8),
.response-table td:nth-child(10),
.response-table td:nth-child(11) {
    text-align: center;
}

.response-table td:nth-child(4),
.response-table td:nth-child(5),
.response-table td:nth-child(6) {
    white-space: normal;
    min-width: 140px;
}

@media (max-width: 768px) {
    .response-table table {
        min-width: 1000px;
    }
}

@media (max-width: 768px) {
    .customer-access-table table,
    .customer-access-table thead,
    .customer-access-table tbody,
    .customer-access-table th,
    .customer-access-table td,
    .customer-access-table tr {
        display: block;
    }

    .customer-access-table table {
        min-width: 0;
    }

    .customer-access-table thead {
        display: none;
    }

    .customer-access-table tr {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 6px 18px rgba(15, 42, 77, 0.08);
    }

    .customer-access-table td {
        border-bottom: 0;
        padding: 7px 0;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        white-space: normal;
        font-size: 14px;
    }

    .customer-access-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #0f2a4d;
        min-width: 110px;
    }

    .customer-access-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        margin-top: 8px;
    }

    .customer-access-actions .btn,
    .customer-access-actions form,
    .customer-access-actions button {
        width: 100%;
    }

    .customer-access-table td[data-label="Action"] {
        display: block;
    }

    .customer-access-table td[data-label="Action"]::before {
        display: block;
        margin-bottom: 8px;
    }
}

/* Fix wrapping Per-Question Results */
.question-table {
    table-layout: fixed;
    width: 100%;
}

.question-table th,
.question-table td {
    vertical-align: middle;
    line-height: 1.25;
}

.question-table th:nth-child(1),
.question-table td:nth-child(1) {
    width: 48%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
}

.question-table th:nth-child(2),
.question-table td:nth-child(2),
.question-table th:nth-child(3),
.question-table td:nth-child(3),
.question-table th:nth-child(4),
.question-table td:nth-child(4) {
    width: 17%;
    text-align: center;
    white-space: normal;
}

.pin-box-wrap {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.pin-box {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    border-radius: 12px;
}

@media (max-width: 420px) {
    .pin-box-wrap {
        gap: 6px;
    }

    .pin-box {
        width: 40px;
        height: 50px;
        font-size: 22px;
    }
}

.toast-notification {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    max-width: 500px;
    min-width: 320px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 12px 30px rgba(15, 42, 77, 0.18);
    animation: toastIn 0.25s ease-out;
}

.toast-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.toast-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 600px) {
    .toast-notification {
        left: 14px;
        right: 14px;
        top: 14px;
        max-width: none;
    }
}

@media print {
    @page {
        size: A4 landscape;
        margin: 8mm;
    }

    body {
        background: #fff !important;
        font-size: 9px !important;
    }

    .no-print,
    .hero,
    .dashboard-filter,
    .grid-card,
    .toast-notification {
        display: none !important;
    }

    .page,
    .page-wide {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .excel-dashboard {
        border: 1px solid #1f4e79 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        page-break-inside: avoid;
    }

    .dashboard-title {
        font-size: 20px !important;
        margin: 4px 0 !important;
        line-height: 1.1 !important;
    }

    .dashboard-main-grid {
        display: grid !important;
        grid-template-columns: 46% 54% !important;
        gap: 0 !important;
        min-width: 0 !important;
    }

    .excel-metric-table {
        font-size: 7.5px !important;
        line-height: 1.05 !important;
    }

    .excel-metric-table th,
    .excel-metric-table td {
        padding: 2px 4px !important;
        height: auto !important;
    }

    .question-table td,
    .question-table th {
        padding: 2px 3px !important;
        line-height: 1.05 !important;
    }

    .dashboard-chart-panel {
        min-height: 0 !important;
        height: 145mm !important;
        padding: 8px !important;
    }

    .bar-chart-wrap {
        height: 118mm !important;
    }

    .bar-label {
        font-size: 7px !important;
        line-height: 1.05 !important;
    }

    .bar-fill span {
        font-size: 7px !important;
    }

    .chart-title {
        font-size: 14px !important;
        margin-top: 4px !important;
    }
}

.customer-access-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.customer-access-toolbar form {
    margin: 0;
}

@media (max-width: 600px) {
    .customer-access-toolbar,
    .customer-access-toolbar .btn,
    .customer-access-toolbar form,
    .customer-access-toolbar button {
        width: 100%;
    }
}