/* Event Portal Focus Mode & Interactive Styles */

/* Visually Hidden Helper for ARIA accessibility */
.tm-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus Mode Layout Toggles */
.tm-focus-mode .tm-event-hero {
    display: none !important;
}

/* Desktop Grid Layout in Focus Mode */
@media (min-width: 1024px) {
    .tm-focus-mode .tm-focus-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .tm-focus-mode .tm-focus-sidebar {
        position: sticky;
        top: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    .tm-focus-mode .tm-mobile-nav {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    .tm-focus-mode .tm-focus-sidebar {
        display: none !important;
    }
    .tm-focus-mode .tm-mobile-nav {
        display: block !important;
    }
}

.tm-event-workspace {
    min-width: 0;
}

.tm-table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

/* Deep-Link Target Highlight */
.tm-deep-link-target {
    outline: 3px solid rgba(79, 70, 229, 0.8) !important;
    outline-offset: 3px !important;
    animation: tm-target-flash 2s ease;
}

@keyframes tm-target-flash {
    0%, 100% {
        outline-color: rgba(79, 70, 229, 0.1);
        box-shadow: none;
    }
    50% {
        outline-color: rgba(79, 70, 229, 1);
        box-shadow: 0 0 20px rgba(79, 70, 229, 0.4);
    }
}

/* Skeleton Loaders */
.tm-skeleton-box {
    background-color: #f1f5f9;
    border-radius: 0.75rem;
    animation: tm-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes tm-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Live Sync Status Indicators */
.tm-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.tm-sync-badge[data-status="connecting"] {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.tm-sync-badge[data-status="live"] {
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.tm-sync-badge[data-status="delayed"] {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.tm-sync-badge[data-status="stale"] {
    background-color: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.tm-sync-badge[data-status="offline"],
.tm-sync-badge[data-status="error"] {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.tm-sync-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: currentColor;
}

.tm-sync-badge[data-status="live"] .tm-sync-dot {
    animation: tm-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes tm-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Accessibility: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .tm-skeleton-box,
    .tm-sync-dot,
    .tm-deep-link-target {
        animation: none !important;
        transition: none !important;
    }
}

/* Official World Taekwondo Arena Board Custom CSS */
.tm-arena-card {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.tm-arena-card * {
    color: inherit;
}

.tm-arena-header-bar {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

.tm-arena-yellow-badge {
    background-color: #dfff00 !important;
    color: #000000 !important;
    font-weight: 900 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.tm-arena-blue-bar {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-left: 6px solid #60a5fa !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3) !important;
}

.tm-arena-red-bar {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-left: 6px solid #f87171 !important;
    box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.3) !important;
}

.tm-arena-team-badge-blue {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
    border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

.tm-arena-team-badge-red {
    background-color: #450a0a !important;
    color: #fee2e2 !important;
    border: 1px solid rgba(252, 165, 165, 0.3) !important;
}

/* Fullscreen Overlay Broadcast CSS */
.tm-fs-card {
    background-color: #141722 !important;
    border: 1px solid #1e293b !important;
    color: #ffffff !important;
}

.tm-fs-header-bar {
    background-color: #1b202e !important;
    border: 1px solid #334155 !important;
}

.tm-fs-yellow-badge {
    background-color: #dfff00 !important;
    color: #000000 !important;
    font-weight: 900 !important;
}

.tm-fs-blue-bar {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-left: 5px solid #60a5fa !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3) !important;
}

.tm-fs-red-bar {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-left: 5px solid #f87171 !important;
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.3) !important;
}

.tm-fs-team-badge-blue {
    background-color: #1e3a8a !important;
    color: #dbeafe !important;
    border: 1px solid rgba(147, 197, 253, 0.3) !important;
}

.tm-fs-team-badge-red {
    background-color: #450a0a !important;
    color: #fee2e2 !important;
    border: 1px solid rgba(252, 165, 165, 0.3) !important;
}

.tm-fs-upcoming-box {
    background-color: #1b202e !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
}