/* ============================
   VA Platform - App Styles
   ============================ */

/* --- Brand Colors --- */
:root {
    --va-purple: #563d7c;
    --va-purple-dark: #1a1a2e;
    --va-purple-light: #7c5cbf;
    --va-accent: #af30eb;
}

/* --- Hero Banner --- */
.va-hero {
    background: linear-gradient(135deg, 
        var(--va-purple-dark) 0%, 
        var(--va-purple) 50%, 
        #4a2d73 100%);
    background-size: 200% 200%;
    animation: heroGradient 12s ease infinite;
    color: #fff;
    padding: 3rem 1rem;
    text-align: center;
}
@keyframes heroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.va-hero h1 {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.va-hero p {
    opacity: 0.85;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* --- Event Cards (Home) --- */
.event-banner-header {
    background: linear-gradient(135deg, #2d1b4e 0%, #4a2d73 100%);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
}
.event-banner-header h4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.event-banner-header small {
    opacity: 0.8;
}

.performance-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}
.performance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.performance-card .thumb-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #e9ecef;
}
.performance-card img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    background: transparent;
}
/* Shimmer placeholder for lazy-loaded thumbnails */
.performance-card .thumb-wrapper.loading {
    background: linear-gradient(90deg, #e9ecef 25%, #f4f4f4 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.performance-card .thumb-wrapper.loading img {
    opacity: 0;
}
.performance-card .thumb-wrapper.loading .play-overlay {
    background: none;
}
.performance-card .thumb-wrapper.loading .play-overlay i {
    color: rgba(0,0,0,0.15);
}
/* Fade in thumbnail when loaded */
.performance-card .thumb-wrapper img {
    transition: opacity 0.3s ease;
    opacity: 1;
}
.performance-card .play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(45,27,78,0.85) 0%, rgba(74,45,115,0.85) 100%);
    transition: opacity 0.3s ease;
}
.performance-card .play-overlay i {
    font-size: 2.5rem;
    color: rgba(255,255,255,0.9);
}
.performance-card:hover .play-overlay i {
    color: #fff;
    transform: scale(1.1);
    transition: transform 0.15s ease;
}
.performance-card .card-body {
    padding: 0.6rem 0.75rem;
}
.performance-card .perf-number {
    font-size: 0.75rem;
    color: var(--va-accent);
    font-weight: 600;
}
.performance-card .perf-name {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #333;
}
.performance-card .perf-category {
    font-size: 0.78rem;
    color: #6c757d;
}

/* --- Video Player (Watch) --- */
.va-video-wrapper {
    background: #000;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
}
.va-video-wrapper video {
    width: 100%;
    display: block;
    max-height: 70vh;
}

.judge-btn-group .btn {
    font-size: 0.85rem;
    font-weight: 500;
}
.judge-btn-group .btn.active {
    background-color: var(--va-purple);
    border-color: var(--va-purple);
    color: #fff;
}

/* --- Transcript Panel --- */
.transcript-panel {
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #e9ecef;
}
.transcript-panel .nav-tabs {
    border-bottom: 2px solid #dee2e6;
}
.transcript-panel .nav-tabs .nav-link {
    font-size: 0.85rem;
    font-weight: 500;
    color: #6c757d;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 1rem;
}
.transcript-panel .nav-tabs .nav-link.active {
    color: var(--va-purple);
    border-bottom-color: var(--va-purple);
    background: transparent;
}

.transcript-scroll {
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    scroll-behavior: smooth;
}
.transcript-segment {
    padding: 0.35rem 0;
    line-height: 1.5;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.transcript-segment:last-child {
    border-bottom: none;
}
.transcript-time {
    color: var(--va-accent);
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
    margin-right: 0.5rem;
    font-weight: 500;
}
.transcript-time:hover {
    color: var(--va-purple);
    text-decoration: underline;
}
.transcript-uncertain {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ff3e3e;
}

/* --- Performance Details Card --- */
.details-card {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}
.details-card .detail-label {
    color: #6c757d;
    font-size: 0.82rem;
    font-weight: 500;
    width: 110px;
    min-width: 110px;
}
.details-card .detail-value {
    font-size: 0.9rem;
}

/* --- Login Page --- */
.va-login-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.va-login-card .card-body {
    padding: 2rem;
}

/* --- Profile Page --- */
.profile-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}

/* --- Notification Toast --- */
.top-right-notification {
    position: fixed;
    top: 4%;
    right: 4%;
    z-index: 9999;
}

/* --- Print --- */
@media print {
    body { zoom: 0.8; }
    .no-print, .no-print * { display: none !important; }
    .transcript-scroll { max-height: none; overflow: visible; }
}

/* --- Responsive tweaks --- */
@media (max-width: 767.98px) {
    .va-hero h1 { font-size: 1.5rem; }
    .va-hero { padding: 2rem 1rem; }
    .transcript-scroll { max-height: 40vh; }
}