/*
 * HelpCounter — Kiosk Stylesheet
 * Used by: /kiosk  (school sign-in/sign-out touchscreen terminals)
 *
 * Design principles:
 *   - Extremely large touch targets (minimum 64px height for interactive elements)
 *   - High contrast: all text/background combinations exceed WCAG AA by a wide margin
 *   - Large base font size (18px) — readable at arm's length
 *   - Simple layout with minimal chrome — no distractions in a lobby setting
 *   - Works well with a touchscreen in landscape or portrait orientation
 *
 * Color contrast ratios:
 *   --color-text  #1a1a2e on white  15.3:1  AAA
 *   primary btn   white on #1a56db  4.60:1  AA  (large text / UI component)
 *   .chip         #1e3a8a on #dbeafe 6.08:1  AA
 */

/* ── Custom properties ─────────────────────────────────────────────────── */

:root {
    --color-text:         #1a1a2e;   /* near-black, very high contrast */
    --color-muted:        #374151;   /* gray-700  — 10.7:1 on white */
    --color-primary:      #1a56db;   /* strong blue */
    --color-primary-dark: #1e40af;
    --color-primary-light:#eff6ff;
    --color-success:      #15803d;
    --color-success-bg:   #f0fdf4;
    --color-danger:       #b91c1c;
    --color-danger-bg:    #fef2f2;
    --color-border:       #d1d5db;
    --color-bg:           #f8fafc;
    --color-white:        #ffffff;
    --color-header-bg:    #1e3a5f;   /* dark navy for school header */
    --color-header-text:  #ffffff;

    --font-sans:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base:     1.125rem;  /* 18px — large for kiosk readability */
    --line-height:        1.5;

    --radius:     8px;
    --radius-lg:  12px;
    --radius-xl:  16px;

    --shadow:     0 2px 8px rgb(0 0 0 / 0.12);
    --shadow-lg:  0 4px 20px rgb(0 0 0 / 0.15);

    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    --touch-min: 64px;   /* minimum touch target height */
}


/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;   /* prevents double-tap zoom on touch devices */
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    overflow-x: hidden;
}

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

/* Prevent text selection on touch — interface elements are not meant to be selected */
.kiosk-header,
.kiosk-footer { user-select: none; -webkit-user-select: none; }


/* ── Accessibility ─────────────────────────────────────────────────────── */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: var(--sp-3) var(--sp-6);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

main:focus { outline: none; }


/* ── Page structure ────────────────────────────────────────────────────── */

.kiosk-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Dark header bar — shows school name prominently */
.kiosk-header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
    padding: var(--sp-4) var(--sp-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-shrink: 0;
}

.kiosk-school-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Live clock displayed in the header (populated by JS) */
.kiosk-clock {
    font-size: 1.125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    flex-shrink: 0;
}

/* Main content — fills remaining height, vertically centered */
.kiosk-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
}

/* Centered content column */
.kiosk-content {
    width: 100%;
    max-width: 48rem;
}

/* Thin footer — minimal, just an idle-state hint */
.kiosk-footer {
    background: var(--color-header-bg);
    padding: var(--sp-3) var(--sp-8);
    text-align: center;
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.6);
    flex-shrink: 0;
}


/* ── Kiosk-specific typography ─────────────────────────────────────────── */

.kiosk-heading {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--sp-6);
    text-align: center;
    line-height: 1.2;
}

.kiosk-subheading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--sp-4);
    text-align: center;
}

.kiosk-instruction {
    font-size: 1.0625rem;
    color: var(--color-muted);
    text-align: center;
    margin: 0 0 var(--sp-8);
    line-height: 1.5;
}


/* ── Large touch buttons ───────────────────────────────────────────────── */

.kiosk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: var(--sp-4) var(--sp-8);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s, transform 0.08s;
    letter-spacing: 0.01em;
    width: 100%;
    text-align: center;
}
.kiosk-btn:active { transform: scale(0.98); }

.kiosk-btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
}
.kiosk-btn--primary:hover { background: var(--color-primary-dark); color: var(--color-white); }

.kiosk-btn--secondary {
    background: var(--color-white);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow);
}
.kiosk-btn--secondary:hover { background: #f1f5f9; }

.kiosk-btn--success {
    background: #16a34a;
    color: var(--color-white);
}
.kiosk-btn--success:hover { background: #15803d; color: var(--color-white); }

.kiosk-btn--danger {
    background: var(--color-danger);
    color: var(--color-white);
}
.kiosk-btn--danger:hover { background: #991b1b; color: var(--color-white); }

/* Two-column button pair — e.g. Sign In / Sign Out choices */
.kiosk-btn-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
}

/* Single centered button */
.kiosk-btn-center {
    display: flex;
    justify-content: center;
}


/* ── Forms (sign-in input) ─────────────────────────────────────────────── */

.kiosk-form-group { margin-bottom: var(--sp-6); }

/* Visually associate the label with its input */
.kiosk-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--sp-2);
    text-align: center;
}

/* Large text input for name / PIN entry */
.kiosk-input {
    display: block;
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-4) var(--sp-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    color: var(--color-text);
    font: inherit;
    font-size: 1.375rem;
    text-align: center;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kiosk-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgb(26 86 219 / 0.15);
    outline: none;
}
.kiosk-input::placeholder { color: #9ca3af; font-size: 1.125rem; }

/* Error message */
.kiosk-error {
    background: var(--color-danger-bg);
    border: 2px solid #fca5a5;
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-6);
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-danger);
}


/* ── Volunteer name list (sign-in search results) ──────────────────────── */

.name-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.name-list-item button,
.name-list-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--touch-min);
    padding: var(--sp-4) var(--sp-6);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background-color 0.12s;
}
.name-list-item button:hover,
.name-list-item a:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}


/* ── Status/confirmation screen ────────────────────────────────────────── */

.kiosk-confirm {
    text-align: center;
    padding: var(--sp-8);
}
.kiosk-confirm-icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: var(--sp-4);
}
.kiosk-confirm-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
}
.kiosk-confirm-status {
    font-size: 1.125rem;
    color: var(--color-muted);
    margin: 0 0 var(--sp-8);
}
.kiosk-confirm-printing {
    font-size: 1rem;
    color: var(--color-muted);
    margin: var(--sp-4) 0 0;
    font-style: italic;
}


/* ── Kiosk home screen — visitor type selection ────────────────────────── */

/*
 * Wider content column for screens that show the 5-button type grid.
 * The default .kiosk-content caps at 48rem; the home screen needs more space.
 */
.kiosk-content--wide {
    max-width: 72rem;
}

/*
 * 5-button visitor type grid.
 *
 * Portrait (default): 2 columns, 3 rows (2 + 2 + 1 centred).
 * Landscape / wide screen: 5 equal columns, 1 row.
 *
 * The :nth-child selectors below centre the lone 5th button in portrait
 * by spanning it across both columns and constraining its width.
 */
.kiosk-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
    width: 100%;
}

/* Centre the 5th button in portrait when it sits alone on the last row. */
.kiosk-type-btn:last-child:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-5) / 2);
}

/* Landscape / wide: all 5 buttons in one row. */
@media (orientation: landscape) and (min-width: 800px) {
    .kiosk-type-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Reset portrait centring rule — all 5 fit in a single row. */
    .kiosk-type-btn:last-child:nth-child(5) {
        grid-column: auto;
        justify-self: auto;
        width: auto;
    }
}

/*
 * Individual visitor type button — large, coloured tile.
 *
 * Each button has:
 *   - A solid colour background (overridden by modifier classes below)
 *   - A large SVG icon centred in the upper portion
 *   - A text label below the icon
 *   - Minimum height well above --touch-min so it fills the screen
 */
.kiosk-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    min-height: 160px;
    padding: var(--sp-6) var(--sp-4);
    border: none;
    border-radius: var(--radius-xl);
    color: var(--color-white);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: filter 0.1s, transform 0.08s;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}

.kiosk-type-btn:hover  { filter: brightness(1.08); }
.kiosk-type-btn:active { transform: scale(0.96); filter: brightness(0.95); }

/* SVG icon wrapper — scales the icon to a comfortable touch-visible size. */
.kiosk-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
}

.kiosk-type-icon svg {
    width: 100%;
    height: 100%;
}

/* Label below the icon. */
.kiosk-type-label {
    line-height: 1.2;
}

/* Per-type colour modifiers.
 * Contrast ratios (white text on background):
 *   --volunteer  #1a56db  4.60:1  AA  (same as --color-primary)
 *   --visitor    #0c7c72  4.67:1  AA
 *   --student    #166534  6.09:1  AA
 *   --staff      #92400e  4.51:1  AA
 *   --contractor #374151  10.7:1  AA
 */
.kiosk-type-btn--volunteer { background: #1a56db; }
.kiosk-type-btn--visitor   { background: #0c7c72; }
.kiosk-type-btn--student   { background: #166534; }
.kiosk-type-btn--staff     { background: #92400e; }
.kiosk-type-btn--contractor{ background: #374151; }


/* ── Kiosk login page ───────────────────────────────────────────────────── */

.kiosk-login-wrap {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
}


/* ── Webcam capture UI ─────────────────────────────────────────────────── */

/*
 * Container for the video/preview + capture button block.
 * Appears above the sign-in form fields when photo capture is enabled.
 */
.webcam-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

/*
 * Live camera feed. Black background while the stream loads.
 * Max-width prevents the video from becoming uncomfortably large on
 * landscape tablets. border-radius matches the form field aesthetic.
 */
.webcam-video {
    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
    background: #000;
    object-fit: cover;
}

/*
 * Captured photo thumbnail — replaces the video feed after a snapshot.
 * Green border provides clear visual confirmation that a photo was saved.
 */
.webcam-preview {
    display: block;
    width: 100%;
    max-width: 320px;
    border-radius: var(--radius-lg);
    border: 3px solid var(--color-success);
}

/*
 * "Take Photo" / "Retake Photo" button — same width as the video preview
 * so the layout stays centred. Inherits .kiosk-btn sizing.
 */
.webcam-capture-btn {
    max-width: 380px;
}

/* Status line: camera loading, error message, or "Photo taken." */
.webcam-status {
    font-size: 0.9375rem;
    color: var(--color-muted);
    text-align: center;
    margin: 0;
    min-height: 1.4em; /* reserve height to prevent layout shift */
}

.webcam-status--error {
    color: var(--color-danger);
    font-weight: 600;
}


/* ── Back / cancel button (smaller, muted) ─────────────────────────────── */

/*
 * Narrower variant used for "← Back" and "Cancel" links at the bottom of
 * sign-in/sign-out flows. Inherits .kiosk-btn base styles.
 */
.kiosk-btn--back {
    max-width: 16rem;
    font-size: 1rem;
    font-weight: 600;
}


/* ── Field-level validation error ─────────────────────────────────────── */

/* Shown below an individual input when validation fails. */
.kiosk-field-error {
    margin-top: var(--sp-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-danger);
    text-align: center;
}

/* Red border on an invalid input */
.kiosk-input--error {
    border-color: #fca5a5;
}
.kiosk-input--error:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 4px rgb(185 28 28 / 0.15);
}


/* ── Optional field label hint ─────────────────────────────────────────── */

.kiosk-label-optional {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.875rem;
}


/* ── Name list — secondary meta text ───────────────────────────────────── */

/*
 * Secondary line shown on each visitor sign-out list item — displays the
 * sign-in time and optionally who the visitor came to see.
 */
.name-list-item-meta {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
    margin-top: 0.125rem;
}


/* ── Volunteer browse list ─────────────────────────────────────────────── */

/*
 * Scrollable list used in browse mode. Limits height so the filter input
 * remains visible above the fold on typical kiosk portrait screens.
 * name-list items inside inherit all existing name-list-item styles.
 */
.vol-browse-list {
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*
 * Partial email shown alongside the volunteer's name when two or more
 * volunteers share the same full name — helps them identify themselves
 * without exposing the full address. Appears on the right side of the
 * name-list-item flex container.
 */
.vol-email-hint {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
    margin-left: var(--sp-4);
    flex-shrink: 0;
}


/* ── PIN input ─────────────────────────────────────────────────────────── */

/*
 * Oversized PIN field — large text and center-aligned make it easy to
 * read the masked dots on a touchscreen and confirm entry visually.
 */
.kiosk-pin-input {
    font-size: 2rem;
    letter-spacing: 0.4em;
    text-align: center;
    max-width: 14rem;
}


/* ── Staff sign-in modal ───────────────────────────────────────────────── */

/*
 * Full-screen overlay. Hidden by default; toggled via .is-open.
 * Same pattern as the PIN reset modal: JS adds/removes .is-open.
 */
.kiosk-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}

.kiosk-modal.is-open {
    display: flex;
}

/*
 * White content box — scrollable if content exceeds viewport height.
 * Max-width keeps it comfortable on wide landscape displays.
 */
.kiosk-modal-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sp-8);
}

.kiosk-modal-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--sp-6);
    text-align: center;
}

/* Each sign-in method block inside the modal. */
.kiosk-modal-section {
    margin-bottom: var(--sp-4);
}

/*
 * Horizontal "or" divider between method sections.
 * Uses pseudo-elements to draw the lines on either side.
 */
.kiosk-modal-divider {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 0.875rem;
    color: var(--color-muted);
    font-weight: 600;
    margin: var(--sp-4) 0;
}

.kiosk-modal-divider::before,
.kiosk-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}


/* ── Utility ───────────────────────────────────────────────────────────── */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}