/* ============================================
   MOBILE-FIRST — Event Staff System
   Staff use phones almost exclusively; optimise touch,
   safe areas, readable inputs, and one-hand flows.
   ============================================ */

/* — Base / viewport — */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

.registration-page,
.login-page,
.site-page,
.admin-shell,
.app-layout {
    min-height: 100dvh;
}

/* iOS safe areas (notch / home indicator) */
.registration-page,
.login-page,
.staff-public-shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.staff-public-header {
    padding-top: max(0.5rem, env(safe-area-inset-top));
}

.registration-page .staff-public-hero {
    margin-bottom: 0.625rem;
}

/* — Touch-friendly controls (all breakpoints on phones) — */
@media (max-width: 768px) {
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;
        min-height: var(--touch-target);
        line-height: 1.4;
    }

    .form-select {
        padding-right: 2.25rem;
    }

    .form-checkbox,
    .form-radio {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        min-height: var(--touch-target);
        padding: 0.35rem 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .form-checkbox input[type="checkbox"],
    .form-radio input[type="radio"] {
        width: 22px;
        height: 22px;
        margin-top: 2px;
        flex-shrink: 0;
        accent-color: var(--primary-color);
    }

    .form-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .btn,
    .theme-toggle {
        min-height: var(--touch-target);
        touch-action: manipulation;
    }

    .btn--block {
        width: 100%;
    }
}

/* — Public registration header — */
@media (max-width: 640px) {
    .public-header {
        flex-wrap: wrap;
        padding-top: max(0.75rem, env(safe-area-inset-top));
        padding-bottom: 0.75rem;
        gap: 0.65rem;
    }

    .public-header__brand {
        flex: 1 1 calc(100% - 52px);
        min-width: 0;
    }

    .public-header__title {
        font-size: 0.9375rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-header__subtitle {
        display: none;
    }

    .public-header__actions {
        flex-shrink: 0;
        align-items: center;
        gap: 0.5rem;
    }

    .lang-switcher {
        min-width: 0;
        max-width: 100%;
    }

    .lang-switcher__input,
    .lang-switcher__select {
        max-width: 100%;
        min-width: 120px;
    }

    .theme-toggle {
        width: var(--touch-target);
        height: var(--touch-target);
    }
}

/* — Registration form: sticky submit bar (skipped when .registration-page--compact — see registration-compact.css) — */
@media (max-width: 768px) {
    .registration-page:not(.registration-page--compact) .registration-page__wrap {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }

    .registration-page .card,
    .registration-page .staff-public-card {
        padding: var(--padding-medium);
    }

    .registration-page .card__title {
        font-size: var(--font-title-mobile);
        line-height: 1.25;
    }

    .registration-page .form-section-title {
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }

    .registration-page:not(.registration-page--compact) .form-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-index-header) + 5);
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin: 0;
        padding: 0.65rem max(1rem, env(safe-area-inset-left)) calc(0.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
        background: var(--glass-bg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-top: var(--border-width) solid var(--glass-border);
        box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
    }

    .registration-page:not(.registration-page--compact) .form-actions .btn {
        width: auto;
        flex: 1;
        margin: 0;
    }

    .registration-page:not(.registration-page--compact) .form-actions .btn--secondary {
        flex: 0 1 auto;
        min-width: 5.5rem;
    }

    .registration-page:not(.registration-page--compact) .staff-public-footer,
    .registration-page:not(.registration-page--compact) .footer--public {
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
        font-size: 12px;
    }

    .event-checkbox {
        min-height: 52px;
        padding: 0.75rem;
        border-radius: var(--border-radius-sm);
    }

    .event-checkbox input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .event-list {
        max-height: none;
    }

    .shift-picker-list {
        max-height: 50vh;
    }

    .event-checkbox {
        padding: 0.75rem 0.5rem;
    }

    .shift-picker__option {
        min-height: var(--touch-target);
        padding: 1rem;
    }

    #event-selection-wrap:not([hidden]) {
        scroll-margin-bottom: 6rem;
    }
}

/* — Sign-in / status / check-in cards — */
@media (max-width: 768px) {
    .login-page {
        align-items: flex-start;
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .login-page__wrap {
        max-width: 100%;
    }

    .login-card {
        padding: var(--padding-medium);
    }

    .login-card .card__header--row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .login-card .card__header--row .lang-switcher {
        width: 100%;
    }

    .login-card .lang-switcher__select {
        width: 100%;
        max-width: none;
        min-height: var(--touch-target);
    }

    .signin-countdown__timer {
        font-size: 1.5rem;
    }

    .venue-map-block__frame {
        height: min(220px, 45vw);
        min-height: 180px;
    }

    .signin-panel .btn--block {
        min-height: 52px;
        font-size: 1rem;
    }
}

/* — Website (CMS pages) — */
@media (max-width: 768px) {
    .site-header {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .site-header__inner {
        position: relative;
    }

    .site-header__menu-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: var(--touch-target);
        height: var(--touch-target);
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .site-header__menu-btn span {
        display: block;
        width: 22px;
        height: 2px;
        margin: 4px 0;
        background: currentColor;
        border-radius: 2px;
    }

    .site-nav {
        max-height: calc(100dvh - var(--header-height, 64px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-nav__link,
    .site-nav__cta {
        min-height: var(--touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem !important;
    }

    .site-main {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .site-hero__title {
        font-size: clamp(1.65rem, 7vw, 2.25rem);
    }

    .site-hero__stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    .site-footer__bar {
        flex-direction: column;
        text-align: center;
    }

    .site-footer__bar-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* — Admin ERP (managers on phone) — */
@media (max-width: 768px) {
    .admin-shell .erp-header,
    .admin-shell .header {
        padding-top: max(0.35rem, env(safe-area-inset-top));
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .admin-shell .header__left {
        min-width: 0;
        flex: 1;
    }

    .admin-shell .header__right {
        flex-shrink: 0;
        gap: 0.25rem;
    }

    .admin-shell .header__menu-btn {
        display: flex;
    }

    .admin-shell .header__icon-btn {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        width: var(--touch-target);
        padding: 0;
    }

    .admin-shell .sidebar-overlay {
        display: none;
    }

    .admin-shell .sidebar-overlay.sidebar-overlay--visible {
        display: block;
    }

    .admin-shell .page-content {
        padding: 0.875rem max(0.875rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(0.875rem, env(safe-area-inset-left));
    }

    .admin-shell .card {
        padding: 1rem;
        border-radius: 14px;
    }

    .admin-shell .card__header--row .btn {
        width: auto;
    }

    .admin-shell .staff-edit-layout .card__header-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .admin-shell .staff-edit-layout .card__header-actions .btn {
        width: 100%;
    }

    .admin-shell .form-actions--end .btn {
        width: 100%;
    }

    .admin-form-list__item {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-form-list__actions {
        flex-direction: column;
        width: 100%;
    }

    .admin-form-list__actions .btn {
        width: 100%;
    }

    .admin-form-list__url code {
        word-break: break-all;
        font-size: 11px;
    }

    .form-share-card__url-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .form-share-card__url-row .btn {
        width: 100%;
    }

    .form-inline-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .form-inline-group .btn {
        width: 100%;
    }

    .event-venue-map {
        height: min(240px, 50vw) !important;
    }

    .erp-settings-hub__header {
        flex-direction: column;
        align-items: stretch;
    }

    .erp-settings-hub__actions {
        flex-direction: column;
        width: 100%;
    }

    .erp-settings-nav-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem 0.25rem;
    }

    .erp-settings-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        min-width: min-content;
    }

    .erp-settings-nav__link {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: var(--touch-target);
        padding: 0.5rem 0.875rem;
    }

    .erp-settings-nav__link span:not(.erp-settings-nav__icon) {
        display: none;
    }

    .erp-settings-nav__icon {
        margin: 0 auto;
    }

    .bulk-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-toolbar__label {
        margin-right: 0;
    }

    .bulk-toolbar .btn {
        width: 100%;
    }

    .attendance-live__item {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .work-hours-edit__form {
        position: fixed;
        left: max(0.75rem, env(safe-area-inset-left));
        right: max(0.75rem, env(safe-area-inset-right));
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        top: auto;
        min-width: 0;
        max-height: 70dvh;
        overflow-y: auto;
    }

    .scan-checkin__reader {
        max-width: 100%;
    }

    .dashboard-grid,
    .stat-grid {
        grid-template-columns: 1fr !important;
    }

    .data-table__check {
        width: auto;
    }

    .data-table tbody td.data-table__actions::before {
        content: 'Actions';
    }
}

@media (max-width: 768px) and (min-width: 400px) {
    .admin-shell .erp-settings-nav__link span:not(.erp-settings-nav__icon) {
        display: inline;
    }
}

/* — Very small phones — */
@media (max-width: 380px) {
    :root {
        --container-padding: 12px;
        --padding-medium: 16px;
    }

    .registration-page:not(.registration-page--compact) .form-actions {
        flex-direction: column;
    }

    .registration-page:not(.registration-page--compact) .form-actions .btn,
    .registration-page:not(.registration-page--compact) .form-actions .btn--secondary {
        width: 100%;
        flex: none;
    }
}

/* — Reduce motion — */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}