/*
 * The player page and the squad planner: designs/player_information_v3.html and
 * designs/squad_planner_v5.html over the app's palette in app.css. The design's .panel, .chip, .kv,
 * .seg, .switch and .ringcell, prefixed br- so they cannot collide with Radzen or the grid pages.
 */

/* ---- panels ------------------------------------------------------------------------------------ */
.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-hd .t {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--label);
}

.br-panel-hd .tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

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

.br-panel-bd.tight {
    padding: 10px 12px;
}

.br-sep {
    height: 1px;
    background: var(--line-soft);
    margin: 10px 0;
}

.br-centre {
    text-align: center;
}

/* ---- the player page ------------------------------------------------------------------------ */
.br-pi {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1260px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding-bottom: 60px;
}

.br-pi-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* The history selector: the reading on screen between two arrows. Tinted amber off the current
   reading so a page describing a past season cannot pass for today's. */
.br-history {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-2);
    overflow: hidden;
    outline: none;
}

.br-history:focus-visible {
    border-color: var(--blue-edge);
}

.br-history.past {
    border-color: var(--amber);
    background: rgba(232, 151, 61, .12);
}

.br-history-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 168px;
    padding: 3px 12px;
    text-align: center;
    line-height: 1.2;
}

.br-history-label b {
    font-size: 12.5px;
    color: var(--text);
}

.br-history-label small {
    font-size: 10.5px;
    color: var(--text-3);
    white-space: nowrap;
}

.br-history-arrow,
.br-history-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    padding: 0 10px;
    cursor: pointer;
}

.br-history-close {
    font-size: 15px;
    border-left: 1px solid var(--line);
    color: var(--text-3);
}

.br-history-arrow:hover:not(:disabled),
.br-history-close:hover {
    background: var(--surface-3);
    color: var(--text);
}

.br-history-arrow:disabled {
    opacity: .3;
    cursor: default;
}

.br-history-error {
    color: var(--amber);
}

.br-pi-top {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.1fr) minmax(240px, 1.1fr);
    gap: 12px;
}

.br-pi-scores {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
}

@media (max-width: 1000px) {
    .br-pi-top, .br-pi-scores { grid-template-columns: minmax(0, 1fr); }
}

.br-bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    text-align: center;
}

.br-portrait {
    width: 112px;
    height: 126px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.br-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.br-bio .br-player-name {
    margin: 0;
    font-size: 20px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.br-bio-line {
    margin-top: -4px;
}

.br-bio-pos {
    font-weight: 600;
    font-size: 15px;
    color: var(--blue-lt);
}

.br-bio-sep, .br-bio-age {
    font-size: 12px;
    color: var(--text-3);
}

.br-bio-club {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.br-other, .br-hidden {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.br-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 12.5px;
}

.br-kv span:first-child, .br-kv-label {
    color: var(--text-3);
    font-size: 12.5px;
}

.br-kv b {
    font-weight: 500;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.br-feet {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 3px 5px;
    font-size: 12px;
}

.br-feet .br-right {
    text-align: right;
}

.br-traits {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 4px 0;
}

.br-chip {
    background: var(--blue-tint);
    border: 1px solid var(--blue-edge);
    color: #BFD3FF;
    border-radius: 7px;
    padding: 2px 8px;
    font-size: 11.5px;
    white-space: nowrap;
}

.br-chip.off {
    background: transparent;
    border-color: var(--line);
    color: var(--text-3);
}

.br-chip.amber {
    border-color: rgba(232, 151, 61, .35);
    color: var(--amber);
    background: transparent;
}

/* Rings. Auto margins on the ends rather than justify-content, because a centred flex row that
   overflows puts its first item out of reach of the scrollbar - and these rows do overflow. */
.br-ringrow {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
    align-items: flex-start;
}

.br-ringrow--centre > :first-child { margin-left: auto; }
.br-ringrow--centre > :last-child { margin-right: auto; }

.br-ringcell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
}

.br-ringcell.pick {
    cursor: pointer;
}

.br-ringcell.pick:hover {
    border-color: var(--line);
}

.br-ringcell.on {
    border-color: var(--blue-edge);
    background: var(--blue-tint);
}

.br-ringcell span {
    font-size: 10.5px;
    color: var(--text-3);
    text-align: center;
    max-width: 96px;
    line-height: 1.35;
}

.br-ringcell.on span {
    color: var(--text-2);
}

.br-ringstack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.br-ringstack-phase {
    font-size: 10.5px;
}

.br-me-hint {
    margin: 8px 0 0;
}

/* The design's .switch. */
.br-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
}

.br-switch.off {
    opacity: .5;
    cursor: not-allowed;
}

.br-switch input {
    appearance: none;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--surface-3);
    border: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    transition: background .14s, border-color .14s;
    margin: 0;
}

.br-switch input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-3);
    transition: transform .14s, background .14s;
}

.br-switch input:checked {
    background: var(--blue-tint);
    border-color: var(--blue-edge);
}

.br-switch input:checked::after {
    transform: translateX(14px);
    background: var(--blue-lt);
}

.br-switch input:checked + span {
    color: var(--text);
}

/* The attribute grid: three columns, tier tints as the game draws them - primary in a low green,
   secondary in a firmer blue, tertiary in a blue so faint it only just separates. */
.br-attrcols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}

@media (max-width: 1000px) {
    .br-attrcols { grid-template-columns: 1fr 1fr; }
}

.br-attrcols h4 {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
    margin: 0 0 7px;
}

.br-attrcols h4.br-attr-h4--later {
    margin-top: 14px;
}

.br-attr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    margin-bottom: 1px;
}

.br-attr .n {
    color: var(--text-2);
}

.br-attr .v {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.br-attr.tier1 { background: rgba(62, 207, 142, .16); }
.br-attr.tier2 { background: rgba(93, 140, 255, .28); }
.br-attr.tier3 { background: rgba(93, 140, 255, .07); }

/* The score picker's grid and the pair cell. */
.br-picker-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 2px 2px;
    padding: 8px 0;
}

.br-picker-pair {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 2px 8px 0;
    padding: 6px 4px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: var(--surface-2);
}

.br-picker-pair-rings {
    display: flex;
    align-items: center;
    gap: 6px;
}

.br-picker-pair-divider {
    width: 1px;
    align-self: stretch;
    background: var(--line-soft);
}

.br-picker-pair-label {
    font-size: 10.5px;
    color: var(--text-3);
    text-align: center;
    max-width: 190px;
    align-self: center;
    line-height: 1.35;
}

/* The match-engine breakdown table. */
.br-me-panel {
    margin: 8px 0;
}

.br-me-table {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 10px;
}

.br-me-row {
    display: grid;
    grid-template-columns: 1fr 104px 104px;
    gap: 8px;
    padding: 3px 5px;
    font-size: 12.5px;
    align-items: baseline;
}

.br-me-label {
    color: var(--text-3);
}

.br-me-cell {
    text-align: right;
    font-size: 12px;
}

.br-me-cell--span {
    grid-column: 2 / 4;
}

.br-me-sep {
    height: 1px;
    background: var(--line-soft);
    margin: 6px 0;
}

/* ---- the squad planner ---------------------------------------------------------------------- */
.br-sp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    height: auto;
    padding-bottom: 60px;
}

.br-sp-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.br-seg {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: inset 0 1px 0 var(--edge);
}

.br-seg button {
    border: 0;
    background: transparent;
    color: var(--text-3);
    font-family: var(--body);
    font-size: 12px;
    padding: 6px 13px;
    cursor: pointer;
    white-space: nowrap;
}

.br-seg button.on {
    background: var(--blue-tint);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--blue-edge);
}

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

.br-columns-summary {
    font-size: 12.5px;
    color: var(--text);
}

/* Night match: desaturated far enough to sit inside the palette, but green because that is what
   makes eleven boxes read as a shape. 1080, not the design's 800: a panel carries three bands of
   two rows, and the four stacked defenders need the room. */
.br-pitch {
    position: relative;
    width: 100%;
    height: 1080px;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 62px, transparent 62px 124px),
        linear-gradient(165deg, #12251D, #0C1A17 65%, #0A1618);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
    user-select: none;
}

.br-pitch svg.lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* The spinner the pitch shows in its centre while the squad and the plan are read. */
.br-pitch-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.br-slot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 240px;
    background: rgba(20, 28, 46, .94);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 9px;
    backdrop-filter: blur(6px);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .95);
}

.br-slot:hover {
    border-color: var(--blue-edge);
}

.br-slot.dragging {
    border-color: var(--blue-lt);
    z-index: 3;
}

/* The header is one line: the position-and-role button, then the grip. Only the grip drags, so
   the button still opens the pickers; it is padded to a target wider than its glyph. */
.br-slot .hd {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 5px;
}

.br-slot .hd .grip {
    flex: 0 0 auto;
    padding: 2px 3px 2px 5px;
    color: var(--text-3);
    font-size: 13px;
    line-height: 1;
    letter-spacing: -2px;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.br-slot .hd .grip:hover {
    color: var(--text-2);
}

.br-slot select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    color: var(--text-2);
    font-family: var(--body);
    font-size: 10.5px;
    padding: 3px 5px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.br-slot select.pos {
    color: var(--blue-lt);
}

/* The one-line position-and-role label: the position's key in blue, then the role's name, small
   enough to fit the line and cut with an ellipsis when it still does not. The whole line is the
   button that opens the two pickers. */
.br-slot .rolebtn {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 5px;
    padding: 3px 6px;
    cursor: pointer;
    text-align: left;
    font-family: var(--body);
}

.br-slot .rolebtn:hover {
    border-color: var(--blue-edge);
}

.br-slot .rolebtn .pos {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    color: var(--blue-lt);
    flex: 0 0 auto;
}

.br-slot .rolebtn .role {
    font-size: 10.5px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.br-slot .colhdr,
.br-slot .prow {
    display: grid;
    grid-template-columns: 1fr 20px var(--c1, 26px) var(--c2, 26px) 16px;
    gap: 4px;
    align-items: center;
}

.br-slot .colhdr {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--label);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 3px;
}

.br-slot .colhdr .r, .br-slot .prow .c {
    text-align: right;
}

.br-band-label {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--label);
    margin: 2px 0;
}

/* The "i" beside the Future label, whose title says what the band's figures are. A small ringed
   letter, like the column picker's About toggle, rather than a sentence the panel would have to make room for. */
.br-band-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    margin-left: 3px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-family: var(--display);
    font-size: 8px;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    color: var(--text-3);
    vertical-align: middle;
    cursor: help;
}

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

.br-slot .prow {
    padding: 2px 0;
    font-size: 10px;
    cursor: pointer;
    border-radius: 4px;
}

.br-slot .prow:hover {
    background: var(--blue-wash);
}

.br-slot .prow .nm {
    min-width: 0;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 1px;
}

.br-slot .prow .nm .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-slot .prow.future .nm {
    color: var(--text-2);
    font-weight: 450;
}

.br-slot .prow.empty .nm {
    color: var(--text-3);
    font-size: 9.5px;
    font-weight: 400;
}

.br-slot .prow .c {
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-slot .act {
    background: transparent;
    border: 0;
    padding: 0 2px;
    color: var(--text-3);
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
}

.br-slot .act:hover {
    color: var(--blue-lt);
}

.br-slot .divider {
    border-top: 1px solid var(--line-soft);
    margin: 5px 0;
}

.br-sp-status {
    margin: 0;
}

/* The squad table under the pitch - hidden for now (commented out in SquadPlanner.razor). */
.br-sp-grid {
    height: 420px;
}

.br-sp-grid .rz-data-grid {
    height: 100%;
}

.br-row-link {
    cursor: pointer;
}

/* The player picker dialog. */
.br-picker-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.br-picker-head, .br-picker-row {
    display: grid;
    grid-template-columns: 1fr 40px 40px 50px;
    gap: 10px;
    padding: 6px 8px;
    align-items: center;
}

.br-picker-head {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--label);
    border-bottom: 1px solid var(--line-soft);
}

.br-picker-head .sort {
    text-align: right;
    cursor: pointer;
}

.br-picker-list {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.br-picker-row {
    border-radius: var(--r-sm);
    cursor: pointer;
}

.br-picker-row:hover {
    background: var(--blue-wash);
}

.br-picker-row .name {
    font-size: 13px;
    color: var(--text);
}

.br-picker-row .detail {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.br-picker-row .score {
    font-family: var(--mono);
    font-size: 13px;
    text-align: right;
}

/* The panel's position-and-role dialog: two labelled selects, stacked. */
.br-role-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.br-role-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.br-role-field select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    color: var(--text);
    font-family: var(--body);
    font-size: 12.5px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
}

/* The quickset dialog: the phase row, then the twelve shapes by back line, two to a row so the
   name and its one-line description sit side by side rather than wrapping. */
.br-quickset {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.br-quickset-phase {
    display: flex;
    align-items: center;
    gap: 10px;
}

.br-quickset-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.br-quickset-shapes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.br-quickset-shape {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    padding: 6px 9px;
    cursor: pointer;
    font-family: var(--body);
}

.br-quickset-shape:hover {
    border-color: var(--line);
}

.br-quickset-shape.on {
    background: var(--blue-tint);
    border-color: var(--blue-edge);
}

.br-quickset-shape .nm {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
}

.br-quickset-shape .ds {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.35;
}

/* The columns dialog. */
.br-cols-general {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 8px;
}

.br-cols-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.br-cols-group h4 {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
    margin: 0 0 5px;
}

.br-cols-group h4.later {
    margin-top: 14px;
}

.br-cols-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-2);
    cursor: pointer;
    padding: 1px 0;
}

.br-cols-option input {
    accent-color: var(--blue);
    margin: 0;
}

.br-cols-selection {
    font-size: 12.5px;
    color: var(--text);
    margin: 0 0 10px;
}

/* The Free allowance line beside a write button (Components/AllowanceNote.razor). Quiet while there
   is something left; amber once the career has had it, because that is the moment it matters. */
.br-allowance {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-2);
    padding: 4px 0;
}

.br-allowance.spent {
    color: var(--amber);
}

.br-allowance .br-link {
    margin-left: auto;
}