/* ===== BUTTON GROUP STYLES ===== */
.btn-group {
    display: flex;
}

.btn-group .btn {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.4rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0;
    transition: all 0.2s ease;
}

.btn-group .btn:first-child {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

.btn-group .btn:last-child {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* ===== BOOTSTRAP SELECT STYLES ===== */
.bootstrap-select {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: block !important;
}

.input-group .bootstrap-select {
    flex: 1 1 auto !important;
    width: 1% !important;
}

.bootstrap-select .dropdown-toggle {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    font-family: 'PT Sans Narrow', sans-serif !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
    border-left: none !important;
    height: auto !important;
    font-size: 1rem !important;
    /* font-weight: 600 !important; */
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-right: 1.2rem !important;
}

.bootstrap-select .dropdown-menu {
    font-family: 'PT Sans Narrow', sans-serif !important;
    font-size: 0.9rem !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.bootstrap-select .dropdown-item {
    padding: 0.4rem 1rem !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    background-color: transparent !important;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background-color: var(--accent-color) !important;
    color: white !important;
}

.bootstrap-select .dropdown-item.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.bootstrap-select .dropdown-item.disabled {
    opacity: 0.5;
    color: #6c757d !important;
}

.bootstrap-select .dropdown-item .text-muted {
    font-size: 0.8rem;
    color: #666 !important;
}

.bootstrap-select .bs-actionsbox {
    width: 100% !important;
    padding: 0.25rem 0.5rem !important;
}

.bootstrap-select .bs-actionsbox .btn-group {
    width: 100% !important;
}

.bootstrap-select .bs-actionsbox .btn {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.5rem !important;
}

.bootstrap-select .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== FORM CONTROLS ===== */
.form-check-label {
    font-size: 0.9rem;
    font-family: 'PT Sans Narrow', sans-serif;
    font-weight: 600;
}

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Navigation bar styling */
.navbar {
    border-bottom: 2px solid var(--accent-color);
}

.navbar-brand {
    font-size: 1.3rem;
    color: white !important;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 0 0.5rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover {
    color: white !important;
}

.navbar-nav .dropdown-menu {
    background-color: var(--light-color);
}

.navbar-nav .dropdown-item {
    color: var(--primary-color);
    transition: background-color 0.2s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--accent-color);
    color: white;
}

/* Cards and content styling */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    height: 100%;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-header {
    border: none;
    font-weight: bold;
}

/* Player profiles */
.player-profiles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.player-profiles-position-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.player-profiles-position-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.player-profiles-position-section-title {
    margin: 0;
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 900;
    border-bottom: 2px solid #d9deef;
    padding-bottom: 0.2rem;
}

.player-profile-grid-item {
    flex: 0 0 var(--player-profile-card-width, 280px);
    width: var(--player-profile-card-width, 280px);
}

.player-profile-card {
    width: var(--player-profile-card-width, 280px);
    overflow: hidden;
    border: 1px solid #d9deef;
    box-shadow: 0 1px 4px rgba(32, 41, 70, 0.12);
}

.player-profile-card-1st {
    border-color: rgba(32, 41, 70, 0.35);
}

.player-profile-card-2nd {
    border-color: rgba(125, 150, 232, 0.6);
}

.player-profile-headshot-wrap {
    background-size: cover;
    background-position: center top;
    padding: 0.25rem 0.5rem 0;
    text-align: center;
    min-height: 150px;
    height: max-content;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 0;
}

.player-profile-headshot-wrap-1st {
    background-image: url("../img/EGRFC%20Background.png");
}

.player-profile-headshot-wrap-2nd {
    background-image: url("../img/EGRFC%20Background2.png");
}

.player-profile-avatar {
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
    object-position: center top;
    border: none;
    background: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 6px 10px rgba(10, 18, 38, 0.35));
}

.player-profile-avatar-placeholder {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    margin: 0 auto;
    color: var(--light-color);
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 6px 12px rgba(10, 18, 38, 0.3);
}

.player-profile-summary {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    border: none;
    background: #ffffff;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin-top: -12px;
}

.player-profile-summary-1st,
.player-profile-summary-2nd {
    border-radius: 0;
    margin: 0;
}

.player-profile-summary-left {
    min-width: 0;
    flex: 1 1 auto;
}

.player-profile-summary-name {
    font-weight: 700;
    color: inherit;
    line-height: 1.2;
    margin-bottom: 0.15rem;
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-profile-summary-subtitle {
    color: inherit;
    font-size: 1.2rem;
    /* opacity: 0.9; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-profile-active-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    margin-right: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #125e12;
    background: #dff5df;
    border: 1px solid #b7e0b7;
    vertical-align: middle;
}

.player-profile-active-tag-headshot {
    position: absolute;
    right: 0.5rem;
    bottom: 0.45rem;
    margin-right: 0;
    font-size: 0.78rem;
    padding: 0.12rem 0.52rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.player-profile-summary-right {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}

.player-profile-summary-meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.player-profile-summary-count {
    font-size: 2rem;
    font-weight: 800;
    color: inherit;
}

.player-profile-summary-label {
    font-size: 0.82rem;
    color: inherit;
    opacity: 0.88;
    margin-top: -0.05rem;
}

.player-profile-chevron {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: inherit;
    opacity: 0.9;
    transition: transform 0.15s ease;
}

.player-profile-card.is-expanded .player-profile-chevron {
    transform: rotate(180deg);
}

.player-profile-details {
    border-top: 1px solid #e4e9f7;
    background: #f9fbff;
    padding: 0.62rem 0.8rem;
}

.player-profile-detail-line {
    margin: 0 0 0.32rem;
    color: #2a3555;
    font-size: 0.9rem;
    line-height: 1.24;
}

.player-profile-detail-spacer {
    margin: 0.5rem 0;
    height: 0;
    border-top: #e4e9f7 solid 1px;
}

.player-profile-detail-sponsor {
    font-style: italic;
    font-weight: 300;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 0 auto 0.75rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    color: #202946;
    background: linear-gradient(135deg, #fff6d6 0%, #ffe082 100%);
    border: 1px solid #d5b54a;
    box-shadow: 0 1px 4px rgba(32, 41, 70, 0.16);
    letter-spacing: 0.01em;
    opacity: 1;
}

.player-profile-detail-line:last-child {
    margin-bottom: 0;
}

.player-profile-detail-link-wrap {
    margin: 0.55rem 0 0;
    padding-top: 0.45rem;
    border-top: 1px dashed #ccd6ee;
}

.player-profile-detail-link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #202946;
    text-decoration: none;
}

.player-profile-detail-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.72rem;
    border-radius: 0.5rem;
    border: 1px solid #202946;
    background: linear-gradient(135deg, #202946 0%, #354579 100%);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 12px rgba(32, 41, 70, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.player-profile-detail-cta:hover,
.player-profile-detail-cta:focus {
    text-decoration: none;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(32, 41, 70, 0.3);
    filter: brightness(1.04);
}

.player-profile-detail-link:not(.player-profile-detail-cta):hover,
.player-profile-detail-link:not(.player-profile-detail-cta):focus {
    text-decoration: none;
}

.full-profile-banner {
    min-height: 210px;
    padding: 1rem 1.1rem 0;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    /* Shift crop lower so the banner window focuses below the top edge of the source image. */
    background-position: center var(--full-profile-banner-bg-y, 21%);
}

.full-profile-banner-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
    padding-bottom: 0.9rem;
    max-width: 62%;
}

.full-profile-banner-name {
    margin: 0;
    font-size: clamp(2.5rem, 1.1rem + 1.3vw, 2rem);
    line-height: 1.05;
    font-weight: 900;
}

.full-profile-banner-subtitle {
    margin: 0.3rem 0;
    font-size: clamp(1.5em, 0.85rem + 0.45vw, 1.15rem);
    opacity: 0.96;
}

.full-profile-active-row {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.full-profile-banner-headshot {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 165px;
    max-width: 38%;
}

.full-profile-banner .player-profile-avatar {
    width: min(100%, 180px);
    max-width: 180px;
}

.full-profile-active-tag {
    margin-left: 0;
    margin-right: 0;
    vertical-align: middle;
}

.full-profile-squad-tag {
    color: #ffffff;
    border-color: transparent;
}

.full-profile-squad-tag--1st {
    background: #202946;
}

.full-profile-squad-tag--2nd {
    background: #7d96e8;
    color: #202946;
    border: 1px solid #5f79d8;
}

.full-profile-sort-button,
.full-profile-sort-button:hover,
.full-profile-sort-button:focus {
    color: #1e2a47;
}

.full-profile-table-card {
    width: 100%;
    padding: 0.75rem 1rem;
}

.full-profile-panel-full {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1240px;
}

.full-profile-panel-full .chart-panel-content,
.full-profile-panel-full .chart-panel-card {
    width: 100%;
}

.full-profile-table-card .database-table-responsive {
    min-height: 0;
}
.full-profile-table-card .database-data-table td {
    max-width: none;
}

.full-profile-table-card .database-data-table thead tr {
    background-color: var(--dark-color);
    color: #ffffff;
}

.full-profile-table-card .database-data-table thead th {
    background-color: var(--dark-color) !important;
    border-color: var(--dark-color) !important;
}

.full-profile-table-card .database-data-table thead th,
.full-profile-table-card .database-data-table thead .database-sort-button {
    color: #ffffff;
}

.full-profile-table-card .btn-group {
    margin-left: auto;
}

.full-profile-table-card .database-pagination-bar {
    padding: 0.35rem 0.4rem 0.15rem;
}

.full-profile-chart-panel .chart-panel-content,
.full-profile-chart-panel .chart-panel-card {
    width: 100%;
}

.full-profile-sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
    align-items: start;
}

.full-profile-sections-column {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    min-width: 0;
}

.full-profile-section-block {
    padding: 0.72rem 0.8rem;
    border: 1px solid #dbe3f5;
    border-radius: 0.65rem;
    background: #f9fbff;
    box-shadow: 0 1px 2px rgba(32, 41, 70, 0.06);
}

/* Full Profile Section title */
.full-profile-section-title {
    margin: 0 0 0.4rem;
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight:900;
}

.full-profile-section-full {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
}

.full-profile-panels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.95rem;
}

.full-profile-panels-grid > .full-profile-panel-full:has(> .chart-panel-toggle[aria-expanded="true"]) {
    grid-column: 1 / -1;
}

#fullProfileAppearancesPerSeasonChart {
    width: 100%;
    min-width: 300px;
    max-width: 900px;
}

#fullProfileAppearancesSearch {
    min-width: 100px !important;   
}

.full-profile-positions-stack {
    margin-top: 0.25rem;
}

.full-profile-position-line {
    margin: 0.18rem 0;
}

.fixture-result-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    vertical-align: top;
}

.fixture-result-main {
    line-height: 1.25;
}

.fixture-result-separator {
    color: #6a7388;
    font-weight: 700;
    line-height: 1;
}

.fixture-result-meta {
    line-height: 1;
}

.record-chip-group {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.record-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.08rem 0.34rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
}

.record-chip-label {
    opacity: 0.88;
}

.record-chip-value {
    font-size: 0.95em;
}

.record-chip--win {
    background: #d4edda;
    color: #146f14;
    border-color: #b8dfc0;
}

.record-chip--loss {
    background: #f8d7da;
    color: #991515;
    border-color: #e8bcc1;
}

.record-chip--draw {
    background: #fff3cd;
    color: #856404;
    border-color: #eadb9e;
}

.result-badge {
    display: inline-block;
    padding: 0.1em 0.45em;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
}

.result-badge--win {
    background: #d4edda;
    color: #146f14;
}

.result-badge--loss {
    background: #f8d7da;
    color: #991515;
}

.result-badge--draw {
    background: #fff3cd;
    color: #856404;
}

.last-ten-results-strip {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
    /* min-height: 1.5rem; */
}

.last-ten-result-link {
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
}

.last-ten-result-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}

.last-ten-result-link .last-ten-result {
    transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.last-ten-result-link:hover .last-ten-result,
.last-ten-result-link:focus-visible .last-ten-result {
    transform: translateY(-1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
    filter: saturate(1.05);
}

.season-results-last-ten-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(32, 41, 70, 0.12);
}

.season-results-last-ten-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    white-space: nowrap;
    padding: 0;
    font-weight: 700;
    margin-top: auto;
}

.last-ten-results-strip--single-row {
    position: relative;
    flex-wrap: nowrap;
    padding-top: 0.9rem;
}

.last-ten-results-strip--single-row > .last-ten-result:last-child,
.last-ten-results-strip--single-row > .last-ten-result-link:last-child .last-ten-result {
    position: relative;
}

.last-ten-results-strip--single-row > .last-ten-result:last-child::before,
.last-ten-results-strip--single-row > .last-ten-result-link:last-child .last-ten-result::before {
    content: '→ MOST RECENT';
    position: absolute;
    right: 0;
    width: max-content;
    top: -0.8rem;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--primary-color);
    font-weight: 700;
}

.last-ten-result-tooltip .tooltip-inner {
    max-width: 280px;
    text-align: left;
    white-space: pre-line;
    line-height: 1.3;
    font-size: 0.82rem;
}

.last-ten-result {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    /* border: 1px solid rgba(0, 0, 0, 0.2); */
    font-family: 'PT Sans Narrow', sans-serif;
}

.last-ten-result--win {
    color: rgba(255, 255, 255, 0.4);
    background: var(--green-color);
}

.last-ten-result--loss {
    background: var(--red-color);
    color: rgba(255, 255, 255, 0.4);
}

.last-ten-result--draw {
    background: goldenrod;
    color: rgba(255, 255, 255, 0.4);
}

.last-ten-results-empty {
    color: #5d667d;
    font-size: 0.9rem;
}

.season-summary-player-link {
    color: inherit;
    text-decoration: none;
}

.season-summary-player-link:hover,
.season-summary-player-link:focus {
    color: inherit;
    opacity: 0.85;
}

/* Player Info card variant for Last 10 row */
.player-info-last-ten-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.player-info-last-ten-row .last-ten-results-strip {
    gap: 0.08rem;
}

.player-info-last-ten-row .last-ten-results-strip--single-row {
    padding-top: 0;
}

.player-info-last-ten-row .last-ten-results-strip--single-row > .last-ten-result:last-child::before,
.player-info-last-ten-row .last-ten-results-strip--single-row > .last-ten-result-link:last-child .last-ten-result::before {
    top: -0.65rem;
    font-size: 0.5rem;
    letter-spacing: 1.4px;
}

.player-info-last-ten-row .last-ten-result {
    width: 1rem;
    height: 1rem;
    font-size: 0.65rem;
}

/* Squad pill inside appearance/match tables */
.squad-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.52rem;
    border-radius: 999px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1;
}

.squad-pill--1st {
    background: var(--primary-color);
    color: #ffffff;
}

.squad-pill--2nd {
    background: var(--accent-color);
    color: var(--primary-color);
}

.squad-pill--unknown {
    background: #e2e6ea;
    color: #495057;
}

td:has(> .squad-pill) {
    padding-top: 0;
    padding-bottom: 0;
}

td:has(> .squad-pill) > .squad-pill {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Standard alternating row shading — no squad-specific row colouring */
.full-profile-table-card .database-data-table tbody .full-profile-appearance-row:hover > td {
    background-color: rgba(125, 150, 232, 0.12) !important;
}

.match-open-btn {
    width: 1.8rem;
    height: 1.8rem;
    line-height: 1;
}

.match-table-venue,
th.match-table-open-cell,
td.match-table-open-cell {
    width: 1px;
    white-space: nowrap;
    text-align: center;
}

.match-info-hero-matrix {
    display: grid;
    grid-template-columns: 3.2rem repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    align-items: stretch;
}

.match-info-hero-matrix-corner {
    min-height: 1px;
}

.match-info-hero-matrix-colhead {
    margin: 0;
    padding: 0.28rem 0.25rem 0.18rem;
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    color: #eef2ff;
}

.match-info-hero-matrix-rowhead {
    margin: 0;
    padding: 0.45rem 0.2rem;
    font-size: 0.86rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d9e2ff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.match-info-hero-matrix-cell {
    min-width: 0;
}

.match-info-hero-action-card {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 0.65rem;
    border: 2px solid rgba(26, 39, 76, 0.2);
    background: #ffffff;
    color: #152042;
    box-shadow: 0 2px 6px rgba(32, 41, 70, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.02rem;
    padding: 0.34rem 0.4rem;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: 1.12;
}

.match-info-hero-matrix-cell--1st .match-info-hero-action-card {
    border-color: color-mix(in srgb, var(--primary-color) 70%, #ffffff);
    background: var(--primary-color);
    color: #f4f7ff;
}

.match-info-hero-matrix-cell--2nd .match-info-hero-action-card {
    border-color: color-mix(in srgb, var(--accent-color) 75%, var(--primary-color));
    background: var(--accent-color);
    color: var(--primary-color);
}

button.match-info-hero-action-card {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

button.match-info-hero-action-card:hover,
button.match-info-hero-action-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 11px rgba(32, 41, 70, 0.18);
    outline: none;
}

.match-info-hero-matrix-cell--1st button.match-info-hero-action-card:hover,
.match-info-hero-matrix-cell--1st button.match-info-hero-action-card:focus-visible {
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(32, 41, 70, 0.3);
}

.match-info-hero-matrix-cell--2nd button.match-info-hero-action-card:hover,
.match-info-hero-matrix-cell--2nd button.match-info-hero-action-card:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(32, 41, 70, 0.24);
}

.match-info-hero-action-card.is-empty {
    font-size: 0.9rem;
    font-weight: 700;
}

.match-info-hero-matrix-cell--1st .match-info-hero-action-card.is-empty {
    color: color-mix(in srgb, #ffffff 84%, var(--primary-color));
}

.match-info-hero-matrix-cell--2nd .match-info-hero-action-card.is-empty {
    color: color-mix(in srgb, var(--primary-color) 80%, #ffffff);
}

.match-info-hero-action-date {
    font-size: 0.92rem;
    font-weight: 900;
}

.match-info-hero-action-detail {
    font-size: 0.78rem;
    font-weight: 700;
}

.match-info-hero-matrix-cell--1st .match-info-hero-action-detail {
    color: color-mix(in srgb, #ffffff 82%, var(--primary-color));
}

.match-info-hero-matrix-cell--2nd .match-info-hero-action-detail {
    color: color-mix(in srgb, var(--primary-color) 88%, #ffffff);
}

@media (max-width: 767.98px) {
    .match-info-hero-matrix {
        grid-template-columns: 2.8rem repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }

    .match-info-hero-matrix-colhead {
        font-size: 0.82rem;
        padding-top: 0.18rem;
    }

    .match-info-hero-matrix-rowhead {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .match-info-hero-action-card {
        min-height: 3rem;
        padding: 0.24rem 0.25rem;
    }

    .match-info-hero-action-date {
        font-size: 0.82rem;
    }

    .match-info-hero-action-detail {
        font-size: 0.72rem;
    }
}

.match-info-hero {
    margin-bottom: 1rem;
    padding: 0;
    border: 3px solid #d9e0f0;
    border-radius: 1rem;
    overflow: hidden; /* clips grid gradient to the card's rounded corners */
    /* CSS variables cascade to .match-info-hero-grid which carries the gradient */
    --eg-color: var(--primary-color);
    --eg-fg: white;
    --result-color: #edf0f8;
    --opp-color: color-mix(in srgb, #888 14%, white);
    background: #ffffff; /* only the meta strip shows this — kept neutral */
    box-shadow: 0 12px 28px rgba(32, 41, 70, 0.08);
}

/* Squad color variants — match the site-wide team color conventions */
.match-info-hero--1st {
    --eg-color: var(--primary-color);
    --eg-fg: white;
}

.match-info-hero--2nd {
    --eg-color: var(--accent-color);
    --eg-fg: var(--primary-color);
}

/* Apply EG squad text color to whichever side EG occupies */
.match-info-hero--eg-home .match-info-team--home .match-info-team-name,
.match-info-hero--eg-home .match-info-team--home .match-info-team-label,
.match-info-hero--eg-away .match-info-team--away .match-info-team-name,
.match-info-hero--eg-away .match-info-team--away .match-info-team-label {
    color: var(--eg-fg);
}

/* Result color variants */
.match-info-hero--win {
    --result-color: color-mix(in srgb, var(--green-color) 28%, white);
    border-color: color-mix(in srgb, var(--green-color) 30%, #d9e0f0);
}

.match-info-hero--loss {
    --result-color: color-mix(in srgb, var(--red-color) 28%, white);
    border-color: color-mix(in srgb, var(--red-color) 30%, #d9e0f0);
}

.match-info-hero--draw {
    --result-color: color-mix(in srgb, #d6b75b 24%, white);
    border-color: color-mix(in srgb, #d6b75b 45%, #d9e0f0);
}

.match-info-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    /* Desktop gradient: grid is [1fr][auto][1fr] with gap 0.
       The narrow auto score column sits centrally (~15-20% of width),
       so each team column occupies ~40% of total width.
       Blend zones are kept wide so the transition falls in the padding
       area between team name and score, not across the text itself. */
    background: linear-gradient(to right,
        var(--eg-color)     0%,
        var(--eg-color)     32%,
        var(--result-color) 44%,
        var(--result-color) 56%,
        var(--opp-color)    68%,
        var(--opp-color)    100%
    );
}

/* Away: EG panel is on the right — mirror the stops */
.match-info-hero--eg-away .match-info-hero-grid {
    background: linear-gradient(to right,
        var(--opp-color)    0%,
        var(--opp-color)    32%,
        var(--result-color) 44%,
        var(--result-color) 56%,
        var(--eg-color)     68%,
        var(--eg-color)     100%
    );
}

.match-info-team {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.1rem 1rem;
}

.match-info-team-shell {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.match-info-team-shell--away {
    flex-direction: row-reverse;
}

.match-info-team-text {
    min-width: 0;
}

.match-info-team--home {
    padding-left: 1.25rem;
    padding-right: 0;
}

.match-info-team--away {
    text-align: right;
    padding-right: 1.25rem;
}

.match-info-team-label,
.match-info-meta-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6a7388;
}

.match-info-team-name {
    color: var(--primary-color);
    font-size: clamp(1.4rem, 3.4vw, 2.7rem);
    font-weight: 900;
    line-height: 1.05;
    text-wrap: balance;
}

.match-info-team-logo-wrap {
    flex: 0 0 auto;
    width: clamp(4rem, 7vw, 6rem);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.match-info-team-logo-wrap--empty {
    display: none;
}

.match-info-team-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5))
}

.match-info-score-wrap {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.1rem 1.25rem;
}

.match-info-score-line {
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-info-score-logo-wrap {
    display: none;
    flex: 0 0 auto;
    width: clamp(3.5rem, 6vw, 5rem);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
}

.match-info-score-logo-wrap--empty {
    display: none;
}

.match-info-score {
    color: var(--primary-color);
    font-size: clamp(2.4rem, 6vw, 4.9rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.match-info-score-separator {
    display: inline-block;
    margin: 0 0.18em;
    color: color-mix(in srgb, var(--primary-color) 60%, white);
}

.match-info-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    padding: 0.95rem 1.25rem 1rem;
    border-top: 1px solid rgba(32, 41, 70, 0.08);
}

.match-info-meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    width: 100%;
}

.match-info-meta-row--scoring {
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.1rem;
    padding-top: 0.62rem;
    border-top: 1px solid rgba(32, 41, 70, 0.1);
}

.match-info-meta-item {
    text-align: center;
}

.match-info-meta-row--scoring .match-info-meta-item {
    flex: 1 1 0;
    min-width: 0;
}

.match-info-meta-row--paired {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
}

.match-info-meta-row--paired .match-info-meta-item {
    min-width: 0;
    width: max-content;
    max-width: 100%;
}

.match-info-meta-row--paired .match-info-meta-item:first-child {
    justify-self: end;
}

.match-info-meta-row--paired .match-info-meta-item:last-child {
    justify-self: start;
}

.match-info-meta-value {
    display: block;
    color: var(--primary-color);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
    line-height: 1.15;
}

.match-info-meta-value--scorers {
    font-size: clamp(0.86rem, 1.55vw, 0.98rem);
    font-weight: 600;
    line-height: 1.28;
    text-wrap: balance;
}

.match-info-scorer-lines {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 0.34rem;
    row-gap: 0.12rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
}

.match-info-scorer-line {
    display: contents;
}

.match-info-scorer-name {
    min-width: 0;
    text-align: right;
}

.match-info-score-multiplier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 82%, black);
    background: var(--primary-color);
    color: #ffffff;
    font-family: "PT Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: 1;
    letter-spacing: 0.02em;
    vertical-align: baseline;
    box-shadow: 0 1px 2px rgba(32, 41, 70, 0.14);
}

.match-info-score-multiplier--empty {
    visibility: hidden;
}

.match-info-meta-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(32, 41, 70, 0.12);
}

.match-info-future-note {
    font-size: 0.95rem;
}

.match-info-scorers {
    margin: 1rem 0;
    border: 1px solid #d9e0f0;
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(32, 41, 70, 0.05);
    padding: 0.9rem 1rem 1rem;
}

.match-info-scorers-title {
    margin: 0 0 0.65rem;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.match-info-scorers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem 1.1rem;
}

.match-info-scorers-group {
    min-width: 0;
}

.match-info-scorers-group-title {
    margin: 0 0 0.3rem;
    color: color-mix(in srgb, var(--primary-color) 86%, black);
    font-size: 0.92rem;
    font-weight: 700;
}

.match-info-scorers-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.match-info-scorers-item {
    margin: 0;
    padding: 0.12rem 0;
    color: #2b3146;
    font-size: 0.96rem;
    line-height: 1.35;
}

.video-analysis {
    margin: 0.7rem 0 1rem;
    border: 1px solid #d9e0f0;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(32, 41, 70, 0.05);
    overflow: hidden;
    --video-eg-bg: var(--primary-color);
    --video-eg-fg: #ffffff;
    --video-opp-bg: var(--light-color);
    --video-opp-fg: black;
}

.video-analysis-table-wrap {
    width: 100%;
    max-width: 600px;
    margin: 0.45rem auto 0;
    border: 2px solid var(--primary-color);
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

.video-analysis-tables {
    display: grid;
    grid-template-columns: minmax(0, 600px);
    gap: 0.85rem;
    justify-content: center;
    align-items: start;
    padding: 0 0.75rem 0.8rem;
}

.video-analysis-lineout-detail-wrap {
    width: 100%;
    max-width: 450px !important;
    margin-left: auto;
    border: 2px solid var(--primary-color);
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

.video-analysis-lineout-detail-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.45rem auto 0;
}

.video-analysis-lineout-detail-table {
    margin: 0;
    width: 100%;
}

.video-analysis-lineout-detail-table thead th {
    padding: 0.35rem 0.4rem;
    background: var(--dark-color);
    color: var(--light-color);
    font-size: 1rem;
    font-weight: 900;
    border: none;
    text-align: center;
}

.video-analysis-lineout-detail-table thead tr.video-analysis-lineout-detail-title-row th {
    padding: 0.8rem 1.05rem;
    background: var(--primary-color);
    color: var(--light-color);
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    border-bottom: 1px solid rgba(32, 41, 70, 0.25);
}

.video-analysis-lineout-detail-table thead th:nth-child(1) { width: 1rem; }
.video-analysis-lineout-detail-table thead th:nth-child(2) { width: 3.2rem; }
.video-analysis-lineout-detail-table thead th:nth-child(3) { width: 4rem; }
.video-analysis-lineout-detail-table thead th:nth-child(4) { width: 5rem; }
.video-analysis-lineout-detail-table thead th:nth-child(5) { width: 5rem; }
.video-analysis-lineout-detail-table thead th:nth-child(6) { width: auto; }

.video-analysis-lineout-detail-table tbody td {
    padding: 0.34rem 0.4rem;
    text-align: center;
    font-size: 0.86rem;
    line-height: 1.25;
    color: var(--primary-color);
    border-top: 1px solid #e8edf8;
    border-left: 1px solid #eef2fa;
    word-break: break-word;
    overflow-wrap: break-word;
}

.video-analysis-lineout-detail-table tbody td:first-child {
    border-left: none;
    border-right: none;
    text-align: right;
    width: min-content;
    opacity: 0.5;
    color: var(--dark-color);
    white-space: nowrap;
}

.video-analysis-lineout-detail-table tbody td:nth-child(2) {
    border-left: none;
    font-size: 1rem;
    padding: 0.1rem 0.45rem;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers,
.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-call {
    font-weight: 900;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers {
    letter-spacing: 0.01em;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers .video-analysis-lineout-numbers-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers .video-analysis-lineout-numbers-pill.video-analysis-lineout-numbers--4 {
    color: var(--dark-color);
    background: var(--accent-color);
    border-color: var(--primary-color);
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers .video-analysis-lineout-numbers-pill.video-analysis-lineout-numbers--5 {
    color: var(--light-color);
    background: var(--primary-color);
    border-color: var(--accent-color);
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers .video-analysis-lineout-numbers-pill.video-analysis-lineout-numbers--6 {
    color: var(--red-color);
    background: color-mix(in srgb, var(--red-color) 25%, white);
    border-color: var(--red-color);
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-numbers .video-analysis-lineout-numbers-pill.video-analysis-lineout-numbers--7 {
    color: var(--light-color);
    background: var(--red-color);
    border-color: color-mix(in srgb, var(--red-color) 25%, white);
}


.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-call {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-call.video-analysis-lineout-call--bang {
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.01em;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-thrower,
.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-jumper {
    white-space: nowrap;
    font-size: 0.86rem;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-thrower a.match-team-sheet-player-link,
.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-jumper a.match-team-sheet-player-link {
    font-size: 0.86rem;
    font-weight: 400;
}


.video-analysis-lineout-detail-table tbody td:nth-child(3),
.video-analysis-lineout-detail-table tbody td:nth-child(4),
.video-analysis-lineout-detail-table tbody td:nth-child(5) {
    white-space: nowrap;
}

.video-analysis-lineout-detail-table thead th:nth-child(6),
.video-analysis-lineout-detail-table tbody td:nth-child(6) {
    text-align: left;
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-notes--placeholder {
    text-align: right;
    opacity: 0.5;
}

.video-analysis-lineout-notes-placeholder {
    font-weight: 800;
    letter-spacing: 0.04em;
}

.video-analysis-lineout-notes-placeholder--won {
    color: var(--green-color);
}

.video-analysis-lineout-notes-placeholder--lost {
    color: var(--red-color);
}

.video-analysis-lineout-detail-table tbody td.video-analysis-lineout-notes {
    font-size: 0.72rem !important;
}

.video-analysis-lineout-detail-table tbody tr.video-analysis-lineout-row--won {
    background: color-mix(in srgb, var(--green-color) 14%, white);
}

.video-analysis-lineout-detail-table tbody tr.video-analysis-lineout-row--won td {
    background: inherit;
    border-left-color: color-mix(in srgb, var(--green-color) 35%, white);
}

.video-analysis-lineout-detail-table tbody tr.video-analysis-lineout-row--lost {
    background: color-mix(in srgb, var(--red-color) 14%, white);
}

.video-analysis-lineout-detail-table tbody tr.video-analysis-lineout-row--lost td {
    background: inherit;
    border-left-color: color-mix(in srgb, var(--red-color) 35%, white);
}

.video-analysis--2nd {
    --video-eg-bg: var(--accent-color);
    --video-eg-fg: var(--primary-color);
}

.video-analysis-panel-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.video-analysis-notes {
    padding: 0.55rem 0.75rem 0.4rem;
    background: color-mix(in srgb, var(--primary-color) 4%, white);
    border-bottom: 1px solid #dbe2f1;
}

.video-analysis-notes ul {
    margin: 0;
    padding-left: 1rem;
}

.video-analysis-notes li {
    margin: 0.18rem 0;
    color: #46506a;
    font-size: 0.83rem;
    line-height: 1.35;
}

.video-analysis-table {
    margin: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

.video-analysis-table th,
.video-analysis-table td {
    border: none;
    padding: 0.1rem 0.1rem;
}

.video-analysis-matchup-row {
    box-shadow: inset 0 -1px 0 #d7dfef;
}

.video-analysis-matchup-row th {
    vertical-align: middle;
    padding: 0.5rem;
}

.video-analysis-team-head {
    width: 35%;
    text-align: center;
    background: transparent;
}

.video-analysis-score-head {
    width: 30%;
    text-align: center;
    vertical-align: middle;
    background: #edf0f8;
    border-left: 1px solid rgba(32, 41, 70, 0.1);
    border-right: 1px solid rgba(32, 41, 70, 0.1);
}

.video-analysis-team-head-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.video-analysis-team-head-inner--away {
    flex-direction: row-reverse;
}

.video-analysis-team-logo {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.video-analysis-team-name {
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    text-wrap: balance;
}

.video-analysis-score {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.video-analysis-score-separator {
    display: inline-block;
    margin: 0 0.2em;
    color: color-mix(in srgb, var(--primary-color) 62%, white);
}

/* Header row: per-cell solid backgrounds */
.video-analysis--eg-home .video-analysis-matchup-row,
.video-analysis--eg-away .video-analysis-matchup-row {
    background: transparent;
}

/* Cell text colors — cells carry their own backgrounds */
.video-analysis--eg-home .video-analysis-team-head--eg,
.video-analysis--eg-away .video-analysis-team-head--eg {
    background: var(--video-eg-bg);
    color: var(--video-eg-fg);
}

.video-analysis--eg-home .video-analysis-team-head--opp,
.video-analysis--eg-away .video-analysis-team-head--opp {
    background: var(--video-opp-bg);
    color: var(--video-opp-fg);
}

/* Score cell: result-tinted background */
.video-analysis--win .video-analysis-score-head {
    background: color-mix(in srgb, var(--green-color) 22%, white);
}

.video-analysis--loss .video-analysis-score-head {
    background: color-mix(in srgb, var(--red-color) 22%, white);
}

.video-analysis--draw .video-analysis-score-head {
    background: color-mix(in srgb, #d6b75b 18%, white);
    vertical-align: middle;
}

.video-analysis-section-row th {
    padding: 0.22rem 0.45rem;
    background: var(--dark-color);
    color: var(--light-color);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-align: center;
}

.video-analysis-value {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    border-left: 1px solid #edf1f8;
    border-right: 1px solid #edf1f8;
    transition: color 150ms ease, text-shadow 150ms ease, font-size 150ms ease, font-weight 150ms ease;
}

.video-analysis-table td.video-analysis-value--lead {
    color: color-mix(in srgb, var(--green-color) 72%, #102410);
    font-weight: 900;
    font-size: 1.32rem;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--green-color) 22%, white);
}

.video-analysis-label {
    text-align: center;
    color: #5d657d;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {

    .video-analysis-tables {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
        padding: 0 0.35rem 0.7rem;
    }

    .video-analysis-team-logo {
        width: 2rem;
        height: 2rem;
    }

    .video-analysis-score {
        font-size: 2rem;
    }

    .video-analysis-matchup-row th {
        padding: 0.4rem;
    }

    .video-analysis-lineout-detail-table thead th,
    .video-analysis-lineout-detail-table tbody td {
        font-size: 0.78rem;
        padding: 0.3rem 0.32rem;
    }

    .video-analysis-lineout-detail-table tbody td:first-child {
        width: 2rem;
        min-width: 2rem;
    }

    .video-analysis-lineout-detail-table thead th:nth-child(1) { width: 1.8rem; }
    .video-analysis-lineout-detail-table thead th:nth-child(2) { width: 2.8rem; }
    .video-analysis-lineout-detail-table thead th:nth-child(3) { width: 3.2rem; }
    .video-analysis-lineout-detail-table thead th:nth-child(4) { width: 4.4rem; }
    .video-analysis-lineout-detail-table thead th:nth-child(5) { width: 4.4rem; }
    .video-analysis-lineout-detail-table thead th:nth-child(6) { width: auto; }

}

@media (min-width: 1200px) {
    .video-analysis-tables {
        grid-template-columns: minmax(0, 600px) minmax(0, 560px);
    }

    .video-analysis-table-wrap,
    .video-analysis-lineout-detail-wrap {
        max-width: none;
    }
}

.match-info-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.match-info-external-link:hover,
.match-info-external-link:focus {
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.match-data-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.match-data-info-header-action {
    display: inline-flex;
    flex: 0 0 auto;
}

.match-data-info-header-action .match-info-external-link {
    margin-top: 0;
    padding: 0.24rem 0.56rem;
    font-size: 0.72rem;
}

.match-team-sheet {
    border: 2px solid #d9e0f0;
    border-radius: 0.95rem;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(32, 41, 70, 0.06);
    overflow: hidden;
}

.match-team-sheet-header-wrap {
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg, var(--primary-color) 0%, #2d3d6d 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.match-team-sheet-header {
    background: transparent;
    color: #ffffff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
    padding: 0.8rem 1.05rem;
    flex: 1 1 auto;
}

.match-team-sheet-mode-toggle {
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.16);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 0.95rem;
    transition: background-color 0.15s ease, filter 0.15s ease;
    min-width: 8.2rem;
}

.match-team-sheet-mode-toggle:hover,
.match-team-sheet-mode-toggle:focus {
    background: rgba(0, 0, 0, 0.28);
    filter: brightness(1.03);
}

.match-team-sheet-mode-toggle[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.2);
}

.match-team-sheet-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.match-team-sheet-starting-header {
    padding: 0.78rem 1.05rem 0.15rem;
}

.match-team-sheet-starting-header .match-team-sheet-title {
    margin: 0;
}

.match-team-sheet-panel {
    padding: 0.95rem 1.05rem 1.05rem;
}

.match-team-sheet-top-grid > .match-team-sheet-panel + .match-team-sheet-panel {
    border-left: 1px solid #dbe2f4;
}

.match-team-sheet-panel--replacements {
    border-top: 1px solid #dbe2f4;
}

.match-team-sheet-replacements-header-wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.match-team-sheet-title {
    margin: 0 0 0.62rem;
    color: var(--primary-color);
    font-weight: 900;
    font-size: 1.28rem;
}

.match-team-sheet-subtitle {
    margin: 0 0 0.6rem;
    color: #4e5a7a;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match-team-sheet-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.match-team-sheet-item {
    display: grid;
    grid-template-columns: 5.3rem minmax(0, 1fr);
    align-items: center;
    gap: 0.68rem;
    padding: 0.38rem 0;
    border-bottom: 1px dotted #e2e8f8;
}

.match-team-sheet-item:last-child {
    border-bottom: none;
}

.match-team-sheet-number-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 5.3rem;
    min-height: 4.6rem;
    gap: 0.1rem;
}

.match-team-sheet-number {
    font-size: 56px;
    font-weight: 900;
    color: #111a33;
    line-height: 0.9;
}

.match-team-sheet-position-label {
    position: static;
    transform: none;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #5d6780;
    overflow: hidden;
}

.match-team-sheet-position-label-text {
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.match-team-sheet-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
}

.match-team-sheet-player-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.match-team-sheet-avatar,
.match-team-sheet-avatar-placeholder {
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.match-team-sheet-avatar {
    object-fit: cover;
    border: 1px solid #cbd6f0;
    background: #ffffff;
}

.match-team-sheet-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e9edf8;
    color: #5e6882;
    border: 1px solid #d3dced;
}

.match-team-sheet-player-text {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.match-team-sheet-player-link,
.match-team-sheet-player-name {
    font-size: 1.32rem;
    font-weight: 800;
    color: #101a36;
    line-height: 1.1;
    text-decoration: none;
}

.match-team-sheet-item .match-team-sheet-badge {
    transform: translateY(0.02rem);
}

.match-team-sheet--compact {
    border-width: 1px;
    box-shadow: 0 4px 10px rgba(32, 41, 70, 0.05);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.match-team-sheet--compact .match-team-sheet-header-wrap,
.match-team-sheet--compact .match-team-sheet-starting-header {
    grid-column: 1 / -1;
}

.match-team-sheet--compact .match-team-sheet-top-grid {
    display: contents;
}

.match-team-sheet--compact .match-team-sheet-panel--replacements {
    border-top: none;
    border-left: 1px solid #dbe2f4;
}

.match-team-sheet--compact .match-team-sheet-header {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    padding: 0.62rem 0.82rem;
}

.match-team-sheet--compact .match-team-sheet-mode-toggle {
    font-size: 0.7rem;
    padding: 0 0.72rem;
}

.match-team-sheet--compact .match-team-sheet-panel {
    padding: 0.66rem 0.78rem 0.76rem;
}

.match-team-sheet--compact .match-team-sheet-starting-header {
    padding: 0.58rem 0.78rem 0.08rem;
}

.match-team-sheet--compact .match-team-sheet-title {
    margin-bottom: 0.32rem;
    font-size: 1rem;
}

.match-team-sheet--compact .match-team-sheet-subtitle {
   margin-bottom: 0.42rem;
    font-size: 0.74rem;
}

.match-team-sheet--compact .match-team-sheet-item {
    grid-template-columns: 3.3rem minmax(0, 1fr);
    gap: 0.42rem;
    padding: 0.06rem 0;
}

.match-team-sheet--compact .match-team-sheet-list {
    gap: 0.02rem;
}

.match-team-sheet--compact .match-team-sheet-number-wrap {
    width: 3.3rem;
    min-height: 0;
}

.match-team-sheet--compact .match-team-sheet-number {
    font-size: 35px;
}

.match-team-sheet--compact .match-team-sheet-position-label {
    display: none;
}

.match-team-sheet--compact .match-team-sheet-avatar,
.match-team-sheet--compact .match-team-sheet-avatar-placeholder {
    display: none;
}

.match-team-sheet--compact .match-team-sheet-player-link,
.match-team-sheet--compact .match-team-sheet-player-name {
    font-size: 0.98rem;
    line-height: 1.02;
}

.match-team-sheet--compact .match-team-sheet-badge {
    font-size: 0.58rem;
    padding: 0.06rem 0.28rem;
}

.match-team-sheet-player-link:hover,
.match-team-sheet-player-link:focus {
    color: #202946;
    text-decoration: none;
}

.match-team-sheet-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.match-team-sheet-badge-label-full {
    display: inline;
}

.match-team-sheet-badge-label-short {
    display: none;
}

.match-team-sheet-badge--captain {
    background: var(--red-color);
    color: #ffffff;
    border: 1px solid #7f1313;
}

.match-team-sheet-badge--vice {
    background: #e8eefb;
    color: #1f2a4a;
    border: 1px solid #becae8;
}

.match-team-sheet-milestone {
    --milestone-accent: #111111;
    --milestone-bg: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--milestone-bg);
    color: var(--milestone-accent);
    border: 2px solid var(--milestone-accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    line-height: 1;
}

.match-team-sheet-milestone-core {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.match-team-sheet-milestone-text {
    font-size: 0.8rem;
    font-weight: 900;
    color: inherit;
    letter-spacing: -0.01em;
    line-height: 1;
}

.match-team-sheet-milestone--100 .match-team-sheet-milestone-text {
    font-size: 0.7rem;
}

.match-team-sheet-milestone--scope-club {
    --milestone-accent: #111111;
    --milestone-bg: #ffffff;
    border: none;
    color: var(--primary-color);
}

.match-team-sheet-milestone--scope-first-xv {
    --milestone-accent: var(--primary-color);
    --milestone-bg: var(--primary-color);
    border: 2px solid var(--milestone-accent);
    color: white;
}

.match-team-sheet-milestone--debut.match-team-sheet-milestone--scope-club {
    background: #ffffff;
    color: #111111;
    border: 1px solid #111111;
}

.match-team-sheet-milestone--debut.match-team-sheet-milestone--scope-first-xv {
    background: var(--primary-color);
    color: #ffffff;
    border: 2px solid var(--accent-color);
}

.match-team-sheet-milestone--25,
.match-team-sheet-milestone--50,
.match-team-sheet-milestone--100 {
    background: color-mix(in srgb, var(--milestone-accent) 10%, #ffffff);
}

.match-team-sheet-milestone--25 {
    background: linear-gradient(135deg, #eed2ac 0%, #c6894a 100%);
    color: #3d230f;
    border-color: #9f6b37;
}

.match-team-sheet-milestone--50 {
    background: linear-gradient(135deg, #f5f7fa 0%, #b9c2cf 100%);
    color: #1f2833;
    border-color: #8e98a8;
}

.match-team-sheet-milestone--100 {
    background: linear-gradient(135deg, #fff3ad 0%, #f0b90b 100%);
    color: #4a3500;
    border-color: #d39d00;
}

.match-team-sheet-legend {
    border-top: 1px solid #dbe2f4;
    padding: 0.55rem 1.05rem 0.62rem;
    background: #fafcff;
}

.match-team-sheet-legend-title {
    margin: 0 0 0.26rem;
    color: #4e5a7a;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.match-team-sheet-legend-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.7rem;
    align-items: flex-start;
}

.match-team-sheet-legend-item {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.14rem;
    color: #2f3a58;
    font-size: 0.75rem;
    line-height: 1.2;
}

.match-team-sheet-legend-scopes {
    color: #1f2a4a;
    font-size: 0.8rem;
    /* font-weight: 800; */
    line-height: 1;
    min-width: 2.9rem;
    margin-top: auto;
    text-align: end;
}

.match-team-sheet-legend-pair {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 1.95rem;
    height: 1.72rem;
}

.match-team-sheet-legend-pair-icon {
    position: absolute;
    display: inline-flex;
}

.match-team-sheet-legend-pair-icon--club {
    left: 0;
    top: 0;
    z-index: 1;
}

.match-team-sheet-legend-pair-icon--first-xv {
    left: 0.58rem;
    top: 0.48rem;
    z-index: 2;
}

.match-team-sheet-legend-text {
    font-weight: 700;
    color: #2f3a58;
    line-height: 1;
}

.match-team-sheet--compact .match-team-sheet-milestone {
    width: 1rem;
    height: 1rem;
    border-width: 1px;
    box-shadow: none;
}

.match-team-sheet--compact .match-team-sheet-milestone-text {
    font-size: 0.42rem;
}

.match-team-sheet--compact .match-team-sheet-milestone--100 .match-team-sheet-milestone-text {
    font-size: 0.38rem;
}

.match-team-sheet--compact .match-team-sheet-legend {
    padding: 0.38rem 0.66rem 0.44rem;
}

.match-team-sheet--compact .match-team-sheet-legend-title {
    font-size: 0.62rem;
    margin-bottom: 0.18rem;
}

.match-team-sheet--compact .match-team-sheet-legend-item {
    font-size: 0.62rem;
    gap: 0.1rem;
}

.match-team-sheet--compact .match-team-sheet-legend-scopes {
    font-size: 0.58rem;
    min-width: 2.35rem;
    line-height: 0.82;
}

.match-team-sheet--compact .match-team-sheet-legend-pair {
    width: 1.34rem;
    height: 1.2rem;
}

.match-team-sheet--compact .match-team-sheet-legend-pair-icon--first-xv {
    left: 0.36rem;
    top: 0.28rem;
}

.match-team-sheet--compact .match-team-sheet-legend-text {
    font-size: 0.6rem;
    line-height: 1;
}

.match-team-sheet-item--empty .match-team-sheet-number,
.match-team-sheet-item--empty .match-team-sheet-position-label,
.match-team-sheet-empty {
    color: #8a92a7;
}

.match-team-sheet-empty {
    font-style: italic;
    font-size: 0.92rem;
}

.match-team-sheet-empty-note {
    margin: 0;
    padding: 0.95rem;
    color: #5a647f;
}

/* ===== HOME PAGE NAV CARDS ===== */
.nav-page-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.125); /* standard Bootstrap card border, no top accent */
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nav-page-card:hover {
    box-shadow: 0 4px 16px rgba(32, 41, 70, 0.13);
    transform: translateY(-2px);
}

/* Large background icon: positioned behind content, low opacity */
.nav-page-card .nav-page-card-icon {
    position: absolute;
    bottom: -0.25rem;
    right: -0.25rem;
    font-size: 5.5rem;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
}

/* ===== HOME PAGE DATA NOTES ===== */
.home-data-notes-wrap {
    padding: 0.75rem 1rem 2.4rem;
    display: flex;
    align-self: flex-start;
    margin: 0 auto;
}

.home-data-notes {
    background:
        radial-gradient(circle at top right, rgba(125, 150, 232, 0.15), transparent 45%),
        linear-gradient(140deg, #ffffff 0%, #f6f8ff 100%);
    border: 1px solid rgba(32, 41, 70, 0.15);
    border-left: 0.42rem solid var(--primary-color);
    border-radius: 0.85rem;
    padding: 1.15rem 1.25rem;
    box-shadow: 0 8px 24px rgba(32, 41, 70, 0.08);
}

.home-data-notes-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
}

.home-data-notes-intro {
    margin: 0 0 0.85rem;
    color: #2a3557;
    font-size: 0.95rem;
    line-height: 1.4;
}

.home-data-notes-list,
.home-data-notes-list ul {
    margin: 0;
    padding-left: 1.2rem;
}

.home-data-notes-list > li {
    margin-bottom: 0.65rem;
}

.home-data-notes-list li {
    color: #223054;
    font-size: 0.93rem;
    line-height: 1.45;
}

.home-data-notes-list li::marker {
    color: var(--accent-color);
}

.home-data-notes-list ul {
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
}

@media (max-width: 576px) {
    .home-data-notes-wrap {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .home-data-notes {
        padding: 0.95rem 0.9rem;
        border-left-width: 0.32rem;
    }

    .home-data-notes-list li {
        font-size: 0.9rem;
    }
}

@media (max-width: 767.98px) {
    .full-profile-sections-grid {
        grid-template-columns: 1fr;
    }

    .full-profile-panels-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 360px) {
    .player-profile-grid-item,
    .player-profile-card {
        width: 100%;
        flex: 1 1 100%;
    }
}

@media (max-width: 720px) {
    .full-profile-banner {
        min-height: 230px;
        padding: 0.9rem 0.9rem 0;
    }

    .full-profile-banner-copy {
        max-width: 58%;
        padding-bottom: 0.7rem;
    }

    .full-profile-banner-headshot {
        min-width: 145px;
        max-width: 42%;
    }
}

/* Table styling */
table {
    font-size: 0.95rem;
}

table thead tr {
    background-color: var(--light-color);
}

table tbody tr:hover {
    background-color: rgba(125, 150, 232, 0.1) !important;
}

/* League tables (titles + highlighted EGRFC rows) */
.league-team-title {
    padding: 0.5rem 0.8rem;
    border-radius: 0.375rem;
    margin: 0 0 1rem 0;
}

.league-section-title {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.15;
}

.league-division-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.1;
    padding: 0 0 0 1rem;
    margin: 0.08rem 0 0.35rem 0;
}

.league-division-title-1st {
    color: var(--primary-color);
}

.league-division-title-2nd {
    color: var(--accent-color);
}

/* ===== DATABASE EXPLORER ===== */
.database-page-shell {
    padding: 2rem 1rem;
    max-width: 1500px;
    margin: 0 auto;
}

.database-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.database-page-title {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
}

.database-page-subtitle {
    margin: 0;
    max-width: 70rem;
    font-size: 1.02rem;
    color: #44506b;
}

.database-explorer-panel {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px rgba(32, 41, 70, 0.08);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.database-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.database-filter-grid .filter-item {
    width: auto;
    flex: 0 0 auto;
}

.database-filter-grid .input-group {
    width: auto;
}

.database-filter-grid .bootstrap-select {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
}

.database-search-item {
    min-width: 280px;
}

.database-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.database-toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.database-toolbar-actions {
    margin-left: 0;
    justify-content: flex-start;
}

.database-two-column-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(520px, 1.65fr);
    gap: 1.25rem;
    align-items: start;
}

.database-two-column-grid--guide-collapsed {
    grid-template-columns: 150px minmax(620px, 1.5fr);
}

.database-stack {
    min-width: 0;
}

.database-section-heading-wrap {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.database-section-heading-wrap--compact {
    margin-bottom: 0.55rem;
}

.database-column-guide-toggle {
    white-space: nowrap;
}

.database-section-heading {
    margin: 0;
    color: var(--primary-color);
    font-size: 2rem;
}

.database-doc-card {
    border: 1px solid rgba(32, 41, 70, 0.08);
    border-radius: 0.7rem;
    padding: 0.95rem 1rem;
    background: #fafbfd;
}

.database-doc-card h3 {
    margin: 0 0 0.35rem 0;
    color: var(--primary-color);
    font-size: 1rem;
}

.database-doc-card p {
    margin: 0;
    color: #46526d;
}

.database-columns-summary,
.database-table-meta,
.database-pagination-summary,
.database-page-indicator {
    color: #586482;
    font-size: 0.94rem;
}

.database-columns-table td,
.database-columns-table th,
.database-data-table td,
.database-data-table th {
    vertical-align: middle;
}

.database-columns-table td:nth-child(2),
.database-data-table td {
    white-space: nowrap;
}

.database-columns-table {
    table-layout: fixed;
    width: 100%;
}

.database-columns-table th,
.database-columns-table td {
    white-space: normal;
    word-break: break-word;
}

.database-columns-table th:nth-child(1),
.database-columns-table td:nth-child(1) {
    width: 30%;
}

.database-columns-table th:nth-child(2),
.database-columns-table td:nth-child(2) {
    width: 22%;
}

.database-columns-table th:nth-child(3),
.database-columns-table td:nth-child(3) {
    width: 48%;
}

.database-data-table td {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.database-data-table th {
    white-space: nowrap;
}

.database-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    color: var(--primary-color);
    font-weight: 700;
}

.database-sort-button:hover {
    text-shadow: 0 0 2px white;
}

.database-sort-indicator {
    color: #7a86a1;
    font-size: 0.8rem;
}

.database-table-responsive {
    min-height: 20rem;
}

/* Rounded table used on Match Info finder */
#matchDataTableWrap {
    min-height: unset;
    border-radius: 0.65rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

#matchDataTableWrap .database-data-table {
    margin-bottom: 0;
}

#matchDataTableWrap .database-data-table thead th:first-child {
    border-top-left-radius: 0.65rem;
}

#matchDataTableWrap .database-data-table thead th:last-child {
    border-top-right-radius: 0.65rem;
}

.database-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: #68748f;
}

.database-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.9rem;
    flex-wrap: wrap;
}

.database-pagination-bar .btn-group {
    flex: 0 0 auto;
    width: fit-content;
}

.match-finder-pagination-controls {
    display: flex;
    align-items: center;
}

.match-finder-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    font-weight: 900;
    background-color: var(--primary-color);
    color: var(--light-color);
}



.match-finder-pagination-btn i {
    font-size: 0.82rem;
}

.match-finder-pagination-btn:disabled {
    opacity: 0.45;
}

.match-finder-pagination-btn:not(:disabled):hover {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

.next-btn {
    padding-left: 0.75rem !important;
}
.prev-btn {
    padding-right: 0.75rem !important;
}

@media (max-width: 767.98px) {
    #matchDataTableWrap {
        border-radius: 0.5rem;
    }

    #matchDataTableWrap .database-data-table tbody td {
        max-width: 9rem;
    }

    #matchDataTableWrap .database-data-table tbody td:nth-child(3) {
        max-width: 7.25rem;
    }

    #matchDataTableWrap .database-data-table tbody td:nth-child(5) {
        max-width: 5.8rem;
    }

    #matchDataTableWrap .squad-pill {
        font-size: 0.78rem;
        padding: 0.1rem 0.38rem;
    }

    #matchDataTableWrap .match-table-venue {
        font-size: 0.76rem;
        font-weight: 700;
    }

    #matchDataTableWrap .match-open-btn {
        width: 1.45rem;
        height: 1.45rem;
        --bs-btn-font-size: 0.72rem;
    }

    .match-finder-pagination-btn {
        min-width: 6.3rem;
        min-height: 2rem;
        padding: 0.28rem 0.58rem;
        font-size: 0.85rem;
    }
}

.database-muted {
    color: #7a86a1;
}

@media (max-width: 1100px) {
    .database-two-column-grid {
        grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
    }

    .database-two-column-grid--guide-collapsed {
        grid-template-columns: minmax(190px, 0.45fr) minmax(0, 1.55fr);
    }
}

@media (max-width: 900px) {
    .database-two-column-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .database-page-shell {
        padding: 1.25rem 0.75rem;
    }

    .database-toolbar-actions {
        margin-left: 0;
    }

    .database-data-table td,
    .database-columns-table td {
        white-space: normal;
    }
}

@media (max-width: 576px) {
    .database-toolbar {
        align-items: stretch;
    }

    .database-toolbar-group {
        width: 100%;
        justify-content: space-between;
    }

    .database-toolbar-actions {
        justify-content: flex-start;
    }
}

/* ===== COLLAPSIBLE CHART PANELS =====
 * Reusable pattern for collapsible chart containers.
 *
 * HTML structure:
 *   <div class="chart-panel">                      (block, full width)
 *   <div class="chart-panel chart-panel--inline">  (inline, shrinks to chart width)
 *     <button class="chart-panel-toggle chart-panel-toggle--primary"
 *             data-target="panel-id" aria-expanded="true">
 *       <span class="chart-panel-toggle-text">
 *         <span class="chart-panel-toggle-title">Title</span>
 *         <span class="chart-panel-toggle-hint">Click to expand/collapse</span>
 *       </span>
 *       <span class="chart-panel-toggle-icon" aria-hidden="true"></span>
 *     </button>
 *     <div id="panel-id" class="chart-panel-content">
 *       <div class="chart-panel-card">...content...</div>
 *     </div>
 *   </div>
 *
 * Color modifiers (.chart-panel-toggle--*):
 *   --primary  dark navy header (1st XV / default)
 *   --accent   light blue header (2nd XV)
 * ===== */

.chart-panel--inline {
    display: inline-flex;
    flex-direction: column;
}

.chart-panel--inline:has(.chart-panel-toggle[aria-expanded="true"]) {
    width: fit-content;
    max-width: 100%;
}

.chart-panel--inline:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-toggle,
.chart-panel--inline:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-card {
    width: 100%;
    max-width: 100%;
}

.chart-panel-toggle {
    min-width: 100%;
    width: fit-content;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-radius: 0.5rem 0.5rem 0 0;
}

.chart-panel-toggle--primary {
    background: var(--primary-color);
    color: var(--light-color);
}

.chart-panel-toggle--accent {
    background: var(--accent-color);
    color: var(--primary-color);
}

.chart-panel-toggle--black {
    background: #000;
    color: #fff;
}

.chart-panel-toggle[aria-expanded="false"] {
    border-radius: 0.5rem;
}

.chart-panel-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.chart-panel-toggle-text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    padding: 0.75rem 1rem;
    flex: 1;
    text-align: left;
}

.chart-panel-toggle-title {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

.chart-panel-toggle-hint {
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.65;
    line-height: 1.5;
    color: inherit;
}

.chart-panel-toggle-icon {
    padding: 0.75rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.chart-panel-toggle-icon::before {
    content: "▾";
    display: inline-block;
    font-size: 1.6rem;
    line-height: 1;
    transition: transform 0.2s ease;
    color: inherit;
}

.chart-panel-toggle[aria-expanded="false"] .chart-panel-toggle-icon::before {
    transform: rotate(-90deg);
}

.chart-panel-content[hidden] {
    display: none !important;
}

.chart-panel-content {
    margin: 0;
}

.chart-panel-card {
    background: white;
    padding: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.chart-panel-card:has(.chart-panel-filters) {
    background: var(--chart-surface-color);
}

.league-results-frame {
    width: 100%;
    border: 0;
    display: block;
}

.league-squad-divider {
    margin: 0.25rem 0 1rem 0;
    border: 0;
    border-top: 1px solid rgba(32, 41, 70, 0.2);
}

@media (min-width: 992px) {
    .league-results-column--expanded {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Shared team colour tokens mapped onto existing classes */
.league-team-title-1st,
.league-highlight-row-1st,
.squad-metric-card-1st,
.squad-metric-card-header-1st,
.squad-position-panel-card-1st {
    --team-bg: var(--primary-color);
    --team-fg: var(--light-color);
}

.league-team-title-2nd,
.league-highlight-row-2nd,
.squad-metric-card-2nd,
.squad-metric-card-header-2nd,
.squad-position-panel-card-2nd {
    --team-bg: var(--accent-color);
    --team-fg: var(--primary-color);
}

.squad-metric-card-total {
    --team-bg: #000;
    --team-fg: #fff;
}

.league-team-title-1st {
    background: var(--team-bg);
    color: var(--team-fg);
}

.league-team-title-2nd {
    background: var(--team-bg);
    color: var(--team-fg);
}

.league-highlight-row {
    font-weight: 700;
}

.league-highlight-row-1st td {
    background: var(--team-bg) !important;
    color: var(--team-fg) !important;
}

.league-highlight-row-2nd td {
    background: var(--team-bg) !important;
    color: var(--team-fg) !important;
}

#page-league-tables .league-tables-hero-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#page-league-tables .ux-hero-metrics {
    align-self: stretch;
}

#page-league-tables .ux-hero-metric-value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.2rem;
}

.league-hero-position-rank sup {
    font-size: 0.4em;
    font-weight: 700;
    vertical-align: super;
    margin-left: -0.05em;
}

.league-hero-position-total {
    font-size: 0.4em;
    font-weight: normal;
    letter-spacing: -0.02em;
    margin-left: -0.5rem;
}

.league-results-chart-card {
    margin-top: 0.5rem;
    padding: 0;
    border-radius: 0.5rem;
    background: var(--chart-surface-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#page-league-tables .league-results-chart-card .chart-host--intrinsic {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--chart-surface-color);
    overflow: hidden;
}

#page-league-tables .league-results-chart-card .chart-embed-host {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

#page-opposition-profile .opposition-results-chart-card {
    margin-top: 0.35rem;
}

#page-opposition-profile .opposition-results-chart-card .chart-host--intrinsic {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--chart-surface-color);
    overflow: hidden;
}

#page-opposition-profile .opposition-results-chart-card .chart-embed-host {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.squad-metric-card {
    overflow: hidden;
    background: white;
}

.squad-metric-card-header {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-align: center;
}

.squad-metric-card-1st {
    border-top: 4px solid var(--team-bg);
}

.squad-metric-card-2nd {
    border-top: 4px solid var(--team-bg);
}

.squad-metric-card-header-1st {
    background: var(--team-bg);
    color: var(--team-fg);
}

.squad-metric-card-header-2nd {
    background: var(--team-bg);
    color: var(--team-fg);
}

.squad-metric-card-1st .squad-metric-value {
    color: var(--team-bg);
}

.squad-metric-card-2nd .squad-metric-value {
    color: var(--team-bg);
}

.squad-metric-value {
    font-size: 4rem;
    font-weight: 800;
    margin: 0;
    padding: 0;
}

.squad-metric-card .card-text {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.season-result-card--won {
    border-top: 4px solid var(--green-color);
}

.season-result-card--won .squad-metric-card-header {
    background: var(--green-color);
    color: #fff;
}

.season-result-card--won .squad-metric-value {
    color: var(--green-color);
}

.season-result-card--drawn {
    border-top: 4px solid var(--amber-color);
}

.season-result-card--drawn .squad-metric-card-header {
    background: var(--amber-color);
    color: #fff;
}

.season-result-card--drawn .squad-metric-value {
    color: var(--amber-color);
}

.season-result-card--lost {
    border-top: 4px solid var(--red-color);
}

.season-result-card--lost .squad-metric-card-header {
    background: var(--red-color);
    color: #fff;
}

.season-result-card--lost .squad-metric-value {
    color: var(--red-color);
}

.season-result-card--played {
    border-top: 4px solid var(--dark-color);
}

.season-result-card--played .squad-metric-card-header {
    background: var(--dark-color);
    color: #fff;
}

.season-result-card--played .squad-metric-value {
    color: var(--dark-color);
}

/* Season Record inline W/D/L/P row */
.season-results-row {
    display: flex;
    width: 100%;
}

.season-result-cell {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Suppress per-cell top accent border — the outer panel provides it */
.season-results-row .season-result-card--won,
.season-results-row .season-result-card--drawn,
.season-results-row .season-result-card--lost,
.season-results-row .season-result-card--played {
    border-top: none;
}

.season-result-cell-body {
    text-align: center;
    padding: 0.25rem 0.1rem;
}

/* Season Summary player stat cards */
#seasonSummary1stTopPointScorer .card-body,
#seasonSummary1stTopTryScorer .card-body,
#seasonSummary1stMostAppearances .card-body,
#seasonSummary2ndTopPointScorer .card-body,
#seasonSummary2ndTopTryScorer .card-body,
#seasonSummary2ndMostAppearances .card-body {
    padding: 0.25rem 0.25rem;
}

#seasonSummary1stTopPointScorer .squad-metric-value,
#seasonSummary1stTopTryScorer .squad-metric-value,
#seasonSummary1stMostAppearances .squad-metric-value,
#seasonSummary2ndTopPointScorer .squad-metric-value,
#seasonSummary2ndTopTryScorer .squad-metric-value,
#seasonSummary2ndMostAppearances .squad-metric-value {
    font-size: 3.5rem;
}

#seasonSummary1stTopPointScorer .card-text,
#seasonSummary1stTopTryScorer .card-text,
#seasonSummary1stMostAppearances .card-text,
#seasonSummary2ndTopPointScorer .card-text,
#seasonSummary2ndTopTryScorer .card-text,
#seasonSummary2ndMostAppearances .card-text {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* ===== PAGE HEADER LAYOUT ===== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 2rem;
}

.page-header--compact { margin-bottom: 1rem; }
.page-header--tight   { margin-bottom: 0.5rem; }

.page-header-text {
    flex: 1 1 auto;
    min-width: 0;
}

.page-header-text h1 {
    color: var(--primary-color);
    margin-bottom: 0.4rem;
}

.page-header-text p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.page-header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    align-self: flex-start;
    padding-top: 0.2rem;
}

.page-header-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--primary-color);
    border-radius: 999px;
    background: #fff;
    color: var(--primary-color);
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-header-link:hover,
.page-header-link:focus {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(32, 41, 70, 0.16);
    transform: translateY(-1px);
}

.page-header-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.page-header-filters {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-self: flex-start;
    padding-top: 0.35rem; /* optical align with h1 baseline */
}

/* Page title / intro — used when h1/p sit directly inside .page-shell without a .page-header wrapper */
.page-title {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.page-intro {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Section headings — for h2/h3 within page content sections */
.section-heading {
    color: var(--primary-color);
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.section-heading--tight { margin-bottom: 0.35rem; }
.section-heading--flush { margin: 0; }

/* Navigation category labels — index page section group titles */
.nav-category-label {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-detail-picker-row {
    padding-top: 0;
}

.match-detail-picker-row .bootstrap-select {
    width: 100% !important;
}

.match-detail-picker-row .bootstrap-select .dropdown-toggle {
    border-radius: 0.375rem !important;
    border-left: 1px solid #ced4da !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.match-detail-picker-row .bootstrap-select .filter-option {
    flex: 1 1 auto;
    min-width: 0;
}

.match-detail-picker-row .bootstrap-select .filter-option-inner-inner {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.match-detail-picker-row .bootstrap-select .bs-caret {
    flex: 0 0 auto;
    margin-left: 0.45rem;
}

.player-profiles-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem 1.25rem;
    flex-wrap: wrap;
}

.player-profiles-filters {
    flex: 1 1 auto;
    min-width: 0;
}

.player-profiles-sort-action {
    flex: 0 0 auto;
    min-width: 13rem;
}

.player-profiles-sort-action .input-group {
    flex-wrap: nowrap;
}

.player-profiles-sort-action .input-group-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ===== END PAGE HEADER LAYOUT ===== */

.squad-stats-top-filters .filter-item {
    width: auto;
    flex: 0 0 auto;
}

.squad-filters-grid {
    display: grid;
    grid-template-columns: 1.3fr 1.6fr 1fr 1.1fr;
    gap: 0.7rem;
}

.squad-filters-grid--offcanvas {
    grid-template-columns: 1fr !important;
    gap: 2.5rem;
}

.player-stats-hero {
    margin-bottom: 1rem;
}

.player-stats-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.player-stats-hero-metric {
    background: #ffffff;
    border-width: 3px;
}

.player-stats-hero-metric .ux-hero-metric-label,
.player-stats-hero-metric .ux-hero-metric-value {
    color: var(--primary-color);
}

.player-stats-hero-metric .ux-hero-metric-note {
    color: #4e5875;
}

.player-stats-hero-metric--appearances {
    border-color: var(--primary-color);
}

.player-stats-hero-metric--points {
    border-color: var(--red-color);
}

.player-stats-hero-metric--motm {
    border-color: var(--accent-color);
}

.player-filters-offcanvas {
    top: var(--navbar-height) !important;
    height: calc(100vh - var(--navbar-height)) !important;
}

.player-filters-offcanvas .offcanvas-header {
    background-color: #f9f9fa;
    border-bottom: 1px solid #e5e4e7;
    padding: 1rem;
}

.player-filters-offcanvas .offcanvas-header h5 {
    margin-bottom: 0.25rem;
}

.player-filters-offcanvas .offcanvas-body {
    padding: 1.25rem 1rem;
}

.player-stats-section-filter {
    flex: 0 0 auto;
    min-width: min(100%, 20rem);
}

.chart-section-head--motm-toggle {
    justify-content: flex-end;
    margin-bottom: 0.55rem;
}

.player-stats-section-filter--motm {
    min-width: 0;
}

.player-stats-motm-switch {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
}

.player-stats-motm-switch .form-check-label {
    margin-bottom: 0;
    font-weight: 700;
    color: #202946;
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="All"].is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="All"]:not(.is-active),
#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="All"]:not(.is-active) {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.22);
    color: #111;
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="1st"].is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="1st"]:not(.is-active),
#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="1st"]:not(.is-active) {
    background: rgba(32, 41, 70, 0.08);
    border-color: rgba(32, 41, 70, 0.24);
    color: var(--primary-color);
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="2nd"].is-active {
    background: var(--accent-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#playerStatsSquadSegment .squad-filter-segment-btn[data-value="2nd"]:not(.is-active),
#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="2nd"]:not(.is-active) {
    background: rgba(125, 150, 232, 0.16);
    border-color: rgba(32, 41, 70, 0.2);
    color: var(--primary-color);
}

#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="All"].is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}

#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="1st"].is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

#leagueTablesSquadSegment .squad-filter-segment-btn[data-value="2nd"].is-active {
    background: var(--accent-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.squad-filter-control--player-positions {
    grid-column: 1 / -1;
}

/* ===== POSITION PICKER ===== */
.position-picker {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.position-picker__top-row {
    width: 100%;
}

.position-picker__top-row .position-picker__total {
    flex: 1.7 1 0;
}

.position-picker__top-row .position-picker__bench-btn {
    flex: 0.75 1 0;
    font-weight: 500;
}

.position-picker__total {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-width: 2px;
    border-color: color-mix(in srgb, #111827 45%, white);
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.12) 0%, rgba(17, 24, 39, 0.04) 100%);
    color: #1f2937;
}

.position-picker__total.is-active {
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
    border-color: #111827;
    color: #fff;
}

.position-picker__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.position-picker__group {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.88);
    overflow: hidden;
    border-radius: 0.65rem;
}

.position-picker__group--fwd {
    border: 2px solid color-mix(in srgb, var(--primary-color) 42%, white);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.position-picker__group--bks {
    border: 2px solid color-mix(in srgb, var(--accent-color) 72%, var(--primary-color) 28%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

/* Group header buttons (Forwards / Backs) */
.position-picker__group-btn {
    width: 100%;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.position-picker__group--fwd .position-picker__group-btn {
    background: linear-gradient(180deg, rgba(32, 41, 70, 0.12) 0%, rgba(32, 41, 70, 0.04) 100%);
    border-bottom-color: color-mix(in srgb, var(--primary-color) 28%, white);
    color: var(--primary-color);
}

.position-picker__group--bks .position-picker__group-btn {
    background: linear-gradient(180deg, rgba(125, 150, 232, 0.2) 0%, rgba(125, 150, 232, 0.08) 100%);
    border-bottom-color: color-mix(in srgb, var(--accent-color) 55%, white);
    color: var(--primary-color);
}

.position-picker__group--fwd .position-picker__group-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.position-picker__group--bks .position-picker__group-btn.is-active {
    background: var(--accent-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Individual position buttons */
.position-picker__group-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.position-picker__row {
    width: 100%;
}

.position-picker__row + .position-picker__row {
    border-top: 1px solid rgba(212, 220, 237, 0.7);
}

.position-picker__pos-btn {
    width: 100%;
    font-size: 0.8rem;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    min-height: 2rem;
}

.position-picker__group--fwd .position-picker__pos-btn {
    background: linear-gradient(180deg, rgba(32, 41, 70, 0.05) 0%, rgba(32, 41, 70, 0.015) 100%);
    color: #25325f;
}

.position-picker__group--bks .position-picker__pos-btn {
    background: linear-gradient(180deg, rgba(125, 150, 232, 0.08) 0%, rgba(125, 150, 232, 0.025) 100%);
    color: #25325f;
}

.position-picker__group--fwd .position-picker__pos-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    opacity: 0.82;
}

.position-picker__group--bks .position-picker__pos-btn.is-active {
    background: var(--accent-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    opacity: 0.82;
}

/* Bench button */
.position-picker__bench-btn {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.position-picker__bench-btn:not(.is-active) {
    color: #4b5563;
}

.position-picker__bench-btn.is-active {
    background: #4b5563;
    border-color: #374151;
    color: #fff;
}

.position-picker .btn-group .squad-filter-segment-btn {
    min-height: 2.1rem;
}

.squad-filters-offcanvas {
    top: var(--navbar-height) !important;
    height: calc(100vh - var(--navbar-height)) !important;
}

.squad-filters-offcanvas .offcanvas-header {
    background-color: #f9f9fa;
    border-bottom: 1px solid #e5e4e7;
    padding: 1rem;
}

.squad-filters-offcanvas .offcanvas-header h5 {
    margin-bottom: 0.25rem;
}

.squad-filters-description {
    margin: 0;
    font-size: 0.85rem;
    color: #5e6783;
    line-height: 1.4;
}

.squad-filters-offcanvas .offcanvas-body {
    padding: 1.25rem 1rem;
}

.squad-filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.squad-filter-label {
    color: #3d4765;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.squad-filters-grid--offcanvas .squad-filter-control .bootstrap-select .dropdown-toggle {
    border: 1px solid #c9d3f2 !important;
    border-radius: 0.7rem !important;
    border-left: 1px solid #c9d3f2 !important;
    background: #fff !important;
    color: var(--primary-color) !important;
    min-height: 2.9rem;
    padding: 0.7rem 0.95rem !important;
    box-shadow: none !important;
}

.squad-filters-grid--offcanvas .squad-filter-control .bootstrap-select.show .dropdown-toggle,
.squad-filters-grid--offcanvas .squad-filter-control .bootstrap-select .dropdown-toggle:focus,
.squad-filters-grid--offcanvas .squad-filter-control .bootstrap-select .dropdown-toggle:hover {
    border-color: #7d96e8 !important;
    background: #f8faff !important;
}

.squad-filters-grid--offcanvas .squad-filter-control .bootstrap-select .filter-option-inner-inner {
    color: var(--primary-color);
    font-weight: 700;
}

.squad-filter-season-stepper {
    display: grid;
    grid-template-columns: 2.2rem 1fr 2.2rem;
    align-items: center;
    gap: 0.25rem;
}

.squad-filter-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.5rem;
    border: 1px solid #c9d3f2;
    border-radius: 0.6rem;
    background: #fff;
    color: var(--primary-color);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.squad-filter-stepper-btn:hover:not(:disabled) {
    background: #eef2ff;
    border-color: var(--primary-color);
}

.squad-filter-stepper-btn:disabled {
    color: #b0bcd4;
    border-color: #e4e8f5;
    cursor: default;
}

.squad-filter-stepper-label {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color);
    border-radius: 0.6rem;
    background: var(--primary-color);
    color: #fff;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: 0.1rem 0.25rem;
}

.squad-filter-select {
    min-height: 2.5rem;
    border: 1px solid #c9d3f2;
    border-radius: 0.6rem;
    background: #fff;
    color: #1e2a50;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.45rem 0.65rem;
}

.squad-filter-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.squad-filter-segment-btn {
    min-height: 2.5rem;
    border: 1px solid #c9d3f2;
    border-radius: 0.6rem;
    background: #fff;
    color: #25325f;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    transition: all 0.15s ease;
}

.squad-filter-segment-btn.is-active {
    border-color: #202946;
    background: #202946;
    color: #f4f6ff;
}

.squad-filter-range {
    width: 100%;
    accent-color: #202946;
}

.squad-filter-range-wrap {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.65rem;
    border: 1px solid #c9d3f2;
    border-radius: 0.6rem;
    background: #fff;
}

.squad-stats-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #d9deef;
    border-radius: 0.9rem;
    background-image: url("../img/EGRFC Background.png");
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    box-shadow: 0 6px 18px rgba(32, 41, 70, 0.1);
}

.ux-hero-kicker {
    margin: 0 0 0.2rem 0;
    color: #f0f1f5;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.ux-hero-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 5.4vw, 3.2rem);
    line-height: 0.95;
    font-weight: 900;
}

.ux-hero-description {
    margin: 0.5rem 0 0;
    color: rgba(232, 234, 238, 0.75);
    font-size: 1rem;
    line-height: 1.28;
    max-width: 45ch;
}

.ux-hero-metrics {
    border-radius: 0.75rem;
    border: 1px solid var(--light-color);
    background: rgba(255, 255, 255, 0.1);
    padding: 0.75rem;
}

.ux-hero-metrics-head {
    margin-bottom: 0.55rem;
    color: var(--light-color);
}

.ux-hero-metrics-title {
    margin: 0;
    color: var(--light-color);
    font-size: 1.25rem;
    font-weight: 900;
}

.ux-hero-metrics-meta {
    font-size: 0.85rem;
    opacity: 0.75;
}

.ux-hero-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.ux-hero-metric {
    border-radius: 0.6rem;
    border: 2px solid rgba(32, 41, 70, 0.14);
    padding: 0.4rem 0.42rem 0.35rem;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px rgba(32, 41, 70, 0.1);
}

.ux-hero-metric--1st {
    border: 6px solid var(--primary-color);
    background-color: var(--primary-color);
}

.ux-hero-metric--2nd {
    border: 6px solid var(--primary-color);
    background-color: var(--accent-color);
}

.ux-hero-metric--total {
    background: black;
    color: #fff;   
    border: 3px solid black;
}

.ux-hero-metric-label {
    margin: 0;
    color: white;
    font-size: 1rem;
    font-weight: 900;
}

.ux-hero-metric--1st .ux-hero-metric-label {
    color: white;
}
.ux-hero-metric--2nd .ux-hero-metric-label {
    color: var(--primary-color);
}

.ux-hero-metric-value {
    margin: 0.22rem 0 0;
    color: white;
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 900;
    line-height: 1;
}

.ux-hero-metric--2nd .ux-hero-metric-value {
    color: var(--primary-color);
}

.ux-hero-metric-note {
    margin: 0.15rem 0 0;
    color: white;
    opacity: 0.6;
    font-size: 0.78rem;
}

.ux-hero-metric--2nd .ux-hero-metric-note {
    color: var(--primary-color);
}

.section-intro {
    margin-bottom: 1rem;
    color: #666;
    font-size: 1rem;
}

.section-heading--spaced {
    margin-top: 2rem;
}

.squad-stats-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
    min-height: 1.8rem;
}

.squad-stats-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: #eef1fb;
    color: var(--primary-color);
    border: 1px solid #d5ddf1;
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1;
}

.squad-stats-filter-chip-btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.squad-stats-filter-chip-btn:hover {
    background-color: #d5ddf1;
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(32, 41, 70, 0.15);
}

.squad-stats-filter-chip-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(32, 41, 70, 0.1);
}

.squad-stats-filter-chip-btn:focus-visible {
    outline: 2px solid rgba(125, 150, 232, 0.45);
    outline-offset: 2px;
}

.squad-stats-filter-chip strong {
    font-weight: 700;
}

/* League context: chips + unit filter as a flex row without a background box */
.league-context-section-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.league-context-section-head .squad-stats-active-filters {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
    gap: 0.35rem;
}

.squad-filter-control--unit {
    flex: 0 0 auto;
    gap: 0.25rem;
}

.squad-filter-control--unit .squad-filter-label {
    font-size: 0.75rem;
}

.squad-filter-control--unit .squad-filter-segment {
    grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
    gap: 0.3rem;
}

.squad-filter-control--unit .squad-filter-segment-btn {
    min-height: 2.2rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.9rem;
}

/* Color-coded unit buttons (active state) */
#leagueContextUnitSegment .squad-filter-segment-btn[data-value="Total"].is-active {
    background: #000;
    border-color: #000;
    color: #fff;
}

#leagueContextUnitSegment .squad-filter-segment-btn[data-value="Forwards"].is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

#leagueContextUnitSegment .squad-filter-segment-btn[data-value="Backs"].is-active {
    background: #fff;
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.chart-host {
    width: 100%;
}

.chart-host--intrinsic {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(32, 41, 70, 0.08);
}

.chart-host--overflow-visible {
    overflow: visible;
}

.squad-stats-breakdown-panels,
.squad-continuity-panels,
.league-context-panels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.squad-stats-breakdown-panels {
    margin-bottom: 1.25rem;
}

.league-context-panels {
    margin-bottom: 2rem;
}

.chart-panel-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1rem 0.75rem 1rem;
    background: var(--chart-surface-color);
}

.chart-panel-filters .filter-item {
    width: auto;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.chart-panel-filters .input-group {
    min-width: 0;
    width: auto;
}

.chart-panel-filters .bootstrap-select {
    width: auto !important;
    min-width: 8rem;
}

.chart-panel-filters input.form-control {
    min-width: 4rem;
    max-width: 5rem;
    flex: 0 0 auto;
}

.squad-position-panel {
    min-width: 0;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
}

.squad-position-panel .chart-panel-toggle {
    min-width: 300px;
}

.squad-stats-breakdown-panels .squad-position-panel {
    flex: 1 1 0;
    min-width: 240px;
}

.squad-stats-breakdown-panels .squad-position-panel .chart-panel-toggle {
    width: 100%;
    min-width: 0;
}

.squad-position-panel:has(.chart-panel-toggle[aria-expanded="true"]) {
    flex: 1 1 100%;
    width: 100%;
}

.squad-position-panel:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-toggle,
.squad-position-panel:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-card {
    width: 100%;
}

.league-context-panel {
    min-width: 0;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
}

.league-context-panel .chart-panel-toggle {
    min-width: 300px;
}

.league-context-panels .league-context-panel {
    flex: 0 0 auto;
    min-width: 0;
    width: fit-content;
}

.league-context-panels .league-context-panel .chart-panel-toggle {
    width: fit-content;
    min-width: 300px;
}

.league-context-panel:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-toggle,
.league-context-panel:has(.chart-panel-toggle[aria-expanded="true"]) .chart-panel-card {
    width: 100%;
    max-width: 100%;
}

.lineout-analysis-panel {
    min-width: 0;
}

.lineout-analysis-panel .chart-panel-toggle {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.lineout-analysis-panel .chart-panel-card {
    width: 100%;
}

.lineout-analysis-panel--breakdown .chart-panel-toggle-hint {
    font-style: italic;
}

.lineout-analysis-pairs {
    overflow-x: visible;
    padding-bottom: 0.25rem;
}

.lineout-breakdown-panels .lineout-analysis-panel--breakdown .chart-panel-toggle,
.lineout-breakdown-panels .lineout-analysis-panel--breakdown .chart-panel-toggle[aria-expanded="false"] {
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.lineout-breakdown-panels .lineout-analysis-panel--breakdown .chart-panel-card {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.lineout-breakdown-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.lineout-breakdown-chart {
    min-width: 0;
}

.lineout-breakdown-table-wrap {
    overflow: auto;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 241, 244, 0.98));
    border: 1px solid rgba(32, 41, 70, 0.08);
}

.lineout-breakdown-table {
    margin-bottom: 0;
    width: 100%;
    font-size: 0.88rem;
}

.lineout-breakdown-table thead th,
.lineout-breakdown-table tbody td:first-child {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 1rem;
}

.lineout-breakdown-table tbody td {
    font-family: 'Lato', sans-serif;
}

.lineout-breakdown-table .badge {
    font-size: 1rem;
    padding: 0.28em 0.46em;
}

@media (max-width: 991.98px) {
    .lineout-breakdown-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.player-stats-main .chart-section-head {
    align-items: flex-end;
}

.player-stats-main .chart-panel-filters {
    padding: 0;
    background: none;
    border: none;
}

.player-stats-main .player-stats-chart-container {
    min-width: 0;
}

.squad-position-panel-card {
    padding: 0 0.8rem 0.8rem 0.8rem;
}

.squad-position-panel-card-1st,
.squad-position-panel-card-2nd {
    background-color: var(--team-bg);
    color: var(--team-fg);
}

.squad-position-panel-subtitle {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    min-height: 1.2em;
    color: white;
}

.squad-position-cards-wrap {
    width: 100%;
}

.squad-position-cards-grid {
    display: grid;
    gap: 0.55rem;
}

.squad-position-cards-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.squad-position-card {
    border: 1px solid rgba(32, 41, 70, 0.15);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.squad-position-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    padding: 0.35rem 0.3rem;
    line-height: 1.2;
}

.squad-position-card-title--forwards {
    background: darkblue;
}

.squad-position-card-title--backs {
    background: #000;
}

.squad-position-card-value {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    padding: 0.5rem 0.25rem;
    line-height: 1;
}

.squad-position-card-value--forwards {
    color: #fff;
    background-color: blue
}

.squad-position-card-value--backs {
    color: #000;
    background-color: #fff;
}

.squad-metric-card-total {
    background: var(--team-bg);
    border-top: 4px solid var(--team-bg);
}

.squad-metric-card-total .squad-metric-card-header {
    background: var(--team-bg);
    color: var(--team-fg);
}

.squad-metric-card-total .card-body {
    background: var(--team-bg);
    color: var(--team-fg);
}

.squad-metric-card > .card-body {
    padding: 0.125rem 0.15rem;
}

.squad-metric-card-total .squad-metric-value,
.squad-metric-card-total .card-text {
    color: var(--team-fg);
}

.opposition-summary-card {
    max-width: 860px;
}

.opposition-profile-page-hero .ux-hero-description {
    max-width: 54ch;
}

.opposition-profile-hero-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opposition-hero-action-card {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 0.65rem;
    border: 2px solid rgba(26, 39, 76, 0.2);
    background: #ffffff;
    color: #152042;
    box-shadow: 0 2px 6px rgba(32, 41, 70, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.04rem;
    padding: 0.34rem 0.4rem;
    text-align: center;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: 1.1;
}

.match-info-hero-matrix-cell--1st .opposition-hero-action-card {
    border-color: color-mix(in srgb, var(--primary-color) 70%, #ffffff);
    background: var(--primary-color);
    color: #f4f7ff;
}

.match-info-hero-matrix-cell--2nd .opposition-hero-action-card {
    border-color: color-mix(in srgb, var(--accent-color) 75%, var(--primary-color));
    background: var(--accent-color);
    color: var(--primary-color);
}

button.opposition-hero-action-card {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

button.opposition-hero-action-card:hover,
button.opposition-hero-action-card:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 11px rgba(32, 41, 70, 0.18);
    outline: none;
}

.opposition-hero-action-card.is-empty {
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: center;
}

.opposition-hero-action-value {
    font-size: clamp(1.08rem, 2.1vw, 1.36rem);
    font-weight: 900;
    line-height: 1;
}

.opposition-hero-action-note {
    font-size: 0.78rem;
    font-weight: 700;
    color: inherit;
}

.match-info-hero-matrix-cell--1st .opposition-hero-action-note {
    color: color-mix(in srgb, #ffffff 82%, var(--primary-color));
}

.match-info-hero-matrix-cell--2nd .opposition-hero-action-note {
    color: color-mix(in srgb, var(--primary-color) 88%, #ffffff);
}

.opposition-profile-hero-metric--last .ux-hero-metric-value {
    font-size: clamp(1.35rem, 2.7vw, 2.15rem);
    line-height: 1.05;
}

.opposition-profile-main {
    gap: 1rem;
}

.opposition-profile-empty-state {
    border-style: dashed;
    background: linear-gradient(180deg, #fafbff 0%, #f2f5fb 100%);
}

.opposition-profile-summary-card {
    margin: 0;
}

.opposition-chart-host {
    min-height: 3.5rem;
}

.chart-host--showing-placeholder {
    background: none;
    border-color: transparent;
    box-shadow: none;
    padding: 0.1rem 0;
}

.opposition-team-sheets-chart-shell {
    padding: 0;
}

.opposition-h2h-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.opposition-h2h-block {
    margin-bottom: 0;
}

.opposition-h2h-single {
    width: 100%;
}

#page-opposition-profile #oppositionSetPieceCharts .chart-section-content {
    width: 100%;
    min-width: 0;
}

#page-opposition-profile #oppositionSetPieceCharts .chart-host--intrinsic {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: var(--chart-surface-color);
    overflow: hidden;
}

#page-opposition-profile #oppositionSetPieceCharts .chart-embed-host {
    display: block;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.opposition-profile-hero {
    border-width: 3px;
    border-color: #d9e0f0;
}

.opposition-profile-hero-grid {
    display: block;
    background: linear-gradient(to right,
        color-mix(in srgb, var(--primary-color) 26%, white) 0%,
        color-mix(in srgb, var(--primary-color) 14%, white) 42%,
        color-mix(in srgb, var(--accent-color) 10%, white) 72%,
        color-mix(in srgb, var(--accent-color) 20%, white) 100%
    );
}

.opposition-profile-team {
    padding: 1.1rem 1.25rem;
}

.opposition-profile-team-shell {
    gap: 1rem;
}

.opposition-profile-team .match-info-team-name {
    font-size: clamp(2rem, 5.2vw, 3.9rem);
    line-height: 0.96;
}

.opposition-profile-team .match-info-team-label {
    color: #5d6780;
}

.opposition-profile-meta {
    border-top: 1px solid rgba(32, 41, 70, 0.1);
    background: #ffffff;
    align-items: stretch;
    padding: 0.8rem 1.2rem 0.9rem;
}

.opposition-profile-meta .match-info-meta-row:first-child .match-info-meta-value {
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    font-weight: 800;
}

.opposition-top-table tbody tr td {
    vertical-align: middle;
}

.opposition-top-table tbody tr.opposition-selectable-row {
    cursor: pointer;
}

.opposition-top-table tbody tr.opposition-selectable-row:hover > td {
    background-color: color-mix(in srgb, var(--primary-color) 7%, white);
}

.opposition-top-table tbody tr.opposition-selectable-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 55%, white);
    outline-offset: -2px;
}

.opposition-select-row-btn {
    min-width: 0;
}

.opposition-results-row {
    transition: background-color 0.18s ease;
}

.opposition-results-row--1st > td:first-child {
    border-left: 3px solid var(--primary-color);
}

.opposition-results-row--2nd > td:first-child {
    border-left: 3px solid var(--accent-color);
}

.opposition-team-sheets-card {
    width: 100%;
    padding: 0.25rem;
}

/* Opposition Top Table Styling */
.opposition-top-table thead th {
    font-weight: 900;
    font-size: 1.1rem !important;
    background-color: #f8f9fa;
    padding: 0.45rem 0.3rem;
}

.opposition-table-sort-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    color: inherit;
    font-weight: inherit;
}

.opposition-table-sort-button--numeric {
    justify-content: center;
}

.opposition-top-table thead th[aria-sort="ascending"] .database-sort-indicator,
.opposition-top-table thead th[aria-sort="descending"] .database-sort-indicator {
    color: currentColor;
}

.opposition-top-table thead th:nth-child(n+3),
.opposition-top-table tbody td:nth-child(n+3) {
    text-align: center !important;
    font-size: 1.2rem;
    white-space: nowrap;
}

.opposition-top-table tbody td {
    padding: 0.45rem 0.3rem;
}

.opposition-table-rank {
    width: 2.1rem;
    text-align: center;
    white-space: nowrap;
}

.opposition-table-opposition {
    width: auto;
    min-width: 0;
}

.opposition-table-opposition-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.opposition-table-opposition-content strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opposition-table-logo {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.opposition-table-games-total {
    font-size: 1.1rem;
    font-weight:900;
}

.opposition-table-games-1st {
    min-width: 4.5rem;
}

.opposition-table-games-2nd {
    min-width: 4.5rem;
}

.opposition-table-games-total {
    min-width: 4.75rem;
}

.opposition-table-win-pct {
    min-width: 4.5rem;
    font-weight: 900;
}

.opposition-table-result {
    min-width: 3.2rem;
    font-weight: 900;
}

/* Force column color coding to win over Bootstrap table striping/header defaults. */
.opposition-top-table thead th.opposition-table-games-total {
    background-color: black !important;
    color: var(--light-color) !important;
}

.opposition-top-table thead th.opposition-table-games-1st {
    background-color: var(--primary-color) !important;
    color: var(--light-color) !important;
}

.opposition-top-table thead th.opposition-table-games-2nd {
    background-color: var(--accent-color) !important;
    color: var(--primary-color) !important;
}

.opposition-top-table tbody td.opposition-table-games-total {
    background-color: color-mix(in srgb, #000000 10%, white) !important;
    color: #111111 !important;
}

.opposition-top-table tbody td.opposition-table-games-1st {
    background-color: color-mix(in srgb, var(--primary-color) 20%, white) !important;
    color: #111111 !important;
}

.opposition-top-table tbody td.opposition-table-games-2nd {
    background-color: color-mix(in srgb, var(--accent-color) 26%, white) !important;
    color: #111111 !important;
}

/* Vertical separators for key column group boundaries. */
.opposition-top-table thead th.opposition-table-games-1st,
.opposition-top-table tbody td.opposition-table-games-1st,
.opposition-top-table thead th.opposition-table-result--win,
.opposition-top-table tbody td.opposition-table-result--win,
.opposition-top-table thead th.opposition-table-action,
.opposition-top-table tbody td.opposition-table-action {
    border-left: 2px solid var(--dark-color) !important;
}

.opposition-top-table thead th.opposition-table-result--win {
    background-color: var(--green-color) !important;
    color: #ffffff !important;
}

.opposition-top-table thead th.opposition-table-result--draw {
    background-color: goldenrod !important;
    color: #ffffff !important;
}

.opposition-top-table thead th.opposition-table-result--loss {
    background-color: var(--red-color) !important;
    color: #ffffff !important;
}

.opposition-top-table tbody td.opposition-table-result--win {
    background-color: color-mix(in srgb, var(--green-color) 26%, white) !important;
    color: #111111 !important;
}

.opposition-top-table tbody td.opposition-table-result--draw {
    background-color: color-mix(in srgb, goldenrod 30%, white) !important;
    color: #111111 !important;
}

.opposition-top-table tbody td.opposition-table-result--loss {
    background-color: color-mix(in srgb, var(--red-color) 24%, white) !important;
    color: #111111 !important;
}

.opposition-table-action {
    width: 2.75rem;
    min-width: 2.75rem;
    text-align: center;
    white-space: nowrap;
}

/* Ensure opposition top panel matches toggle panel width */
.opposition-top-table {
    width: 100%;
    table-layout: auto;
}

.opposition-top-table-wrap {
    overflow-x: hidden;
}

.opposition-top-pagination-bar {
    margin-top: 0.75rem;
}

.opposition-h2h-card {
    min-width: min(100%, 620px);
}

/* ===== CLICKABLE FIXTURE AND PLAYER LINKS ===== */
.fixture-result-link {
    display: inline-block;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.fixture-result-link:hover {
    opacity: 0.85;
}

.match-team-sheet-player-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.match-team-sheet-player-link:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* ===== SQUAD STATS REFACTOR: ALWAYS-VISIBLE SECTIONS ===== */
.chart-section {
    margin: 2rem 0;
    padding: 0;
}

.chart-section:first-of-type {
    margin-top: 0;
}

.chart-section > .section-heading,
.chart-section > .section-intro {
    margin-bottom: 0.5rem;
}

.chart-section-block {
    margin-bottom: 1.5rem;
}

.chart-section-block--panel {
    border: 1px solid rgba(32, 41, 70, 0.14);
    border-radius: 0.75rem;
    background: var(--chart-surface-color);
    padding: 0.8rem;
    box-shadow: 0 4px 12px rgba(32, 41, 70, 0.06);
}

.chart-section-title {
    margin: 0 0 1rem 0;
    color: var(--primary-color);
    font-size: 1.65rem;
    font-weight: 700;
    font-family: 'PT Sans Narrow', sans-serif;
}

.chart-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.chart-section-head .chart-section-title {
    margin-bottom: 0;
}

.chart-section-head--position-count .squad-filter-control--panel-head {
    flex: 0 0 auto;
    align-items: flex-end;
    margin-left: auto;
}

.chart-section-head--position-count .squad-filter-label {
    font-size: 0.85rem;
}

.chart-section-head--position-count .squad-filter-segment--vertical {
    flex-direction: row;
    gap: 0.35rem;
}

.chart-section-head--position-count .squad-filter-segment--vertical .squad-filter-segment-btn {
    width: auto;
    min-width: 9rem;
    text-align: center;
    white-space: nowrap;
}

.chart-section-hint {
    margin: 0 0 0.75rem 0;
    color: #6a7388;
    font-size: 0.9rem;
    line-height: 1.25;
}

.chart-section-content--split {
    display: grid;
    grid-template-columns: auto max-content;
    align-items: start;
    gap: 0.8rem;
}

.chart-section-content--split .chart-section-hint {
    margin: 0;
    max-width: 62ch;
}

.chart-section-content--split > .chart-host--intrinsic {
    align-self: start;
    padding: 0rem;
}

.chart-section-content--split .chart-section-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chart-section-content--split .chart-section-meta .card-filters {
    margin-bottom: 0 !important;
    padding-top: 0.35rem;
}

/* Vertical stacked segment buttons (used for count mode inside panels) */
.squad-filter-segment--vertical {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.squad-filter-segment--vertical .squad-filter-segment-btn {
    min-height: 2.2rem;
    text-align: left;
    padding: 0.35rem 0.7rem;
    font-size: 0.9rem;
    width: 100%;
    border-radius: 0.5rem;
}

.squad-filter-control--count {
    gap: 0.3rem;
}

.squad-filter-control--trend-view {
    flex: 0 0 auto;
    align-items: flex-end;
    margin-left: auto;
    gap: 0.3rem;
}

.squad-filter-control--trend-view .squad-filter-segment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.squad-filter-control--trend-view .squad-filter-segment-btn {
    min-height: 2.1rem;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
}

/* Card for charts */
.card-chart {
    border: 1px solid #d9e0f5;
    border-radius: 0.65rem;
    box-shadow: 0 1px 4px rgba(32, 41, 70, 0.08);
    transition: all 0.2s ease;
}

.card-chart:hover {
    box-shadow: 0 2px 8px rgba(32, 41, 70, 0.12);
}

.card-chart .card-body {
    padding: 0;
    background: var(--chart-surface-color);
}

/* Filters within cards */
.card-filters {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e9f0;
}

.card-filters .filter-item {
    flex: 0 1 auto;
    min-width: 180px;
}

/* Squad Size Summary Cards */
.squad-size-summary {
    margin-bottom: 2rem;
}

/* Subsection titles within cards */
.chart-subsection-title {
    margin: 0 0 0.15rem 0;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'PT Sans Narrow', sans-serif;
}

.chart-subsection-hint {
    margin: 0 0 0.5rem 0;
    color: #6a7388;
    font-size: 0.85rem;
    line-height: 1.35;
}

    /* ===== SQUAD STATS LAYOUT: Analysis Rail + Main Content ===== */
    .squad-stats-layout {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .squad-stats-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
    }

    /* Squad-stats specific rail styling */
    .squad-stats-layout .analysis-rail {
        display: flex;
        flex-direction: row;
        gap: 0.45rem;
        position: sticky;
        top: calc(var(--nav-offset, 74px) + 10px);
        z-index: 20;
        background: #ffffff;
        border: 1px solid #d9e0f5;
        border-radius: 0.75rem;
        padding: 0.55rem;
        box-shadow: 0 2px 10px rgba(32, 41, 70, 0.08);
        overflow-x: auto;
        white-space: nowrap;
        align-items: center;
    }

    .squad-stats-layout .analysis-rail.is-pinned {
        position: fixed;
        top: calc(var(--nav-offset, 74px) + 0.45rem);
        left: var(--analysis-rail-fixed-left, 0.5rem);
        width: var(--analysis-rail-fixed-width, calc(100vw - 1rem));
        max-width: var(--analysis-rail-fixed-width, calc(100vw - 1rem));
        margin: 0;
        z-index: 1050;
    }

    .analysis-rail-placeholder {
        display: none;
        width: 100%;
        pointer-events: none;
    }

    .squad-stats-layout .analysis-rail-title {
        margin: 0 0.25rem 0 0.15rem;
        color: #5f6780;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .squad-stats-layout .rail-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 0 0 auto;
        border: 1px solid transparent;
        border-radius: 0.6rem;
        background: transparent;
        color: var(--primary-color);
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        padding: 0.38rem 0.6rem;
        transition: all 0.16s ease;
    }

    .squad-stats-layout .rail-link:hover,
    .squad-stats-layout .rail-link:focus-visible {
        background: #eef2ff;
        border-color: #d9e0f5;
        color: #101938;
        outline: none;
    }

    .squad-stats-layout .rail-link.active {
        background: linear-gradient(180deg, #202946 0%, #1a2340 100%);
        border-color: #202946;
        color: #ffffff;
    }

    .squad-stats-layout .rail-link i {
        font-size: 0.95rem;
    }

    /* Analysis Sections */
    .analysis-section {
        margin: 0;
        padding: 0;
        scroll-margin-top: calc(var(--nav-offset, 74px) + 5.5rem);
    }

    .analysis-section-head {
        margin-bottom: 1rem;
    }

    .analysis-section-head h2 {
        margin: 0 0 0.3rem;
        font-size: 1.5rem;
        font-weight: 700;
    }

    .analysis-section-head p {
        margin: 0;
        color: #6a7388;
        font-size: 0.9rem;
    }