/* Desktop */
body {
    background: #f9fafb url("/Images/cricket_background.svg") center/cover no-repeat fixed;
}

.team-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.25); /* helps very light colours */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

.team-pill {
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.nowrap {
    white-space: nowrap;
}

.team-toggle .team-dot {
    width: .55rem;
    height: .55rem;
}
/* slightly smaller in button */
.player-name {
    flex: 1 1 auto;
    min-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Two-row header with fixed height so both cards align vertically */
.wheel-header {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 88px; /* <- key: same height for both headers */
    justify-content: center;
    align-items: flex-start;
}

/* Make both cards behave identically */
.wheel-card, .field-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .wheel-card .card-header,
    .field-card .card-header { /* use your existing helper */
        composes: wheel-header; /* if your build doesn’t support 'composes', just add 'wheel-header' in markup */
    }

    .wheel-card .card-body,
    .field-card .card-body {
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* EXACT same SVG footprint for wagon wheel & field layout */
.wheel-svg, .field-svg {
    width: min(92vw, 420px);
    max-width: 420px;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto;
}

/* (Optional tiny nudge if your two drawings have different internal padding) */
/* .field-svg { transform: translateY(4px); } */


.player-name {
    flex: 1 1 auto;
    min-width: 8rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.btn-icon {
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1rem;
    text-align: center
}

.toast-win {
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #111d; /* translucent dark */
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 14px 16px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    max-width: min(90vw, 420px);
    z-index: 9999;
    animation: toast-in .4s ease-out both;
}

.toast-title {
    font-weight: 700;
    margin-bottom: 4px;
}

.toast-msg {
    opacity: .95;
}

.toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* Last 12 balls */
.ball-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1;
    margin: 0 6px 6px 0;
    color: #111;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Palette (tweak to match your wheel exactly) */
.ball-dot {
    background: #e5e7eb;
}
/* dot */
.ball-1 {
    background: #dbeafe;
}

.ball-2 {
    background: #bfdbfe;
}

.ball-3 {
    background: #93c5fd;
}

.ball-4 {
    background: #86efac;
}
/* boundary */
.ball-6 {
    background: #86efac;
}
/* six */
.ball-wide {
    background: #fde68a;
}

.ball-nb {
    background: #bae6fd;
}

.ball-wkt {
    background: #fecaca;
    color: #7f1d1d;
    border-color: #f87171;
}
/* wicket */


@@keyframes toast-in {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Catch predictor pill */
.catch-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    font-size: .95rem;
}

    .catch-pill .form-check-input {
        cursor: pointer;
    }

    .catch-pill .form-check-label {
        cursor: pointer;
    }

/* Mobile */
@media (max-width: 767.98px) {
    body {
        background: #f9fafb url("/Images/cricket_background_mobile.svg") center/cover no-repeat fixed;
    }
}

/* Optional: slightly lower header on narrow screens where copy wraps more */
@media (max-width: 768px) {
    .wheel-header {
        min-height: 96px;
    }
}



/* === Collapsible panels === */
.card {
    position: relative;
}

.panel-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 0;
    background: #ff4da6; /* pink chip */
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    cursor: pointer;
    opacity: .95;
}

    .panel-toggle:focus {
        outline: 2px solid #fff6;
        outline-offset: 2px;
    }

    .panel-toggle svg {
        width: 16px;
        height: 16px;
    }

.card.panel-collapsed .card-body,
.card.panel-collapsed .list-group,
.card.panel-collapsed .table-responsive,
.card.panel-collapsed .card-footer,
.card.panel-collapsed form:not(.keep-visible),
.card.panel-collapsed .collapse {
    display: none !important;
}

/* keep header/title area visible */
.card.panel-collapsed .card-header {
    border-bottom: 0;
}

.card.panel-collapsed {
    min-height: 48px;
}

    .card.panel-collapsed .panel-toggle {
        transform: rotate(180deg);
    }



/* === Collapsible panels v2 === */
/* fake header shown only when collapsed to keep section title visible */
.panel-fake-header {
    display: none;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-weight: 600;
    color: #111;
    background: #fff;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.card.panel-collapsed .panel-fake-header {
    display: block;
}

.card.panel-collapsed .panel-orig-title {
    display: none !important;
}

/* optional: give collapsed cards a subtle compact look */
.card.panel-collapsed {
    min-height: 48px;
}



/* === Collapsible panels – overlay fixes === */
/* Reserve space in headers so right-aligned actions (e.g., "Export CSV", "Finish Game")
   don't sit underneath the absolute-positioned toggle button. */
.card .card-header,
.panel-fake-header {
    position: relative;
    padding-right: 48px; /* width (26) + gap + touch target buffer */
}

/* Keep the toggle above header content but below tooltips/popovers, etc. */
.panel-toggle {
    z-index: 3;
}

/* If any header has tight vertical space, give the toggle a tiny nudge */
.card .card-header .panel-toggle {
    top: 8px;
    right: 12px;
}

/* === Collapsible panels – mobile iOS SVG chevron fix === */
.panel-toggle {
    -webkit-appearance: none;
    appearance: none;
    color: #fff; /* ensure currentColor resolves for SVG */
}

    .panel-toggle svg {
        width: 16px;
        height: 16px;
        display: block; /* avoids baseline clipping on iOS */
        pointer-events: none; /* taps go to the button */
    }

        /* Force stroke color (Safari sometimes ignores currentColor in buttons) */
        .panel-toggle svg path {
            stroke: #fff;
        }

/* High-DPI iOS: nudge stroke width for visibility */
@supports (-webkit-touch-callout: none) {
    .panel-toggle svg path {
        stroke-width: 2.25;
    }
}


/* Optional: on very small screens add a smidge more room */
@media (max-width: 576px) {
    .card .card-header,
    .panel-fake-header {
        padding-right: 56px;
    }
}



/* === Collapsible panels – CSS-only chevron (no SVG; iOS safe) === */
.panel-toggle svg {
    display: none !important;
}
/* hide inline SVG everywhere */
.panel-toggle::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg); /* appears as a down chevron */
    transform-origin: 50% 50%;
}

.card.panel-collapsed .panel-toggle::before {
    transform: rotate(225deg);
}
/* rotate 180 on collapse */

/* keep header spacing/overlay fixes */
.card .card-header, .panel-fake-header {
    position: relative;
    padding-right: 48px;
}

.panel-toggle {
    z-index: 3;
}

.card .card-header .panel-toggle {
    top: 8px;
    right: 12px;
}

/* Ensure header has room for the toggle button */
.card .card-header {
    position: relative;
    padding-right: 48px;
}

/* Toggle button */
.panel-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #ff4da6;
    color: #fff;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none; /* iOS */
}

    /* OPTION A — CSS-only chevron (most robust on iOS) */
    .panel-toggle::before {
        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg); /* down chevron */
    }

.card.panel-collapsed .panel-toggle::before {
    transform: rotate(225deg);
}

/* OPTION B — keep SVG, but prevent clipping */
.panel-toggle svg {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

    .panel-toggle svg path {
        stroke: #fff;
    }
/* Safari sometimes ignores currentColor */
@supports (-webkit-touch-callout: none) {
    .panel-toggle svg path {
        stroke-width: 2.25;
    }
    /* sharpen on Retina iOS */
}


@media (max-width: 576px) {
    .card .card-header, .panel-fake-header {
        padding-right: 56px;
    }
}