/* ========================================================================
   IDmatic-web — Material Design 3 stylesheet
   Single offline file; no external fonts or CDN.

   Sections
     1. Design tokens
     2. Base reset & typography
     3. Layout (header, page, containers)
     4. Components
        4.1 Buttons
        4.2 Form fields
        4.3 Flash messages
        4.4 Cards / details blocks
        4.5 Lists
        4.6 Tables
        4.7 Pagination
        4.8 Status chips & status colors
     5. Pages
        5.1 Login
        5.2 Visitors / passes (split layout)
        5.3 Visitor details
        5.4 Pass print
        5.5 Pass status list
        5.6 Admin
        5.7 Requests
        5.8 Meeting events
        5.9 Meeting events — device
        5.10 Meeting events — device add
        5.11 Meeting events — invite list
        5.12 Keygen / instructions
     6. Responsive
     7. Print
     8. Kiosk page (scoped to body.kiosk-body)
   ======================================================================== */


/* ---------- 1. Design tokens ---------------------------------------------- */
:root {
    /* Color — primary (blue) */
    --md-primary:              #1976d2;
    --md-primary-hover:        #1565c0;
    --md-on-primary:           #ffffff;
    --md-primary-container:    #bbdefb;
    --md-on-primary-container: #0d47a1;

    /* Color — secondary slate (header / dark accents) */
    --md-header:               #2c3e50;
    --md-header-hover:         #1a252f;
    --md-on-header:            #ffffff;

    /* Color — tertiary (purple) */
    --md-tertiary:             #7b1fa2;
    --md-tertiary-hover:       #6a1b9a;
    --md-on-tertiary:          #ffffff;
    --md-tertiary-container:   #e1bee7;

    /* Color — success (green) */
    --md-success:              #2e7d32;
    --md-success-hover:        #1b5e20;
    --md-on-success:           #ffffff;
    --md-success-container:    #c8e6c9;
    --md-on-success-container: #1b5e20;

    /* Color — error (red) */
    --md-error:                #c62828;
    --md-error-hover:          #b71c1c;
    --md-on-error:             #ffffff;
    --md-error-container:      #ffcdd2;
    --md-on-error-container:   #b71c1c;

    /* Color — warning (orange) */
    --md-warning:              #ef6c00;
    --md-warning-hover:        #e65100;
    --md-on-warning:           #ffffff;
    --md-warning-container:    #ffe0b2;
    --md-on-warning-container: #e65100;

    /* Color — neutral (gray) */
    --md-neutral:              #607d8b;
    --md-neutral-hover:        #455a64;
    --md-on-neutral:           #ffffff;
    --md-neutral-container:    #cfd8dc;

    /* Surface */
    --md-page-bg:              #dceafa;
    --md-detail-bg:            #a6caf0;
    --md-surface:              #ffffff;
    --md-surface-container:    #f5f7fa;
    --md-surface-container-high:#eef1f6;
    --md-surface-tint:         #f9f9f9;
    --md-selection:            #d6e4ff;

    /* On-surface / outline */
    --md-on-surface:           #1f2937;
    --md-on-surface-variant:   #4b5563;
    --md-on-surface-muted:     #6b7280;
    --md-outline:              #9e9e9e;
    --md-outline-variant:      #e0e0e0;
    --md-disabled-bg:          #e0e0e0;
    --md-disabled-fg:          #9e9e9e;

    /* Information / instructions tint */
    --md-info-bg:              #e3f2fd;
    --md-info-border:          #bbdefb;
    --md-info-fg:              #0d47a1;

    /* Shape */
    --md-shape-xs:             4px;
    --md-shape-sm:             8px;
    --md-shape-md:             12px;
    --md-shape-lg:             16px;
    --md-shape-xl:             20px;
    --md-shape-pill:           9999px;

    /* Elevation */
    --md-elev-1: 0 1px 2px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --md-elev-2: 0 2px 4px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --md-elev-3: 0 4px 8px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --md-elev-4: 0 8px 16px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

    /* Motion */
    --md-easing:               cubic-bezier(0.2, 0, 0, 1);
    --md-duration-short:       150ms;
    --md-duration-medium:      250ms;
}


/* ---------- 2. Base reset & typography ------------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--md-page-bg);
    color: var(--md-on-surface);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--md-header);
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 16px;
}

h1 { font-size: 28px; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; font-weight: 600; }

p { margin-bottom: 8px; }

a {
    color: var(--md-primary);
    text-decoration: none;
    transition: color var(--md-duration-short) var(--md-easing);
}
a:hover { color: var(--md-primary-hover); }
a:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }


/* ---------- 3. Layout ----------------------------------------------------- */
header {
    background-color: var(--md-header);
    color: var(--md-on-header);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: var(--md-elev-2);
}

.user-info {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
}

.user-info .app-name {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    margin-right: auto;
}

.user-info span { font-size: 14px; }


/* ---------- 4. Components ------------------------------------------------- */

/* 4.1 Buttons — M3 filled / tonal / outlined / text variants --------------
   Base shape applies to <button>, <input type=submit>, and every named
   button class (many of which are used on <a> tags in this app — anchors
   need the explicit shape since they have no inherent button styling).   */
button,
.btn,
input[type="submit"],
.logout-btn,
.cancel-btn,
.clear-btn,
.add-btn,
.save-btn,
.edit-btn,
.delete-btn,
.status-btn,
.update-btn,
.go-btn,
.change-password-btn,
.add-pass-btn,
.add-visitor-btn,
.delete-visitor-btn,
.request-approve-btn,
.request-reject-btn,
.request-add-btn,
.request-add-as-btn,
.request-unapprove-btn,
.request-delete-btn,
.request-edit-btn,
.invite-all-btn,
.pass-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border: none;
    border-radius: var(--md-shape-pill);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--md-duration-short) var(--md-easing),
        box-shadow var(--md-duration-short) var(--md-easing),
        color var(--md-duration-short) var(--md-easing);
    user-select: none;
    box-sizing: border-box;
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
    background-color: var(--md-primary-hover);
    box-shadow: var(--md-elev-1);
    color: var(--md-on-primary);
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--md-on-surface);
    outline-offset: 2px;
}

button:active,
.btn:active { box-shadow: none; }

button:disabled,
.btn:disabled,
input[type="submit"]:disabled {
    background-color: var(--md-disabled-bg) !important;
    color: var(--md-disabled-fg) !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* Compact button modifier */
.btn-small {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    margin-left: 10px;
}

/* Logout — compact pill on dark header */
.logout-btn {
    background-color: var(--md-error);
    color: var(--md-on-error);
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
}
.logout-btn:hover {
    background-color: var(--md-error-hover);
    color: var(--md-on-error);
}

/* List header & cancel actions — neutral */
.cancel-btn {
    background-color: var(--md-neutral);
    color: var(--md-on-neutral);
}
.cancel-btn:hover { background-color: var(--md-neutral-hover); color: var(--md-on-neutral); }

.clear-btn {
    background-color: var(--md-neutral);
    color: var(--md-on-neutral);
}
.clear-btn:hover { background-color: var(--md-neutral-hover); color: var(--md-on-neutral); }

/* Add / save — success */
.add-btn,
.save-btn,
.request-add-btn,
.request-add-as-btn,
.request-approve-btn,
.add-visitor-btn {
    background-color: var(--md-success);
    color: var(--md-on-success);
}
.add-btn:hover,
.save-btn:hover,
.request-add-btn:hover,
.request-add-as-btn:hover,
.request-approve-btn:hover,
.add-visitor-btn:hover {
    background-color: var(--md-success-hover);
    color: var(--md-on-success);
}

/* Edit / unapprove — warning */
.edit-btn,
.request-edit-btn,
.request-unapprove-btn {
    background-color: var(--md-warning);
    color: var(--md-on-warning);
}
.edit-btn:hover,
.request-edit-btn:hover,
.request-unapprove-btn:hover {
    background-color: var(--md-warning-hover);
    color: var(--md-on-warning);
}

/* Delete / reject — error */
.delete-btn,
.request-delete-btn,
.request-reject-btn,
.delete-visitor-btn {
    background-color: var(--md-error);
    color: var(--md-on-error);
}
.delete-btn:hover,
.request-delete-btn:hover,
.request-reject-btn:hover,
.delete-visitor-btn:hover {
    background-color: var(--md-error-hover);
    color: var(--md-on-error);
}

/* Status / change-password — tertiary purple */
.status-btn,
.change-password-btn {
    background-color: var(--md-tertiary);
    color: var(--md-on-tertiary);
}
.status-btn:hover,
.change-password-btn:hover {
    background-color: var(--md-tertiary-hover);
    color: var(--md-on-tertiary);
}

/* Add-pass — warning */
.add-pass-btn {
    background-color: var(--md-warning);
    color: var(--md-on-warning);
}
.add-pass-btn:hover { background-color: var(--md-warning-hover); color: var(--md-on-warning); }

/* Update / page-jump — primary */
.update-btn,
.go-btn {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}
.update-btn:hover,
.go-btn:hover { background-color: var(--md-primary-hover); }

.go-btn { height: 28px; padding: 0 10px; font-size: 11px; gap: 0; }

/* Fixed-width request-action variants */
.request-approve-btn,
.request-reject-btn,
.request-add-btn,
.request-delete-btn,
.request-edit-btn { width: 120px; }
.request-unapprove-btn { width: 205px; }
.request-add-as-btn   { width: 160px; }

/* Square icon buttons (32×32, e.g., delete-visitor / add-visitor) */
.delete-visitor-btn,
.add-visitor-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    border-radius: var(--md-shape-pill);
}
.delete-visitor-btn { float: right; font-size: 28px; }


/* 4.2 Form fields — M3 outlined inputs ------------------------------------ */
.form-group {
    margin-bottom: 18px;
}

.form-group label,
.invite-field label,
.form-row label,
.form-field-kiosk label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--md-on-surface);
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea,
.invite-field input[type="text"],
.invite-field input[type="email"],
.invite-field input[type="tel"],
.invite-field select,
.passphrase-input {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--md-on-surface);
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    transition:
        border-color var(--md-duration-short) var(--md-easing),
        box-shadow var(--md-duration-short) var(--md-easing);
    box-sizing: border-box;
}

.form-group textarea { height: auto; min-height: 80px; resize: vertical; }

.form-group input:hover,
.form-group select:hover,
.invite-field input:hover,
.invite-field select:hover {
    border-color: var(--md-on-surface-variant);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.invite-field input:focus,
.invite-field select:focus,
.passphrase-input:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

.form-group input::placeholder,
.invite-field input::placeholder { color: var(--md-on-surface-muted); }

/* Outlined "field" wrapper used on invitation pages */
.invite-field { margin-bottom: 16px; }
.invite-field.invite-field-bordered {
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    padding: 14px;
    background-color: var(--md-surface);
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    cursor: pointer;
    color: var(--md-on-surface);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--md-primary);
    cursor: pointer;
}

/* Password reveal helper */
.password-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.password-container input { flex: 1; margin-right: 0; }
.password-toggle {
    height: 44px;
    padding: 0 14px;
    background-color: var(--md-surface-container);
    color: var(--md-on-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    font-size: 16px;
    cursor: pointer;
}
.password-toggle:hover { background-color: var(--md-surface-container-high); }

.user-display {
    padding: 12px 14px;
    background-color: var(--md-surface-container);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    font-weight: 500;
}


/* 4.3 Flash messages — M3 banners ----------------------------------------- */
.flash-messages {
    width: 100%;
    max-width: 800px;
    margin: 12px auto;
}

.flash-message {
    padding: 12px 16px;
    background-color: var(--md-error-container);
    color: var(--md-on-error-container);
    border-left: 4px solid var(--md-error);
    border-radius: var(--md-shape-sm);
    margin-bottom: 8px;
    font-size: 14px;
}

.flash-success {
    background-color: var(--md-success-container);
    color: var(--md-on-success-container);
    border-left-color: var(--md-success);
}


/* 4.4 Cards / details blocks ---------------------------------------------- */
.main-container {
    display: flex;
    max-width: 1700px;
    margin: 20px auto;
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-1);
    overflow: hidden;
}

.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 24px;
    background-color: var(--md-surface);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-1);
}

.form-container-child {
    max-width: 800px;
    margin: 20px auto;
    padding: 24px;
    background-color: var(--md-detail-bg);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-1);
}

.details-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.details-block {
    background-color: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    overflow: hidden;
}

.details-block h3 {
    background-color: var(--md-surface-container);
    color: var(--md-on-surface);
    padding: 12px 16px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--md-outline-variant);
}

.details-block .block-content { padding: 16px; }

.current-photo { margin-bottom: 16px; }
.current-photo img,
.photo-container img {
    max-width: 300px;
    max-height: 300px;
    border-radius: var(--md-shape-md);
    box-shadow: var(--md-elev-1);
}


/* 4.5 Lists --------------------------------------------------------------- */
.list-content {
    padding: 12px;
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 60px;
}

.list-content ul,
.passes-list ul,
.requests-list { list-style: none; margin: 0; padding: 0; }

.list-content li,
.passes-list li {
    margin-bottom: 2px;
    padding: 6px 10px;
    border-radius: var(--md-shape-sm);
    transition: background-color var(--md-duration-short) var(--md-easing);
}

.list-content li:hover,
.passes-list li:hover { background-color: var(--md-surface-tint); }

/* Item-link styling — scoped to <ul> so button-style anchors elsewhere
   in .list-content / .passes-list (e.g. .add-pass-btn) keep their own shape. */
.list-content ul a,
.passes-list ul a {
    display: block;
    color: var(--md-on-surface);
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.list-content ul a.has-passes { font-weight: 600; color: var(--md-on-surface); }
.list-content ul a.has-active-passes { font-weight: 600; color: var(--md-success-hover); }
.list-content ul a.active { color: var(--md-primary); font-weight: 600; }

.passes-list {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--md-outline-variant);
}
.passes-list h3 { font-size: 16px; margin-bottom: 12px; }

.add-pass-btn-container { margin-top: 16px; text-align: center; }


/* 4.6 Tables -------------------------------------------------------------- */
.device-table,
.invite-list-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--md-surface);
    margin-bottom: 20px;
    border-radius: var(--md-shape-md);
    overflow: hidden;
}

.device-table th,
.device-table td,
.invite-list-table th,
.invite-list-table td {
    border-bottom: 1px solid var(--md-outline-variant);
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

.device-table th,
.invite-list-table th {
    background: var(--md-surface-container);
    font-weight: 600;
    color: var(--md-on-surface);
    border-bottom: 1px solid var(--md-outline-variant);
}

.device-table tr:last-child td,
.invite-list-table tr:last-child td { border-bottom: none; }


/* 4.7 Pagination ----------------------------------------------------------
   Compact sizing so the bar fits inside the narrow visitors-list column
   (30% of main-container) without horizontal scroll.                      */
.pagination-fixed {
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: var(--md-surface);
    padding: 10px 6px;
    border-top: 1px solid var(--md-outline-variant);
    width: 100%;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.04);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    row-gap: 4px;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 2px 8px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    color: var(--md-primary);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    transition: background-color var(--md-duration-short) var(--md-easing);
}

.page-link:hover { background-color: var(--md-surface-tint); }

.page-link.active {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
    border-color: var(--md-primary);
}

.page-link.disabled {
    color: var(--md-disabled-fg);
    cursor: not-allowed;
    pointer-events: none;
}

.page-form {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.page-input {
    width: 50px;
    height: 28px;
    padding: 2px 6px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    text-align: center;
    font-size: 12px;
}


/* 4.8 Status chips & status colors ---------------------------------------- */
.status-new      { color: var(--md-primary)  !important; font-weight: 500; }
.status-approved { color: var(--md-success)  !important; font-weight: 500; }
.status-received { color: var(--md-tertiary) !important; font-weight: 500; }
.status-rejected { color: var(--md-error)    !important; font-weight: 500; }
.status-expired  { color: var(--md-warning)  !important; font-weight: 500; }
.status-other    { color: var(--md-neutral)  !important; font-weight: 500; }


/* ---------- 5. Pages ------------------------------------------------------ */

/* 5.1 Login --------------------------------------------------------------- */
.login-container {
    width: 100%;
    max-width: 400px;
    margin: 80px auto;
    padding: 28px;
    background-color: var(--md-detail-bg);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-2);
}

.login-container h1 {
    text-align: center;
    margin-bottom: 24px;
}

.login-container button { width: 100%; }


/* 5.2 Visitors / passes (split layout) ------------------------------------ */
.visitors-list {
    width: 30%;
    border-right: 1px solid var(--md-outline-variant);
    min-height: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--md-surface);
}

.list-header-fixed {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--md-surface);
    overflow: visible;
}

.list-header {
    padding: 14px 16px;
    background-color: var(--md-surface-container);
    border-bottom: 1px solid var(--md-outline-variant);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.list-header .action-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Access (entry/exit) event buttons — orange (warning) */
.access-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px 0;
}
.request-access-btn {
    background-color: var(--md-warning);
    color: var(--md-on-warning);
}
.request-access-btn:hover {
    background-color: var(--md-warning-hover);
    color: var(--md-on-warning);
}

.filter-container {
    padding: 10px 16px;
    background-color: var(--md-surface-container);
    border-bottom: 1px solid var(--md-outline-variant);
    overflow: visible;
    position: relative;
    z-index: 10;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-form input[type="text"] {
    flex: 1;
    min-width: 120px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background-color: var(--md-surface);
}
.filter-form input[type="text"]:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}


/* 5.3 Visitor details ----------------------------------------------------- */
.visitor-details {
    width: 70%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--md-detail-bg);
}

.placeholder-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--md-on-surface-muted);
    font-style: italic;
}

.details-content { display: flex; flex-wrap: wrap; }

.photo-container {
    width: 300px;
    margin-right: 30px;
    margin-bottom: 16px;
}

.details-info { flex: 1; min-width: 300px; }

.info-row {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--md-outline-variant);
    padding-bottom: 6px;
}

.info-label {
    font-weight: 600;
    display: inline-block;
    width: 250px;
    color: var(--md-on-surface);
}

/* Read-only by default (rendered as <span> in detail views) — plain text */
.info-value {
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    color: var(--md-on-surface);
}

/* Form-element variants — outlined input look for editable info fields */
input.info-value,
select.info-value,
textarea.info-value {
    height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background-color: var(--md-surface);
    transition: border-color var(--md-duration-short) var(--md-easing),
                box-shadow var(--md-duration-short) var(--md-easing);
}
textarea.info-value { height: auto; min-height: 80px; resize: vertical; }
input.info-value:hover,
select.info-value:hover,
textarea.info-value:hover { border-color: var(--md-on-surface-variant); }
input.info-value:focus,
select.info-value:focus,
textarea.info-value:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

.action-buttons {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.add-visitor-container {
    text-align: right;
    margin-bottom: 12px;
    margin-top: 12px;
    margin-right: 12px;
}

.visitor-block h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* 5.4 Pass print (view_pass.html) ----------------------------------------- */
.pass-preview {
    width: 20cm;
    height: 20cm;
    margin: 0 auto;
    padding: 0.5cm;
    background-color: var(--md-surface);
    box-shadow: var(--md-elev-2);
    position: relative;
}

.pass-title {
    text-align: left;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--md-on-surface);
}

.pass-info {
    text-align: left;
    margin-bottom: 12px;
    font-size: 18px;
}

.pass-qr { text-align: left; margin: 24px 0; }
.pass-qr img { width: 400px; height: 400px; }

.pass-buttons { text-align: center; margin-top: 32px; }

.pass-button {
    height: 48px;
    padding: 0 24px;
    margin: 0 10px;
    background-color: var(--md-success);
    color: var(--md-on-success);
    font-size: 15px;
}
.pass-button:hover { background-color: var(--md-success-hover); color: var(--md-on-success); }


/* 5.5 Pass status list (change_pass_status.html) -------------------------- */
.status-list { margin: 20px 0; }

.status-item {
    display: block;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-radius: var(--md-shape-sm);
    color: var(--md-on-surface);
}
.status-item:hover:not(.active) { background-color: var(--md-surface-tint); }
.status-item.active {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}


/* 5.6 Admin --------------------------------------------------------------- */
.admin-users-list {
    width: 30%;
    border-right: 1px solid var(--md-outline-variant);
    min-height: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--md-surface);
}

.admin-permissions {
    width: 70%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--md-detail-bg);
}

.admin-actions {
    padding: 12px 16px;
    background-color: var(--md-surface-container);
    border-bottom: 1px solid var(--md-outline-variant);
}

.admin-action-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.admin-action-row:last-child { margin-bottom: 0; }

.permissions-header { margin-bottom: 16px; }

.permissions-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 16px;
}

.permission-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 10px 12px;
    background-color: var(--md-surface);
    border-radius: var(--md-shape-sm);
    border: 1px solid var(--md-outline-variant);
    transition: background-color var(--md-duration-short) var(--md-easing);
}
.permission-item:hover { background-color: var(--md-surface-tint); }

.permission-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}

.permission-item label {
    cursor: pointer;
    flex: 1;
    color: var(--md-on-surface);
}

.permissions-actions { text-align: center; }

.user-item {
    line-height: 1.4;
    padding: 12px 16px;
    border-radius: var(--md-shape-sm);
    margin: 2px 6px;
    cursor: pointer;
    transition: background-color var(--md-duration-short) var(--md-easing);
}

.user-item.active {
    background-color: var(--md-primary);
    color: var(--md-on-primary) !important;
    font-weight: 600;
}
.user-item.active:hover {
    background-color: var(--md-primary-hover);
    color: var(--md-on-primary) !important;
}


/* 5.7 Requests ------------------------------------------------------------ */
.requests-page .main-container {
    max-width: none;
    width: 95%;
    height: auto;
    min-height: auto;
    margin: 16px auto;
}
.requests-page .visitors-list {
    width: 50%;
    max-height: none;
    min-height: auto;
    height: auto;
}
.requests-page .visitor-details {
    width: 50%;
    height: auto;
}
.requests-page .list-content {
    overflow-y: visible;
    max-height: none;
    height: auto;
    padding-bottom: 16px;
}
.requests-page .filter-container {
    max-height: none;
    overflow-y: visible;
}

.requests-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.requests-filter-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.filter-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-field.date-field { grid-column: 1 / -1; }

.filter-field label {
    display: inline-block;
    width: 150px;
    font-weight: 500;
    font-size: 14px;
}

.filter-field input[type="text"],
.filter-field select {
    flex: 1;
    max-width: 200px;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background-color: var(--md-surface);
}
.filter-field input[type="text"]:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

.filter-field input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}

.date-range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.date-range input[type="date"] {
    flex: 1;
    max-width: 160px;
    height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    background-color: var(--md-surface);
}

.request-item {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--md-on-surface);
    border-radius: var(--md-shape-sm);
    margin-bottom: 2px;
    cursor: pointer;
    transition: background-color var(--md-duration-short) var(--md-easing);
    white-space: pre-line !important;
    word-break: break-word;
    hyphens: auto;
}

.request-item:hover { background-color: var(--md-surface-tint); }
.request-item.active {
    background-color: var(--md-selection);
    color: var(--md-on-surface);
    font-weight: 600;
}


/* 5.8 Meeting events — main (meetingevents.html overrides) ---------------- */
.permissions-content span.info-value {
    border: none;
    padding: 0;
    background: transparent;
}
.permissions-content .info-row {
    border-bottom: none;
}


/* meetingevents_add / meetingevents_edit — info-row layout */
.details-block .block-content .info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    border-bottom: none;
    padding-bottom: 0;
}
.details-block .block-content .info-row .info-label {
    width: 280px;
    flex-shrink: 0;
}
.details-block .block-content .info-row .info-value {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}
.details-block .block-content .info-row.info-row-key {
    align-items: flex-start;
}
.details-block .block-content .info-row.info-row-key .key-label-section {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.details-block .block-content .info-row.info-row-key .info-value { flex: 1; }
.details-block .block-content .info-row.info-row-key .btn-small {
    margin-left: 0;
    align-self: flex-start;
}


/* 5.9 Meeting events — device --------------------------------------------- */
.device-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px;
}

.device-header { margin-bottom: 16px; }

.device-event-name {
    color: var(--md-on-surface-variant);
    font-size: 1rem;
    margin-top: 4px;
}

.device-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.device-empty {
    color: var(--md-on-surface-muted);
    font-style: italic;
    padding: 16px;
    text-align: center;
}


/* 5.10 Meeting events — device add ---------------------------------------- */
.device-add-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 0 20px;
}

.device-add-header { margin-bottom: 16px; }

.device-add-event-name {
    color: var(--md-on-surface-variant);
    font-size: 1rem;
    margin-top: 4px;
}

.form-card {
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    padding: 20px;
    margin-bottom: 20px;
}

.form-row { margin-bottom: 16px; }

.form-row input[type="text"] {
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    font-size: 1rem;
    box-sizing: border-box;
    background-color: var(--md-surface);
}
.form-row input[type="text"]:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
}

.zones-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-sm);
    padding: 10px 12px;
    background: var(--md-surface-tint);
}

.zone-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.zone-item input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    accent-color: var(--md-primary);
}

.zones-empty {
    color: var(--md-on-surface-muted);
    font-style: italic;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.qr-block {
    display: none;
    text-align: center;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md);
    padding: 20px;
    margin-bottom: 20px;
}
.qr-block img { max-width: 280px; height: auto; }

.qr-countdown {
    margin-top: 10px;
    font-weight: 600;
    color: var(--md-on-surface);
}

.status-message { margin-top: 12px; font-weight: 600; }
.status-success { color: var(--md-success); }
.status-error   { color: var(--md-error); }


/* 5.11 Meeting events — invite list --------------------------------------- */
.invite-list-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.invite-list {
    width: 70%;
    border-right: 1px solid var(--md-outline-variant);
    min-height: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--md-surface);
}

.invite-list-header { margin-bottom: 20px; }

.upload-area {
    background: var(--md-surface);
    border: 2px dashed var(--md-outline);
    border-radius: var(--md-shape-md);
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
    transition: border-color var(--md-duration-short) var(--md-easing),
                background-color var(--md-duration-short) var(--md-easing);
}
.upload-area:hover {
    border-color: var(--md-primary);
    background: var(--md-surface-container);
}
.upload-area input[type="file"] { margin-top: 10px; }

.format-hint {
    color: var(--md-on-surface-variant);
    font-size: 0.9rem;
    margin-top: 10px;
}
.format-hint code {
    background: var(--md-surface-container);
    padding: 2px 6px;
    border-radius: var(--md-shape-xs);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.invite-list-table tr.row-invalid td { background: var(--md-error-container); }
.invite-list-table tr.row-success td { background: var(--md-success-container); }
.invite-list-table tr.row-error   td { background: var(--md-error-container); }

.invite-list-table .status-cell {
    white-space: nowrap;
    font-weight: 600;
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.invite-all-btn {
    background-color: var(--md-primary);
    color: var(--md-on-primary);
}
.invite-all-btn:hover { background-color: var(--md-primary-hover); color: var(--md-on-primary); }
.invite-all-btn[disabled] {
    background-color: var(--md-disabled-bg);
    color: var(--md-disabled-fg);
    cursor: not-allowed;
}

.summary { margin-bottom: 10px; font-weight: 600; }
.error-text { color: var(--md-error); }


/* 5.12 Keygen / instructions ---------------------------------------------- */
.instructions {
    background-color: var(--md-info-bg);
    border: 1px solid var(--md-info-border);
    border-left: 4px solid var(--md-primary);
    border-radius: var(--md-shape-sm);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.instructions p {
    margin: 0;
    color: var(--md-info-fg);
    font-size: 14px;
    line-height: 1.5;
}

.qr-instruction {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--md-on-surface);
}

.passphrase-section { margin: 20px 0; }
.passphrase-input { margin: 10px 0; }

.qr-container { text-align: center; margin: 24px 0; }
.qr-container img { max-width: 300px; height: auto; }


/* ---------- 6. Responsive ------------------------------------------------- */
@media (max-width: 1600px) {
    .requests-filter-fields { grid-template-columns: 1fr; }
    .filter-field { flex-wrap: wrap; }
    .filter-field label { width: 100%; margin-bottom: 4px; }
    .filter-field input[type="text"],
    .filter-field select { max-width: 100%; }
    .date-range { flex-wrap: wrap; }
    .date-range input[type="date"] { max-width: 100%; width: 100%; margin-bottom: 4px; }
}

@media (max-width: 800px) {
    .main-container { flex-direction: column; }
    .visitors-list,
    .admin-users-list {
        width: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--md-outline-variant);
        max-height: 400px;
    }
    .visitor-details,
    .admin-permissions {
        width: 100%;
        max-width: 100%;
    }
    .requests-page .visitors-list,
    .requests-page .visitor-details { width: 100%; }
    .info-label { width: auto; min-width: 150px; margin-right: 10px; }
    .info-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .info-value { flex: 1; min-width: 200px; }
    .photo-container {
        width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 600px) {
    .page-link { padding: 4px 8px; font-size: 12px; }
    .page-input { width: 48px; }
}


/* ---------- 7. Print ------------------------------------------------------ */
@media print {
    body * { visibility: hidden; }
    .pass-preview, .pass-preview * { visibility: visible; }
    .pass-preview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none;
        padding: 0;
    }
    .pass-buttons { display: none; }
}


/* ========================================================================
   8. Kiosk page — meetingevents_invite.html / _backup.html
   Scoped to body.kiosk-body so it does not affect the main M3 redesign.
   Visual design intentionally preserved from the original inline <style>.
   ======================================================================== */
.kiosk-body {
    --primary-color:    #2563eb;
    --primary-hover:    #1d4ed8;
    --secondary-color:  #f3f4f6;
    --success-color:    #16a34a;
    --warning-color:    #dc2626;
    --text-primary:     #1f2937;
    --text-secondary:   #6b7280;
    --surface:          #ffffff;
    --surface-alt:      #f9fafb;
    --border:           #e5e7eb;
    --shadow-sm:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius-sm:        6px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-xl:        16px;
    --transition-fast:  150ms ease-out;
    --transition-normal:300ms ease-out;

    background-color: var(--surface-alt);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.kiosk-body * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.kiosk-body h1, .kiosk-body h2, .kiosk-body h3, .kiosk-body h4 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: inherit;
}
.kiosk-body h1 { font-size: 2.25rem; }
.kiosk-body h2 { font-size: 1.875rem; }
.kiosk-body h3 { font-size: 1.5rem; }
.kiosk-body p  { margin-bottom: 1rem; }

/* Layout */
.kiosk-body .kiosk-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kiosk-body .screen {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
    width: 100%;
}

.kiosk-body .screen.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Welcome */
.kiosk-body .welcome-screen {
    padding: 2rem 1rem;
    justify-content: center;
}

.kiosk-body .welcome-content {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.kiosk-body .event-name {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.kiosk-body .subtitle {
    color: var(--text-secondary);
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.kiosk-body .helper-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 1.5rem;
}

/* Form screens */
.kiosk-body .form-screen {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.kiosk-body .form-container {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    width: 100%;
    text-align: left;
    max-width: none;
    margin: 0;
}

.kiosk-body .form-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.kiosk-body .step-indicator {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    gap: 1rem;
}

.kiosk-body .step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.kiosk-body .step.active {
    background-color: var(--primary-color);
    color: white;
}

.kiosk-body .form-field { margin-bottom: 1.5rem; }

.kiosk-body .form-field label {
    display: block;
    text-align: left;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.kiosk-body .form-field input,
.kiosk-body .form-field select {
    width: 100%;
    padding: 1rem;
    font-size: 1.125rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: auto;
    box-shadow: none;
}

.kiosk-body .form-field input:focus,
.kiosk-body .form-field select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.kiosk-body .form-field input::placeholder {
    color: var(--text-secondary);
}

.kiosk-body .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kiosk-body .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-weight: normal;
    cursor: pointer;
}

.kiosk-body .checkbox-label input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Confirmation card (used in invite_backup.html) */
.kiosk-body .confirmation-screen {
    max-width: 600px;
    width: 100%;
}

.kiosk-body .confirmation-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.kiosk-body .confirmation-data {
    text-align: left;
    margin-bottom: 2rem;
}

.kiosk-body .confirmation-data-item {
    display: flex;
    margin-bottom: 1rem;
}

.kiosk-body .confirmation-label {
    font-weight: 600;
    min-width: 150px;
}

/* QR card (used in invite_backup.html) */
.kiosk-body .qr-screen {
    max-width: 600px;
    width: 100%;
}

.kiosk-body .qr-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.kiosk-body .qr-title {
    color: var(--success-color);
    margin-bottom: 1rem;
}

.kiosk-body .qr-container {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--surface-alt);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
}

.kiosk-body .qr-code {
    max-width: 250px;
    height: auto;
}

.kiosk-body .qr-instruction {
    color: var(--text-secondary);
    margin-top: 1rem;
}

/* Buttons */
.kiosk-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    width: 100%;
    margin-bottom: 1rem;
    min-height: 60px;
    height: auto;
    letter-spacing: normal;
    color: inherit;
    box-shadow: none;
    background-color: transparent;
}

.kiosk-body .btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}
.kiosk-body .btn-primary:hover,
.kiosk-body .btn-primary:focus {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    color: white;
}

.kiosk-body .btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-primary);
}
.kiosk-body .btn-secondary:hover,
.kiosk-body .btn-secondary:focus {
    background-color: #e5e7eb;
    color: var(--text-primary);
}

.kiosk-body .btn-success {
    background-color: var(--success-color);
    color: white;
}
.kiosk-body .btn-success:hover,
.kiosk-body .btn-success:focus {
    background-color: #15803d;
    color: white;
}

.kiosk-body .btn-full-width { width: 100%; }

.kiosk-body .btn-group {
    display: flex;
    gap: 1rem;
    width: 100%;
}
.kiosk-body .btn-group .btn {
    flex: 1;
    margin-bottom: 0;
}

/* Progress bar */
.kiosk-body .progress-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2rem;
}
.kiosk-body .progress-bar {
    height: 8px;
    background-color: var(--secondary-color);
    border-radius: 4px;
    overflow: hidden;
}
.kiosk-body .progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 4px;
    width: 0%;
    transition: width 300ms ease-out;
}

/* Animations */
@keyframes kioskFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kiosk-body .animate-fade-in { animation: kioskFadeIn 300ms ease-out forwards; }

/* Validation */
.kiosk-body .validation-error {
    color: var(--warning-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    text-align: left;
}
.kiosk-body .form-field.error input,
.kiosk-body .form-field.error select { border-color: var(--warning-color); }

/* Inactivity timer */
.kiosk-body .timer-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: rgba(220, 38, 38, 0.8);
    width: 100%;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1s linear;
    z-index: 1000;
}

/* Tablet / mobile */
@media (max-width: 1024px) {
    .kiosk-body .kiosk-container { padding: 1.5rem; }
    .kiosk-body .form-container,
    .kiosk-body .confirmation-card,
    .kiosk-body .qr-card { padding: 1.5rem; }
    .kiosk-body h1 { font-size: 2rem; }
    .kiosk-body h2 { font-size: 1.75rem; }
    .kiosk-body h3 { font-size: 1.375rem; }
}

@media (max-width: 768px) {
    .kiosk-body .kiosk-container { padding: 1rem; }
    .kiosk-body .btn-group { flex-direction: column; }
    .kiosk-body .confirmation-data-item { flex-direction: column; }
    .kiosk-body .confirmation-label { min-width: auto; margin-bottom: 0.25rem; }
}