/* VMS custom styles — Tailwind is loaded via CDN in each view */

/* Kiosk wizard step transitions */
.step { display: none; }
.step.active { display: block; }

/* Touch-friendly button base */
.btn-kiosk {
    min-height: 64px;
    font-size: 1.25rem;
    border-radius: 0.75rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Visitor type selector grid */
.visitor-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

/* Camera preview */
#camera-preview, #photo-canvas {
    max-width: 100%;
    border-radius: 0.5rem;
}

/* Countdown overlay */
#countdown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    background: rgba(0,0,0,0.3);
    border-radius: 0.5rem;
    pointer-events: none;
}

/* Returning visitor suggestion dropdown */
#visitor-suggestions {
    position: absolute;
    z-index: 50;
    width: 100%;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    max-height: 260px;
    overflow-y: auto;
}
.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.suggestion-item:hover { background: #f9fafb; }

/* Security terminal panels */
.panel { overflow-y: auto; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }

/* Status badges */
.badge-waiting   { background: #fef3c7; color: #92400e; }
.badge-onsite    { background: #d1fae5; color: #065f46; }
.badge-expected  { background: #dcfce7; color: #166534; }
.badge-flagged   { background: #fee2e2; color: #991b1b; animation: pulse-red 1.5s infinite; }
.badge-warning   { background: #fff7ed; color: #9a3412; }

@keyframes pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Row highlights */
.row-overdue  { background: #fffbeb !important; }
.row-expiring { background: #fff7ed !important; }
.row-flagged  { background: #fef2f2 !important; border-left: 4px solid #ef4444; }

/* Muster overlay */
#muster-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1e1b4b;
    display: none;
    flex-direction: column;
}
#muster-overlay.active { display: flex; }

.muster-row { cursor: pointer; border-radius: 0.5rem; transition: background 0.15s; }
.muster-row:hover { background: rgba(255,255,255,0.05); }
.muster-row.accounted { opacity: 0.5; }
.muster-row.accounted .muster-name { text-decoration: line-through; }

/* Photo modal */
#photo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
}
#photo-modal.active { display: flex; }

/* Dark mode — visitor type and status badges */
.dark-mode .bg-blue-100     { background: #1e3a5f !important; }
.dark-mode .text-blue-800   { color: #93c5fd !important; }
.dark-mode .bg-yellow-100   { background: #3d2007 !important; }
.dark-mode .text-yellow-800 { color: #fde68a !important; }
.dark-mode .bg-green-100    { background: #052e16 !important; }
.dark-mode .text-green-700  { color: #4ade80 !important; }
.dark-mode .text-green-800  { color: #86efac !important; }
.dark-mode .bg-purple-100   { background: #2e1065 !important; }
.dark-mode .text-purple-800 { color: #c084fc !important; }
.dark-mode .bg-orange-200   { background: #431407 !important; }
.dark-mode .text-orange-800 { color: #fdba74 !important; }
.dark-mode .badge-waiting   { background: #451a03; color: #fde68a; }
.dark-mode .badge-expected  { background: #052e16; color: #86efac; }

/* Dark mode — status row highlights */
.dark-mode .row-overdue  { background: #1c1917 !important; }
.dark-mode .row-expiring { background: #1c1007 !important; }
.dark-mode .row-flagged  { background: #1a0a0a !important; border-left: 4px solid #ef4444; }