/* ── CSS Variables ──────────────────────────────────────────── */
:root {
    --brd-green:    var(--kiosk-color-primary);
    --brd-green-h:  var(--kiosk-color-primary-hover);
    --brd-green-bg: #F0FBF4;
    --brd-green-bd: #C3E6CB;
    --brd-amber:    var(--kiosk-color-warning);
    --brd-red:      var(--kiosk-color-danger);
    --brd-r:        var(--kiosk-radius-lg);
    --brd-r-sm:     var(--kiosk-radius-md);
}

/* ── Layout ─────────────────────────────────────────────────── */
.brd-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
}

/* ── Sidebar (mengikuti pola .ptk-steps dari style.css) ─────── */
.brd-sidebar {
    flex: 0 0 130px;
    width: 130px;
    background: var(--ptk-sidebar);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0 16px;
    border-right: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}

.brd-sidebar-label {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.25);
    margin-bottom: 16px;
    padding: 0 8px;
    text-align: center;
}

.brd-sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

/* Mengikuti pola .ptk-step */
.brd-nav-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.brd-nav-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.1);
}

/* Mengikuti pola .ptk-step-number */
.brd-nav-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: all 0.2s;
}

/* Mengikuti pola .ptk-step-copy */
.brd-nav-item-label {
    text-align: center;
}

.brd-nav-item-label strong {
    display: block;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.22);
    margin-bottom: 1px;
}

.brd-nav-item-label small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    line-height: 1.3;
}

/* Mengikuti pola .ptk-step.is-active */
.brd-nav-item.is-active .brd-nav-item-icon {
    background: var(--ptk-primary);
    border-color: var(--ptk-primary);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(24,169,106,0.25), 0 4px 14px rgba(24,169,106,0.4);
}

.brd-nav-item.is-active .brd-nav-item-label strong {
    color: rgba(255,255,255,0.5);
}

.brd-nav-item.is-active .brd-nav-item-label small {
    color: #fff;
    font-weight: 700;
}

/* ── Panel ───────────────────────────────────────────────────── */
.brd-panel {
    display: none;
}

.brd-panel.is-active {
    display: block;
}

/* ── Card ────────────────────────────────────────────────────── */
.brd-card {
    /* background: #fff; */
    /* border: 1px solid var(--ptk-line); */
    /* border-radius: var(--brd-r); */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05); */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.brd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--ptk-line);
}

.brd-card-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.brd-card-head-icon.cam  { background: #EFF6FF; color: #3B82F6; }
.brd-card-head-icon.hand { background: var(--brd-green-bg); color: var(--brd-green); }

.brd-card-head h3 { margin: 0 0 1px; font-size: 0.9rem; font-weight: 700; color: var(--ptk-text); }
.brd-card-head p  { margin: 0; font-size: 0.72rem; color: var(--ptk-muted); }

.brd-card-body {
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Webcam ──────────────────────────────────────────────────── */
.brd-cam-wrap {
    position: relative;
    background: #0a0a0a;
    border-radius: var(--brd-r-sm);
    overflow: hidden;
    aspect-ratio: 16/7;
}

.brd-cam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scaleX(-1);
}

.brd-cam-canvas { display: none; }

.brd-cam-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}

.brd-cam-frame {
    width: 260px;
    height: 260px;
    border: 2.5px solid rgba(255,255,255,0.4);
    border-radius: 18px;
    position: relative;
}

.brd-cam-frame::before,
.brd-cam-frame::after,
.brd-cam-frame > span::before,
.brd-cam-frame > span::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: var(--brd-green);
    border-style: solid;
}

.brd-cam-frame::before        { top: -2px;    left: -2px;  border-width: 3px 0 0 3px; border-radius: 6px 0 0 0; }
.brd-cam-frame::after         { top: -2px;    right: -2px; border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }
.brd-cam-frame > span::before { bottom: -2px; left: -2px;  border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }
.brd-cam-frame > span::after  { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; }

.brd-cam-scan-line {
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brd-green), transparent);
    top: 10%;
    animation: brd-scan 2s linear infinite;
    display: none;
}

@keyframes brd-scan { 0% { top: 10%; } 50% { top: 85%; } 100% { top: 10%; } }

.brd-cam-hint { font-size: 0.72rem; color: rgba(255,255,255,0.65); text-align: center; }

.brd-cam-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    background: #F8FAFD;
    border: 1px solid var(--ptk-line);
}

.brd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.brd-cam-status.idle   .brd-dot { background: #94A3B8; }
.brd-cam-status.active .brd-dot { background: var(--brd-green); animation: brd-blink 1s ease-in-out infinite; }
.brd-cam-status.found  .brd-dot { background: var(--brd-green); }
.brd-cam-status.error  .brd-dot { background: var(--brd-red); }

@keyframes brd-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.brd-cam-btn {
    width: 100%;
    padding: 10px;
    border: 1.5px solid var(--ptk-line);
    border-radius: var(--brd-r-sm);
    background: var(--brd-green);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ptk-text);
    transition: background 0.15s, border-color 0.15s;
    color: #fff
}

.brd-cam-btn:hover     {
    background: var(--brd-green-h); 
}

.brd-cam-btn.is-active { background: #FEF2F2; border-color: #FECACA; color: var(--brd-red); }
.brd-cam-btn svg, .brd-cam-btn i { width: 1em !important; height: 1em !important; font-size: 0.82rem; flex-shrink: 0; }
.brd-card-head .brd-cam-btn { width: auto; margin-left: auto; padding: 7px 12px; }

/* ── Manual input ────────────────────────────────────────────── */
.brd-input-row {
    display: flex;
    gap: 8px;
}

.brd-input-row input {
    flex: 1;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--brd-r-sm);
    background: #FAFCFF;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ptk-text);
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.15s;
}

.brd-input-row input:focus { border-color: var(--brd-green); }

.brd-search-btn {
    height: 46px;
    padding: 0 18px;
    background: var(--brd-green);
    color: #fff;
    border: none;
    border-radius: var(--brd-r-sm);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: background 0.15s;
}

.brd-search-btn:hover    { background: var(--brd-green-h); }
.brd-search-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.brd-error {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--brd-r-sm);
    font-size: 0.8rem;
    color: var(--brd-red);
    font-weight: 500;
}

.brd-error.is-visible { display: flex; }

.brd-loading {
    display: none;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--ptk-muted);
}

.brd-loading.is-visible { display: flex; }

.brd-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #E2E8F0;
    border-top-color: var(--brd-green);
    border-radius: 50%;
    animation: brd-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes brd-spin { to { transform: rotate(360deg); } }

/* ── Virtual keyboard ────────────────────────────────────────── */
.brd-keyboard {
    display: flex;
    gap: 14px;
    margin-top: 8px;
    align-items: stretch;
}

.brd-kb-row {
    display: flex;
    gap: 8px;
}

.brd-kb-alpha {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.brd-kb-row-alpha {
    justify-content: flex-start;
}

.brd-kb-row-actions {
    margin-top: 4px;
}

.brd-kb-num {
    flex: 0 0 248px;
}

.brd-kb-num-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
}

.brd-kb-key {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    padding: 0 8px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #cde8dc;
    border-radius: 12px;
    background: transparent;
    color: var(--ptk-text);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.01);
}

.brd-kb-key:hover  { background: var(--brd-green); border-color: #9ed9c2; color: #fff; }
.brd-kb-key:focus,
.brd-kb-key:focus-visible {
    border-color: #9ed9c2;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.18);
}
.brd-kb-key:active {
    background: #DBEAFE;
    border-color: #9ed9c2;
    box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.12);
}
.brd-kb-key.is-num {
    height: 72px;
    font-size: 1.15rem;
    background: #fff;
}

.brd-kb-key.is-num:hover {
    background: var(--brd-green);
    border-color: #9ed9c2;
    color: #fff;
}

.brd-kb-key.is-num:active {
    background: #DBEAFE;
    border-color: #9ed9c2;
}
.brd-kb-key.is-del {
    flex: 1.2 1 0;
    background: #FEF2F2;
    border-color: #FECACA;
    color: var(--brd-red);
    font-size: 0.92rem;
}
.brd-kb-key.is-del:focus,
.brd-kb-key.is-del:focus-visible,
.brd-kb-key.is-del:active {
    border-color: #FCA5A5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.brd-kb-key.is-clear {
    flex: 1.15 1 0;
    background: #FFF7ED;
    border-color: #FED7AA;
    color: var(--brd-amber);
    font-size: 0.86rem;
}
.brd-kb-key.is-clear:focus,
.brd-kb-key.is-clear:focus-visible,
.brd-kb-key.is-clear:active {
    border-color: #FDBA74;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.brd-kb-key-zero {
    grid-column: span 3;
}

@media (max-width: 1100px) {
    .brd-keyboard {
        flex-direction: column;
    }

    .brd-kb-num {
        flex: 0 0 auto;
    }

    .brd-kb-num-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .brd-kb-key.is-num {
        height: 60px;
    }

    .brd-kb-key-zero {
        grid-column: span 1;
    }
}

@media (max-width: 680px) {
    .brd-kb-row {
        gap: 6px;
    }

    .brd-kb-key {
        height: 48px;
        font-size: 0.9rem;
    }

    .brd-kb-key.is-num {
        height: 52px;
        font-size: 1rem;
    }

    .brd-kb-key.is-clear,
    .brd-kb-key.is-del {
        font-size: 0.8rem;
    }
}

/* ── Result modal ────────────────────────────────────────────── */
.brd-result {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    padding: 20px;
}

.brd-result.is-visible { display: flex; }

.brd-result-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    overflow: hidden;
}

.brd-result-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
}

.brd-result-modal-head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #111; }

.brd-result-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f5f5f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #666;
    transition: background 0.15s, color 0.15s;
}

.brd-result-modal-close:hover { background: #e8e8e8; color: #222; }

.brd-result-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.brd-result-modal-foot {
    padding: 20px 28px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
}

.brd-result-info {
    background: #f9f9f9;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.brd-result-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--brd-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.brd-result-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; flex: 1; }

.brd-result-item { display: flex; flex-direction: column; gap: 4px; }
.brd-result-item span   { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #999; }
.brd-result-item strong { font-size: 0.95rem; font-weight: 700; color: #111; }

/* Ticket list */
.brd-ticket-list { display: flex; flex-direction: column; gap: 8px; }

.brd-ticket-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.brd-ticket-item:hover         { border-color: #ddd; background: #fff; }
.brd-ticket-item.is-checked    { border-color: var(--brd-green); background: #f6fdf9; }

.brd-ticket-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brd-green);
    cursor: pointer;
    flex-shrink: 0;
}

.brd-ticket-seat {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: var(--brd-green);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brd-ticket-seat.is-already { background: #ccc; }

.brd-ticket-info { flex: 1; }
.brd-ticket-info strong { display: block; font-size: 0.9rem; font-weight: 700; color: #111; }
.brd-ticket-info span   { font-size: 0.75rem; color: #999; margin-top: 2px; }

.brd-ticket-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

.brd-ticket-badge.paid    { background: #e8f5e9; color: #2e7d32; }
.brd-ticket-badge.boarded { background: #e3f2fd; color: #1565c0; }
.brd-ticket-badge.other   { background: #fff9c4; color: #f57f17; }

/* Select-all bar */
.brd-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.8rem;
}

.brd-select-bar label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
    color: #333;
}

.brd-select-bar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brd-green);
    cursor: pointer;
}

.brd-select-count { font-size: 0.75rem; font-weight: 600; color: #999; }

/* Result actions */
.brd-result-actions { display: flex; gap: 12px; align-items: center; width: 100%; }

.brd-boarding-btn {
    flex: 1;
    height: 48px;
    background: var(--brd-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
}

.brd-boarding-btn:hover    { background: var(--brd-green-h); }
.brd-boarding-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.brd-reset-btn {
    height: 48px;
    padding: 0 24px;
    background: #f5f5f5;
    color: #666;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.brd-reset-btn:hover { background: #e8e8e8; }

/* ── Success overlay ─────────────────────────────────────────── */
.brd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.brd-overlay.is-visible { display: flex; }

.brd-overlay-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

.brd-overlay-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 16px;
}

.brd-overlay-icon.success { background: #e8f5e9; color: var(--brd-green); }
.brd-overlay-icon.fail    { background: #ffebee; color: var(--brd-red); }

.brd-overlay-card h2 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; color: #111; }
.brd-overlay-card p  { margin: 0 0 24px; font-size: 0.9rem; color: #666; line-height: 1.6; }

.brd-overlay-seats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.brd-overlay-seat-badge {
    background: var(--brd-green);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
}

.brd-overlay-close {
    width: 100%;
    height: 50px;
    background: transparent;
    color: var(--brd-green);
    border: 1px solid var(--brd-green);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.brd-overlay-close:hover { background: var(--brd-green-h); }

/* ── QR Result Modal ─────────────────────────────────────────── */
.brd-qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(0,0,0,0.55);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
}

.brd-qr-modal.is-visible { display: flex; }

.brd-qr-card {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    padding: 32px 28px 24px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    align-items: center;
}

.brd-qr-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
}

.brd-qr-status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.brd-qr-status-icon.success { background: #DCFCE7; color: var(--brd-green); }
.brd-qr-status-icon.fail    { background: #FEF2F2; color: var(--brd-red); }

.brd-qr-status-text h2 { margin: 0; font-size: 1.4rem; font-weight: 800; color: #111; }
.brd-qr-status-text p  { margin: 8px 0 0; font-size: 0.95rem; color: #666; line-height: 1.5; }

.brd-qr-divider { height: 1px; background: #f0f0f0; margin: 0 -4px; width: 100%; }

.brd-qr-info { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.brd-qr-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brd-qr-label {
    font-size: 0.78rem;
    color: #888;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.brd-qr-label i { width: 14px; text-align: center; color: #bbb; }

.brd-qr-info-row strong { font-size: 0.9rem; font-weight: 700; color: #111; text-align: right; }

.brd-qr-close {
    width: 100%;
    height: 48px;
    background: var(--brd-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
    margin-top: 4px;
}

.brd-qr-close:hover { background: var(--brd-green-h); }

.brd-qr-card.is-simple .brd-qr-divider,
.brd-qr-card.is-simple .brd-qr-info {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   Detail Boarding Page
   ══════════════════════════════════════════════════════════════ */

/* Reset background khusus halaman detail */
.brd-detail-ctx,
.brd-detail-ctx .ptk-shell { background: #F1F5F9; }

.brd-detail-ctx .ptk-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F1F5F9;
    padding: 0;
}

/* Wrapper utama */
.brd-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Booking header ────────────────────────────────────────── */
.brd-dhead {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid var(--ptk-line);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.brd-dhead-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--brd-green);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.brd-dhead-body { flex: 1; min-width: 0; }

.brd-dhead-route {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brd-dhead-chips { display: flex; gap: 14px; }

.brd-dhead-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    color: #64748B;
    font-weight: 500;
}

.brd-dhead-chip i { font-size: 0.62rem; color: #94A3B8; }

.brd-dhead-code { text-align: right; flex-shrink: 0; }

.brd-dhead-code-label {
    display: block;
    font-size: 0.59rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94A3B8;
    margin-bottom: 3px;
}

.brd-dhead-code-val {
    display: block;
    font-size: 0.87rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: 0.03em;
}

/* ── Controls bar ──────────────────────────────────────────── */
.brd-dbar {
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid var(--ptk-line);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brd-dbar-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94A3B8;
}

.brd-dbar-right { display: flex; align-items: center; gap: 10px; }

.brd-dbar-chkall {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    font-size: 0.79rem;
    font-weight: 600;
    color: #374151;
}

.brd-dbar-chkall input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--brd-green);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.brd-dbar-count {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brd-green);
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 2px 10px;
    border-radius: 99px;
}

/* ── Ticket list (scrollable) ──────────────────────────────── */
.brd-dlist {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.brd-dlist::-webkit-scrollbar       { width: 4px; }
.brd-dlist::-webkit-scrollbar-track { background: transparent; }
.brd-dlist::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; }

/* Ticket card */
.brd-dticket {
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color 0.12s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.brd-dticket::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.12s;
}

.brd-dticket.is-sel             { border-color: #D1FAE5; background: #FAFFFE; }
.brd-dticket.is-sel::before     { background: var(--brd-green); }
.brd-dticket.is-off             { cursor: default; }
.brd-dticket:not(.is-off):hover { border-color: #D1FAE5; }

.brd-dticket-chk {
    width: 17px;
    height: 17px;
    accent-color: var(--brd-green);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.brd-dticket-seat {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--brd-green);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}

.brd-dticket-seat.done { background: #CBD5E1; color: #fff; }

.brd-dticket-body { flex: 1; min-width: 0; }

.brd-dticket-name {
    font-size: 0.93rem;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 3px;
}

.brd-dticket-num {
    font-size: 0.7rem;
    color: #94A3B8;
    letter-spacing: 0.02em;
}

.brd-dticket-badge {
    font-size: 0.64rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
    flex-shrink: 0;
}

.brd-dticket-badge.ready   { background: #DCFCE7; color: #15803D; }
.brd-dticket-badge.done    { background: #DBEAFE; color: #1D4ED8; }
.brd-dticket-badge.pending { background: #FEF9C3; color: #854D0E; }

/* Empty state */
.brd-dlist-empty {
    text-align: center;
    padding: 48px 20px;
    color: #94A3B8;
}

.brd-dlist-empty i { font-size: 2.2rem; color: #E5E7EB; display: block; margin-bottom: 12px; }
.brd-dlist-empty p { margin: 0; font-size: 0.84rem; }

/* ── Feedback area ─────────────────────────────────────────── */
.brd-dmsgs { flex-shrink: 0; padding: 0 24px 6px; }

/* ── Action bar ────────────────────────────────────────────── */
.brd-dfoot {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--ptk-line);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brd-dfoot-back {
    height: 48px;
    padding: 0 20px;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    background: transparent;
    color: #64748B;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.brd-dfoot-back:hover { border-color: #CBD5E1; background: #F8FAFC; color: #334155; }

.brd-dfoot-process {
    flex: 1;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 0.82rem;
    color: #64748B;
}

.brd-dfoot-process.is-visible { display: flex; }

.brd-dfoot-confirm {
    flex: 1;
    height: 48px;
    background: var(--brd-green);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.12s;
}

.brd-dfoot-confirm:hover    { background: var(--brd-green-h); }
.brd-dfoot-confirm:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── State screens (loading / error) ───────────────────────── */
.brd-dstate {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    background: #F1F5F9;
}

.brd-dstate-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FEE2E2;
    color: var(--brd-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.brd-dstate p {
    margin: 0;
    font-size: 0.87rem;
    color: #64748B;
    text-align: center;
    max-width: 340px;
    line-height: 1.65;
}

/* ── Success overlay ───────────────────────────────────────── */
.brd-dsuccess {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(0,0,0,0.4);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.brd-dsuccess.is-visible { display: flex; }

.brd-dsuccess-card {
    background: #fff;
    border-radius: 20px;
    padding: 44px 36px 36px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 32px 64px rgba(0,0,0,0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brd-dsuccess-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 18px;
}

.brd-dsuccess-card h2 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; color: #0F172A; }
.brd-dsuccess-card p  { margin: 0 0 20px; font-size: 0.85rem; color: #64748B; line-height: 1.65; }

.brd-dsuccess-seats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}

.brd-dsuccess-seat {
    background: var(--brd-green);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
}

.brd-dsuccess-btn {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--brd-green);
    border-radius: 10px;
    background: transparent;
    color: var(--brd-green);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.12s, color 0.12s;
}

.brd-dsuccess-btn:hover { background: var(--brd-green); color: #fff; }