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

   Load AFTER draw-stages-global.css. This file removes visual noise
   from EventDrawStagesTab without modifying any razor or original CSS.

   What it overrides:
     • Top accent stripe on summary cards (kept but unified)
     • Left accent bar on stage headers (REMOVED — was competing with top band)
     • Big gradient backgrounds on group/KO panel headers (REMOVED)
     • Saturated filled action buttons (softened to outlined / subtle)
     • Group A panel left-border accent (REMOVED)
     • Status chip — single consistent style across all surfaces

   Nothing here is destructive — original styles remain, just overridden.
================================================================ */


/* ================================================================
   1. SUMMARY CARDS — unified status band, no competing borders
   ================================================================ */

/* Make top accent stripe more consistent and slightly thicker */
.spl-summary-card::before {
    height: 1px !important;
}

/* Match the running status with the proper green band */
.spl-summary-card.spl-group::before {
    background: var(--spl-group) !important;
}

.spl-summary-card.spl-maindraw::before {
    background: var(--spl-maindraw) !important;
}

.spl-summary-card.spl-qualifying::before {
    background: var(--spl-qualifying) !important;
}

/* Keep stage-type colors (not status-based) for the top band */
/* This matches the previous design and the user's preference */

/* Unified status chip-style for summary cards */
.spl-summary-status {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-grey);
    width: fit-content;
    margin-top: 8px !important;
}

.spl-summary-card:has(.spl-dot-running) .spl-summary-status {
    background: rgba(16,185,129,0.12);
    color: #0F6E56;
    border-color: rgba(16,185,129,0.30);
}

.spl-summary-card:has(.spl-dot-planned) .spl-summary-status {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-lines-default);
}

.spl-summary-card:has(.spl-dot-completed) .spl-summary-status {
    background: rgba(99,102,241,0.10);
    color: var(--mud-palette-primary);
    border-color: rgba(99,102,241,0.28);
}

/* Status dot doesn't need glowing shadow */
.spl-status-dot {
    box-shadow: none !important;
}


/* ================================================================
   2. STAGE PANEL HEADERS — remove left accent bar
   ================================================================ */

/* Hide the left accent — it competes with the top band on summary cards */
.spl-header-accent {
    display: none !important;
}

/* Use full padding now that accent bar is gone */
.spl-stage-header {
    padding: 12px 16px !important;
    background: var(--mud-palette-surface) !important;
}

/* Add a top-band to stage headers similar to summary cards */
.spl-stage-card {
    position: relative;
}

    .spl-stage-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5px;
        z-index: 1;
    }

    .spl-stage-card:has(.spl-stage-header.spl-group)::before {
        background: var(--spl-group);
    }

    .spl-stage-card:has(.spl-stage-header.spl-maindraw)::before {
        background: var(--spl-maindraw);
    }

    .spl-stage-card:has(.spl-stage-header.spl-qualifying)::before {
        background: var(--spl-qualifying);
    }


/* ================================================================
   3. ICON in stage header — colored tint per type
   ================================================================ */

.spl-stage-header.spl-group .spl-header-icon {
    background: rgba(16,185,129,0.12);
    color: #10b981;
    border-color: rgba(16,185,129,0.30);
}

.spl-stage-header.spl-maindraw .spl-header-icon {
    background: rgba(99,102,241,0.10);
    color: var(--mud-palette-primary);
    border-color: rgba(99,102,241,0.28);
}

.spl-stage-header.spl-qualifying .spl-header-icon {
    background: rgba(245,158,11,0.12);
    color: #f59e0b;
    border-color: rgba(245,158,11,0.30);
}


/* ================================================================
   4. STATUS CHIP in header — unified
   ================================================================ */

.spl-stage-header .spl-status-chip.mud-chip {
    font-size: 0.65rem !important;
    height: 22px !important;
    padding: 0 8px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
}


/* ================================================================
   5. ACTION BUTTONS — solid backgrounds, white text, high readability
   Same approach as bright modern SaaS apps (Linear, Vercel)
   ================================================================ */

.spl-header-actions .mud-button-root {
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Primary (Generate Draw, Create Matches) — softer indigo */
.spl-header-actions .mud-button-filled-primary,
.spl-header-actions .mud-button-filled-info {
    background: #7C7FE8 !important;
    color: #FFFFFF !important;
}

    .spl-header-actions .mud-button-filled-primary:hover,
    .spl-header-actions .mud-button-filled-info:hover {
        background: #6366F1 !important;
    }

/* Success (Start Stage) — softer green */
.spl-header-actions .mud-button-filled-success {
    background: #34D399 !important;
    color: #FFFFFF !important;
}

    .spl-header-actions .mud-button-filled-success:hover {
        background: #10B981 !important;
    }

/* Warning (End Stage) — softer amber */
.spl-header-actions .mud-button-filled-warning {
    background: #FBBF24 !important;
    color: #FFFFFF !important;
}

/* Make the wrapper the hoverable target; let hover pass through the disabled button */
.spl-btn-tipwrap {
    display: inline-block;
    cursor: not-allowed;
}

    .spl-btn-tipwrap .mud-button-root:disabled {
        pointer-events: none;
    }

/* Disabled action buttons: look disabled AND still show their tooltip */
.spl-header-actions .mud-button-filled-success:disabled,
.spl-header-actions .mud-button-filled-success.mud-disabled,
.spl-header-actions .mud-button-filled-primary:disabled,
.spl-header-actions .mud-button-filled-primary.mud-disabled,
.spl-header-actions .mud-button-filled-info:disabled,
.spl-header-actions .mud-button-filled-info.mud-disabled,
.spl-header-actions .mud-button-outlined-primary:disabled,
.spl-header-actions .mud-button-outlined-primary.mud-disabled {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--mud-palette-text-disabled) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    /* lets the MudTooltip wrapper receive the hover so the caption shows */
    pointer-events: none !important;
}

/* dim the icon too, so the play arrow / icon doesn't stay bright */
.spl-header-actions .mud-button-root:disabled .mud-button-icon-start,
.spl-header-actions .mud-button-root.mud-disabled .mud-button-icon-start {
    color: var(--mud-palette-text-disabled) !important;
}

    .spl-header-actions .mud-button-filled-warning:hover {
        background: #F59E0B !important;
    }

/* Any disabled action button looks disabled, regardless of its color */
.spl-header-actions .mud-button-root:disabled,
.spl-header-actions .mud-button-root.mud-disabled {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--mud-palette-text-disabled) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important; /* don't lift when disabled */
}

    .spl-header-actions .mud-button-root:disabled .mud-button-icon-start,
    .spl-header-actions .mud-button-root.mud-disabled .mud-button-icon-start {
        color: var(--mud-palette-text-disabled) !important;
    }

/* Outlined buttons (Cancel Swap, Generate Draw when outlined) */
.spl-header-actions .mud-button-outlined-primary {
    background: transparent !important;
    color: #6366F1 !important;
    border: 1px solid #6366F1 !important;
}

/* Smooth, modern hover/press feedback on action buttons */
.spl-header-actions .mud-button-root {
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

    .spl-header-actions .mud-button-root:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    }

    .spl-header-actions .mud-button-root:not(:disabled):active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

.mud-theme-dark .spl-header-actions .mud-button-outlined-primary,
:root[data-theme="dark"] .spl-header-actions .mud-button-outlined-primary {
    color: #A5B4FC !important;
    border-color: #A5B4FC !important;
}

.spl-header-actions .mud-button-outlined-warning {
    background: transparent !important;
    color: #B45309 !important;
    border: 1px solid #F59E0B !important;
}

.mud-theme-dark .spl-header-actions .mud-button-outlined-warning,
:root[data-theme="dark"] .spl-header-actions .mud-button-outlined-warning {
    color: #FBBF24 !important;
}

/* Icons inherit text color */
.spl-header-actions .mud-button-root .mud-icon-root {
    color: inherit !important;
}


/* ================================================================
   6. GROUP A panel — remove green left border + gradient
   ================================================================ */

/* The Group A panel header gradient and left border are inside the group
   standings panel. We target via the Group's typical class names from the
   underlying GroupStandingsPanel rendering. */

.spl-stage-body [class*="group-header"],
.spl-stage-body .group-panel-header,
/*.spl-stage-body .grp-header {
    background: var(--mud-palette-background-grey) !important;
    border-left: none !important;*/
}

/* If Group A uses a gradient backdrop, neutralize it */
.spl-stage-body [class*="group-card"] {
    border-left: 1px solid var(--mud-palette-lines-default) !important;
}


/* ================================================================
   7. STAGE COUNT TEXT — make subtle
   ================================================================ */

.spl-stage-count {
    font-size: 0.68rem !important;
    color: var(--mud-palette-text-disabled) !important;
}


/* ================================================================
   8. CONNECTOR DOT — subtle
   ================================================================ */

.spl-connector-dot {
    border-color: var(--mud-palette-lines-default) !important;
}