/**
 * TECHenya Events — Frontend Styles.
 * Minimal plugin-specific styles. Theme provides base (.te-card, .te-btn, etc.).
 *
 * @package TECHenya_Events
 * @since   1.0.0
 */

/* ── Modal ─────────────────────────────────────────── */
.te-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    transition: background 0.3s ease;
    visibility: hidden;
}

.te-modal-backdrop.active {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    visibility: visible;
}

.te-modal-content {
    position: relative;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.te-modal-content.active {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Spinner ───────────────────────────────────────── */
.te-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--te-bg-raised, #fff);
    border-radius: 50%;
    animation: te-spin 0.6s linear infinite;
    vertical-align: middle;
}

.te-spinner--dark {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: var(--te-secondary, #232c65);
}

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

/* ── Form Elements ─────────────────────────────────── */
.te-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--te-text-muted, #64748b);
    margin-bottom: 0.25rem;
}

.te-input {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--te-border-input, #cbd5e1);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--te-text-heading, #0f172a);
    background: var(--te-bg-raised, #fff);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.te-input:focus {
    border-color: var(--te-accent, #0a66c2);
    box-shadow: 0 0 0 3px var(--te-accent-subtle, rgba(10, 102, 194, 0.15));
}

/* ── Event Badges ──────────────────────────────────── */
.teev-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    line-height: 1.4;
}

.teev-badge--past {
    background: var(--te-bg-sunken, #f3f4f6);
    color: var(--te-text-muted, #64748b);
}

.teev-badge--sold-out {
    background: var(--te-error-subtle, #fef2f2);
    color: var(--te-error-text, #b91c1c);
}

.teev-badge--free {
    background: var(--te-success-subtle, #f0fdf4);
    color: var(--te-success-text, #15803d);
}

.teev-badge--online {
    background: var(--te-success-subtle, #ecfdf5);
    color: var(--te-success-text, #047857);
}

.teev-badge--in-person {
    /* Kept semantic purple for in-person — intentionally constant across profiles */
    background: #faf5ff;
    color: #7c3aed;
}

.teev-badge--hybrid {
    background: var(--te-warning-subtle, #fffbeb);
    color: var(--te-warning-text, #b45309);
}

/* ── Capacity Progress Bar ─────────────────────────── */
.teev-progress {
    width: 100%;
    height: 0.5rem;
    background: var(--te-bg-sunken, #f3f4f6);
    border-radius: 9999px;
    overflow: hidden;
}

.teev-progress__bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.7s ease;
}

/* Semantic states — constant across profiles (green = OK, amber = warn, red = near-full) */
.teev-progress__bar--low  { background: var(--te-success, #16a34a); }
.teev-progress__bar--mid  { background: var(--te-warning, #d97706); }
.teev-progress__bar--high { background: var(--te-error,   #dc2626); }

/* ── Single Event: Hero Overlay ────────────────────── */
.teev-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.7), transparent);
    pointer-events: none;
}

/* ── Ticket Card (My Tickets page) ─────────────────── */
.teev-ticket-card {
    border-left: 4px solid var(--te-accent, #0a66c2);
    transition: box-shadow 0.2s ease;
}

.teev-ticket-card:hover {
    box-shadow: var(--te-shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
}

.teev-ticket-card--cancelled {
    border-left-color: var(--te-error, #dc2626);
    opacity: 0.7;
}

.teev-ticket-card--checked-in {
    border-left-color: var(--te-success, #16a34a);
}

/* ── Check-in Portal — semantic (constant across profiles) ─── */
.teev-scan-success {
    border-left: 4px solid var(--te-success, #16a34a);
    animation: teev-flash-green 0.4s ease;
}

.teev-scan-error {
    border-left: 4px solid var(--te-error, #dc2626);
    animation: teev-flash-red 0.4s ease;
}

.teev-scan-warning {
    border-left: 4px solid var(--te-warning, #f59e0b);
    animation: teev-flash-amber 0.4s ease;
}

@keyframes teev-flash-green {
    0% { background-color: var(--te-success-subtle, #dcfce7); }
    100% { background-color: transparent; }
}

@keyframes teev-flash-red {
    0% { background-color: var(--te-error-subtle, #fee2e2); }
    100% { background-color: transparent; }
}

@keyframes teev-flash-amber {
    0% { background-color: var(--te-warning-subtle, #fef3c7); }
    100% { background-color: transparent; }
}

/* ── Responsive: Sticky Sidebar ────────────────────── */
@media (max-width: 1023px) {
    .lg\:sticky {
        position: static !important;
    }
}

/* ── Print: Ticket View ────────────────────────────── */
@media print {
    .te-modal-backdrop,
    .teev-checkin-portal header,
    .teev-checkin-portal footer,
    nav { display: none !important; }

    .teev-ticket-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}