/*
 * The three pages ported from the app's XAML - the cabinet, the takeover and the youth intake -
 * take their markup skeleton from the design HTML (designs/competition_tracker_v3.html,
 * takeover_v1.html, youth_intake_live_v1.html) and their classes from designs/backroom/theme.css.
 * Those classes are restated here under a br- prefix, on the app's tokens, so nothing collides with
 * app.css or Radzen. Loaded after site.css.
 */

/* ---- shared furniture ---------------------------------------------------------------------- */
/* A page that flows and scrolls rather than filling the viewport like the grid pages. */
.br-flow {
    height: auto;
    min-height: 100%;
    padding-bottom: 60px;
}

.br-cabinet { max-width: 1500px; margin: 0 auto; width: 100%; }

/* One column: the takeover's steps read down the page in the order they happen. */
.br-column { max-width: 980px; margin: 0 auto; width: 100%; }

/* The Tabler glyphs the XAML pages drew, from the same font app.css loads. */
.br-ti {
    font-family: 'TablerIcons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: inline-block;
    font-size: 15px;
}

.br-ti.tick { color: var(--green); }
.br-ti.accent { color: var(--blue-lt); }
.br-ti.gold { color: var(--gold); }

.br-panel-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--r-md) var(--r-md) 0 0;
}

.br-panel-t {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--label);
}

.br-panel-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.br-panel-bd { padding: 14px; }

/* A panel inside a panel: the staged-changes box and the instruction box on the intake page. */
.br-panel--inner { padding: 12px 14px; }

.br-step-no {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--blue-lt);
    border: 1px solid var(--blue-edge);
    border-radius: 5px;
    padding: 1px 5px;
}

.br-stack { display: flex; flex-direction: column; gap: 10px; }
.br-stack.g14 { gap: 14px; }
.br-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.br-h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.br-prewrap { white-space: pre-wrap; }

.br-statusline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
}

/* The live-state pill from theme.css. Gold only for a challenge actually complete. */
.br-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 11px;
    border: 1px solid var(--line);
    color: var(--text-3);
    white-space: nowrap;
}

.br-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.br-pill.ok { color: var(--green); border-color: rgba(62, 207, 142, .35); }
.br-pill.warn { color: var(--amber); border-color: rgba(232, 151, 61, .35); }
.br-pill.bad { color: var(--red-lt); border-color: rgba(255, 90, 80, .32); }
.br-pill.gold { color: var(--gold); border-color: rgba(240, 180, 41, .4); }

.br-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: var(--r-sm);
    padding: 9px 12px;
    font-size: 12.5px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-2);
    position: relative;
}

.br-banner > span { flex: 1 1 auto; min-width: 0; }
.br-banner.warn { border-color: rgba(232, 151, 61, .32); background: rgba(232, 151, 61, .07); color: #E9C48D; }
.br-banner.ok { border-color: rgba(62, 207, 142, .30); background: rgba(62, 207, 142, .06); color: #A8E6C9; }
.br-banner-kill { position: static; opacity: 1; margin-left: auto; }

.br-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--surface-3);
    border-top-color: var(--blue-lt);
    animation: br-spin .8s linear infinite;
}

@keyframes br-spin { to { transform: rotate(360deg); } }

.br-statusbar {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 9px 14px;
    background: var(--surface-2);
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--r-md) var(--r-md);
    font-size: 12px;
    color: var(--text-3);
}

/* The takeover timeline. */
.br-timeline { display: flex; flex-direction: column; }

.br-tstep {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    padding: 11px 0;
}

.br-tstep + .br-tstep { border-top: 1px solid var(--line-soft); }
.br-tstep-mk { width: 26px; height: 29px; display: grid; place-items: center; }
.br-tstep h4 { margin: 0; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.br-tstep p { margin: 3px 0 0; color: var(--text-3); font-size: 12.5px; }
.br-tstep.done h4 { color: var(--text-2); }
.br-tstep.pending h4 { color: var(--text-3); }
.br-tstep.failed h4 { color: var(--red-lt); }

.br-history summary { cursor: pointer; list-style: none; }
.br-history ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); }
.br-history li { margin: 3px 0; }
.br-status-applied { color: var(--green); }
.br-status-failed { color: var(--red-lt); }
.br-status-pending, .br-status-delivered { color: var(--amber); }
.br-status-cancelled { color: var(--text-3); }

/* ---- the cabinet ---------------------------------------------------------------------------- */
.br-chalbar {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 15px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 0 var(--edge);
}

.br-chalbar-pick { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.br-chalbar-blurb { flex: 1 1 280px; min-width: 220px; margin: 0; }
.br-chalbar-prog { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; margin-left: auto; }

.br-pbar { width: 170px; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.br-pbar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); transition: width .35s; }
.br-pbar.done i { background: var(--gold); }

.br-count { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--text-3); white-space: nowrap; }
.br-count b { color: var(--text); font-weight: 500; font-size: 13px; }
.br-count.done b, .br-count.done { color: var(--gold); }

/* A leg of the challenge: a box with its own heading and state. */
.br-legs { display: grid; gap: 14px; }

.br-leg {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    padding: 10px 12px 12px;
    background: rgba(11, 17, 30, .55);
}

.br-leg.done {
    border-color: rgba(240, 180, 41, .28);
    background: linear-gradient(160deg, rgba(240, 180, 41, .05), rgba(11, 17, 30, .55) 58%);
}

.br-leghd {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
}

.br-leghd-lab {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--label);
    white-space: nowrap;
}

/* Small enough to sit inside the heading's own line, and held back to the same .7 the unwon
   trophies are drawn at until the double is complete. */
.br-leghd .br-flag {
    flex: 0 0 auto;
    align-self: center;
    border-radius: 2.5px;
    display: block;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    opacity: .7;
    transition: opacity .12s;
}

.br-leg.done .br-leghd .br-flag { opacity: 1; box-shadow: 0 0 0 1px rgba(240, 180, 41, .45); }
.br-leghd-of { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; }

.br-leghd-st {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.br-leg.done .br-leghd { border-bottom-color: rgba(240, 180, 41, .28); }
.br-leg.done .br-leghd-st { color: var(--gold); }

/* The cards. */
.br-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }

.br-ccard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 13px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    text-align: center;
    transition: border-color .12s, transform .12s;
}

.br-ccard:hover { transform: translateY(-1px); border-color: var(--blue-edge); }
.br-ccard.won:hover { border-color: rgba(240, 180, 41, .55); }
.br-ccard-name { font-size: 12.5px; font-weight: 500; color: var(--text-3); line-height: 1.3; }
.br-ccard-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--text-3); opacity: .75; }
.br-ccard.won { border-color: rgba(240, 180, 41, .30); background: linear-gradient(160deg, rgba(240, 180, 41, .06), var(--surface) 62%); }
.br-ccard.won .br-ccard-name { color: var(--text); }
.br-ccard.won .br-ccard-sub { color: var(--gold); opacity: 1; }

/* One drawing per trophy, always in metal. Not won is the same drawing put out - desaturated,
   darkened and pulled toward the slate the generic tile already uses. */
.br-art { height: 104px; display: grid; place-items: center; line-height: 0; }
.br-art svg { display: block; }
.br-ccard:not(.won) .br-art.render { filter: grayscale(1) brightness(.62) sepia(.4) hue-rotate(178deg) saturate(2.1); opacity: .7; }
.br-ccard.won .br-art.render { filter: drop-shadow(0 3px 10px rgba(240, 180, 41, .22)); }
.br-art.fallback svg { opacity: .55; }
.br-ccard.won .br-art.fallback svg { opacity: 1; }

/* The repeat count, in the mark's own cell, in brand red. */
.br-ccard-times {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 24px;
    height: 27px;
    display: grid;
    place-items: center;
    background: var(--red);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 12px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* An icon button with no chrome: the card's drop cross, the banner's dismiss, the row's chevron. */
.br-ccard-kill {
    background: transparent;
    border: 0;
    padding: 5px;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
    line-height: 0;
}

.br-ccard-kill:hover { color: var(--blue-lt); background: var(--blue-wash); }
.br-ccard .br-ccard-kill { position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s; }
.br-ccard:hover .br-ccard-kill { opacity: 1; }

.br-addtile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 186px;
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-family: var(--body);
    font-size: 12.5px;
    transition: border-color .12s, color .12s;
}

.br-addtile:hover { border-color: var(--blue-edge); color: var(--text-2); }

/* ---- takeover ------------------------------------------------------------------------------- */
/* A settled step folds away and states what it settled on. */
.br-done-hd { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.br-done-val { font-size: 12.5px; color: var(--text); }
.br-done-val b { font-weight: 500; }
.br-done-val span { color: var(--text-3); }

.br-searchbox { padding: 5px 9px; }
.br-searchbox input {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 12.5px;
    font-family: var(--body);
    color: var(--text);
    outline: none;
}

.br-searchbox input::placeholder { color: var(--text-3); }

.br-clubpick { max-height: 190px; overflow: auto; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }

.br-clubrow {
    padding: 8px 10px;
    font-size: 12.5px;
    cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    gap: 10px;
    align-items: center;
}

.br-clubrow:last-child { border-bottom: 0; }
.br-clubrow:hover { background: var(--blue-wash); }
.br-clubrow.on { background: var(--blue-tint); box-shadow: inset 2px 0 0 var(--blue-lt); }
.br-clubrow-div { color: var(--text-3); font-size: 11.5px; }
.br-clubrow-id { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-3); }

.br-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }

.br-type {
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 12px;
    cursor: pointer;
    font-family: var(--body);
    color: var(--text);
    transition: border-color .12s, background .12s;
}

.br-type:hover { border-color: var(--blue-edge); }
.br-type.on { background: var(--blue-tint); border-color: var(--blue-edge); box-shadow: inset 0 0 0 1px var(--blue-edge); }
.br-type-nm { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: -.02em; }
.br-type-fig { font-family: var(--mono); font-size: 11.5px; color: var(--blue-lt); margin-top: 4px; }
.br-type.on .br-type-fig { color: #BFD3FF; }
.br-type-d { font-size: 11.5px; color: var(--text-3); margin-top: 7px; line-height: 1.45; }

.br-story { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }

/* ---- youth intake --------------------------------------------------------------------------- */
.br-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(26, 35, 54, .5);
    margin-top: 14px;
}

.br-tablewrap { overflow: auto; max-height: 640px; }

.br-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.br-table th {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
    font-weight: 500;
    padding: 8px;
    white-space: nowrap;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface-2);
    position: sticky;
    top: 0;
    z-index: 2;
}

.br-table th.n { text-align: right; }
.br-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; height: 35px; }
.br-table tbody tr { cursor: pointer; }
.br-table tbody tr:hover td { background: var(--blue-wash); }
.br-table tr.open td { background: var(--blue-tint); }
.br-table .t2 { color: var(--text-2); }
.br-table .t3 { color: var(--text-3); }
.br-slot { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.br-num { font-family: var(--mono); text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.br-num.strong { color: var(--text); font-weight: 500; }
.br-pname { font-weight: 500; color: var(--text); }
.br-pname u { text-decoration: none; border-bottom: 1px dotted rgba(93, 140, 255, .55); color: #BFD3FF; cursor: pointer; }
.br-name-cell { display: inline-flex; align-items: center; gap: 8px; }

.br-portrait {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    flex: 0 0 auto;
}

.br-portrait.lg { width: 72px; height: 72px; border-radius: 9px; }
.br-silhouette { display: inline-grid; place-items: center; color: var(--text-3); }

.br-chev { transition: transform .14s; color: var(--text-3); font-size: 14px; }
tr.open .br-chev { transform: rotate(90deg); color: var(--blue-lt); }
.br-goto { color: var(--text-3); }
tr:hover .br-goto { color: var(--blue-lt); }

.br-stand { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }

.br-stand-chip {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 1px 6px;
    white-space: nowrap;
}

.br-stand-chip b { color: var(--text); font-weight: 500; }

.br-chip {
    background: var(--blue-tint);
    border: 1px solid var(--blue-edge);
    color: #BFD3FF;
    border-radius: 7px;
    padding: 0 5px;
    font-size: 9.5px;
    white-space: nowrap;
    font-weight: 400;
}

/* The action drawer: one row, no cell borders, sitting under the row it belongs to. */
.br-table tr.br-drawer > td {
    background: #111828;
    border-bottom: 1px solid var(--line-soft);
    padding: 0;
    white-space: normal;
    height: auto;
    cursor: default;
}

.br-table tr.br-drawer:hover td { background: #111828; }
.br-drawer-in { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 14px 14px 44px; }

.br-action {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    flex: 1 1 210px;
    min-width: 200px;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    cursor: pointer;
    font-family: var(--body);
    color: var(--text);
    transition: border-color .12s;
}

.br-action:hover { border-color: var(--blue-edge); }
.br-action:disabled { opacity: .42; cursor: not-allowed; }
.br-action .br-ti { font-size: 17px; color: var(--blue-lt); margin-top: 1px; }
.br-action .br-ti.gold { color: var(--gold); }
.br-action-nm { font-size: 12.5px; font-weight: 500; }
.br-action-d { font-size: 11.5px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.br-personality { flex: 1 1 100%; font-size: 11px; color: var(--text-2); }

/* The dialogs' label/field grid. */
.br-lgrid { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.br-lgrid--two { grid-template-columns: 150px 1fr; }

@media (min-width: 760px) {
    .br-lgrid--two { grid-template-columns: 150px 1fr 150px 1fr; }
}

.br-attr-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 10px 0 0; }
.br-attr-line .fm-flabel { margin-right: 6px; }

/* The review list. */
.br-change {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.br-change-no { color: var(--text-2); font-size: 12.5px; }
.br-change-body { min-width: 0; }
.br-change-title { font-size: 12.5px; }
.br-change-title span { color: var(--text-2); font-weight: 400; }

.br-change-details {
    margin: 4px 0 0;
    font-family: var(--body);
    font-size: 11px;
    color: var(--text-3);
    white-space: pre-wrap;
    line-height: 1.45;
}

.br-change-kill { align-self: start; }

/* ---- FM Titans (Legends.razor) -----------------------------------------------------------------
   The legends grid. A row without a host is drawn back but still opens the profile; the checkbox
   column stays at its natural width so the tick is the first thing on the row. */
.br-titans th:first-child, .br-titans td:first-child { width: 1%; text-align: center; }
.br-titans tr.is-disabled td { opacity: .55; }
.br-titans tr.is-disabled:hover td { opacity: .8; }
/* Its own thumbnail and position classes: .br-portrait is the player page's 112px frame in pages.css
   and .br-slot is the squad planner's floating card, and both files load on every page. */
.br-titans .br-thumb-face {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    display: inline-grid;
    place-items: center;
    color: var(--text-3);
    flex: 0 0 auto;
}
.br-titans .br-pos { font-family: var(--mono); font-size: 11px; color: var(--text-3); }