/* =============================================
   Visitor Registration – Modern Redesign CSS
   ============================================= */

/* ── CSS VARIABLES ── */
:root {
    --primary: #0a63a3;
    --primary-dark: #084d80;
    --primary-light: #e8f4fd;
    --success: #1a7a3d;
    --success-light: #e8f7ee;
    --warning: #b45309;
    --warning-light: #fef3e2;
    --danger: #c0392b;
    --danger-light: #fdecea;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-900: #111827;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── RESET ANALYTICS LAYOUT ── */
.section_analytics {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #f0f4f8;
    font-family: 'Cairo', sans-serif;
    direction: rtl;
}

/* ══════════════════════════════
   TOP NAV BAR
══════════════════════════════ */
.vr-topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 16px;
    height: 52px;
    max-height: 200px;
    flex-shrink: 0;
    gap: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* ── Nav Toggle Button ── */
.vr-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18px;
    background: #f0f4f8;
    border-bottom: 1px solid var(--gray-200);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    user-select: none;
}

    .vr-nav-toggle:hover {
        background: #e2eaf3;
    }

    .vr-nav-toggle i {
        font-size: 11px;
        color: #6b7280;
        transition: transform 0.3s;
    }

    .vr-nav-toggle.nav-collapsed {
        background: var(--primary);
        border-bottom-color: var(--primary);
    }

        .vr-nav-toggle.nav-collapsed i {
            color: #fff;
        }

.vr-nav-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vr-nav-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}

    .vr-nav-tab:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }

    .vr-nav-tab.active {
        background: linear-gradient(135deg, var(--primary), #1a80c8);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 3px 10px rgba(10,99,163,0.3);
    }

    .vr-nav-tab i, .vr-nav-tab svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    /* desktop: show full text, hide short */
    .vr-nav-tab .nav-text-short {
        display: none;
    }

    .vr-nav-tab .nav-text-full {
        display: inline;
    }

.vr-delete-btn .nav-text-short {
    display: none;
}

.vr-delete-btn .nav-text-full {
    display: inline;
}

/* ══════════════════════════════
   ID TYPE NAV (in topnav)
══════════════════════════════ */
.vr-idtype-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100);
    border-radius: 10px;
    padding: 3px;
}

.vr-idtype-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Cairo', sans-serif;
    min-width: 52px;
}

    .vr-idtype-btn img {
        width: 38px;
        height: 24px;
        object-fit: contain;
    }

    .vr-idtype-btn span {
        font-size: 9.5px;
        font-weight: 700;
        color: var(--gray-400);
        white-space: nowrap;
    }

    .vr-idtype-btn:hover {
        background: #fff;
    }

    .vr-idtype-btn.active {
        background: #fff;
        box-shadow: 0 1px 6px rgba(0,0,0,0.12);
    }

        .vr-idtype-btn.active span {
            color: var(--primary);
        }

.vr-delete-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1.5px solid #fca5a5;
    border-radius: 8px;
    background: #fff5f5;
    font-size: 13px;
    font-weight: 600;
    color: var(--danger);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}

    .vr-delete-btn:hover {
        background: var(--danger);
        color: #fff;
        border-color: transparent;
    }

/* ══════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════ */
.vr-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
.vr-sidebar {
    width: 56px;
    background: #fff;
    border-left: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
    flex-shrink: 0;
}

.vr-sidebar-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

    .vr-sidebar-link:hover {
        background: var(--primary-light);
        color: var(--primary);
    }

    .vr-sidebar-link svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
    }

.vr-sidebar-menu-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}

    .vr-sidebar-menu-btn:hover {
        background: var(--gray-100);
    }

.vr-sidebar-divider {
    width: 32px;
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

/* ══════════════════════════════
   STEPS AREA
══════════════════════════════ */
.vr-steps-area {
    flex: 1;
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow: hidden;
    min-width: 0;
}

/* Mobile: tabs navigation */
.vr-mobile-tabs {
    display: none;
}

/* ── SINGLE STEP CARD ── */
.vr-step {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    box-shadow: var(--shadow);
}

    /* Desktop step widths: 40% | 35% | 25% */
    .vr-step:nth-child(1) {
        flex: 2.2;
    }

    .vr-step:nth-child(2) {
        flex: 2;
    }

    .vr-step:nth-child(3) {
        flex: 1.5;
    }

.vr-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--primary) 0%, #1a80c8 100%);
    flex-shrink: 0;
}

.vr-step-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vr-step-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.vr-step-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.vr-step-subtitle {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
}

.vr-step-check {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

    .vr-step-check.done {
        background: #22c55e;
    }

.vr-step-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

    /* ── SCROLLBAR ── */
    .vr-step-body::-webkit-scrollbar {
        width: 4px;
    }

    .vr-step-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .vr-step-body::-webkit-scrollbar-thumb {
        background: var(--gray-200);
        border-radius: 4px;
    }

/* ══════════════════════════════
   STEP 1 – ID TYPE SELECTOR
══════════════════════════════ */
.vr-id-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.vr-id-type-card {
    border: 1.5px solid var(--gray-200);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .vr-id-type-card:hover {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .vr-id-type-card.active {
        border-color: var(--primary);
        background: var(--primary-light);
        box-shadow: 0 0 0 3px rgba(10,99,163,0.12);
    }

    .vr-id-type-card img {
        width: 48px;
        height: 32px;
        object-fit: contain;
    }

    .vr-id-type-card p {
        font-size: 10px;
        font-weight: 700;
        color: var(--gray-600);
        margin: 0;
        line-height: 1.2;
    }

    .vr-id-type-card.active p {
        color: var(--primary);
    }

/* ── STATUS INDICATOR ── */
.vr-status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}

    .vr-status-badge.allowed {
        background: var(--success-light);
        color: var(--success);
        border: 1px solid #86efac;
    }

    .vr-status-badge.blocked {
        background: var(--danger-light);
        color: var(--danger);
        border: 1px solid #fca5a5;
    }

    .vr-status-badge.waiting {
        background: var(--warning-light);
        color: var(--warning);
        border: 1px solid #fcd34d;
    }

/* ── ID SCAN CONTROLS ── */
.vr-scan-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.vr-scan-controls-row {
    display: flex;
    gap: 6px;
}

.vr-scan-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border: 1.5px solid var(--primary);
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}

    .vr-scan-btn:hover {
        background: var(--primary);
        color: #fff;
    }

/* ── ID IMAGES ── */
.vr-id-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.vr-id-image-box {
    border: 1.5px dashed var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vr-id-image-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* ── FORM SECTION TITLE ── */
.vr-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    margin: 10px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .vr-section-title::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--gray-200);
    }

/* ── FORM FIELDS ── */
.vr-field-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vr-input-group {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid var(--gray-200);
    transition: border-color 0.2s;
    background: #fff;
}

    .vr-input-group:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(10,99,163,0.1);
    }

.vr-input-icon {
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 12px;
    flex-shrink: 0;
    border-left: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.vr-input-group:focus-within .vr-input-icon {
    border-color: var(--primary);
    color: var(--primary);
}

.vr-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--gray-900);
    font-family: 'Cairo', sans-serif;
    background: transparent;
    direction: rtl;
    min-width: 0;
}

    .vr-input::placeholder {
        color: var(--gray-400);
        font-size: 12px;
    }

.vr-select {
    flex: 1;
    border: none;
    outline: none;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--gray-900);
    font-family: 'Cairo', sans-serif;
    background: transparent;
    cursor: pointer;
    direction: rtl;
    min-width: 0;
}

/* ══════════════════════════════
   STEP 2 – LOCATION
══════════════════════════════ */

/* ── VISIT CARD INPUT ── */
.vr-card-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
    margin-bottom: 10px;
}

    .vr-card-row .vr-input-group {
        flex: 1;
    }

.vr-recall-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--primary), #1a80c8);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 3px 10px rgba(10,99,163,0.3);
    flex-shrink: 0;
    transition: all 0.2s;
}

    .vr-recall-btn:hover {
        box-shadow: 0 5px 16px rgba(10,99,163,0.4);
        transform: translateY(-1px);
    }

/* ── VISIT INFO CHIP ── */
.vr-visit-info {
    background: var(--primary-light);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--primary-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── TOP LOCATIONS GRID ── */
.vr-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.vr-location-chip {
    position: relative;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    gap: 7px;
}

    .vr-location-chip:hover {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .vr-location-chip input[type="radio"] {
        accent-color: var(--primary);
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        margin: 0;
    }

    .vr-location-chip span {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--gray-600);
        cursor: pointer;
        line-height: 1.3;
        flex: 1;
        text-align: right;
    }

    .vr-location-chip:has(input:checked) {
        border-color: var(--primary);
        background: var(--primary-light);
        box-shadow: 0 0 0 2px rgba(10,99,163,0.12);
    }

        .vr-location-chip:has(input:checked) span {
            color: var(--primary);
            font-weight: 700;
        }

/* ── WARNING ── */
.vr-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--danger-light);
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-size: 12px;
    color: var(--danger);
    margin-bottom: 8px;
}

/* ── ACTION BUTTONS ── */
.vr-action-btns {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--gray-200);
    background: #fff;
    flex-shrink: 0;
}

.vr-btn-checkin {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(135deg, var(--primary), #1a80c8);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 3px 10px rgba(10,99,163,0.3);
    transition: all 0.2s;
}

    .vr-btn-checkin:hover {
        box-shadow: 0 5px 16px rgba(10,99,163,0.4);
        transform: translateY(-1px);
    }

.vr-btn-checkout {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(135deg, var(--success), #22a352);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 3px 10px rgba(26,122,61,0.3);
    transition: all 0.2s;
}

    .vr-btn-checkout:hover {
        box-shadow: 0 5px 16px rgba(26,122,61,0.4);
        transform: translateY(-1px);
    }

/* ══════════════════════════════
   STEP 3 – STATS & NOTES
══════════════════════════════ */

/* ── STATS GRID ── */
.vr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 10px;
}

.vr-stat-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}

.vr-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 4px;
}

.vr-stat-label {
    font-size: 10px;
    color: var(--gray-400);
    font-weight: 600;
}

/* ── LOCATION FILTER ── */
.vr-filter-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.vr-filter-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── NOTES TABS ── */
.vr-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 8px;
}

.vr-tab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-400);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
}

    .vr-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }

.vr-tab-content {
    display: none;
}

    .vr-tab-content.active {
        display: block;
    }

.vr-textarea {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'Cairo', sans-serif;
    color: var(--gray-900);
    resize: none;
    min-height: 80px;
    direction: rtl;
    outline: none;
    transition: border-color 0.2s;
}

    .vr-textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(10,99,163,0.1);
    }

/* ── BELONGINGS ACCORDION ── */
.vr-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-600);
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    transition: all 0.2s;
    margin-bottom: 6px;
}

    .vr-accordion-btn:hover {
        border-color: var(--primary);
        color: var(--primary);
        background: var(--primary-light);
    }

/* ── UPLOAD BOX ── */
.vr-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1.5px dashed var(--gray-200);
    border-radius: 8px;
    position: relative;
    background: var(--gray-50);
    margin-bottom: 6px;
    transition: border-color 0.2s;
}

    .vr-upload-row:hover {
        border-color: var(--primary);
    }

    .vr-upload-row input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 10;
        width: 100%;
        height: 100%;
    }

.vr-upload-icon {
    width: 28px;
    height: 28px;
    background: var(--primary-light);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 12px;
    flex-shrink: 0;
}

.vr-upload-label {
    font-size: 12px;
    color: var(--gray-600);
    font-weight: 600;
}

/* ══════════════════════════════
   OVERLAY POPUPS
══════════════════════════════ */
.vr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.vr-overlay-card {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    width: min(480px, 90vw);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

    .vr-overlay-card .warning-icon {
        width: 56px;
        height: 56px;
        background: var(--danger-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--danger);
        margin: 0 auto 16px;
    }

    .vr-overlay-card .vr-overlay-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 8px;
    }

    .vr-overlay-card .vr-overlay-msg {
        font-size: 13px;
        color: var(--gray-600);
        margin-bottom: 20px;
    }

.vr-overlay-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── MOBILE TABS BAR (outside vr-content) ── */
.vr-mobile-tabs {
    display: none; /* shown via JS on mobile */
    background: #fff;
    border-bottom: 2px solid var(--gray-200);
    flex-shrink: 0;
    width: 100%;
}

.vr-mobile-tab {
    flex: 1;
    padding: 10px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-400);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-family: 'Cairo', sans-serif;
    line-height: 1.4;
    margin-bottom: -2px;
}

    .vr-mobile-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
        background: var(--primary-light);
    }



/* ══════════════════════════════
   STEP 1 – REDESIGNED SCAN PANEL
══════════════════════════════ */

/* ── ID Type tab row (horizontal pills) ── */
.vr-id-type-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 5px;
}

.vr-id-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 7px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Cairo', sans-serif;
    min-width: 0;
}

    .vr-id-tab img {
        width: 44px;
        height: 28px;
        object-fit: contain;
    }

    .vr-id-tab span {
        font-size: 10px;
        font-weight: 700;
        color: var(--gray-400);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .vr-id-tab:hover {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .vr-id-tab.active {
        background: #fff;
        box-shadow: 0 2px 6px rgba(10,99,163,0.15);
        border-bottom: 2.5px solid var(--primary);
    }

        .vr-id-tab.active span {
            color: var(--primary);
        }

/* ── Scan panel: left actions + right previews ── */
.vr-scan-panel {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    margin-bottom: 10px;
    align-items: start;
}

.vr-scan-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vr-scan-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 8px;
    border: 1.5px solid var(--primary);
    border-radius: 7px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}

    .vr-scan-btn:hover {
        background: var(--primary);
        color: #fff;
    }

/* Upload mini button */
.vr-upload-mini {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border: 1.5px dashed var(--gray-200);
    border-radius: 7px;
    background: var(--gray-50);
    cursor: pointer;
    font-size: 11px;
    color: var(--gray-600);
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    transition: border-color 0.2s;
    margin-top: 2px;
}

    .vr-upload-mini:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

/* ── Preview boxes ── */
.vr-scan-previews {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* NationalID: big front + small back in corner */
.vr-preview-grid {
    position: relative;
    width: 100%;
}

.vr-preview-grid--single {
    /* passport / license - single full box */
}

/* Front image - full size */
.vr-preview-box-front {
    border: 1.5px dashed var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    aspect-ratio: 85.6 / 54;
    position: relative;
}

    .vr-preview-box-front:hover {
        border-color: var(--primary);
        border-style: solid;
    }

    .vr-preview-box-front img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill;
        display: block;
        position: absolute;
        inset: 0;
        max-width: none !important;
    }

/* Back image - small thumbnail floating bottom-left OVER the front */
.vr-preview-box-back {
    position: absolute;
    bottom: 8px;
    left: 8px;
    width: 120px;
    aspect-ratio: 85.6 / 54;
    border: 2.5px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    transition: all 0.2s;
    z-index: 3;
    /* مهم لـ position:absolute على الـ img جوه */
    isolation: isolate;
}

    .vr-preview-box-back:hover {
        transform: scale(1.08);
        box-shadow: 0 5px 16px rgba(0,0,0,0.35);
        border-color: var(--primary);
    }

    .vr-preview-box-back img {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill;
        display: block;
        max-width: none !important;
        position: absolute !important;
        inset: 0;
    }

/* Single box (passport/license) */
.vr-preview-box {
    border: 1.5px dashed var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    aspect-ratio: 16 / 7;
    position: relative;
    min-height: 130px;
    width: 100%;
}

    .vr-preview-box:hover {
        border-color: var(--primary);
        border-style: solid;
        background: var(--primary-light);
    }

    .vr-preview-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        position: absolute;
        inset: 0;
        background: #f8f9fa;
    }

.vr-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    width: 100%;
    height: 100%;
}

    .vr-preview-empty i {
        font-size: 22px;
        color: var(--gray-200);
    }

    .vr-preview-empty span {
        font-size: 10px;
        font-weight: 600;
        text-align: center;
        color: var(--gray-400);
        line-height: 1.3;
    }

/* ── Form grid ── */
.vr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 4px;
}

.vr-form-full {
    grid-column: 1 / -1;
}

/* ══════════════════════════════
   RESPONSIVE – MOBILE
══════════════════════════════ */
@media (max-width: 767px) {

    .section_analytics {
        height: 100dvh;
    }

    /* topnav compact */
    .vr-topnav {
        padding: 0 10px;
        height: 48px;
    }

    /* topnav compact on mobile */
    .vr-topnav {
        height: auto;
        min-height: 48px;
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 6px;
    }

    .vr-nav-tabs {
        gap: 3px;
    }

    .vr-nav-tab {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
    }

        .vr-nav-tab .nav-text-full {
            display: none;
        }

        .vr-nav-tab .nav-text-short {
            display: inline;
        }

    .vr-delete-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

        .vr-delete-btn .nav-text-full {
            display: none;
        }

        .vr-delete-btn .nav-text-short {
            display: inline;
        }

    /* ID type nav: smaller on mobile, no text */
    .vr-idtype-nav {
        padding: 3px;
        gap: 2px;
        order: 3; /* goes to second row on mobile */
        width: 100%;
        justify-content: center;
    }

    .vr-idtype-btn {
        flex: 1;
        min-width: 0;
        padding: 4px 6px;
    }

        .vr-idtype-btn img {
            width: 32px;
            height: 20px;
        }

        .vr-idtype-btn span {
            font-size: 9px;
        }

    /* sidebar hidden on mobile */
    .vr-sidebar {
        display: none;
    }

    /* vr-content on mobile: flex column, fill remaining height */
    .vr-content {
        flex: 1;
        overflow: hidden;
        flex-direction: column;
        min-height: 0;
    }

    /* hide sidebar completely */
    .vr-sidebar {
        display: none !important;
    }

    /* steps area: fill all remaining space */
    .vr-steps-area {
        flex-direction: row;
        padding: 0;
        gap: 0;
        flex: 1;
        width: 100%;
        min-height: 0;
        overflow: hidden;
    }

    /* steps: hidden by default, shown by JS */
    .vr-step {
        display: none;
        border-radius: 0;
        border: none;
        border-top: none;
        box-shadow: none;
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
    }

        .vr-step.mobile-active {
            display: flex !important;
            flex-direction: column;
        }

        /* override ALL desktop step widths on mobile */
        .vr-step:nth-child(1),
        .vr-step:nth-child(2),
        .vr-step:nth-child(3) {
            flex: none !important;
            width: 100% !important;
            min-width: 100% !important;
        }

    /* stats grid 2 cols on mobile */
    .vr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* locations grid 2 cols */
    .vr-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* id types grid 2 cols */
    .vr-id-types {
        grid-template-columns: repeat(2, 1fr);
    }

    /* action buttons full width */
    .vr-action-btns {
        padding: 8px;
    }
}

@media (min-width: 768px) {
    /* On desktop: all steps visible, mobile tabs hidden */
    .vr-mobile-tabs {
        display: none !important;
    }

    .vr-step {
        display: flex !important;
    }

        .vr-step:nth-child(1) {
            flex: 2.2;
            width: auto;
            min-width: 0;
        }

        .vr-step:nth-child(2) {
            flex: 2;
            width: auto;
            min-width: 0;
        }

        .vr-step:nth-child(3) {
            flex: 1.5;
            width: auto;
            min-width: 0;
        }
}