/**
 * F1 Manager – Page transitions ("Pit Stop" effect) + Mobile-First cockpit + Skeleton loaders
 * Hardware-accelerated (transform, opacity). No horizontal wobble.
 */

/* ========== GLOBAL: NO HORIZONTAL WOBBLE ========== */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
}
body * {
    box-sizing: border-box;
}

/* ========== SPRING EASING (suspension feel) ========== */
:root {
    --f1-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --f1-spring-snap: cubic-bezier(0.32, 0.72, 0.46, 1.1);
    --f1-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --f1-transition-duration-entry: 0.5s;
    --f1-transition-duration-exit: 0.35s;
    --f1-stagger-step: 0.06s;
}

/* ========== PAGE TRANSITION VIEWPORT (navbar stays, content slides) ========== */
.page-transition-viewport {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-transition-content {
    position: relative;
    min-height: 50vh;
    /* Entry: start slightly below + transparent for stagger */
}
.page-transition-content .page-transition-inner {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--f1-transition-duration-entry) var(--f1-spring),
                transform var(--f1-transition-duration-entry) var(--f1-spring);
    transition-delay: 0.05s;
}
.page-transition-content.entry-ready .page-transition-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children (hero, cards, etc.) */
.page-transition-content .page-transition-inner > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s var(--f1-spring), transform 0.45s var(--f1-spring);
}
.page-transition-content.entry-ready .page-transition-inner > * {
    opacity: 1;
    transform: translateY(0);
}
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(1) { transition-delay: 0.08s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(2) { transition-delay: 0.14s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(3) { transition-delay: 0.20s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(4) { transition-delay: 0.26s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(5) { transition-delay: 0.32s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(6) { transition-delay: 0.38s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(7) { transition-delay: 0.44s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(8) { transition-delay: 0.50s; }
.page-transition-content.entry-ready .page-transition-inner > *:nth-child(n+9) { transition-delay: 0.56s; }

/* Stagger for grid children (e.g. .page-cards, .dashboard-grid) */
.page-transition-content.entry-ready .page-cards > *,
.page-transition-content.entry-ready .dashboard-grid > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--f1-spring), transform 0.4s var(--f1-spring);
}
.page-transition-content.entry-ready .page-cards > * { opacity: 1; transform: translateY(0); }
.page-transition-content.entry-ready .dashboard-grid > * { opacity: 1; transform: translateY(0); }
.page-transition-content.entry-ready .page-cards > *:nth-child(1),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(1) { transition-delay: 0.15s; }
.page-transition-content.entry-ready .page-cards > *:nth-child(2),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(2) { transition-delay: 0.22s; }
.page-transition-content.entry-ready .page-cards > *:nth-child(3),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(3) { transition-delay: 0.29s; }
.page-transition-content.entry-ready .page-cards > *:nth-child(4),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(4) { transition-delay: 0.36s; }
.page-transition-content.entry-ready .page-cards > *:nth-child(5),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(5) { transition-delay: 0.43s; }
.page-transition-content.entry-ready .page-cards > *:nth-child(n+6),
.page-transition-content.entry-ready .dashboard-grid > *:nth-child(n+6) { transition-delay: 0.5s; }

/* ========== EXIT: SHUTTER / VISOR CLOSE ========== */
.page-transition-content.page-exit .page-transition-inner {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
    transition: opacity var(--f1-transition-duration-exit) var(--f1-ease-out-expo),
                transform var(--f1-transition-duration-exit) var(--f1-ease-out-expo);
}
/* Wipe: clip from bottom (car passing) */
.page-transition-content.page-exit-wipe .page-transition-inner {
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.25s ease-out, transform 0.3s var(--f1-ease-out-expo);
}

/* ========== SKELETON LOADERS (shimmer with accent) ========== */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%
    );
    background-size: 200% 100%;
    animation: f1-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--f1-radius-tight, 4px);
}
.skeleton-accent {
    background: linear-gradient(
        90deg,
        rgba(220,0,0,0.08) 0%,
        rgba(220,0,0,0.18) 50%,
        rgba(220,0,0,0.08) 100%
    );
    background-size: 200% 100%;
    animation: f1-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--f1-radius-tight, 4px);
}
@keyframes f1-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-bar {
    height: 8px;
    width: 100%;
    margin-top: 0.5rem;
}
.skeleton-card {
    height: 100px;
    border-radius: var(--f1-radius-card, 8px);
}

.skeleton-loading {
    pointer-events: none;
}
.skeleton-loading .skeleton-replace {
    visibility: hidden;
    position: absolute;
    left: -9999px;
}
.skeleton-loading::after {
    content: '';
    display: block;
    height: 60px;
    margin-top: 0.5rem;
    border-radius: var(--f1-radius-tight, 4px);
    background: linear-gradient(
        90deg,
        rgba(220,0,0,0.06) 0%,
        rgba(220,0,0,0.14) 50%,
        rgba(220,0,0,0.06) 100%
    );
    background-size: 200% 100%;
    animation: f1-skeleton-shimmer 1.2s ease-in-out infinite;
}

/* Skeleton placeholder: show until content replaces it */
.skeleton-placeholder { display: block; }
.bil-tab-content .skeleton-placeholder ~ .loading-components,
.standings-table-inner .skeleton-placeholder ~ p,
#races-list .skeleton-placeholder ~ p,
#sponsors-content .skeleton-placeholder ~ p { display: none; }
#car-stats-container .skeleton-placeholder ~ p { display: none; }

/* ========== FLUID TYPOGRAPHY (Foldable → 4K) ========== */
.page-hero-title,
.dashboard-hero .page-hero-title {
    font-size: clamp(1.35rem, 4vw + 1rem, 2.25rem);
}
.page-hero-tagline {
    font-size: clamp(0.7rem, 1.5vw + 0.5rem, 0.85rem);
}
.home-title-f1 {
    font-size: clamp(2rem, 6vw + 1rem, 4rem);
}
.home-title-manager {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem);
}
.container h2,
.race-result-header h2,
.season-detail-page h2 {
    font-size: clamp(1.2rem, 3vw + 0.8rem, 1.75rem);
}
.dashboard-card-title,
.page-card-info h3,
.page-card-info h4 {
    font-size: clamp(0.95rem, 1.5vw + 0.6rem, 1.15rem);
}

/* ========== TOUCH FEEDBACK (haptic-style: glow + scale) ========== */
@media (hover: none) and (pointer: coarse) {
    .btn:active,
    .page-btn-primary:active,
    .page-btn-secondary:active,
    .bil-tab:active,
    .home-quick-btn:active,
    a.page-card:active .page-card-inner,
    .room-card:active {
        transform: scale(0.97);
        -webkit-tap-highlight-color: transparent;
    }
    .page-btn-primary:active {
        box-shadow: 0 0 16px rgba(220, 0, 0, 0.5);
    }
    .nav-links a:active {
        opacity: 0.85;
    }
}
/* Remove default tap highlight globally for F1 feel */
button, a, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ========== MOBILE: RESULT TABLE → DRIVER CARDS (vertical telemetry stack) ========== */
@media (max-width: 640px) {
    .result-table thead {
        display: none;
    }
    .result-table,
    .result-table tbody,
    .result-table tr,
    .result-table td {
        display: block;
    }
    .result-table tbody tr {
        background: var(--f1-glass-bg, rgba(22, 22, 22, 0.6));
        border: 1px solid var(--f1-glass-border, rgba(255,255,255,0.08));
        border-radius: var(--f1-radius-card, 8px);
        padding: 1rem;
        margin-bottom: 0.75rem;
        backdrop-filter: blur(12px);
    }
    .result-table tbody tr.my-result-row {
        border-color: rgba(220, 0, 0, 0.35);
        box-shadow: 0 0 16px rgba(220, 0, 0, 0.12);
    }
    .result-table td {
        padding: 0.4rem 0;
        border: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }
    .result-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted, rgba(255,255,255,0.5));
    }
    .result-table td:first-child {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
}

/* Standings table → cards on small screens */
@media (max-width: 640px) {
    .standings-table-content thead {
        display: none;
    }
    .standings-table-content tbody tr {
        display: block;
        background: var(--f1-glass-bg, rgba(22, 22, 22, 0.6));
        border: 1px solid var(--f1-glass-border, rgba(255,255,255,0.08));
        border-radius: var(--f1-radius-card, 8px);
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    .standings-table-content td {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0;
    }
    .standings-table-content td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--text-muted, rgba(255,255,255,0.5));
    }
}

/* ========== THUMB-ZONE: BOTTOM ACTION BAR (mobile) ========== */
@media (max-width: 768px) {
    .mobile-actions-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
        background: var(--f1-glass-bg, rgba(14, 14, 14, 0.95));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--f1-glass-border, rgba(255,255,255,0.08));
        box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    }
    .mobile-actions-bar .btn,
    .mobile-actions-bar .page-btn-primary,
    .mobile-actions-bar .page-btn-secondary {
        flex: 1;
        min-height: 48px;
        justify-content: center;
        font-size: 0.9rem;
    }
    /* Reserve space when using fixed bottom bar */
    body.has-mobile-actions-bar .page-transition-viewport,
    body.has-mobile-actions-bar .main-content {
        padding-bottom: 80px;
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }

    /* Thumb zone: primary CTA duplicated or moved to bottom (optional) */
    .thumb-zone-primary {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99;
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        padding-left: calc(1rem + env(safe-area-inset-left));
        padding-right: calc(1rem + env(safe-area-inset-right));
        background: var(--f1-glass-bg, rgba(14, 14, 14, 0.95));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--f1-glass-border, rgba(255,255,255,0.08));
        box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    }
    .thumb-zone-primary .page-btn-primary,
    .thumb-zone-primary .btn {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }
    /* Reserve space so content doesn't sit under the fixed button */
    body:has(.thumb-zone-primary) .page-transition-viewport,
    body:has(.thumb-zone-primary) .main-content {
        padding-bottom: 72px;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
    /* Hide the in-flow duplicate of the same button on mobile (keep one at top for accessibility order, one fixed for thumb) */
    .thumb-zone-skip-on-mobile {
        display: none !important;
    }
}
@media (min-width: 769px) {
    .thumb-zone-primary { display: none !important; }
}
@media (min-width: 769px) {
    .thumb-zone-skip-on-mobile { display: flex !important; }
}
.thumb-zone-skip-on-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ========== PAGES THAT SKIP TRANSITION WRAPPER (Home + Race) ========== */
/* Startpage och race-sida: ingen fade-in, wrappern ska inte dölja innehållet */
body.page-home .page-transition-content .page-transition-inner,
body.page-race .page-transition-content .page-transition-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
body.page-home .page-transition-content,
body.page-race .page-transition-content {
    min-height: 0;
}
body.page-home .page-transition-content .page-transition-inner > *,
body.page-race .page-transition-content .page-transition-inner > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Startsida: content/inner fyller main så .home-hero (position:absolute; height:100%) får rätt höjd */
body.page-home .page-transition-content,
body.page-home .page-transition-inner {
    height: 100%;
    min-height: 100%;
}