/* EventManagement — app-specific styles
   All shared UI (buttons, cards, forms, nav, badges, stat cards, etc.)
   is in style.css, which is copied from SolStack master at deploy time.
   Only add styles here that are unique to EventManagement. */

/* Status badges */
.badge-pending  { background: var(--warning); color: #ffffff; }
.badge-paid     { background: var(--accent2); color: #ffffff; }
.badge-cancelled{ background: var(--danger);  color: #ffffff; }

/* Event display (public pages) */
.event-poster {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 12px;
}

.event-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
    color: var(--text2);
}

.event-detail svg {
    width: 16px;
    height: 16px;
    color: var(--text3);
    flex-shrink: 0;
}

.event-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent2);
    margin: 8px 0;
}

.event-tickets { font-size: 0.8rem; color: var(--text3); }
.event-sold-out { color: var(--danger); font-weight: 600; }

/* Booking confirmation */
.confirmation-box {
    background: var(--surface);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    margin: 20px 0;
}

.confirmation-ref {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 16px 0;
}

.confirmation-detail {
    font-size: 0.9rem;
    color: var(--text2);
    margin: 6px 0;
}

/* Poster upload zone */
.poster-zone {
    border: 2px dashed var(--border);
    border-radius: 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 12px 0;
    color: var(--text3);
    font-size: 0.85rem;
    transition: border-color 0.2s;
}

.poster-zone:hover { border-color: var(--accent); }
.poster-zone.has-image { border-style: solid; border-color: var(--accent); }
.poster-zone img { max-width: 100%; border-radius: 14px; }

/* Embed mode — no header (iframe embed) */
.embed-mode #header { display: none; }
.embed-mode #content { height: 100dvh; }