/* ══════════════════════════════════════════
   DataDrivers F1 Collector — Base Styles
   McLaren-themed pit wall aesthetic
   ══════════════════════════════════════════ */

/* Formula1 Font */
@font-face {
    font-family: 'Formula1';
    src: url('/static/Formula1-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Formula1';
    src: url('/static/Formula1-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/*
 * Carbon Fiber 2×2 Twill Weave
 * Realistic interlocking fiber bundles with glossy sheen highlight.
 */
body {
    font-family: 'Formula1', sans-serif;
    background-color: #111114;
    background-image:
        /* Sheen highlight — pronounced glossy reflection */
        radial-gradient(ellipse 60% 50% at 30% 25%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 40%, transparent 70%),
        /* Secondary sheen — softer, lower right */
        radial-gradient(ellipse 40% 35% at 75% 70%, rgba(255,255,255,0.05) 0%, transparent 60%),
        /* Warp fibers — diagonal A */
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 1px,
            rgba(255,255,255,0.045) 1px,
            rgba(255,255,255,0.045) 3px,
            transparent 3px,
            transparent 4px
        ),
        /* Warp fibers — diagonal B */
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 1px,
            rgba(255,255,255,0.035) 1px,
            rgba(255,255,255,0.035) 3px,
            transparent 3px,
            transparent 4px
        ),
        /* Weave cell grid — horizontal */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 4px,
            rgba(0,0,0,0.35) 4px,
            rgba(0,0,0,0.35) 5px,
            transparent 5px,
            transparent 8px
        ),
        /* Weave cell grid — vertical */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 4px,
            rgba(0,0,0,0.35) 4px,
            rgba(0,0,0,0.35) 5px,
            transparent 5px,
            transparent 8px
        ),
        /* Cell tonal alternation — checkerboard */
        repeating-conic-gradient(
            rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%
        );
    background-size:
        100% 100%,
        100% 100%,
        8px 8px,
        8px 8px,
        8px 8px,
        8px 8px,
        8px 8px;
    background-blend-mode: normal, normal, overlay, overlay, normal, normal, normal;
    color: #f0f0f0;
    min-height: 100vh;
}

/* Racing Stripe */
.racing-stripe {
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%, #ff7300 10%, #ff7300 90%, transparent 100%);
}

/* LED Indicators */
.led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.led-green { background: #00e676; box-shadow: 0 0 6px #00e676, 0 0 14px rgba(0,230,118,0.3); }
.led-red { background: #ff1744; box-shadow: 0 0 6px #ff1744, 0 0 14px rgba(255,23,68,0.3); }
.led-amber { background: #ffab00; box-shadow: 0 0 6px #ffab00, 0 0 14px rgba(255,171,0,0.3); }
.led-blue { background: #00b0ff; box-shadow: 0 0 6px #00b0ff; }
.led-off { background: #333338; }
.led-pulse { animation: led-pulse 2s ease-in-out infinite; }
@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Pit Wall Panel */
.pit-panel {
    background: #1a1a1e;
    border: 1px solid #2e2e34;
    border-radius: 2px 12px 2px 2px;
    position: relative;
    overflow: hidden;
}
.pit-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #ff7300;
    opacity: 0.5;
}
.pit-panel.active::before {
    opacity: 1;
    box-shadow: 0 2px 12px rgba(255,115,0,0.3);
}

/* Speed Display */
.speed-display {
    font-family: 'Formula1', monospace;
    font-weight: 700;
    font-size: 3rem;
    color: #ff7300;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(255,115,0,0.3);
    line-height: 1;
}

/* Metric Label */
.metric-label {
    font-family: 'Formula1', sans-serif;
    font-weight: 400;
    font-size: 0.6rem;
    color: #55555e;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Form Inputs */
.f1-input {
    background: #141416;
    border: 1px solid #2e2e34;
    border-radius: 4px;
    color: #f0f0f0;
    font-family: 'Formula1', sans-serif;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s;
    outline: none;
    width: 100%;
}
.f1-input:focus { border-color: #ff7300; }
.f1-input::placeholder { color: #3a3a42; }

.f1-select {
    background: #141416;
    border: 1px solid #2e2e34;
    border-radius: 4px;
    color: #f0f0f0;
    font-family: 'Formula1', sans-serif;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    outline: none;
    width: 100%;
    cursor: pointer;
}
.f1-select:focus { border-color: #ff7300; }

/* Buttons */
.btn-papaya {
    background: #ff7300;
    color: #0d0d0d;
    font-family: 'Formula1', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-papaya:hover { background: #ff8c33; }
.btn-papaya:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-outline {
    background: transparent;
    color: #ff7300;
    border: 1px solid #ff7300;
    font-family: 'Formula1', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-outline:hover { background: rgba(255,115,0,0.1); }

.btn-ghost {
    background: #222226;
    color: #8a8a94;
    border: 1px solid #2e2e34;
    font-family: 'Formula1', sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-ghost:hover { border-color: #3a3a42; color: #f0f0f0; }

/* Toggle Switch */
.toggle-track {
    width: 52px; height: 28px;
    background: #2e2e34;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
.toggle-track.active { background: #ff7300; }
.toggle-track .toggle-thumb {
    width: 22px; height: 22px;
    background: #f0f0f0;
    border-radius: 50%;
    position: absolute;
    top: 3px; left: 3px;
    transition: transform 0.3s;
}
.toggle-track.active .toggle-thumb { transform: translateX(24px); }

/* Small toggle variant */
.toggle-track.toggle-sm { width: 36px; height: 20px; border-radius: 10px; }
.toggle-track.toggle-sm .toggle-thumb { width: 14px; height: 14px; top: 3px; left: 3px; }
.toggle-track.toggle-sm.active .toggle-thumb { transform: translateX(16px); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0d0d0d; }
::-webkit-scrollbar-thumb { background: #3a3a42; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #55555e; }

/* Cloak for Alpine.js */
[x-cloak] { display: none !important; }