/**
 * Event Registration Scanner - Frontend Styles
 * Mobile-first responsive design
 */

/* CSS Variables */
:root {
    --ers-primary: #2271b1;
    --ers-primary-dark: #135e96;
    --ers-success: #00a32a;
    --ers-success-light: #d6f4d8;
    --ers-error: #d63638;
    --ers-error-light: #fcf0f1;
    --ers-warning: #dba617;
    --ers-gray-light: #f6f7f7;
    --ers-gray: #dcdcde;
    --ers-gray-dark: #646970;
    --ers-text: #1d2327;
    --ers-border-radius: 8px;
    --ers-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Reset and Base */
.ers-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    color: var(--ers-text);
    background: #fff;
    min-height: 100vh;
    /* Keep the scanner UI in light mode so device dark mode / force-dark
       does not invert colors or darken the camera/result surfaces. */
    color-scheme: light;
}

.ers-container * {
    box-sizing: border-box;
}

/* Header */
.ers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ers-gray);
}

.ers-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.ers-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.875rem;
}

.ers-logout-link {
    color: var(--ers-error);
    text-decoration: none;
    font-size: 0.75rem;
}

/* Event Info */
.ers-event-info {
    background: var(--ers-gray-light);
    padding: 12px 16px;
    border-radius: var(--ers-border-radius);
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
}

.ers-event-info .ers-loading {
    color: var(--ers-gray-dark);
}

/* Stats Row */
.ers-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.ers-stat {
    flex: 1;
    background: var(--ers-gray-light);
    padding: 12px 8px;
    border-radius: var(--ers-border-radius);
    text-align: center;
}

.ers-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.ers-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ers-gray-dark);
    margin-top: 4px;
}

.ers-stat.ers-stat-success .ers-stat-value {
    color: var(--ers-success);
}

.ers-stat.ers-stat-error .ers-stat-value {
    color: var(--ers-error);
}

/* Scanner View */
.ers-scanner-wrapper {
    text-align: center;
}

.ers-scanner-view {
    position: relative;
    width: 100%;
    max-width: 350px;
    margin: 0 auto 20px;
    background: #000;
    border-radius: var(--ers-border-radius);
    overflow: hidden;
    display: none;
}

/* Force a perfect 1:1 square on ALL devices, including iOS Safari, using the
   intrinsic-ratio (padding) technique. This is more reliable than aspect-ratio,
   which iOS Safari collapses for absolutely/auto-sized video elements,
   producing a rectangular (unscannable) viewport on iPhone. */
.ers-scanner-view::before {
    content: "";
    display: block;
    padding-top: 100%; /* height == width => square */
}

.ers-scanner-view.active {
    display: block;
}

/* The html5-qrcode container and its injected video fill the square box,
   overriding the library's inline width/height. */
#ers-qr-reader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

#ers-qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: var(--ers-border-radius);
}

/* html5-qrcode overrides */
#ers-qr-reader img[alt="Info icon"],
#ers-qr-reader__scan_region > br,
#ers-qr-reader__dashboard_section_swaplink {
    display: none !important;
}

#ers-qr-reader__scan_region {
    border: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Force the scan region video to fill and cover the square on all devices */
#ers-qr-reader__scan_region video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* QR scan box (the square scanning area) */
#ers-qr-reader__scan_region svg {
    width: 250px !important;
    height: 250px !important;
}

/* Buttons */
.ers-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--ers-border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-decoration: none;
}

.ers-button:active {
    transform: scale(0.98);
}

.ers-button-primary {
    background: var(--ers-primary);
    color: #fff;
}

.ers-button-primary:hover {
    background: var(--ers-primary-dark);
}

.ers-button-secondary {
    background: var(--ers-gray-light);
    color: var(--ers-text);
    border: 1px solid var(--ers-gray);
}

.ers-button-secondary:hover {
    background: var(--ers-gray);
}

.ers-button-large {
    width: 100%;
    padding: 16px 24px;
    font-size: 1.125rem;
}

.ers-button .dashicons {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
}

/* Manual Entry */
.ers-manual-entry {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--ers-gray);
}

.ers-manual-entry p {
    margin: 0 0 12px 0;
    color: var(--ers-gray-dark);
}

.ers-manual-form {
    display: flex;
    gap: 8px;
}

.ers-manual-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--ers-gray);
    border-radius: var(--ers-border-radius);
    font-size: 1rem;
}

.ers-manual-form input:focus {
    outline: none;
    border-color: var(--ers-primary);
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

/* Result Display */
.ers-result {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    /* flex-start + margin:auto on the child keeps the card centered when it
       fits, but lets the overlay scroll when the content is taller than the
       viewport, so the "Scan Another" button is always reachable. */
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ers-result-content {
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    max-width: 400px;
    width: 100%;
    margin: auto; /* vertical centering within the scrollable overlay */
    text-align: center;
    box-shadow: var(--ers-shadow);
    animation: ers-slide-up 0.3s ease;
}

@keyframes ers-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ers-result-icon {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 8px;
}

.ers-result.success .ers-result-icon::before {
    content: "✓";
    color: var(--ers-success);
}

.ers-result.error .ers-result-icon::before {
    content: "✕";
    color: var(--ers-error);
}

.ers-result-title {
    margin: 0 0 6px 0;
    font-size: 1.15rem;
}

.ers-result.success .ers-result-title {
    color: var(--ers-success);
}

.ers-result.error .ers-result-title {
    color: var(--ers-error);
}

.ers-result-message {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--ers-gray-dark);
}

/* Visitor Info */
.ers-visitor-info {
    background: var(--ers-gray-light);
    border-radius: var(--ers-border-radius);
    padding: 8px 12px;
    margin-bottom: 12px;
    text-align: left;
}

.ers-visitor-info-item {
    padding: 5px 0;
    border-bottom: 1px solid var(--ers-gray);
}

.ers-visitor-info-item:last-child {
    border-bottom: none;
}

.ers-visitor-info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ers-gray-dark);
    margin-bottom: 2px;
}

.ers-visitor-info-value {
    display: block;
    font-weight: 500;
}

.ers-visit-count {
    margin-top: 0;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--ers-success-light);
    border-radius: var(--ers-border-radius);
    color: var(--ers-success);
    font-weight: 600;
}

/* Login Form */
.ers-login-wrapper {
    text-align: center;
    padding-top: 60px;
}

.ers-logo {
    margin-bottom: 24px;
}

.ers-logo .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--ers-primary);
}

.ers-login-wrapper h2 {
    margin: 0 0 8px 0;
}

.ers-login-wrapper p {
    color: var(--ers-gray-dark);
    margin-bottom: 24px;
}

#ers-login-form {
    text-align: left;
}

#ers-login-form p {
    margin-bottom: 16px;
}

#ers-login-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

#ers-login-form input[type="text"],
#ers-login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ers-gray);
    border-radius: var(--ers-border-radius);
    font-size: 1rem;
}

#ers-login-form input[type="submit"] {
    width: 100%;
    padding: 14px;
    background: var(--ers-primary);
    color: #fff;
    border: none;
    border-radius: var(--ers-border-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

#ers-login-form input[type="submit"]:hover {
    background: var(--ers-primary-dark);
}

/* Message Box */
.ers-message {
    text-align: center;
    padding: 40px 24px;
}

.ers-message .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

.ers-message-error .dashicons {
    color: var(--ers-error);
}

.ers-message h2 {
    margin: 0 0 8px 0;
}

.ers-message p {
    color: var(--ers-gray-dark);
    margin-bottom: 24px;
}

/* Processing State */
.ers-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ers-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ers-gray);
    border-top-color: var(--ers-primary);
    border-radius: 50%;
    animation: ers-spin 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 480px) {
    .ers-container {
        padding: 12px;
    }

    .ers-header h1 {
        font-size: 1.25rem;
    }

    .ers-result-content {
        padding: 24px 16px;
    }
}