/* ================================================================
   draw-stages-flowrail.css  —  wwwroot/css/draw-stages-flowrail.css

   Styles for the FLOW-RAIL layout (EventDrawStagesTabFlowRail.razor).
   Must be GLOBAL (same as draw-stages-global.css) and loaded AFTER it,
   because it intentionally overrides a couple of the .spl-* rules.

   This file only styles the new chrome:
     • .flow-rail            – the horizontal stage rail (nav + status + progress)
     • .flow-node            – each stage node in the rail
     • .flow-arrow           – connector between nodes
     • .flow-stage-panel     – the single focused-stage container

   All the inner content (KO bracket, group cards, standings tables,
   round-robin fixtures, stage headers/bodies) keeps reusing the
   existing global classes from draw-stages-global.css.
   ================================================================ */


/* Reuse the same accent tokens as draw-stages-global.css.
   (Re-declared here so this file works even if loaded standalone.) */
:root {
    --spl-qualifying: #7c8eff;
    --spl-group: #34d399;
    --spl-maindraw: #f59e0b;
}


/* ================================================================
   FLOW RAIL  — replaces the old chips + summary cards + action bar
   ================================================================ */

.flow-rail {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    overflow-x: auto;
}

/* ── A single stage node (it's a <button>, so reset button chrome) ── */
.flow-node {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

    .flow-node:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .flow-node:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

    .flow-node.flow-node--active {
        background: var(--mud-palette-background-grey);
        border-color: var(--mud-palette-lines-default);
        box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.05);
    }

/* ── Node icon tile ── */
.flow-node-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.flow-node.flow-q .flow-node-ico {
    color: var(--spl-qualifying);
}

.flow-node.flow-g .flow-node-ico {
    color: var(--spl-group);
}

.flow-node.flow-k .flow-node-ico {
    color: var(--spl-maindraw);
}

.flow-node.flow-node--active .flow-node-ico {
    border-color: currentColor;
}

/* ── Node text column ── */
.flow-node-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.flow-node-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-node-meta {
    font-size: 0.64rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flow-node-status {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: capitalize;
}

/* Status dot (reuses the same semantics as .spl-status-dot) */
.flow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.flow-dot-planned {
    background: var(--mud-palette-text-disabled);
}

.flow-dot-running {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34,197,94,0.55);
}

.flow-dot-completed {
    background: #818cf8;
}

/* ── Arrow between nodes ── */
.flow-arrow {
    display: grid;
    place-items: center;
    width: 22px;
    flex-shrink: 0;
    color: var(--mud-palette-text-disabled);
}

/* ── Progress ring (right side of each node) ── */
.flow-node-prog {
    flex-shrink: 0;
    margin-left: 6px;
    display: grid;
    place-items: center;
}

.flow-ring {
    width: 34px;
    height: 34px;
}

.flow-ring-track {
    fill: none;
    stroke: var(--mud-palette-lines-default);
    stroke-width: 3;
}

.flow-ring-fill {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s ease;
}

.flow-node.flow-q .flow-ring-fill {
    stroke: var(--spl-qualifying);
}

.flow-node.flow-g .flow-ring-fill {
    stroke: var(--spl-group);
}

.flow-node.flow-k .flow-ring-fill {
    stroke: var(--spl-maindraw);
}


/* ================================================================
   FOCUSED STAGE PANEL
   ================================================================ */

.flow-stage-panel {
    display: flex;
    flex-direction: column;
}

    /* In single-focus mode we only ever show one stage, so the vertical
   pipeline connectors from the old layout are not needed. */
    .flow-stage-panel .spl-connector {
        display: none;
    }

    /* The old layout hid admin action buttons under 960px. In the Flow
   Rail the focused stage gets the full width, so we keep the per-stage
   toolbar visible (and wrapping) on every screen size.
   Scoped under .flow-stage-panel so it can't affect other pages. */
    .flow-stage-panel .spl-header-actions {
        display: flex !important;
        flex-wrap: wrap;
    }


/* ================================================================
   MOBILE  — rail stacks into a vertical stage list
   ================================================================ */

@media (max-width: 760px) {
    .flow-rail {
        flex-direction: column;
        gap: 4px;
    }

    .flow-node {
        min-width: 0;
        width: 100%;
    }

    .flow-arrow {
        width: 100%;
        height: 16px;
        transform: rotate(90deg);
    }
}