/**
 * F1 InkyCloud - Custom Styles
 * Neobrutalist design system for E-Ink calendar
 */

/* Base font */
body {
    font-family: "Space Mono", monospace;
}

/* Animations */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Custom scrollbar for raw look - Global application */
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-left: 2px solid black;
    border-top: 2px solid black;
}
*::-webkit-scrollbar-thumb {
    background: black;
    border: 2px solid #f0f0f0;
}
*::-webkit-scrollbar-thumb:hover {
    background: #dc2626;
}

/* Race item cards */
.race-item {
    transition: all 0.05s;
}
.race-item:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
    background: #fff;
}
.race-item:active {
    transform: translate(0px, 0px);
    box-shadow: none;
}
.race-item.selected,
.race-item.selected:hover {
    background: black;
    color: white;
    transform: none;
    box-shadow: none;
}
.race-item.selected .race-date {
    color: #dc2626;
}

/* Timezone filter buttons */
.tz-filter-btn {
    transition: all 0.1s;
}
.tz-filter-btn.active {
    background: black;
    color: white;
}
.tz-filter-btn:active {
    transform: translate(1px, 1px);
    box-shadow: none;
}

/* Control buttons active state */
.control-btn:active,
button.control-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Hide scrollbar for cleaner look in some panels but allow scroll */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* API Docs specific styles */
.code-block {
    background: #000;
    border: 2px solid #000;
    overflow-x: auto;
}
.code-block code {
    color: #e2e8f0;
    font-size: 0.875rem;
}
.tab-btn {
    transition: all 0.1s;
    border: 2px solid #000;
}
.tab-btn.active {
    background: #000;
    color: white;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}
.copy-btn {
    transition: all 0.1s;
}
.copy-btn:hover {
    background: #dc2626;
}
.copy-btn.copied {
    background: #059669;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
}
.modal.active {
    display: flex;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}
.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-bar {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.skeleton-preview {
    aspect-ratio: 800 / 480;
    max-width: 800px;
    width: 100%;
}