/* =============================================================================
   #3735 — the "What is needed?" team verification requirements box.
   THE shared stylesheet for that component. Pair it with
   @ctHoopAlertBundle/Team/_teamRequirementsRedesign.html.twig — the template
   emits no styles of its own, so any page that includes it must link this file
   or the box renders as unstyled text.

   Why this file exists: #3516 built the redesigned box for Team Home but left
   its rules inside home_redesign.html.twig's <style> block. #3735 asks for the
   same box on Team Coaches, Team Roster and the League "Teams in Process"
   popup, and a component whose styles live in one page's <style> tag cannot be
   reused. These rules were lifted verbatim out of that block — no value was
   changed, so Team Home renders identically.

   ⚠️ Plain CSS under public/assets/, NOT SCSS, deliberately. SCSS compiles into
   public/build, which is gitignored (symfony/.gitignore:31) and only exists if
   the deploy runs `npm run build`. A styling ticket whose failure mode is "ships
   unstyled because the build step was skipped" is exactly what went wrong in
   #3659; this path is served as-is and cannot miss.

   ⚠️ The custom properties below are DUPLICATED from home_redesign's :root on
   purpose. There they are page-scoped; the box now renders inside a modal and
   on two other pages that never set them, and an undefined var() falls back to
   nothing — green text would render black. Scoped to the box's own wrapper so
   they cannot leak into any host page.
   ============================================================================= */

.th-reqwrap,
.th-reqhead,
.th-reqlist,
.th-reqleft,
.th-completed {
    --th-green: #00882A;
    --th-mint:  #E6F6E6;
    --th-red:   #e84a4b;
    --th-ink:   #1f2430;
    --th-muted: #6b7280;
    --th-line:  #e6e8eb;
    --th-card:  #ffffff;
}

    /* #3516 — server-rendered requirements: overall bar + left detail panel + checklist */
    .th-reqhead { display:flex; align-items:center; gap:12px; padding:16px 20px 14px; }
    .th-reqhead__label { font-size:12.5px; font-weight:700; color:var(--th-ink); white-space:nowrap; }
    .th-reqhead__bar { flex:1 1 auto; height:8px; border-radius:999px; background:#eef1f4; overflow:hidden; }
    .th-reqhead__fill { display:block; height:100%; background:linear-gradient(90deg,#05c94a,var(--th-green)); border-radius:999px; transition:width .6s cubic-bezier(.22,.61,.36,1); }
    .th-reqhead__pct { font-size:12.5px; font-weight:800; color:var(--th-green); font-variant-numeric:tabular-nums; white-space:nowrap; }
    /* #3735 — the placeholder a lazily-fetched body occupies before and during its fetch,
       and the message it shows if that fetch fails. */
    .th-event__body--lazy:empty { min-height:1px; }
    .th-event__loading { padding:18px 20px; font-size:13px; color:var(--th-muted); }
    .th-reqwrap { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; padding:2px 20px 18px; }
    /* left division panel — a quiet "spec card" with hairline-divided rows */
    .th-reqleft { display:flex; flex-direction:column; align-self:start; background:linear-gradient(180deg,#fbfcfd,#f7f9fa);
        border:1px solid var(--th-line); border-radius:12px; padding:4px 15px; }
    .th-reqdetail { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--th-line); }
    .th-reqdetail:last-child { border-bottom:0; }
    .th-reqdetail__ico { flex:0 0 auto; width:28px; height:28px; border-radius:8px; background:#eef0f2; color:var(--th-muted); display:inline-flex; align-items:center; justify-content:center; }
    .th-reqdetail__ico svg { width:15px; height:15px; display:block; }
    .th-reqdetail__label { flex:1 1 auto; min-width:0; font-size:11px; color:var(--th-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
    .th-reqdetail__val { flex:0 0 auto; font-size:14px; color:var(--th-ink); font-weight:700; text-align:right; white-space:nowrap; }
    .th-reqdetail--wrap { align-items:flex-start; }
    .th-reqdetail--wrap .th-reqdetail__label { flex:0 0 auto; padding-top:2px; }
    .th-reqdetail--wrap .th-reqdetail__val {
        flex:1 1 auto; min-width:0; white-space:normal;
        display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
    }
    .th-reqlist { display:flex; flex-direction:column; min-width:0; max-height:352px; overflow-y:auto; padding-right:8px; scrollbar-width:thin; scrollbar-color:#d5d9df transparent; }
    .th-reqlist::-webkit-scrollbar { width:8px; }
    .th-reqlist::-webkit-scrollbar-thumb { background:#d5d9df; border-radius:999px; }
    .th-reqlist::-webkit-scrollbar-thumb:hover { background:#c2c7ce; }
    .th-reqlist::-webkit-scrollbar-track { background:transparent; }
    .th-req { display:flex; align-items:flex-start; gap:11px; padding:11px 4px; margin:0;
        border:0; border-bottom:1px solid var(--th-line); text-decoration:none; color:inherit;
        transition:background .12s; border-radius:6px; }
    .th-req:last-child { border-bottom:0; }
    .th-req__icon { flex:0 0 auto; width:15px; height:15px; margin-top:2px; border-radius:50%; border:2px solid #cfd4da; box-sizing:border-box; }
    .th-req--blocker .th-req__icon { border-color:var(--th-red); }
    .th-req--in_progress .th-req__icon { border-color:#e0a43a; }
    .th-req--complete .th-req__icon { border:none; background:var(--th-green);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); background-size:13px; background-repeat:no-repeat; background-position:center; }
    .th-req__body { flex:1 1 auto; min-width:0; }
    .th-req__label { font-weight:700; font-size:13px; line-height:1.35; color:var(--th-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .th-req__hint { color:var(--th-muted); font-size:11.5px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .th-req__bar { height:4px; border-radius:999px; background:#eef1f4; margin-top:7px; overflow:hidden; max-width:100%; }
    .th-req__fill { height:100%; background:var(--th-green); border-radius:999px; transition:width .5s cubic-bezier(.22,.61,.36,1); }
    /* fixed right column: numbers right-align in a tidy column, chevron slot always reserved */
    .th-req__right { flex:0 0 auto; display:flex; align-items:center; gap:6px; margin-top:1px; white-space:nowrap; }
    .th-req__frac { font-weight:800; font-size:12.5px; line-height:1.35; color:var(--th-ink); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; white-space:nowrap; }
    .th-req--blocker .th-req__frac { color:var(--th-red); }
    .th-req--complete .th-req__frac { color:var(--th-green); }
    .th-req__go { flex:0 0 auto; color:var(--th-muted); font-size:18px; line-height:1; width:10px; text-align:center; transition:transform .12s, color .12s; }
    .th-req__go[data-empty] { visibility:hidden; }
    /* completed rows read quietly (they're done) */
    .th-req--complete { opacity:.55; }
    .th-completed { color:var(--th-muted); font-size:12px; font-weight:600; margin:8px 0 10px; }

@media (max-width:560px) {
        /* There is no horizontal room for icon + label + count, so the row wraps. The ORDER is
           what matters: the count rides up onto the icon's line (icon left, count hard right)
           and the label/hint/bar take the full width beneath it. Ordering the body first pushes
           the count onto a line of its own, where it reads as a stray number under the bar. */
        .th-req { flex-wrap:wrap; row-gap:5px; }
        .th-req__right { order:1; margin-left:auto; }
        .th-req__body { flex:1 1 100%; order:2; }
        .th-req__bar { max-width:100%; }
}

/* -----------------------------------------------------------------------------
   The box's HEADER — the collapsible <details> row: emblem, event name, the
   "Not verified" pill and the "What is needed?" toggle.

   #3735: this half lived inline in home_redesign.html.twig while only the body
   was a partial, which is precisely why the box could not be reused — the other
   surfaces would have got rows with no header, badge or toggle. Lifted verbatim.

   .th-btn* comes too: the "Join tourney/league" button inside the not-attached
   variant uses it. Moved rather than copied — Team Home links this sheet, so its
   other buttons keep working and there is no second copy to drift.
   ----------------------------------------------------------------------------- */

.th-event,
.th-pill,
.th-btn {
    --th-green: #00882A;
    --th-mint:  #E6F6E6;
    --th-red:   #e84a4b;
    --th-ink:   #1f2430;
    --th-muted: #6b7280;
    --th-line:  #e6e8eb;
    --th-card:  #ffffff;
}

    .th-btn.th-btn--danger { color:#fff; background:var(--th-red); border-color:var(--th-red); }
    .th-btn.th-btn--danger:hover, .th-btn.th-btn--danger:focus { color:#fff; background:#d43a3b; border-color:#d43a3b; }
    .th-btn { display:inline-flex; align-items:center; gap:7px; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; border:1px solid var(--th-line); background:var(--th-card); color:var(--th-ink); white-space:nowrap; }
    .th-btn--solid { background:var(--th-green); border-color:var(--th-green); color:#fff; }
    .th-btn--ghost { background:transparent; color:var(--th-green); border-color:var(--th-green); } /* #3516 (Rob C.) — transparent bg + green outline */
    .th-btn--plain { color:var(--th-muted); border-color:var(--th-line); }
    .th-btn:hover, .th-btn:focus { text-decoration:none; }
    .th-btn--solid:hover, .th-btn--solid:focus { color:#fff; background:#006f22; }
    .th-btn--ghost:hover, .th-btn--ghost:focus { color:var(--th-green); background:var(--th-mint); }
    .th-btn--plain:hover, .th-btn--plain:focus { color:var(--th-ink); }
    /* pills */
    .th-pill { display:inline-block; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; flex:0 0 auto; white-space:nowrap; }
    .th-pill--red { background:#fdecec; color:var(--th-red); }
    .th-pill--green { background:var(--th-mint); color:var(--th-green); }
    /* #3735 — the PLAYER box has two states the team box does not: "Pending" (submitted, awaiting
       review) and "Account needs update". Neither is a failure, so neither should read red. */
    .th-pill--amber { background:#fdf4e3; color:#9a6b12; }

    /* #3735 — the rejection / ban notice that sits above a child's card. It carries the reviewer's
       own wording, which can run to several paragraphs, so it is a full-width block rather than
       anything pill-shaped. It keeps the old `rejection_block` / `close_bt` class names alongside
       these so the existing dismiss script still finds it. */
    .th-alert { position:relative; background:#fdecec; border:1px solid #f6d3d3; border-radius:14px;
        padding:16px 44px 16px 18px; margin-bottom:16px; color:#6b3a3a; font-size:13px; line-height:1.55; }
    .th-alert__title { margin:0 0 6px; font-size:14px; font-weight:800; color:var(--th-red); }
    .th-alert p { margin:0 0 8px; }
    .th-alert p:last-child { margin-bottom:0; }
    .th-alert a { color:var(--th-green); font-weight:600; }
    .th-alert__close { position:absolute; top:12px; right:14px; width:22px; height:22px; border:0;
        background:none; padding:0; cursor:pointer; color:var(--th-red); font-size:20px; line-height:1;
        display:inline-flex; align-items:center; justify-content:center; }
    .th-alert__close:hover { opacity:.7; }
    /* tournament (collapsible) */
    .th-event { background:var(--th-card); border:1px solid var(--th-line); border-radius:14px; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
    /* #3735 (Rob C., feedback #2) — consecutive boxes need air between them. This lives on
       the COMPONENT rather than each host page: the Roster page happened to get a gap from
       its own flex container while the Coaches page had none, so the boxes looked glued
       together there. Owning the spacing here is what keeps the surfaces identical.
       Adjacent-sibling so the first box never gains a stray top margin. */
    .th-event + .th-event { margin-top:16px; }
    .th-event:hover { border-color:#d9dde2; box-shadow:0 2px 12px rgba(20,30,50,.05); }
    .th-pill--inline { display:none; }
    .th-event[open] .th-event__chev { transform:rotate(180deg); background:var(--th-mint); color:var(--th-green); border-color:transparent; }
    .th-event[open] .th-event__head { border-bottom:1px solid var(--th-line); }

@media (max-width:560px) {
        /* the pill moves in beside the sub-line; the head copy steps aside */
        .th-pill--head { display:none; }
        .th-pill--inline { display:inline-block; flex:0 0 auto; }
}

/* header rules, part 2 — the BEM __suffixed selectors. */
    /* tournament (collapsible) */
    .th-event__head { list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; gap:14px; transition:background .15s; }
    .th-event__head::-webkit-details-marker { display:none; }
    .th-event__head:hover { background:#fafbfc; }
    .th-event__emblem { position:relative; flex:0 0 auto; width:44px; height:44px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg,#eef0f2,#e3e6ea); color:var(--th-muted); display:flex; align-items:center; justify-content:center; }
    .th-event__emblem svg { width:22px; height:22px; }
    /* #3735 — `cover` cropped a wide wordmark into this 44px square, so a league whose logo is
       the NSID default rendered as an unreadable "NATI SPOR" fragment. `contain` fits the whole
       mark and letterboxes instead. */
    .th-event__emblem img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
    /* The trophy SVG is always in the DOM as the fallback, so with `contain` it would show in the
       letterbox gaps (and through any transparent PNG). Hide it only while an image is present —
       the img carries onerror="this.remove()", so a broken URL drops the element, :has() goes
       false and the trophy comes back on its own. */
    .th-event__emblem:has(img) svg { display:none; }
    .th-event__meta { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
    .th-event__name { font-size:16px; font-weight:700; color:var(--th-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .th-event__sub { font-size:12px; color:var(--th-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .th-event__action { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
    .th-event__cta { font-size:14px; font-weight:700; color:var(--th-green); white-space:nowrap; }
    /* One pill is shown per breakpoint — see the note in the markup. */
    .th-event__subrow { display:flex; align-items:center; gap:10px; min-width:0; }
    .th-event__chev { flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--th-green); display:flex; align-items:center; justify-content:center; color:var(--th-green); transition:transform .2s, background .2s, color .2s, border-color .2s; }
    .th-event__chev svg { width:16px; height:16px; }

@media (max-width:560px) {
        .th-event__head { flex-wrap:wrap; gap:10px; padding:13px 14px; }
        .th-event__meta { flex:1 1 0; min-width:0; }
        .th-event__action { flex:1 0 100%; justify-content:center; }
        /* the pill moves in beside the sub-line; the head copy steps aside */
        .th-event__emblem { width:38px; height:38px; border-radius:10px; }
        .th-event__emblem svg { width:19px; height:19px; }
        .th-event__name { font-size:15px; }
        .th-event__pill, .th-pill { padding:3px 9px; font-size:11px; }
}

/* -----------------------------------------------------------------------------
   Stragglers my first two extractions missed, and why they matter:
     - the 640px rule collapses .th-reqwrap to ONE column. Without it the division
       card and the checklist stay side by side on a phone and both get crushed.
       It was written as a SINGLE-LINE @media, which the extractor did not recognise.
     - a.th-req / a.th-event__name are element-prefixed selectors, so a pattern
       anchored on ".th-" never saw them. They carry the pointer + hover states that
       make a clickable requirement row feel clickable.
   ----------------------------------------------------------------------------- */
a.th-event__name { text-decoration:none; display:inline-block; max-width:100%; transition:color .15s; }
a.th-event__name:hover { color:var(--th-green); text-decoration:none; }
@media (max-width:640px) { .th-reqwrap { grid-template-columns:minmax(0,1fr); } }
a.th-req { cursor:pointer; }
a.th-req:hover { background:#f6fbf7; }
a.th-req:hover .th-req__go { color:var(--th-green); transform:translateX(2px); }

/* -----------------------------------------------------------------------------
   The box owns its full row, whatever the host page wraps it in.

   #3735: on the Roster page the box sits inside .players_two_block, which is a
   flex ROW — so <details> became a flex item sized to its content and rendered at
   roughly half width while the Coaches page (a plain block container) showed it
   full width. Four surfaces means four different parents, so the box states its
   own intent instead of relying on what it happens to be nested in.

   width:100% is a no-op in a normal block container (Team Home, Coaches, the
   popup); flex-basis + flex-grow only bite when the parent IS a flex row.
   ----------------------------------------------------------------------------- */
.th-event { width:100%; flex:1 1 100%; }

/* ...and it owns the gap BETWEEN boxes too.

   Two of the host containers are flex rows carrying their own gap — .players_two_block on the
   Roster pages and .team_main_block (gap:25px) on the dashboard — so those surfaces spaced the
   boxes a SECOND time on top of the component's margin and came out far airier than the
   Coaches page. Zeroing the container gap means one rule decides the spacing everywhere, which
   is the whole point of the box being shared.

   :has(> .th-event) keeps this to the containers that actually hold a box — in every one of
   these templates that is the container's only live child — so the same class used anywhere
   else in the app (league pages, the old team blocks) keeps its 25px. */
.players_two_block:has(> .th-event) { row-gap:0; column-gap:0; }

/* The dashboard is the one surface listing MANY teams rather than one team's events, so it pairs
   them two per row — the same 49%-wide pairing the old box had there. Every other surface keeps
   one box per row.

   The gutter here is the container's own gap, so the component's stacking margin is switched off
   inside it. Leaving both on is what made this page airier than the rest, twice. */
/* align-items:flex-start matters here: these are <details>, so expanding one makes its row
   taller, and a stretched neighbour would render as a tall, mostly empty card beside it. */
.team_main_block:has(> .th-event) { display:flex; flex-wrap:wrap; align-items:flex-start; row-gap:16px; column-gap:16px; }
.team_main_block > .th-event { flex:1 1 calc(50% - 8px); max-width:calc(50% - 8px); width:auto; }
.team_main_block > .th-event + .th-event { margin-top:0; }

/* Team Home stacks the boxes in .th-main, a flex column that already carries gap:16px — the same
   16px .th-rail uses between "Join requests" and "Message your team" in the sidebar. The
   component's own margin landed on top of it, so the boxes sat at 32px while the cards beside
   them sat at 16px and the column looked wrong against itself.

   The container's gap wins here rather than the margin, so both columns are spaced by one rule
   each and stay equal if either is ever retuned. */
.th-main > .th-event + .th-event { margin-top:0; }

/* Back to one per row once a half-width box would crowd its own header — the event name, the
   status pill and "What is needed?" all share that single line. */
@media (max-width:900px) {
    .team_main_block > .th-event { flex-basis:100%; max-width:100%; }
}