/* ═══════════════════════════════════════════════════════════════
   CYKLBOARD MANAGEMENT — CHECKIN.CSS
   Module B: Instructor Attendance / Check-in
   ═══════════════════════════════════════════════════════════════ */

/* ── CLASS SELECTOR ─────────────────────────────────────────── */
.class-selector {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5) var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.class-selector .form-label {
    white-space: nowrap;
}

.class-selector .form-select {
    flex: 1;
    min-width: 240px;
    margin-bottom: 0;
}

/* ── SUMMARY BAR ────────────────────────────────────────────── */
.checkin-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.checkin-stat {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    color: var(--text-low);
    transition: all var(--transition-fast);
}

.checkin-stat--attended {
    background: var(--color-success-dim);
    border-color: rgba(0, 230, 118, 0.25);
    color: var(--color-success);
}

.checkin-stat--noshow {
    background: var(--color-danger-dim);
    border-color: rgba(255, 61, 87, 0.25);
    color: var(--color-danger);
}

/* ── CHECK-IN LIST ──────────────────────────────────────────── */
.checkin-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* ── USER CARD ──────────────────────────────────────────────── */
.user-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 300ms ease both;
}

.user-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--border-color);
    transition: all var(--transition-fast);
}

.user-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(2px);
}

/* State: Attended */
.user-card.is-attended {
    background: linear-gradient(135deg, rgba(0, 230, 118, 0.05) 0%, var(--bg-surface) 100%);
    border-color: rgba(0, 230, 118, 0.2);
}

.user-card.is-attended::before {
    background: var(--color-success);
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
}

/* State: No-show */
.user-card.is-noshow {
    background: linear-gradient(135deg, rgba(255, 61, 87, 0.05) 0%, var(--bg-surface) 100%);
    border-color: rgba(255, 61, 87, 0.2);
    opacity: 0.7;
}

.user-card.is-noshow::before {
    background: var(--color-danger);
}

/* ── AVATAR ─────────────────────────────────────────────────── */
.user-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--bg-surface3);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-condensed);
    font-size: var(--font-size-lg);
    font-weight: 900;
    color: var(--text-mid);
    flex-shrink: 0;
    text-transform: uppercase;
    transition: all var(--transition-fast);
}

.is-attended .user-card__avatar {
    border-color: var(--color-success);
    color: var(--color-success);
    background: var(--color-success-dim);
}

.is-noshow .user-card__avatar {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-dim);
}

/* ── BIKE BADGE ─────────────────────────────────────────────── */
.user-card__bike {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--primary-neon-glow2);
    border: 1px solid var(--border-neon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-condensed);
    font-size: var(--font-size-base);
    font-weight: 900;
    color: var(--primary-neon);
    flex-shrink: 0;
}

/* ── USER INFO ──────────────────────────────────────────────── */
.user-card__info {
    flex: 1;
    min-width: 0;
}

.user-card__name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-high);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--text-low);
    flex-wrap: wrap;
}

.user-card__credits {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--space-2);
    background: var(--bg-surface2);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.user-card__credits--low {
    background: var(--color-warning-dim);
    color: var(--color-warning);
}

/* ── STATUS BADGE ───────────────────────────────────────────── */
.user-card__status {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px var(--space-3);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.user-card__status--pending {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.user-card__status--attended {
    background: var(--color-success-dim);
    color: var(--color-success);
    border: 1px solid rgba(0, 230, 118, 0.2);
}

.user-card__status--noshow {
    background: var(--color-danger-dim);
    color: var(--color-danger);
    border: 1px solid rgba(255, 61, 87, 0.2);
}

/* ── ACTION BUTTONS ─────────────────────────────────────────── */
.user-card__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.action-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-surface2);
    color: var(--text-low);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.action-btn--attend {
    border-color: rgba(0, 230, 118, 0.2);
    color: var(--color-success);
}

.action-btn--attend:hover,
.action-btn--attend.active {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #000;
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.4);
    transform: scale(1.08);
}

.action-btn--noshow {
    border-color: rgba(255, 61, 87, 0.2);
    color: var(--color-danger);
}

.action-btn--noshow:hover,
.action-btn--noshow.active {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 61, 87, 0.4);
    transform: scale(1.08);
}

/* ── BULK ACTIONS ───────────────────────────────────────────── */
.checkin-bulk {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .user-card {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .user-card__actions {
        width: 100%;
        justify-content: flex-end;
    }

    .class-selector {
        flex-direction: column;
        align-items: stretch;
    }

    .class-selector .form-select {
        min-width: unset;
    }

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

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

/* ══════════════════════════════════════════════════════════════════
   WIZARD — ASIGNAR BICICLETA
   ══════════════════════════════════════════════════════════════════ */

/* Release button */
.action-btn--release {
    border-color: rgba(255, 150, 50, 0.25);
    color: #ff9632;
    width: 36px;
    height: 36px;
    font-size: 0.7rem;
}
.action-btn--release:hover {
    background: rgba(255, 150, 50, 0.15);
    border-color: #ff9632;
    transform: scale(1.08);
}

/* Modal overrides for wizard */
.wizard-modal {
    max-width: min(560px, 96vw);
    max-height: 90svh;
}

.wizard-header {
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.wizard-title {
    font-size: var(--font-size-lg);
    font-weight: 900;
    color: var(--text-high);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

/* Step indicators */
.wizard-steps {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.wizard-step {
    padding: 2px var(--space-3);
    border-radius: var(--radius-full);
    font-weight: 600;
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.wizard-step.active {
    background: var(--primary-neon-glow2);
    border-color: var(--border-neon);
    color: var(--primary-neon);
}

.wizard-step.completed {
    background: var(--color-success-dim);
    border-color: rgba(0, 230, 118, 0.2);
    color: var(--color-success);
}

.wizard-step-sep {
    color: var(--text-muted);
    font-size: 0.6rem;
}

/* Body */
.wizard-body {
    padding: var(--space-6);
    max-height: calc(90svh - 140px);
    overflow-y: auto;
}

.wizard-section-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-low);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-4);
}

.wizard-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}
.wizard-empty p:first-child { font-size: 1.5rem; margin-bottom: 0.5rem; }

/* Paso 1 — Studios */
.wizard-studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-3);
}

.wizard-studio-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-high);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
}

.wizard-studio-card:hover {
    border-color: var(--border-neon);
    background: var(--primary-neon-glow2);
    color: var(--primary-neon);
}

.wizard-studio-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Paso 2 — Clases */
.wizard-class-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wizard-class-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    color: var(--text-high);
}

.wizard-class-item:hover:not(:disabled) {
    border-color: var(--border-neon);
    background: var(--primary-neon-glow2);
}

.wizard-class-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wizard-class-item.is-live {
    border-color: var(--primary-neon);
    background: var(--primary-neon-glow2);
}

.wizard-class-time {
    font-family: var(--font-condensed);
    font-size: var(--font-size-lg);
    font-weight: 900;
    min-width: 64px;
}

.wizard-class-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.wizard-class-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
}

.wizard-class-status--live      { background: var(--primary-neon-glow2); color: var(--primary-neon); border: 1px solid var(--border-neon); }
.wizard-class-status--scheduled { background: var(--bg-surface3); color: var(--text-low); }
.wizard-class-status--finished  { background: var(--color-success-dim); color: var(--color-success); }
.wizard-class-status--cancelled { background: var(--color-danger-dim); color: var(--color-danger); }

/* Paso 3 — Mapa de sala */
.wizard-minimap {
    display: grid;
    gap: 6px;
    margin-bottom: var(--space-4);
}

.wizard-bike {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    font-family: var(--font-condensed);
    font-size: var(--font-size-xs);
    font-weight: 900;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-bike--available {
    background: var(--primary-neon-glow2);
    border-color: var(--border-neon);
    color: var(--primary-neon);
}

.wizard-bike--available:hover {
    transform: scale(1.1);
    box-shadow: var(--glow-neon-sm);
}

.wizard-bike--available.is-selected {
    background: var(--primary-neon);
    color: var(--bg-main);
    box-shadow: var(--glow-neon-md);
}

.wizard-bike--occupied {
    background: var(--bg-surface3);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
}

.wizard-bike--blocked {
    background: var(--color-danger-dim);
    border-color: rgba(255, 61, 87, 0.2);
    color: var(--color-danger);
    cursor: not-allowed;
    opacity: 0.6;
}

.wizard-legend {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    font-size: var(--font-size-xs);
    color: var(--text-low);
}

.wl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}
.wl-dot--available { background: var(--primary-neon-glow2); border: 1px solid var(--border-neon); }
.wl-dot--occupied  { background: var(--bg-surface3); border: 1px solid var(--border-color); }
.wl-dot--blocked   { background: var(--color-danger-dim); border: 1px solid rgba(255,61,87,0.2); }

/* Panel de cliente */
.wizard-client-panel {
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    animation: fadeInUp 200ms ease both;
}

.wizard-selected-bike {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--primary-neon);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-3);
}

.wizard-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-low);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: var(--space-2);
}

.wizard-client-search-wrap {
    position: relative;
}

.wizard-client-results {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}

.wizard-client-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.wizard-client-item:not(.no-credits):hover {
    border-color: var(--border-neon);
    background: var(--primary-neon-glow2);
    cursor: pointer;
}

.wizard-client-item.no-credits {
    opacity: 0.5;
}

.wizard-client-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-client-name {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-high);
}

.wizard-client-id {
    font-size: 0.65rem;
    font-family: monospace;
    color: var(--text-muted);
}

.wizard-client-credits {
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--primary-neon-glow2);
    color: var(--primary-neon);
    white-space: nowrap;
}

.wizard-client-credits.no-credits {
    background: var(--color-danger-dim);
    color: var(--color-danger);
}

.wizard-client-selected {
    padding: var(--space-3) var(--space-4);
    background: var(--color-success-dim);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.wizard-new-client-form {
    background: var(--bg-surface2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    animation: fadeInUp 200ms ease both;
}

.wizard-actions {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-4);
}

.wizard-actions .btn {
    width: 100%;
}