/* ============================================================
   GSP Video Telestration Suite — Styling
   Professional dark-mode analyst UI for D1 recruit reels.
   All classes prefixed `gsp-tel-` to avoid collisions.
   ============================================================ */

.gsp-tel-root {
    --gsp-tel-bg:         #0a1628;
    --gsp-tel-panel:      #0f1d33;
    --gsp-tel-panel-2:    #162a45;
    --gsp-tel-border:     #1e3559;
    --gsp-tel-text:       #e8eef8;
    --gsp-tel-muted:      #8fa3c0;
    --gsp-tel-accent:     #FFD400;   /* subject lock yellow */
    --gsp-tel-accent-2:   #00C2FF;   /* player / run cyan */
    --gsp-tel-danger:     #ef4444;
    --gsp-tel-success:    #16a34a;
    --gsp-tel-radius:     10px;

    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    color: var(--gsp-tel-text);
    background: var(--gsp-tel-bg);
    border-radius: var(--gsp-tel-radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    user-select: none;
    -webkit-user-select: none;
}

/* ---------- Toolbar ---------- */
.gsp-tel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: var(--gsp-tel-panel);
    border: 1px solid var(--gsp-tel-border);
    border-radius: var(--gsp-tel-radius);
    padding: 8px 10px;
}

.gsp-tel-toolbar-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.gsp-tel-toolbar-sep {
    width: 1px;
    height: 24px;
    background: var(--gsp-tel-border);
    margin: 0 6px;
}

.gsp-tel-btn {
    background: var(--gsp-tel-panel-2);
    color: var(--gsp-tel-text);
    border: 1px solid var(--gsp-tel-border);
    border-radius: 6px;
    padding: 7px 11px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.gsp-tel-btn:hover {
    background: var(--gsp-tel-border);
}

.gsp-tel-btn:active {
    transform: translateY(1px);
}

.gsp-tel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gsp-tel-btn.is-active {
    border-color: var(--gsp-tel-accent);
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.25);
    background: rgba(255, 212, 0, 0.12);
}

.gsp-tel-btn.gsp-tel-btn-primary {
    background: var(--gsp-tel-accent);
    color: #1a1300;
    border-color: var(--gsp-tel-accent);
}

.gsp-tel-btn.gsp-tel-btn-primary:hover {
    background: #ffdc2b;
}

.gsp-tel-btn.gsp-tel-btn-danger {
    background: transparent;
    color: var(--gsp-tel-danger);
    border-color: rgba(239, 68, 68, 0.4);
}

.gsp-tel-btn.gsp-tel-btn-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: var(--gsp-tel-danger);
}

.gsp-tel-btn.gsp-tel-btn-ghost {
    background: transparent;
    border-color: var(--gsp-tel-border);
    color: var(--gsp-tel-muted);
}

.gsp-tel-btn.gsp-tel-btn-ghost:hover {
    color: var(--gsp-tel-text);
}

/* Preset buttons pick up a subtle accent stripe */
.gsp-tel-preset-btn[data-preset="subject_lock"]     { border-left: 3px solid #FFD400; }
.gsp-tel-preset-btn[data-preset="player_spotlight"] { border-left: 3px solid #00C2FF; }
.gsp-tel-preset-btn[data-preset="ball_path"]        { border-left: 3px solid #FFFFFF; }
.gsp-tel-preset-btn[data-preset="run_path"]         { border-left: 3px solid #00C2FF; }
.gsp-tel-preset-btn[data-preset="pass_option"]      { border-left: 3px dashed #00C2FF; }
.gsp-tel-preset-btn[data-preset="space_zone"]       { border-left: 3px solid #FFD400; }
.gsp-tel-preset-btn[data-preset="defensive_line"]   { border-left: 3px solid #FF3D8A; }
.gsp-tel-preset-btn[data-preset="label_text"]       { border-left: 3px solid #E8EEF8; }

/* ---------- Stage (video + canvas) ---------- */
.gsp-tel-stage {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: var(--gsp-tel-radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gsp-tel-stage.gsp-tel-aspect-9-16 {
    aspect-ratio: 9 / 16;
    max-height: 75vh;
}

.gsp-tel-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.gsp-tel-canvas-wrap {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.gsp-tel-canvas-wrap.is-drawing {
    cursor: crosshair;
}

.gsp-tel-canvas-wrap .canvas-container,
.gsp-tel-canvas-wrap canvas {
    pointer-events: auto !important;
}

/* ---------- Timeline ---------- */
.gsp-tel-timeline {
    position: relative;
    height: 44px;
    background: var(--gsp-tel-panel);
    border: 1px solid var(--gsp-tel-border);
    border-radius: var(--gsp-tel-radius);
    padding: 8px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gsp-tel-timeline-track {
    position: relative;
    flex: 1;
    background: var(--gsp-tel-border);
    border-radius: 4px;
    height: 6px;
    cursor: pointer;
}

.gsp-tel-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--gsp-tel-accent);
    border-radius: 4px;
    width: 0%;
    pointer-events: none;
    transition: width 0.08s linear;
}

.gsp-tel-timeline-tick {
    position: absolute;
    top: -5px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    transform: translateX(-50%);
    cursor: pointer;
    transition: transform 0.12s;
}

.gsp-tel-timeline-tick:hover {
    transform: translateX(-50%) scaleY(1.3);
}

.gsp-tel-timeline-times {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--gsp-tel-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Status bar ---------- */
.gsp-tel-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.78rem;
    color: var(--gsp-tel-muted);
    padding: 4px 6px;
    min-height: 22px;
}

.gsp-tel-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--gsp-tel-panel);
    border: 1px solid var(--gsp-tel-border);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.gsp-tel-status-chip.is-drawing {
    border-color: var(--gsp-tel-accent);
    color: var(--gsp-tel-accent);
}

.gsp-tel-hint {
    color: var(--gsp-tel-muted);
    font-style: italic;
}

/* ---------- Empty / loading ---------- */
.gsp-tel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 40px;
    color: var(--gsp-tel-muted);
    text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .gsp-tel-root {
        padding: 8px;
        gap: 8px;
    }
    .gsp-tel-btn {
        padding: 6px 9px;
        font-size: 0.78rem;
    }
    .gsp-tel-toolbar-sep {
        display: none;
    }
    .gsp-tel-stage {
        max-height: 60vh;
    }
}

/* Fabric canvas selection handles — match our accent palette */
.gsp-tel-canvas-wrap .canvas-container {
    background: transparent !important;
}