/* Event Common Styles */

/* Hero Section (Show Page) */
/* Premium Event Hero Integration */
.event-hero {
    background: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 32px;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.event-hero__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 60px 24px 48px;
    position: relative;
    z-index: 2;
}

.event-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(108, 99, 255, 0.15);
    color: var(--accent-light);
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
}

.event-title-premium {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -1.5px;
}

.event-summary-premium {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 800px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.event-meta-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.meta-item-premium {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.3s ease;
}

.meta-item-premium:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.meta-label-premium {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.meta-value-premium {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.text-glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .event-hero__inner {
        padding: 40px 20px 32px;
    }
    .event-title-premium {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    .event-meta-premium {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.event-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
    line-height: 1.8; color: var(--text-primary);
}
.event-content h3 { font-size: 18px; color: var(--text-secondary); margin-bottom: 16px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 8px; }

.description-content { font-size: 15px; }
.description-content p { margin-bottom: 1em; }
.description-content ul { margin-left: 24px; margin-bottom: 1em; list-style-type: disc; }
.description-content ol { margin-left: 24px; margin-bottom: 1em; list-style-type: decimal; }
.description-content a { color: var(--accent-light); text-decoration: underline; }
.description-content strong { font-weight: 700; color: #fff; }

.action-bar {
    display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;
}

/* Form Styles */
.form-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 600px;
    margin: 0 auto;
}
.form-card h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.form-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }

.empty-state .emoji { font-size: 32px; margin-bottom: 8px; }

/* Event Index Styles */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.event-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all .2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    opacity: 0.8;
    transition: opacity .2s, height .2s;
}

.event-card:hover::before {
    opacity: 1;
    height: 4px;
}

/* 10 Color Variations for Event Cards */
.events-grid .event-card:nth-child(10n+1)::before { background: linear-gradient(135deg, #0ea5e9, #10b981); }
.events-grid .event-card:nth-child(10n+2)::before { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.events-grid .event-card:nth-child(10n+3)::before { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.events-grid .event-card:nth-child(10n+4)::before { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.events-grid .event-card:nth-child(10n+5)::before { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.events-grid .event-card:nth-child(10n+6)::before { background: linear-gradient(135deg, #10b981, #14b8a6); }
.events-grid .event-card:nth-child(10n+7)::before { background: linear-gradient(135deg, #6366f1, #a855f7); }
.events-grid .event-card:nth-child(10n+8)::before { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.events-grid .event-card:nth-child(10n+9)::before { background: linear-gradient(135deg, #a3e635, #22c55e); }
.events-grid .event-card:nth-child(10n+10)::before { background: linear-gradient(135deg, #fcd34d, #f59e0b); }

.event-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }


.event-date-badge {
    background: rgba(108,99,255,0.1);
    color: var(--accent-light);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 13px; font-weight: 600;
    display: inline-block;
    margin-bottom: 12px;
    border: 1px solid rgba(108,99,255,0.2);
}
.event-title {
    font-size: 18px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px; line-height: 1.4;
}
.event-desc {
    color: var(--text-secondary); font-size: 14px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}
.event-meta { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.meta-item { display: flex; align-items: center; gap: 6px; }

.btn-view {
    display: block; text-align: center;
    padding: 10px 0; background: var(--bg-input);
    color: var(--text-primary); font-size: 14px; font-weight: 500;
    border-radius: var(--radius-md); transition: all .2s;
    border: 1px solid var(--border);
}
.btn-view:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted); font-size: 15px;
    background: var(--bg-card); border-radius: var(--radius-lg); border: 1px dashed var(--border);
}

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; }
.form-error { color: var(--accent2); font-size: 13px; margin-top: 6px; }

textarea.form-input { min-height: 120px; resize: vertical; }

/* Quill custom styles for dark theme */
.ql-toolbar.ql-snow, .ql-container.ql-snow {
    border-color: var(--border) !important;
}
.ql-toolbar.ql-snow {
    background: var(--bg-secondary);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.ql-container.ql-snow {
    background: var(--bg-input);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
}
.ql-editor { min-height: 200px; }
.ql-snow .ql-stroke { stroke: var(--text-secondary); }
.ql-snow .ql-fill { fill: var(--text-secondary); }
.ql-snow .ql-picker { color: var(--text-secondary); }
.ql-snow .ql-picker-options { background: var(--bg-secondary) !important; border-color: var(--border) !important; }

/* Poll Block */
.poll-block {
    background: rgba(0,0,0,0.15);
    padding: 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    position: relative;
    border: 1px solid var(--border);
}
.btn-remove-poll {
    position: absolute; top: 12px; right: 16px;
    background: transparent; border: none;
    color: var(--accent2); font-size: 20px; cursor: pointer;
}
.poll-number-label { font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; font-size: 14px; }

/* Tagify Overrides */
.tagify { --tags-border-color: var(--border); --tags-hover-border-color: var(--text-muted); --tags-focus-border-color: var(--accent); background: var(--bg-input); border-radius: var(--radius-md); padding: 4px; border: 1px solid var(--border); }
.tagify__tag { --tag-bg: var(--bg-secondary); --tag-text-color: var(--text-primary); --tag-remove-btn-color: var(--text-muted); }
.tagify__input { color: var(--text-primary); }

.btn-container { display: flex; gap: 12px; margin-top: 32px; }
.btn-back {
    padding: 10px 20px; border-radius: var(--radius-md);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-primary); text-align: center; flex: 1;
    transition: all .2s;
}
.btn-back:hover { border-color: var(--text-muted); }
.btn-submit { flex: 2; }