/* =========================================
   TIMELINE CONFIGURATION (CSS VARIABLES)
   ========================================= */
:root {

    /* --- DESKTOP SETTINGS --- */
    --t-unit-width: 35px;
    --t-ko-ratio: 2.2;
    --t-leg-ratio: 0.8;
    --t-max-screens: 1.0;
    --default-progress-time: 0.1s;

}

@media (max-width: 768px) {
    :root {
        /* --- MOBILE OVERRIDES --- */
        --t-unit-width: 15px;
        --t-ko-ratio: 2.0;
        --t-leg-ratio: 1.1;
        --t-max-screens: 2.0;
    }
}

/* =========================================
   TIMELINE LAYOUT
   ========================================= */

/* 0. Setup */
#app-subheader {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 1. The Sticky Wrapper (CSS State Machine) */
.timeline-sticky-wrapper {
    position: relative;
    width: 100%;
    background: rgba(14, 18, 23, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.08);

    /* Layering: Sits UNDER the Action Bar so it slides out */
    z-index: 1;

    /* 🟢 CLOSED STATE (Default) */
    /* It exists in the DOM (width is calculated) but is invisible */
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-100%); /* Tucked up behind the header */

    /* Hardware acceleration for smooth animation */
    will-change: height, opacity, transform;
    transition:
        height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease,
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🟢 OPEN STATE (Triggered by Body Class) */
body.advanced-active .timeline-sticky-wrapper {
    height: 125px; /* Exact height of your controls + track */
    opacity: 1;
    transform: translateY(0);
}

/* 2. The Controls (Buttons) */
.timeline-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    padding-bottom: 8px;
    pointer-events: auto;
    position: relative;
    width: 100%;
}

.timeline-nav-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.t-ctrl-btn {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim); /*font-size: 12px;*/ cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; padding: 0; line-height: 1;
}

.t-ctrl-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
    cursor: pointer;

    /* 🟢 GRID CENTERING: The most reliable way to center SVGs */
    display: grid;
    place-items: center;

    padding: 0;
    transition: all 0.2s ease;
}

.t-ctrl-btn.play-btn {
    width: 42px; height: 42px; /* Slightly larger for visual hierarchy */
    background: var(--accent);
    color: #000;
    border: none;
    box-shadow: 0 0 15px rgba(61, 209, 220, 0.3);
}

.t-ctrl-btn.play-btn.is-playing {

    box-shadow: 0 0 15px rgba(61, 209, 220, 0.3) !important;
}


/* Ensure the SVG itself doesn't have any strange inline margins */
.t-ctrl-btn svg {
    display: block;
}

.t-ctrl-btn.play-btn:hover {
    background: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.t-ctrl-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.2);
    transition: transform 0.1s;
}

/* 3. The Track Container */
.timeline-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 35px;
    height: 48px;
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.timeline-wrapper::-webkit-scrollbar { display: none; }

/* 4. The Line (Track) */
.timeline-track {
    position: absolute;
    top: 18px; /* The Impossibility Sandwich further down overrides this anyway */
    transform: translateY(-50%);
    height: 1.5px;
    background: rgba(255, 255, 255, 0.15);

    /* 🟢 Let CSS handle the stretching natively */
    left: 0 !important;
    width: 100% !important;

    z-index: 10;
    pointer-events: none;
}

.timeline-progress {
    height: 100%;
    width: 0;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(61, 209, 220, 0.4);
    border-radius: 2px;
    transition: width var(--default-progress-time) linear;
}

/* 5. The Scrubber (Thumb) */
.timeline-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #fff 25%, var(--accent) 100%);
    border: 1.5px solid #fff;
    border-radius: 50%;
    z-index: 999;
    box-shadow: 0 0 12px rgba(61, 209, 220, 0.6);
    cursor: grab;
    transition: left var(--default-progress-time) linear, border-radius 3s ease;
    pointer-events: auto;
    touch-action: none;
}

.timeline-thumb:active,
.timeline-wrapper:active .timeline-thumb {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

/*.timeline-wrapper:has(.start-node.active) .timeline-thumb*/
.timeline-wrapper:has(.draw-event.active) .timeline-thumb {
    border-radius: 4px;
}

/* 6. The Nodes Container */
.timeline-nodes {
    position: relative;
    height: 100%;
    flex-shrink: 0;
    margin: 0 auto;
    box-sizing: content-box;
}

/* =========================================
   NODE STYLES
   ========================================= */

.t-node {
    position: absolute;
    top: 0; bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 19px;
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
}

.t-node.start-node {
    padding-top: 18px;
}


.t-node .dot {
    width: 10px;
    height: 10px;
    background: var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
}

/* Make Draw nodes look like 'Special Events' */
.t-node.draw-event .dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /*transform: rotate(45deg); !* Diamond shape *!*/
    /*background: #f39c12; !* Gold/Amber *!*/
    /*box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);*/
}

.t-node.draw-event .label {
    /*font-size: 0.65rem;*/
    /*color: #f39c12;*/
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
}


.t-node .label {
    position: absolute;
    top: 36px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

/* 🟢 Safely tuck the Start/End labels into the 13px gap above the dot! */
.t-node.start-node .label,
.t-node.end-node .label {
    top: 3px;          /* Places it at the absolute top edge of the existing wrapper */
    bottom: auto;      /* Overrides any previous bottom values */
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;    /* Keeps the text box as tight as possible (9px tall) */
}


/*!* 🟢 The Temporary "Unrevealed" State (Bulletproof Specificity) *!*/
/*.t-node.completed.waiting-for-thumb.is-simulated .dot,*/
/*.t-node.completed.waiting-for-thumb.is-real .dot,*/
/*.t-node.waiting-for-thumb .dot {*/
/*    background: #0e1217 !important;*/
/*    border-color: rgba(255, 255, 255, 0.2) !important;*/
/*    box-shadow: none !important;*/
/*    transform: scale(1) !important;*/
/*}*/

/* Hide the label until the thumb reveals it */
.t-node.waiting-for-thumb .label {
    /*opacity: 0 !important;*/
}


/* --- STATES --- */

/* Base Completed (Safety Fallback) */
.t-node.completed .dot {
    opacity: 1;
}

/* 🟢 1. REAL (Cyan) */
.t-node.completed.is-real .dot {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 6px rgba(61, 209, 220, 0.4);
}

.t-node.partially-completed .dot {
    background: #0e1217 !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 6px rgba(61, 209, 220, 0.4);
}


/* 🟢 2. SIMULATED (Gold/Orange) */
.t-node.completed.is-simulated .dot {
    background: #f39c12 !important;
    border-color: #f39c12 !important;
    box-shadow: 0 0 6px rgba(243, 156, 18, 0.4);
}

/* 3. FUTURE (Dark) */
.t-node.future .dot {
    background: #0e1217 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    opacity: 1;
    box-shadow: none;
}

/* 1. The Tooltip Shape & Text */
.t-node[data-tooltip]::after {
    content: attr(data-tooltip); /* Pulls the text directly from the JS! */
    position: absolute;
    bottom: -30px; /* Pushes it below the timeline track */
    left: 50%;
    transform: translateX(-50%); /* Centers it perfectly */

    /* Styling */
    background-color: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid #333;

    /* Hide it by default */
    opacity: 0;
    pointer-events: none; /* Prevents it from flickering if the mouse hits it */
    transition: opacity 0.2s ease-in-out;
    z-index: 100;
}

/* 2. The Hover Trigger */
.t-node[data-tooltip]:hover::after {
    opacity: 1;
}


/* Container for the Teleported HTML Tooltip */
.node-tooltip-content {
    background-color: rgba(20, 24, 32, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out, visibility 0.15s;
    z-index: 999999;

    /* 🟢 Dynamically hug the content, but never wider than the screen */
    width: max-content;
    max-width: 90vw;
}

/* Dedicated styling for the Draw Tooltip text */
.tt-draw-text {
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* JS Trigger Class */
.node-tooltip-content.visible {
    opacity: 1;
    visibility: visible;
}

/* Arrow pointing UP (since tooltip sits below the timeline) */
.node-tooltip-content::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 5px 5px;
    border-style: solid;
    border-color: transparent transparent #334155 transparent;
}

/* Show on hover */
.t-node:hover .node-tooltip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =========================================
   GROUP MULTI-COLUMN LAYOUT (THE COMPACT FIX)
   ========================================= */
.tt-multi-group-wrapper {
    display: block;
    width: 100%;
}

/* 🟢 1. Spread into 3 columns on Desktop to kill vertical height */
.tt-multi-group-wrapper.two-cols {
    column-count: 3;
    column-gap: 20px;
}

/* Ensure a group isn't sliced in half between columns */
.tt-group-block {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 6px; /* 🟢 Tighter gap between groups */
}

/* 🟢 2. Squeeze the headers */
.tt-group-header {
    text-align: center;
    font-size: 9px; /* Slightly smaller for density */
    font-weight: 800;
    color: var(--text-dim, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 🟢 3. The Vertical Squish: Target matches ONLY inside the massive layout */
.tt-multi-group-wrapper .tt-row > div {
    padding: 2px 0; /* Cut down from 5px to 2px */
}

/* 🟢 4. Responsive Fallbacks */
@media (max-width: 1100px) {
    /* Small laptops/tablets drop to 2 columns */
    .tt-multi-group-wrapper.two-cols {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    /* Mobile drops to 1 column */
    .tt-multi-group-wrapper.two-cols {
        column-count: 1;
    }
}

.tt-group-header:first-child {
    margin-top: 0;
}


/* 🟢 THE HOLY GRAIL GRID (Fixed Alignment) */
.tt-matches-grid {
    display: grid;
    /* Changed 'auto' to '1fr'.
       This forces Team 1 and Team 2 to split the available column space 50/50,
       locking the score dead center across ALL groups! */
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
    column-gap: 8px; /* Slightly tighter gap looks better for dense data */
    align-items: center;
}

/* 🟢 MAGIC: Dissolve the row boundaries so cells jump to the parent grid */
.tt-row {
    display: contents;
}

/* Move the padding and borders to the individual cells */
.tt-row > div {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 11px;
    color: #e2e8f0;

    /* 🟢 Restored block formatting so truncation works again */
    white-space: nowrap;
    overflow: hidden;
}

/* Remove the border from the cells of the last row */
.tt-row:last-child > div {
    border-bottom: none;
    padding-bottom: 0;
}

/* =========================================
   TYPOGRAPHY & TRUNCATION
   ========================================= */
.tt-team {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 🟢 Team 1: Align right, but read normally (LTR).
   If it overflows, it truncates on the right side near the score (e.g., "Nottin... 1 : 0") */
.tt-team.tr-right {
    text-align: right;
    direction: ltr;
}

/* 🟢 Team 2: Align left, read normally (LTR). */
.tt-team.tr-left {
    text-align: left;
    direction: ltr;
}

.tt-score {
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 24px; /* 🟢 Prevents the center from wobbling if a score is "1:0" vs "10:9" */
}

/* Status Labels */
.tt-status {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.tt-real { color: var(--accent-cyan, #00f2fe); }
.tt-sim { color: var(--accent-gold, #f59e0b); }
.tt-postponed { color: #ef4444; }
.tt-future { color: #64748b; }

/* 4. ACTIVE (White) - Overrides everything */
.t-node.active .dot {
    background: #fff !important;
    border-color: #fff !important;
    transform: scale(1.0);
    z-index: 3;
    opacity: 1 !important;
    box-shadow: none;
}

/* Label Visibility */
.t-node.active .label,
.t-node:first-child .label,
.t-node:last-child .label,
.t-node.tick-major .label,
.t-node.bracket-node .label {
    opacity: 1;
}

.t-node.active .label {
    color: #fff;
    transform: translateY(2px);
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.t-node.start-node.active .label,
.t-node.end-node.active .label {
    color: #fff;
    transform: translateY(-2px);
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- DENSITY VARIANTS --- */

.t-node.tick:not(.tick-major) {
    padding-top: 21px;
}

.t-node.tick .dot { width: 6px; height: 6px; border-width: 1.5px; }
.t-node.tick-major .dot { width: 10px; height: 10px; border-width: 2px; }
.t-node.bracket-node .dot { width: 10px; height: 10px; }
.t-node.start-node .dot { width: 12px; height: 12px; border-radius: 50%; border-width: 2px;}

/* =========================================
   HOVER & MOBILE OVERRIDES
   ========================================= */

@media (hover: hover) {
    .t-node:not(.active):hover .dot {
        transform: scale(1.5);
        border-color: #fff;
        opacity: 1;
        z-index: 10;
    }

    /* Hover: Real (Cyan Glow) */
    .t-node.completed.is-real:not(.active):hover .dot {
        background: var(--accent) !important;
        box-shadow: 0 0 10px var(--accent);
        border-color: #fff !important;
    }

    /* Hover: Simulated (Gold Glow) */
    .t-node.completed.is-simulated:not(.active):hover .dot {
        background: #f39c12 !important;
        box-shadow: 0 0 10px #f39c12;
        border-color: #fff !important;
    }

    /* Hover: Future (Dim) */
    .t-node:not(.completed):not(.active):hover .dot {
        background: rgba(255, 255, 255, 0.2);
    }

    .t-ctrl-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .timeline-sticky-wrapper {
        padding-bottom: 10px !important;
    }

    .timeline-wrapper {
        overflow-x: hidden;
        padding: 0 30px;
    }

    .t-node.active .label { transform: translateY(2px); }

    .t-ctrl-btn.play-btn {
        background: #f8f9fa !important;
        color: #1a1a1a !important;
        box-shadow: none !important;
    }

}

/* =========================================
   UTILITIES
   ========================================= */
.no-transition,
.no-transition .timeline-progress,
.no-transition .timeline-thumb {
    transition: none !important;
}

.timeline-wrapper.is-dragging .timeline-thumb,
.timeline-wrapper.is-dragging .timeline-progress {
    transition: none !important;
}

/* 🟢 STATE 1: Timeline Closed (Default) */
/* Header Height (70px) + Gap (15px) = 85px */
#app-content,
#simulation-content {
    /* Uses CSS variable from app-shell.css */
    padding-top: 0 !important;

    /* Smoothly animate the padding when the timeline opens/closes */
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🟢 STATE 2: Timeline Open (Advanced Mode) */
/* Header (70px) + Timeline Height (62px) + Gap (15px) = 147px */
body.advanced-active #app-content {
    padding-top: 125px !important;
}

/* =========================================
   IMPOSSIBILITY SANDWICH FIX
   Layering: Progress (1) < Nodes (2) < Thumb (3)
   ========================================= */

/* 1. Dissolve the Parent Boundaries */
.timeline-track,
.timeline-nodes {
    /* 🟢 CRITICAL: 'auto' prevents these containers from trapping their children
       in a closed stacking context (unless opacity/transform are used). */
    z-index: auto !important;

    /* 🟢 CRITICAL: We must remove 'transform' from the track because
       transforms force a new stacking context, breaking this trick. */
    transform: none !important;
}

/* 2. Manually Re-Center the Track (Since we deleted transform) */
.timeline-track {
    /* Old was top: 18px + translateY(-50%).
       Track height is 1.5px. Half is 0.75px.
       18px - 0.75px = 17.25px. */
    top: 23.25px !important;
}

/* 3. Explicit Layering (The Sandwich) */

/* Bottom Bun: The Blue Line */
.timeline-progress {
    z-index: 1 !important;
}

/* Patty: The Golden Nodes (Siblings of Track) */
.t-node {
    z-index: 2 !important;
}

/* Top Bun: The Scrubber */
.timeline-thumb {
    z-index: 3 !important;
}

/* =========================================
   PREMIUM RIPPLE EFFECT (GPU Accelerated)
   ========================================= */
/* 1. Ensure the dot can host an absolute pseudo-element */
.t-node .dot {
    position: relative;
}

/* 2. Create the invisible ring */
.t-node .dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%) scale(1);
    border: 1.5px solid #fff; /* Crisp, solid line */
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

/* 3. The Animation Keyframes */
@keyframes premium-ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.8); /* Adjust scale if you want it wider */
        opacity: 0;
    }
}

/* 4. The Active State */
.t-node .dot.ripple-active {
    background: #fff !important;
    border-color: #fff !important;
}

.t-node .dot.ripple-active::after {
    animation: premium-ripple 0.35s ease-out forwards;
}

/* =========================================
   LEG NODE CLUSTERING & TOP LABELS
   ========================================= */

/* Fix the Vertical Off-Center Bug (20px padding + 4px dot center = 24px track center) */
.t-node.leg-node {
    width: 15px;
    padding-top: 20px !important;
}

.t-node.leg-node .dot {
    width: 8px;
    height: 8px;
}
.t-node.active.leg-node .dot {
    transform: scale(1.2);
}

/* 🟢 THE ABSOLUTE TOP LABEL (Shared Round Name) */
.absolute-top-label {
    position: absolute;
    top: 3px; /* Matches the Start/End label height perfectly */
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Lights up when triggered by JS */
.absolute-top-label.active {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transform: translateX(-50%) translateY(-2px);
}